* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
a:focus-visible { outline: var(--stroke-strong) solid var(--focus-ring); outline-offset: var(--space-1); }
.hero-surface, .contact-surface { background: var(--surface); }
.content-surface { background: var(--surface-raised); }
.hero-copy { padding-block: var(--fluid-section); padding-right: var(--fluid-gutter); }
.hero-copy .lead { margin-top: var(--space-8); max-width: var(--layout-split); max-width: calc(var(--space-30) * 4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-16); }
.hero-panel { display: flex; align-items: center; padding: var(--space-6); }
.section { padding-block: var(--fluid-section); scroll-margin-top: var(--space-6); }
.section + .section { padding-top: 0; }
.service-list { margin-top: var(--space-12); }
.service-list .mw-services { padding-block: var(--space-12); }
.section-lead { max-width: calc(var(--space-30) * 6); margin-top: var(--space-8); margin-bottom: var(--space-10); }
.process-list { padding-top: var(--space-8); }
.process-list h3 { margin-top: var(--space-4); }
.process-list p { margin-bottom: 0; }
.note { color: var(--ink-muted); }
.about-copy { padding-right: var(--fluid-gutter); }
.about-text { padding-left: var(--fluid-gutter); }
.about-text p:first-child { margin-top: 0; }
.contact-inner { padding-block: var(--fluid-section); }
.contact-note { margin-top: var(--space-6); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding-block: var(--space-8); }
.skip { position: absolute; top: var(--space-4); left: var(--space-4); transform: translateY(-200%); z-index: 1; }
.skip:focus { transform: translateY(0); }
@media (max-width: 860px) { .hero-copy { padding-right: 0; } .hero-panel { padding-block: var(--space-12); } .about-text { padding-left: 0; padding-top: var(--space-8); margin-top: var(--space-8); } }
@media (max-width: 560px) { .actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Fondos de borde a borde; el contenido mantiene la retícula interior */
.site-sheet { margin: 0; }
.hero-surface > .mw-guides::before, .content-surface > .mw-guides::before, .contact-inner.mw-guides::before { left: var(--fluid-gutter); }
.hero-surface > .mw-guides::after, .content-surface > .mw-guides::after, .contact-inner.mw-guides::after { right: var(--fluid-gutter); }
.mw-nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--layout-split); border-left: var(--stroke-hairline) solid var(--line); pointer-events: none; }
.hero-panel { background-image: none; }
.sketch-stage { position: relative; width: 100%; }
.sketch-grid { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--line-soft); stroke-width: var(--stroke-hairline); opacity: .55; pointer-events: none; }
.mw-panel__art { position: relative; }
.wireframe-links { stroke-width: var(--stroke-strong); }
.service-list .mw-service__title { border-bottom: var(--stroke-hairline) dashed var(--line); padding-bottom: var(--space-4); }
.process-list { border-top: var(--stroke-hairline) dashed var(--line); }
@media (max-width: 860px) { .mw-nav::before { content: none; } }


/* Las guías de construcción son tenues y discontinuas; los trazos reales conservan su intensidad */
.mw-guides::before, .mw-guides::after { background: none; border-left: var(--stroke-hairline) dashed var(--line); opacity: .45; pointer-events: none; }
.mw-nav::before { border-left-style: dashed; opacity: .45; }
#inicio > .hero-panel { border-left: 0; }
.hero-panel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: var(--stroke-hairline) dashed var(--line); opacity: .45; pointer-events: none; }
@media (max-width: 860px) { .hero-panel::before { content: none; } }

/* Guías de alineación de la botonera del hero */
#inicio .actions { position: relative; }
#inicio .actions::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--space-8));
  border-block: var(--stroke-hairline) dashed var(--line);
  opacity: .45;
  pointer-events: none;
}
#inicio .actions > .mw-btn { position: relative; }
#inicio .actions > .mw-btn::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-8)) calc(-1 * var(--stroke-strong));
  border-inline: var(--stroke-hairline) dashed var(--line);
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 700px) {
  #inicio .actions::before, #inicio .actions > .mw-btn::before { content: none; }
}