/* ============================================================
   NOVARA — «Cada proyecto, un mundo. Novara, la constante.»
   Base DA-7 papel y tinta cálido · coral de marca · placas desplazadas
   Mundos con sus tokens reales: KAOLÍN cobalto · BRUMA marrón-negro ·
   FORJA papel+ácido · OFFICE verde institucional
   ============================================================ */

:root {
  /* — Novara (la constante) — */
  --hueso: #f3eee4;
  --hueso-2: #eae3d3;
  --carta: #fbf7ec;
  --tinta: #16130e;
  --tinta-2: #211c13;
  --coral: #f73b20;
  --coral-deep: #c22c14;
  --crema: #f4efe2;
  --muted: #7c7361;
  --muted-dark: #a99a82;
  --border: #d8cfba;
  --border-dark: rgba(244, 239, 226, 0.14);
  --noche: #0b0908;
  --noche-2: #120d0a;

  /* — Mundos (tokens reales de cada obra) — */
  --k-cobalto: #2b45c4;
  --k-carta: #fffdf5;
  --k-coral: #ee5433;
  --k-jade: #1f7a45;
  --k-amarillo: #ffd23f;
  --k-tinta: #141414;
  --k-sombra: 10px 12px 0 rgba(16, 16, 16, 0.92);
  --b-fondo: #141009;
  --b-surface: #211a10;
  --b-ambar: #c9803a;
  --b-texto: #f1e8d8;
  --b-muted: #a99a82;
  --f-papel: #f2efe8;
  --f-tinta: #101010;
  --f-acido: #c4f21b;
  --f-gris: #6d6a63;
  --o-verde: #16241c;
  --o-surface: #1f3227;
  --o-crema: #f4efe2;
  --o-brass: #d9a441;
  --o-forest: #2f4a3e;

  /* — Sistema — */
  --font-display: 'Clash Display', 'Switzer', sans-serif;
  --font-body: 'Switzer', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pad-section: clamp(96px, 12vw, 176px);
  --pad-x: clamp(20px, 4vw, 56px);
  --container: 1240px;
  --radius: 6px;
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scrollbar-gutter: stable; }
body {
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--coral); color: var(--crema); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--tinta); color: var(--crema);
  padding: 10px 18px; border-radius: 4px; font-size: 14px;
  transition: top 0.25s var(--ease-smooth);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 3px; }

/* Reveal por defecto (recetas §1) — solo con JS activo */
html.js .rv { opacity: 0; transform: translateY(48px); filter: blur(8px); }
html.js.reduced .rv { opacity: 1; transform: none; filter: none; }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.eyebrow.crema { color: var(--muted-dark); }
.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 0.98;
  letter-spacing: -0.01em; text-transform: uppercase;
}

/* ============ BOTONES ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 14px 26px;
  border-radius: 999px; font-weight: 600; font-size: 16px;
  transition: transform 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth),
              color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
}
.btn:active { transform: translate(1px, 2px); }
.btn-cta { background: var(--coral); color: var(--crema); }
.btn-cta:hover { background: var(--coral-deep); }
.btn-cta .btn-ico {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: rgba(255, 253, 245, 0.2); border-radius: 50%;
  font-size: 15px; transition: transform 0.25s var(--ease-out-expo);
}
.btn-cta:hover .btn-ico { transform: translate(4px, -1px) scale(1.05); }
.btn-ghost {
  border: 2px solid var(--tinta); color: var(--tinta); background: transparent;
}
.btn-ghost:hover { background: var(--tinta); color: var(--crema); }
.btn-ghost.crema { border-color: var(--crema); color: var(--crema); }
.btn-ghost.crema:hover { background: var(--crema); color: var(--tinta); }
.btn-world {
  background: var(--crema); color: var(--tinta); border: 2px solid var(--tinta);
}
.btn-world:hover { background: var(--tinta); color: var(--crema); border-color: var(--crema); }
.btn-world.dark { background: var(--f-tinta); color: var(--f-papel); border-color: var(--f-tinta); }
.btn-world.dark:hover { background: transparent; color: var(--f-tinta); }

/* ============ NAV ============ */
/* D27 (Joshi 2026-07-22): el nav es una barra INDEPENDIENTE — fondo crema opaco
   siempre + trazo tinta debajo. La diagonal del hero nunca se mezcla con él. */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  transform: translateY(0);
  transition: transform 0.45s var(--ease-smooth), background 0.4s var(--ease-smooth), border-color 0.4s;
  background: transparent;                 /* D30: transparente sobre el hero «El corte» */
  border-bottom: 1.5px solid transparent;
  color: var(--hueso);
}
.nav::before {                             /* scrim: legible sobre el corte coral y el negro */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,9,8,.5), rgba(11,9,8,0));
  transition: opacity 0.4s var(--ease-smooth);
}
.nav.solid { background: var(--hueso-2); border-bottom-color: var(--tinta); color: var(--tinta); }
.nav.solid::before { opacity: 0; }
/* píldora del selector: crema sobre el hero, tinta translúcida sobre el contenido crema */
.nav:not(.solid) .nav-links a:hover, .nav:not(.solid) .nav-links a:focus-visible {
  background: var(--hueso); color: var(--tinta);
}
.nav:not(.solid) .burger span { background: var(--crema); }
.nav.oculta { transform: translateY(-110%); }
.nav-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; gap: 30px;
  padding: 16px var(--pad-x);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark, .foot-mark {
  width: 26px; height: 30px; background: var(--coral);
  -webkit-mask: url('../img/marca/simbolo-novara.svg') no-repeat center / contain;
          mask: url('../img/marca/simbolo-novara.svg') no-repeat center / contain;
}
/* D19 · marca por versión: default (marca-f) = glifo órbita · ?hero=2 (marca-j) = símbolo J */
body.marca-f .brand-mark, body.marca-f .foot-mark {
  -webkit-mask: url('../img/marca/glifo-orbita.svg') no-repeat center / contain;
          mask: url('../img/marca/glifo-orbita.svg') no-repeat center / contain;
}
.brand-word {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: 0.06em;
}
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 9px 16px; font-weight: 500; font-size: 15px; border-radius: 999px;
  transition: background 0.22s var(--ease-smooth);
}
.nav-links a:hover { background: rgba(22, 19, 14, 0.07); }
.nav-cta { min-height: 44px; padding: 9px 18px; font-size: 15px; }
.burger { display: none; }

.mnav {
  position: fixed; inset: 0; z-index: 190; background: var(--tinta);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 32px;
}
.mnav[hidden] { display: none; } /* display:flex le ganaba al atributo hidden — bug real cazado en captura */
.mnav a {
  color: var(--crema); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 8vw, 44px); padding: 10px 0; text-transform: uppercase;
}
.mnav-cta { color: var(--coral) !important; }

/* ============ 1 · HERO — T3 ============ */
.hero-zone { height: 360vh; position: relative; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: clip;
  display: flex; flex-direction: column; justify-content: center; /* R5 */
  padding: clamp(70px, 9vh, 100px) var(--pad-x) 0;
}
.hero-grid {
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); /* R3 */
  align-items: center; gap: clamp(20px, 3vw, 56px);
}
.hero-titles { position: relative; }
.hero-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 5.3vw, 86px); /* R2: se mide en QA */
  line-height: 0.96; letter-spacing: -0.015em;
  display: flex; flex-direction: column;
}
.hero-t .ht-line { display: block; overflow: clip; }
.hero-t .ht-line > .chars { display: inline-block; }
.hero-t-b {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  color: var(--coral);
}
.hero-sub { max-width: 46ch; margin-top: 26px; color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-data { margin-top: 26px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.hero-stage { position: relative; height: min(74vh, 660px); }
.hero-canvas { position: absolute; inset: 0; cursor: grab; }
.hero-canvas:active { cursor: grabbing; }
.hero-canvas canvas { width: 100%; height: 100%; } /* R21 */
.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-fallback[hidden] { display: none; } /* R25: [hidden] pierde contra img{display:block} del reset */
.hero-shadow {
  position: absolute; left: 50%; bottom: 6%; width: 62%; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(22, 19, 14, 0.22), transparent 68%);
}
/* D12 · marca 2D que el sello estampa (bajo el sello, se revela al imprimir) */
.hero-marca {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 46%; max-width: 300px; opacity: 0; pointer-events: none;
}
/* D10 · puntos corales en el dato del hero */
.hero-data i { color: var(--coral); font-style: normal; padding: 0 10px; }
.hero-hint {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}
.hero-scrollhint {
  position: absolute; left: var(--pad-x); bottom: 22px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ============ 1 · HERO D29 — «El nacimiento de un mundo» (cine oscuro, libertad total)
   Full-bleed: materia-latente.mp4 (mundo de luz naciendo) sobre tinta cálida, grano y
   viñeta. Tipografía monumental de título de película. El scroll aparta las líneas y
   «MUNDOS» (coral) se traga la pantalla (técnica R8 del render 4×) → funde a tinta →
   manifiesto. La sala nunca es azul: grade cálido sobre el vídeo. */
.h4-zone { height: 260vh; position: relative; background: var(--tinta); }
.h4-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip;
  background: radial-gradient(90% 70% at 62% 42%, #241407 0%, #0c0a07 58%, #070604 100%);
}
.h4-media, .h4-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.h4-media video {
  object-fit: cover; object-position: 64% 42%;
  transform: scale(1.06);
  filter: sepia(0.16) saturate(1.14) contrast(1.05) brightness(0.95);   /* grade cálido: fuera el azul */
  will-change: transform;
}
/* brasa: luz cálida que respira mientras llega el vídeo real de Joshi (solo transform/opacity) */
.h4-brasa {
  position: absolute; left: 64%; top: 44%; width: 92vmin; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(closest-side, rgba(247, 96, 32, 0.34), rgba(214, 64, 20, 0.16) 42%, rgba(120, 34, 10, 0.05) 68%, transparent 78%);
  animation: brasa 7s var(--ease-in-out) infinite alternate;
}
@keyframes brasa {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.8; }
  to   { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
html.reduced .h4-brasa { animation: none; }
.h4-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, rgba(10, 8, 5, 0.55) 76%, rgba(10, 8, 5, 0.7) 100%),
    linear-gradient(102deg, rgba(10, 8, 5, 0.8) 0%, rgba(10, 8, 5, 0.34) 42%, rgba(10, 8, 5, 0.1) 68%, rgba(10, 8, 5, 0.45) 100%);
}
.h4-vignette { position: absolute; inset: -2%; background: radial-gradient(118% 92% at 58% 44%, transparent 52%, rgba(4, 3, 2, 0.78) 100%); }
.h4-grain {
  position: absolute; inset: 0; opacity: 0.09; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.55'/></svg>");
}
/* copy — bloque editorial abajo-izquierda (los títulos de cine viven abajo) */
.h4-copy {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(56px, 10vh, 116px); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.4vh, 24px);
}
.h4-title {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(52px, 8.4vw, 148px); line-height: 0.88; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--crema);
}
.h4-line { display: block; white-space: nowrap; }
.h4-mundos { color: var(--coral); display: inline-block; }
.h4-lede {
  margin: 0; max-width: 520px;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55;
  color: rgba(244, 239, 226, 0.82);
}
.h4-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* clon 4× de «MUNDOS» para el zoom nítido (R8: base scale .25, jamás blur) */
.h4-zoom {
  position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.25);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  line-height: 0.88; text-transform: uppercase; color: var(--coral); white-space: nowrap;
}
/* chrome sobre oscuro */
.h4-eyebrow { position: absolute; top: clamp(76px, 11vh, 118px); left: var(--pad-x); right: var(--pad-x); z-index: 2; margin: 0; color: rgba(244, 239, 226, 0.6); }
.h4-foot { position: absolute; right: var(--pad-x); bottom: clamp(28px, 5vh, 54px); z-index: 2; }
.h4-foot .n-micro { font-size: 12px; letter-spacing: 0.14em; color: rgba(244, 239, 226, 0.5); margin: 0; }
.h4-foot .n-micro i { color: var(--coral); font-style: normal; padding: 0 8px; }
.h4-hint {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; margin: 0;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 239, 226, 0.45);
}
/* velo de apertura (reveal desde negro, patrón BRUMA) + CORAL PLENO → tinta (D30:
   Joshi — la pantalla debe quedar totalmente coral tras el zoom, no «medianamente
   naranja», y SOLO ENTONCES pasar a tinta) */
.h4-veil { position: absolute; inset: 0; z-index: 6; background: #070604; opacity: 1; transition: opacity 1.15s var(--ease-smooth); pointer-events: none; }
.h4-veil.fuera { opacity: 0; }
/* D31: una sola superficie — llega coral pleno y su COLOR funde a tinta (finale D20) */
.h4-coral { position: absolute; inset: 0; z-index: 4; background: var(--coral); opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .h4-media video { object-position: 52% 34%; }
  .h4-title { font-size: clamp(34px, 11vw, 72px); }
  .h4-copy { bottom: clamp(48px, 8vh, 90px); }
  .h4-lede { font-size: 15px; }
  .h4-foot { display: none; }         /* aire: el micro-dato no cabe con el copy */
}
html.reduced .h4-zone { height: auto; }
html.reduced .h4-sticky { position: relative; height: auto; min-height: 100vh; min-height: 100dvh; }
html.reduced .h4-zoom, html.reduced .h4-coral, html.reduced .h4-hint { display: none; }

/* ============ Tapas B6b — bloque solapado (recetas §8b) ============ */
.cap-b6, .cap-b6-light { border-radius: 54px 54px 0 0; margin-top: -54px; position: relative; z-index: 5; }

/* ============ 2 · MANIFIESTO (tinta) ============ */
.s-mani { background: var(--tinta); color: var(--crema); padding-bottom: var(--pad-section); }
.marquee { overflow: clip; border-block: 1.5px solid var(--border-dark); padding: 17px 0; }
.marquee-track, .wf-strip-track { display: inline-flex; white-space: nowrap; will-change: transform; }
.marquee-track span, .wf-strip-track span {
  font-size: 13px; letter-spacing: 0.24em; padding-right: 8px; color: var(--muted-dark);
}
.marquee-track i { color: var(--coral); font-style: normal; } /* D3 · marquee bicolor */
.mani-wrap { max-width: var(--container); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--pad-x) 0; }
.mani-text { position: relative; width: fit-content; }
.mani-line {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 7.4vw, 118px); line-height: 0.98;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.mani-line.ghost { -webkit-text-stroke: 2px rgba(244, 239, 226, 0.34); color: transparent; }
.mani-line.fill { position: absolute; inset: 0; color: var(--crema); clip-path: inset(0 100% 0 0); }
.mani-foot {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px; align-items: end; margin-top: clamp(44px, 6vw, 84px);
}
.mani-p { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; max-width: 52ch; }
.mani-p em { font-style: normal; color: var(--coral); }
.mani-p2 { font-size: 13px; letter-spacing: 0.2em; color: var(--muted-dark); text-align: right; }

/* ============ D13 · PORTAFOLIO — franja intro (hueso) ============ */
.s-folio { background: var(--hueso); padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 104px); }
.folio-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.folio-p { margin-top: 24px; max-width: 54ch; font-size: clamp(17px, 1.4vw, 21px); color: var(--muted); line-height: 1.5; }

/* ============ Cubiertas de mundo (contenido centrado de fronteras) ============ */
.w-cover-inner { text-align: center; padding: 0 var(--pad-x); max-width: 1000px; }
.w-eyebrow {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  opacity: 0.75; margin-bottom: 26px;
}
.w-claim { font-size: clamp(17px, 1.5vw, 22px); margin-top: 24px; opacity: 0.85; }
.w-specs { font-size: 12px; letter-spacing: 0.1em; line-height: 1.9; }
.w-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-top: 12px; }

/* ============ FRONTERA B3 — cortina horizontal tinta→cobalto ============ */
.b3-zone { height: 190vh; position: relative; z-index: 6; }
.b3-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.b3-under {
  position: absolute; inset: 0; background: var(--k-cobalto); color: var(--k-carta);
  display: flex; align-items: center; justify-content: center; /* R1 */
}
.b3-pan { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--tinta); z-index: 2; }
.b3-pan.izq { left: 0; }
.b3-pan.der { right: 0; }
/* D2 · costura coral en las cortinas (el corte se vuelve intencional) */
.b3-pan.izq::after, .b3-pan.der::after, .b3v-pan.top::after, .b3v-pan.bot::after {
  content: ""; position: absolute; background: var(--coral); }
.b3-pan.izq::after { right: 0; top: 0; bottom: 0; width: 3px; }
.b3-pan.der::after { left: 0; top: 0; bottom: 0; width: 3px; }
.b3v-pan.top::after { left: 0; right: 0; bottom: 0; height: 3px; }
.b3v-pan.bot::after { left: 0; right: 0; top: 0; height: 3px; }
.wk-title {
  font-family: 'Bricolage Grotesque', var(--font-display); font-weight: 800;
  font-size: clamp(64px, 12vw, 190px); line-height: 0.92; letter-spacing: -0.01em;
}

/* ============ 3 · MUNDO KAOLÍN — T5 carril ============ */
.wk { background: var(--k-cobalto); color: var(--k-carta); }
.wk-carril-zone {
  display: flex; flex-direction: column; justify-content: center; /* R5 */
  min-height: 100vh; min-height: 100dvh; overflow: clip;
  padding-block: clamp(36px, 5vh, 60px);
}
.wk-carril-head { padding: 0 var(--pad-x); margin-bottom: 34px; max-width: 880px; }
.wk-track { display: flex; gap: clamp(20px, 2.6vw, 34px); padding: 0 var(--pad-x); width: max-content; }
.wk-panel {
  flex: 0 0 min(520px, 86vw); min-width: 0; /* R3 */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px;
}
.wk-panel-tag { font-size: 11px; letter-spacing: 0.22em; opacity: 0.8; }
.wk-mini {
  aspect-ratio: 16 / 10.4; min-height: 0; position: relative; overflow: hidden; /* R4 */
  border: 2.5px solid var(--k-tinta); border-radius: 10px;
  box-shadow: var(--k-sombra);
}
/* — mini portada — */
.wk-mini-home { background: var(--k-cobalto); }
.wkm-word {
  position: absolute; left: 7%; top: 12%;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(40px, 5.4vw, 74px); color: var(--k-carta); letter-spacing: -0.01em;
}
.wkm-vase { position: absolute; right: 12%; bottom: 10%; width: 26%; }
.wkm-vase i {
  display: block; background: var(--k-carta); border: 2px solid var(--k-tinta);
  margin: 3px auto; box-shadow: 6px 7px 0 rgba(16, 16, 16, 0.85);
}
.wkm-vase i:nth-child(1) { width: 42%; height: 13px; border-radius: 8px 8px 3px 3px; }
.wkm-vase i:nth-child(2) { width: 66%; height: 21px; border-radius: 10px; }
.wkm-vase i:nth-child(3) { width: 88%; height: 29px; border-radius: 13px; }
.wkm-vase i:nth-child(4) { width: 58%; height: 17px; border-radius: 4px 4px 11px 11px; }
.wkm-chips { position: absolute; left: 7%; bottom: 11%; display: flex; gap: 8px; }
.wkm-chips i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--k-tinta); }
.wkm-chips i:nth-child(1) { background: var(--k-coral); }
.wkm-chips i:nth-child(2) { background: var(--k-jade); }
.wkm-chips i:nth-child(3) { background: var(--k-amarillo); }
.wkm-chips i:nth-child(4) { background: var(--k-carta); }
/* — mini tienda — */
.wk-mini-shop { background: #f5efe0; }
.wkm-bar {
  position: absolute; inset-inline: 0; top: 0; height: 15%;
  background: var(--k-tinta); color: var(--k-carta);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(11px, 1vw, 14px); letter-spacing: 0.08em;
}
.wkm-cart { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; }
.wkm-grid {
  position: absolute; inset: 22% 5% 6%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%;
}
.wkm-card {
  background: var(--k-carta); border: 2px solid var(--k-tinta); border-radius: 7px;
  box-shadow: 5px 6px 0 rgba(16, 16, 16, 0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8%;
  padding: 6% 4%;
}
.wkm-card i { width: 52%; aspect-ratio: 1; border-radius: 50% 50% 42% 42%; border: 2px solid var(--k-tinta); }
.wkm-card.c1 i { background: var(--k-coral); }
.wkm-card.c2 i { background: var(--k-jade); }
.wkm-card.c3 i { background: var(--k-amarillo); }
.wkm-card.c4 i { background: var(--k-cobalto); }
.wkm-card b { font-size: clamp(8px, 0.72vw, 11px); font-weight: 600; text-align: center; color: var(--k-tinta); }
/* — mini checkout — */
.wk-mini-checkout { background: var(--k-jade); }
.wkm-form {
  position: absolute; left: 8%; top: 10%; width: 56%; bottom: 10%;
  background: var(--k-carta); border: 2px solid var(--k-tinta); border-radius: 8px;
  box-shadow: 6px 7px 0 rgba(16, 16, 16, 0.85); padding: 5%;
  display: flex; flex-direction: column; gap: 7%;
}
.wkm-form-t { font-weight: 600; font-size: clamp(10px, 0.9vw, 13px); color: var(--k-tinta); }
.wkm-form .l { display: block; height: 9%; background: #e7e0cf; border-radius: 4px; }
.wkm-form .l.corto { width: 55%; }
.wkm-total {
  display: flex; justify-content: space-between; font-size: clamp(10px, 0.9vw, 13px);
  color: var(--k-tinta); border-top: 2px solid var(--k-tinta); padding-top: 5%;
}
.wkm-btn {
  background: var(--k-tinta); color: var(--k-carta); text-align: center;
  border-radius: 999px; padding: 4% 0; font-size: clamp(9px, 0.8vw, 12px); font-weight: 600;
}
.wkm-ok {
  position: absolute; right: 7%; bottom: 14%; background: var(--k-amarillo);
  border: 2px solid var(--k-tinta); border-radius: 999px; padding: 8px 14px;
  font-size: 11px; color: var(--k-tinta); box-shadow: 5px 6px 0 rgba(16, 16, 16, 0.85);
  rotate: -3deg;
}
/* — panel ficha — */
.wk-panel-ficha { justify-items: start; align-content: center; gap: 20px; }
.wk-ficha { list-style: none; display: grid; gap: 14px; font-size: 15.5px; max-width: 44ch; }
.wk-ficha b { color: var(--k-amarillo); }
.wk .btn-world { background: var(--k-carta); border-color: var(--k-tinta); color: var(--k-tinta); box-shadow: 6px 7px 0 rgba(16,16,16,.85); }
.wk .btn-world:hover { background: var(--k-amarillo); color: var(--k-tinta); }

/* ============ FRONTERA B2 — iris cobalto→marrón ============ */
.b2-zone { height: 200vh; position: relative; }
.b2-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.b2-base { position: absolute; inset: 0; background: var(--k-cobalto); }
.b2-cup {
  position: absolute; left: 50%; top: 50%; width: min(34vh, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.72);
  display: grid; place-items: center;
}
.b2-cup i {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #e0a35d 0%, var(--b-ambar) 42%, #7a4d22 78%, #573517 100%);
  border: 10px solid #f1e8d8; box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.35);
}
.b2-dark {
  position: absolute; inset: 0; background: var(--b-fondo); color: var(--b-texto);
  display: flex; align-items: center; justify-content: center; /* R1 */
  clip-path: circle(0% at 50% 50%);
}
.wb-title {
  font-family: 'Fraunces', serif; font-weight: 340; font-style: italic;
  font-size: clamp(70px, 13vw, 200px); line-height: 0.9; color: var(--b-ambar);
}
.wb-cover .w-eyebrow { color: var(--b-muted); }

/* ============ 4 · MUNDO BRUMA — T7 parallax ============ */
.wb { background: var(--b-fondo); color: var(--b-texto); position: relative; overflow: clip; }
.wb::after { /* viñeta propia del mundo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(10, 7, 3, 0.55) 100%);
}
.wb-scene {
  position: relative; z-index: 1; max-width: var(--container); margin: 0 auto;
  padding: var(--pad-section) var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 4vw, 70px); align-items: center;
}
.wb-fog { position: absolute; height: 42%; width: 130%; left: -15%; filter: blur(34px); pointer-events: none; }
.wb-fog.f1 { top: 4%; background: radial-gradient(ellipse, rgba(201, 128, 58, 0.13), transparent 70%); }
.wb-fog.f2 { bottom: 2%; background: radial-gradient(ellipse, rgba(241, 232, 216, 0.07), transparent 70%); }
.wb-media { position: relative; }
.wb-media video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1.5px solid rgba(241, 232, 216, 0.2);
  filter: sepia(0.18) saturate(1.12) contrast(1.02);
}
.wb-media-tag { margin-top: 12px; font-size: 11px; letter-spacing: 0.18em; color: var(--b-muted); text-transform: uppercase; }
.wb-copy .w-specs { color: var(--b-ambar); margin-bottom: 24px; }
.wb-p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; max-width: 46ch; color: var(--b-texto); }
.wb-cta { margin-top: 30px; }
.wb .btn-world { background: var(--b-ambar); border-color: var(--b-ambar); color: var(--b-fondo); }
.wb .btn-world:hover { background: transparent; color: var(--b-ambar); }

/* ============ 5 · MUNDO FORJA — cubre a BRUMA (B6a) ============ */
.wf { background: var(--f-papel); color: var(--f-tinta); position: relative; z-index: 4; }
.wf-head { padding: clamp(70px, 9vw, 120px) 0 0; overflow: clip; }
.wf-head .w-eyebrow { color: var(--f-gris); padding: 0 var(--pad-x); }
.wf-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(52px, 13.6vw, 224px); /* R2: a 17.5vw medía 1310px y desbordaba 1265; floor 72 cortaba en 390 */
  line-height: 0.82; letter-spacing: -0.015em;
  display: flex; justify-content: space-between; padding: 0 var(--pad-x);
}
.wf-title span { display: inline-block; }
.wf-strip {
  background: var(--f-acido); border-block: 2.5px solid var(--f-tinta);
  padding: 13px 0; margin-top: clamp(26px, 3.5vw, 48px); overflow: clip;
}
.wf-strip-track span { color: var(--f-tinta); font-size: 13px; letter-spacing: 0.26em; font-weight: 700; }
.wf-body { max-width: var(--container); margin: 0 auto; padding: clamp(50px, 7vw, 90px) var(--pad-x) var(--pad-section); }
.wf-body .w-specs { color: var(--f-gris); margin-bottom: 30px; }
.wf-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.wf-p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; max-width: 46ch; }
.wf-cta { justify-self: end; text-align: right; }

/* ============ FRONTERA B3v — cortina vertical papel→verde ============ */
.b3v-zone { height: 180vh; position: relative; }
.b3v-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.b3v-under {
  position: absolute; inset: 0; background: var(--o-verde); color: var(--o-crema);
  display: flex; align-items: center; justify-content: center; /* R1 */
}
.b3v-pan { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--f-papel); z-index: 2; }
.b3v-pan.top { top: 0; }
.b3v-pan.bot { bottom: 0; }
/* D15 · cubierta teaser "hay más" (tinta, sustituye la verde de office) */
.b3v-more { background: var(--tinta); color: var(--crema); }
.more-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 8vw, 128px); line-height: 0.92; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--crema);
}
.more-dot { color: var(--coral); }
.more-line { margin-top: 26px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted-dark); }
.more-cta { margin-top: 32px; }
.wo-title {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(64px, 10.5vw, 168px); line-height: 0.95;
}
.wo-title em { font-style: italic; color: var(--o-brass); }
.wo-cover .w-eyebrow { color: var(--o-brass); }

/* ============ 6 · MUNDO OFFICE — T9 sticky ============ */
.wo { background: var(--o-verde); color: var(--o-crema); }
.wo-grid {
  max-width: var(--container); margin: 0 auto;
  padding: var(--pad-section) var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 4.5vw, 80px); align-items: start;
}
.wo-media { position: sticky; top: 14vh; }
.wo-media-frame {
  position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; /* R4 */
  border: 1.5px solid rgba(244, 239, 226, 0.2); border-radius: 10px;
  background: var(--o-surface);
}
.wo-v {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.8s var(--ease-in-out);
}
.wo-v.active { opacity: 1; }
.wo-media-tag { margin-top: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--o-brass); }
.wo-rows { display: grid; gap: 8px; }
.wo-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px;
  padding: 30px 0; border-top: 1px solid rgba(244, 239, 226, 0.16);
  opacity: 0.5; transition: opacity 0.5s var(--ease-smooth);
}
.wo-row.on { opacity: 1; }
.wo-folio { color: var(--o-brass); font-size: 13px; padding-top: 6px; }
.wo-row h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; margin-bottom: 10px; }
.wo-row p { color: #b9c4b8; max-width: 50ch; font-size: 16px; }
.wo-cta { padding-top: 30px; border-top: 1px solid rgba(244, 239, 226, 0.16); }
.wo .btn-world { background: var(--o-crema); color: var(--o-verde); border-color: var(--o-crema); }
.wo .btn-world:hover { background: transparent; color: var(--o-crema); }
.wo .w-tag { color: var(--o-brass); opacity: 1; }

/* ============ FRONTERA B1 — cross-fade verde→tinta ============ */
.b1-bridge { height: 36vh; background: linear-gradient(var(--o-verde), #14110c); }

/* ============ 7 · REEL (tinta cine) ============ */
.s-reel { background: #14110c; color: var(--crema); padding: 0 0 var(--pad-section); }
.reel-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x) clamp(44px, 6vw, 80px); }
.reel-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 5.6vw, 84px); line-height: 0.96; text-transform: uppercase;
}
.reel-sub { color: var(--muted-dark); max-width: 54ch; margin-top: 20px; }
.reel-grid {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.reel-item.feature { grid-row: span 2; }
.reel-media {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1.5px solid rgba(244, 239, 226, 0.12);
  aspect-ratio: 16 / 9.4; background: #1d1811;
}
.feature .reel-media { aspect-ratio: auto; height: 100%; min-height: 300px; }
/* D33 · la parrilla NO se mueve sola (Joshi 2026-07-23: «los tres reproduciendo a la vez
   marea»). Póster estático por defecto; el vídeo solo se previsualiza en el que tiene el
   cursor encima; el clic lo abre en grande CON SONIDO. */
button.reel-media { display: block; width: 100%; padding: 0; border: 1.5px solid rgba(244, 239, 226, 0.12); cursor: pointer; text-align: left; }
.reel-media video, .reel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-smooth), opacity 0.45s var(--ease-smooth); }
.reel-media video { opacity: 0; }                       /* oculto hasta la previsualización */
.reel-media.previewing video { opacity: 1; }
.reel-item:hover .reel-media video, .reel-item:hover .reel-media img { transform: scale(1.035); }
/* botón de play — la señal de que hay algo que reproducir */
.reel-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(44px, 4vw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(22, 19, 14, 0.55); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(244, 239, 226, 0.75);
  transition: transform 0.4s var(--ease-out-expo), background 0.3s, opacity 0.3s;
}
.reel-play::after {                                      /* triángulo dibujado */
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--crema);
}
button.reel-media:hover .reel-play { transform: translate(-50%, -50%) scale(1.12); background: var(--coral); }
button.reel-media:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.reel-media.previewing .reel-play { opacity: .85; }
/* etiqueta «con sonido» — avisa de que el clic aporta algo más */
.reel-son {
  position: absolute; right: 9px; bottom: 9px; z-index: 3;
  padding: 5px 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crema); background: rgba(22, 19, 14, 0.6);
  backdrop-filter: blur(6px);
}
.reel-hint { margin-top: 16px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.reel-more {
  max-width: var(--container); margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0 var(--pad-x); display: flex;
}

/* ---- Lightbox ---- */
.lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lb[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 5, 0.93); backdrop-filter: blur(10px); }
.lb-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;
  max-width: min(1100px, 100%); max-height: 100%;
  animation: lbIn .4s var(--ease-out-expo) both;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
.lb-video {
  max-width: 100%; max-height: calc(100vh - 190px); border-radius: 10px;
  background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.lb-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lb-cap h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 2vw, 24px); color: var(--crema); }
.lb-cap p { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); }
.lb-close {
  position: absolute; top: -14px; right: -10px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1;
  color: var(--crema); background: rgba(22, 19, 14, .8); border: 1.5px solid rgba(244, 239, 226, .3);
  cursor: pointer; transition: background .25s, transform .25s var(--ease-out-expo);
}
.lb-close:hover { background: var(--coral); transform: scale(1.08); }
.lb-close:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (max-width: 700px) {
  .lb-close { top: -8px; right: 0; width: 40px; height: 40px; font-size: 22px; }
  .lb-video { max-height: calc(100vh - 170px); }
}
@media (prefers-reduced-motion: reduce) { .lb-inner { animation: none; } }
.reel-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 2px 0; }
.reel-cap h3 { font-size: 16px; font-weight: 600; }
.reel-cap p { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted-dark); text-align: right; }
.reel-item.slot .reel-slot-inner {
  height: 100%; min-height: 240px; border: 2px dashed rgba(244, 239, 226, 0.28);
  border-radius: 8px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 26px;
}
.reel-slot-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: var(--crema);
}
.reel-item.slot .mono { font-size: 11px; letter-spacing: 0.14em; color: var(--muted-dark); max-width: 24ch; }
/* D16 · tiles verticales 9:16 (fila de campañas) */
.reel-item.vert .reel-media { aspect-ratio: 9 / 16; }
.reel-item.vert .reel-slot-inner { aspect-ratio: 9 / 16; min-height: 0; height: auto; }
/* D6 · barra de progreso en el reel */
.reel-prog { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0; background: var(--coral); z-index: 2; }

/* ============ 8 · SERVICIOS — T8 tarjetas con placa ============ */
.s-serv { background: var(--hueso); padding: var(--pad-section) 0; }
.cap-b6-light { border-radius: 54px 54px 0 0; margin-top: -54px; }
.serv-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x) clamp(40px, 5.5vw, 72px); }
/* D30 · OFICIOS MAYORES — dos features con evidencia al lado (asimetría alternada,
   marco-placa del lenguaje de imprenta). La parrilla de refuerzos queda en 4. */
.serv-main {
  max-width: var(--container); margin: 0 auto clamp(44px, 6vw, 80px);
  padding: 0 var(--pad-x);
  /* D38 (Joshi 2026-07-23): la columna de texto era 0.94fr y «CINEMATOGRÁFICAS» (una
     sola palabra larga) se desbordaba por la derecha, quedando TAPADA por la imagen.
     Columnas equilibradas → el título cabe entero. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
}
.serv-main.sm-invertido .sm-text { order: 2; }
.serv-main.sm-invertido .sm-media { order: 1; }
.sm-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.sm-folio { font-size: 12px; letter-spacing: 0.22em; color: var(--coral); }
.sm-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.3vw, 48px); line-height: 0.94; letter-spacing: -0.02em;
  overflow-wrap: break-word; hyphens: auto;   /* red de seguridad: nunca se sale de su columna */
}
.sm-p { margin: 0; max-width: 52ch; color: rgba(22, 19, 14, 0.8); }
.sm-text .serv-tags { color: var(--muted); font-size: 11px; letter-spacing: 0.18em; }
.sm-text .btn { margin-top: 6px; }
.sm-media {
  position: relative; display: block; border: 2px solid var(--tinta);
  background: var(--tinta); overflow: hidden;
  box-shadow: 10px 12px 0 rgba(22, 19, 14, 0.16);   /* placa desplazada del sistema */
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.sm-media:hover { transform: translate(-3px, -4px); box-shadow: 14px 17px 0 rgba(22, 19, 14, 0.2); }
.sm-media img, .sm-media video { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; display: block; }
.sm-media-tag {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 10px 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--crema); background: linear-gradient(180deg, transparent, rgba(16, 13, 10, 0.82));
}
.serv-sub {
  max-width: var(--container); margin: 0 auto; padding: clamp(18px, 3vw, 34px) var(--pad-x) 26px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) {
  .serv-main { grid-template-columns: 100%; gap: 18px; }
  .serv-main.sm-invertido .sm-text { order: 1; }   /* móvil: texto siempre primero */
  .serv-main.sm-invertido .sm-media { order: 2; }
  .sm-media img, .sm-media video { height: 200px; }
}
.serv-grid {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.serv-card {
  position: relative; background: var(--carta);
  border: 2px solid var(--tinta); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 40px);
  transition: transform 0.3s var(--ease-smooth);
}
/* D22 — look alternado FORMALIZADO (marco offset arriba-izq como en la captura) */
.serv-card:nth-child(odd)  { background: var(--coral); }
.serv-card:nth-child(even) { background: var(--tinta); }
.serv-card::before { /* placa/marco desplazado — física de piezas apiladas */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: transparent; border: 2px solid var(--tinta); border-radius: var(--radius);
  transform: translate(-10px, -12px);
  transition: transform 0.3s var(--ease-smooth);
}
.serv-card:hover { transform: translate(-3px, -3px) rotate(-0.4deg); } /* D4 hover de imprenta */
.serv-card:hover::before { transform: translate(-13px, -16px); }
.serv-folio { font-size: 12px; letter-spacing: 0.2em; color: var(--coral); margin-bottom: 18px; }
.serv-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 14px; }
.serv-card p { color: var(--muted); font-size: 16.5px; max-width: 46ch; }
.serv-tags { margin-top: 20px; font-size: 10.5px; letter-spacing: 0.18em; color: var(--tinta); opacity: 0.65; }
.serv-note { margin-top: 8px; font-weight: 500; font-size: 14.5px; color: var(--coral); }
/* D22 — legibilidad por par texto/fondo (contraste AA con los hex reales) */
.serv-card:nth-child(odd) .serv-folio { color: #fff7ee; }
.serv-card:nth-child(odd) h3 { color: var(--tinta); }
.serv-card:nth-child(odd) p { color: rgba(22, 19, 14, 0.85); }
.serv-card:nth-child(odd) .serv-tags { color: rgba(22, 19, 14, 0.7); opacity: 1; }
.serv-card:nth-child(odd) .serv-note { color: var(--tinta); font-weight: 600; }
.serv-card:nth-child(even) h3 { color: var(--crema); }
.serv-card:nth-child(even) p { color: var(--muted-dark); }
.serv-card:nth-child(even) .serv-tags { color: rgba(244, 239, 226, 0.55); opacity: 1; }
/* even: folio coral y note coral ya legibles — se quedan */

/* D25 — banda de cierre «el taller a medida» (chatbots + capacidad abierta) */
.serv-card.serv-open {
  grid-column: 1 / -1; background: var(--tinta); color: var(--crema);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.serv-card.serv-open::before { background: var(--coral); border: 0; } /* placa coral, mismo offset que D22 */
.serv-card.serv-open .so-eyebrow { color: var(--coral); font-size: 12px; letter-spacing: 0.2em; margin-bottom: 18px; }
.serv-card.serv-open h3 { color: var(--crema); font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 14px; }
.serv-card.serv-open p { color: rgba(244, 239, 226, 0.72); max-width: 54ch; }
.serv-card.serv-open .so-line { margin-top: 22px; font-size: 11px; letter-spacing: 0.18em; color: rgba(244, 239, 226, 0.55); }
.serv-card.serv-open .so-line i { color: var(--coral); font-style: normal; }
.serv-card.serv-open .so-plus { color: var(--coral); font-weight: 700; }
.serv-card.serv-open .so-cta { justify-self: end; }
@media (max-width: 860px) {
  .serv-card.serv-open { grid-template-columns: 1fr; }
  .serv-card.serv-open .so-cta { justify-self: start; }
}

/* ============ 9 · PROCESO — T4 paneles ============ */
.s-proc { background: var(--hueso-2); }
.proc-zone { height: 340vh; position: relative; }
.proc-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center; /* R5 */
  padding: clamp(36px, 5vh, 60px) var(--pad-x);
}
.proc-head { max-width: var(--container); margin: 0 auto 30px; width: 100%; }
.proc-stage {
  position: relative; width: 100%; max-width: 860px; margin: 0 auto;
  height: min(46vh, 420px);
}
.proc-panel {
  position: absolute; inset: 0; overflow: clip; /* D5 */
  background: var(--carta); border: 2px solid var(--tinta); border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
/* D5 · folio fantasma */
.proc-panel::after {
  content: attr(data-folio); position: absolute; right: 18px; bottom: -14px;
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(110px, 14vw, 190px);
  line-height: 1; opacity: 0.05; pointer-events: none;
}
.proc-panel.p2::after, .proc-panel.p4::after { opacity: 0.09; }
.proc-folio { font-size: clamp(38px, 4.5vw, 64px); font-weight: 700; color: var(--coral); line-height: 1; }
.proc-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); }
.proc-panel p { color: var(--muted); max-width: 52ch; font-size: clamp(15.5px, 1.2vw, 18px); }
.proc-panel.p2 { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.proc-panel.p2 p { color: var(--muted-dark); }
.proc-panel.p4 { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.proc-panel.p4 p { color: var(--muted-dark); }
.proc-dots { display: flex; gap: 18px; justify-content: center; margin-top: 26px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.proc-dots .on { color: var(--coral); font-weight: 700; }

/* ============ 10 · AUDITORÍA ============ */
.s-audit { background: var(--hueso); padding: var(--pad-section) 0 clamp(110px, 13vw, 190px); }
.audit-grid {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px); align-items: start;
}
.audit-p { color: var(--muted); font-size: clamp(16.5px, 1.3vw, 20px); max-width: 46ch; margin-top: 22px; }
.audit-list { list-style: none; margin-top: 30px; display: grid; gap: 12px; }
.audit-list li { display: flex; gap: 14px; align-items: baseline; font-size: 16.5px; }
.audit-list .mono { color: var(--coral); font-size: 12px; font-weight: 700; }
.audit-badge { width: 158px; margin-top: 44px; }
.audit-badge text { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 3.5px; fill: var(--tinta); }
.audit-badge .rot { transform-origin: 50% 50%; }
.badge-dot { fill: var(--coral); }
.badge-n { font-family: var(--font-display); font-weight: 700; font-size: 30px; fill: var(--crema) !important; letter-spacing: 0 !important; }

.audit-form-wrap { position: relative; }
.audit-form, .audit-ok {
  position: relative; background: var(--carta);
  border: 2px solid var(--tinta); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 44px);
}
.audit-form::before, .audit-ok::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--coral); border-radius: var(--radius);
  transform: translate(12px, 14px);
}
.af-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin-bottom: 26px; }
.af-field { margin-bottom: 18px; }
.af-field label, .af-radios legend {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 8px; color: var(--tinta);
}
.af-field input, .af-field select, .af-field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 4px;
  font: inherit; color: var(--tinta);
  transition: border-color 0.2s var(--ease-smooth);
}
.af-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.af-field input:focus, .af-field select:focus, .af-field textarea:focus { border-color: var(--tinta); outline: none; }
.af-field input.invalid, .af-field select.invalid, .af-field textarea.invalid, .af-radios.invalid { border-color: var(--coral-deep); }
/* D35 · «(opcional)» que pasa a «(obligatorio)» si el dolor elegido es «Otra cosa» */
.af-opt { font-weight: 400; letter-spacing: 0; color: var(--muted); }
.af-opt.requerido { color: var(--coral-deep); }
/* campo que aparece solo si el rubro es «Otro» */
.af-cond[hidden] { display: none; }
.af-cond { animation: afCond .3s var(--ease-out-expo) both; }
@keyframes afCond { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .af-cond { animation: none; } }
.af-radios.invalid { outline: 2px solid var(--coral-deep); outline-offset: 6px; border-radius: 4px; }
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* D8 · prefijo +503 en WhatsApp (la validación no cambia: 8 dígitos locales pasan) */
.af-tel { position: relative; }
.af-prefijo { position: absolute; left: 16px; top: 50%; translate: 0 -50%;
  color: var(--muted); font-size: 14px; pointer-events: none; }
.af-tel input { padding-left: 62px; }
.af-radios { border: 0; }
.af-radios label {
  display: flex; align-items: center; gap: 10px; font-weight: 400;
  font-size: 15.5px; padding: 8px 0 0; letter-spacing: 0; cursor: pointer;
}
.af-radios input { accent-color: var(--coral); width: 18px; height: 18px; }
.af-submit { width: 100%; justify-content: center; margin-top: 24px; }
.af-legal { margin-top: 14px; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.audit-ok { text-align: center; }
.ok-check {
  width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center;
  background: var(--coral); color: var(--crema); border-radius: 50%; font-size: 26px;
}
.audit-ok h3 { font-family: var(--font-display); font-weight: 600; font-size: 28px; }
.ok-code { font-size: 20px; color: var(--coral); margin: 12px 0 6px; font-weight: 700; }
.ok-p { color: var(--muted); max-width: 38ch; margin: 0 auto; }
.ok-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ============ FOOTER ============ */
.footer { background: var(--tinta); color: var(--crema); padding: clamp(70px, 9vw, 120px) var(--pad-x) 40px; position: relative; overflow: clip; }
/* D7 · marca de agua en el footer (eco de marca, por versión) */
.footer::after {
  content: ""; position: absolute; right: -40px; bottom: -60px;
  width: 360px; height: 360px; background: var(--coral); opacity: 0.08; pointer-events: none;
  -webkit-mask: url('../img/marca/simbolo-novara.svg') no-repeat center / contain;
          mask: url('../img/marca/simbolo-novara.svg') no-repeat center / contain;
}
body.marca-f .footer::after {
  -webkit-mask: url('../img/marca/glifo-orbita.svg') no-repeat center / contain;
          mask: url('../img/marca/glifo-orbita.svg') no-repeat center / contain;
}
.foot-brand, .foot-cols, .foot-legal { position: relative; z-index: 1; }
.foot-brand { max-width: var(--container); margin: 0 auto 60px; }
.foot-mark { width: 44px; height: 50px; margin-bottom: 18px; }
.foot-word { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: 0.04em; }
.foot-claim { color: var(--muted-dark); margin-top: 10px; font-size: 17px; }
.foot-cols {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 30px;
  padding-top: 40px; border-top: 1px solid var(--border-dark);
}
.foot-h { font-size: 11px; letter-spacing: 0.24em; color: var(--muted-dark); margin-bottom: 16px; }
.foot-cols a, .foot-cols p { display: block; padding: 5px 0; color: var(--crema); font-size: 15.5px; }
.foot-cols a:hover { color: var(--coral); }
.foot-legal {
  max-width: var(--container); margin: 60px auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: 0.06em; color: var(--muted-dark);
}

/* ============ CURSOR T11 (desktop fino) ============ */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 400; border-radius: 50%; }
.cursor-dot { width: 8px; height: 8px; background: var(--coral); translate: -50% -50%; }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid var(--coral); translate: -50% -50%;
  transition: width 0.3s var(--ease-smooth), height 0.3s var(--ease-smooth), opacity 0.3s;
}
.cursor-ring.grande { width: 62px; height: 62px; opacity: 0.6; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ============ REDUCED MOTION / NO JS ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
html.reduced .hero-zone, html.reduced .b3-zone, html.reduced .b2-zone,
html.reduced .b3v-zone, html.reduced .proc-zone { height: auto; }
html.reduced .hero-sticky, html.reduced .b3-sticky, html.reduced .b2-sticky,
html.reduced .b3v-sticky, html.reduced .proc-sticky { position: relative; height: auto; min-height: 100vh; }
html.reduced .b3-pan, html.reduced .b3v-pan, html.reduced .b2-base, html.reduced .b2-cup { display: none; }
html.reduced .b2-dark { clip-path: none; position: relative; min-height: 70vh; }
html.reduced .b3-under, html.reduced .b3v-under { position: relative; min-height: 70vh; }
html.reduced .mani-line.fill { clip-path: none; }
html.reduced .hero-t-b { display: none; }
html.reduced .proc-stage { height: auto; display: grid; gap: 18px; }
html.reduced .proc-panel { position: relative; }
html.reduced .proc-dots { display: none; }
html.reduced .wo-v { opacity: 1; position: relative; }
html.reduced .wo-v + .wo-v { display: none; }

/* ============ MÓVIL ============ */
@media (max-width: 980px) {
  .serv-grid { grid-template-columns: 1fr; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-grid { grid-template-columns: 1fr; }
  .audit-badge { display: none; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .burger {
    display: grid; gap: 6px; margin-left: auto; padding: 12px 6px;
  }
  .burger span { width: 26px; height: 2.5px; background: var(--tinta); border-radius: 2px; transition: transform 0.3s var(--ease-smooth), opacity 0.3s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.2px) rotate(45deg); background: var(--crema); }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.2px) rotate(-45deg); background: var(--crema); }
  .burger.clara span { background: var(--crema); }

  .hero-zone { height: 300vh; }
  .hero-sticky { padding-top: 86px; justify-content: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-t { font-size: clamp(40px, 11.5vw, 64px); }
  .hero-stage { height: 38vh; order: -1; margin-top: 4px; }
  .hero-sub { margin-top: 16px; }
  .hero-ctas { margin-top: 20px; }
  .hero-hint { display: none; }
  .hero-scrollhint { display: none; }

  .mani-foot { grid-template-columns: 1fr; }
  .mani-p2 { text-align: left; }

  .wb-scene { grid-template-columns: 1fr; }
  .wf-cols { grid-template-columns: 1fr; }
  .wf-cta { justify-self: start; text-align: left; }
  .wo-grid { grid-template-columns: 1fr; }
  .wo-media { position: relative; top: 0; }

  .reel-grid { grid-template-columns: 1fr; }
  .feature .reel-media { min-height: 0; aspect-ratio: 1; }

  .proc-zone { height: 320vh; }
  .proc-stage { height: min(56vh, 460px); }

  .af-row { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; gap: 14px; }
  .cap-b6, .cap-b6-light { border-radius: 30px 30px 0 0; margin-top: -30px; }
}

/* ============================================================
   D32 · FAQ — página propia (/preguntas-frecuentes.html) + extracto en la home.
   AEO: una URL dedicada que responde preguntas literales es lo que citan las IAs.
   Acordeón nativo <details>/<summary>: sin JS, el crawler lee TODO el contenido
   aunque esté plegado.
   ============================================================ */
.faq-page { background: var(--hueso); color: var(--tinta); padding: clamp(120px, 16vh, 180px) 0 var(--pad-section); }
.faq-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--pad-x); }
.faq-head { margin-bottom: clamp(34px, 5vh, 60px); }
.faq-lede { margin-top: 20px; max-width: 58ch; font-size: clamp(15px, 1.15vw, 18px); color: var(--muted); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1.5px solid var(--border); }
.faq-item:last-child { border-bottom: 1.5px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: clamp(18px, 2.4vh, 26px) 44px clamp(18px, 2.4vh, 26px) 0;
  position: relative; transition: color .25s var(--ease-smooth);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--coral); }
.faq-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.28; margin: 0; }
/* signo +/− dibujado, sin icono externo */
.faq-item summary::after,
.faq-item summary::before {
  content: ""; position: absolute; right: 6px; top: 50%; background: var(--coral);
  transition: transform .3s var(--ease-smooth), opacity .3s;
}
.faq-item summary::before { width: 17px; height: 2px; transform: translateY(-50%); }
.faq-item summary::after { width: 2px; height: 17px; right: 13.5px; transform: translateY(-50%); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-a { padding: 0 44px clamp(22px, 3vh, 30px) 0; }
.faq-a p { font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.65; color: var(--muted); max-width: 68ch; }
.faq-a strong { color: var(--tinta); font-weight: 600; }
.faq-a a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.faq-cta {
  margin-top: clamp(40px, 6vh, 70px); padding: clamp(26px, 4vh, 42px);
  border: 1.5px solid var(--tinta); border-radius: var(--radius); background: var(--carta);
}
.faq-cta-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.2vw, 30px); margin-bottom: 10px; }
.faq-cta p { color: var(--muted); margin-bottom: 22px; }
.faq-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* ---- extracto en la home (sobre hueso, antes de la auditoría) ---- */
.s-faq { background: var(--hueso-2); padding: var(--pad-section) 0; }
.s-faq .faq-wrap { max-width: var(--container); }
.s-faq .faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.s-faq .faq-list { margin-top: clamp(26px, 4vh, 42px); }
.faq-todas { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.faq-todas:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .faq-item summary { padding-right: 36px; }
  .faq-a { padding-right: 0; }
}

/* ============================================================
   D31 · BLOQUE DE EVIDENCIA — «que dé ganas de entrar» (Joshi 2026-07-23)
   Kaolín engancha porque enseña 3 PANTALLAS REALES + ficha (reto/jugada/flujo) y
   se ve que la web FUNCIONA. Bruma solo tenía un vídeo y Forja ni una imagen de la
   página ⇒ parecían simples pese al trabajo enorme detrás. Este bloque les da la
   misma prueba, tematizado con la paleta real de cada mundo.
   ============================================================ */
.w-evid {
  max-width: var(--container); margin: clamp(44px, 6vh, 82px) auto clamp(48px, 7vh, 96px);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); align-items: start;
}
.w-evid-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.w-screen {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--ev-line); border-radius: 10px; overflow: hidden;
  background: var(--ev-surface); color: var(--ev-text);
  transition: transform .5s var(--ease-smooth), border-color .5s var(--ease-smooth), opacity .4s;
}
/* al pasar por el carril, la pantalla apuntada se levanta y las otras ceden */
.w-evid-screens:hover .w-screen { opacity: .62; }
.w-evid-screens .w-screen:hover { opacity: 1; transform: translateY(-7px); border-color: var(--ev-accent); }
.w-screen-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em;
  padding: 8px 10px; color: var(--ev-muted); border-bottom: 1px solid var(--ev-line);
}
.w-screen-body { position: relative; aspect-ratio: 3 / 4.1; overflow: hidden; }
.w-screen-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-screen-word {
  position: absolute; left: 10px; bottom: 9px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.5vw, 21px);
  color: #f4efe2; text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
.w-screen-list { flex: 1; padding: 11px 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.w-screen-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10.5px; line-height: 1.3; }
.w-screen-list li b { font-weight: 500; }
.w-screen-list li span { color: var(--ev-muted); font-family: var(--font-mono); font-size: 9.5px; white-space: nowrap; }
.w-screen-ok {
  margin-top: auto; padding: 9px 10px; border-top: 1px solid var(--ev-line);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--ev-accent);
}
.w-evid-ficha { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.w-evid-list { display: flex; flex-direction: column; gap: 12px; }
.w-evid-list li { font-size: 14.5px; line-height: 1.5; color: var(--ev-text); }
.w-evid-list li b { color: var(--ev-accent); font-weight: 600; }
/* D34 (Joshi 2026-07-23, con captura): en BRUMA el bloque quedaba PEGADO al borde
   inferior de la sección. Como BRUMA se pinea y el papel de FORJA sube a cubrirla
   (B6a, main.js), el panel se comía la carta y la reserva antes de poder leerlas.
   Zona de seguridad al pie: lo que el barrido se come es aire, no contenido. */
.wb { padding-bottom: clamp(130px, 24vh, 280px); }
/* FORJA: sin padding inferior el margen del bloque COLAPSABA y lo sacaba 48px fuera
   de su propia sección (detectado al medir el fix de BRUMA). */
.wf { padding-bottom: clamp(90px, 14vh, 170px); }
/* paletas reales de cada obra */
.wb .w-evid { --ev-surface: rgba(241,232,216,.05); --ev-line: rgba(241,232,216,.17); --ev-text: var(--b-texto); --ev-muted: var(--b-muted); --ev-accent: var(--b-ambar); }
.wf .w-evid { --ev-surface: rgba(16,16,16,.035); --ev-line: rgba(16,16,16,.19); --ev-text: var(--f-tinta); --ev-muted: var(--f-gris); --ev-accent: #5f7a00; }
/* stats de Forja (sustituyen al CTA en la columna: el CTA vive ahora en la ficha) */
.wf-stats { display: flex; flex-direction: column; gap: 8px; }
.wf-stats li { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--f-gris); }
.wf-stats li b { font-family: var(--font-display); font-size: 20px; color: var(--f-tinta); margin-right: 8px; }
@media (max-width: 900px) {
  .w-evid { grid-template-columns: 1fr; }
  .w-screen-tag { font-size: 8.5px; }
  .w-screen-list li { font-size: 10px; }
}

/* ============================================================
   HERO «EL CORTE» (D30) — corte coral diagonal que muerde NOVARA.
   Portado desde heroes/hero-b.html (exploración aprobada por Joshi 2026-07-23).
   Reemplaza al hero D29. Nav global heredado (transparente sobre el hero).
   W=52% · overlay x_top 56.32% / x_bottom 48% · coral aclarado (naranja intenso).
   ============================================================ */
.b-zone { height: 240vh; position: relative; }
.b-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: clip; background: var(--noche);
}
/* Título real y overlay: MISMA caja → las dos copias coinciden pixel a pixel */
.b-title-zone, .b-over {
  position: absolute; inset: 0; display: grid; align-content: center;
  padding: 0 var(--pad-x); max-width: 100%; overflow: clip;
}
.b-title-zone { z-index: 1; }
.b-word {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 19vw, 300px); line-height: .84;
  letter-spacing: -0.035em; white-space: nowrap; color: var(--hueso);
  will-change: transform;
}
.b-word .ch { display: inline-block; will-change: transform; }
/* el CORTE: la forma la define el clip-path (mismo polígono que el overlay → coinciden) */
.b-cut {
  position: absolute; inset: 0; width: 100%;
  clip-path: polygon(56.32% 0, 100% 0, 100% 100%, 48% 100%);
  z-index: 2; overflow: hidden;
  background: linear-gradient(158deg, #ff5c35 0%, #fb471f 62%, #f73b20 100%);
  will-change: transform, clip-path;
}
.b-cut-light {
  position: absolute; inset: -20%;
  background:
    radial-gradient(52% 50% at 70% 24%, rgba(255,196,140,.34) 0%, transparent 64%),
    radial-gradient(50% 48% at 60% 84%, rgba(255,132,70,.22) 0%, transparent 66%);
  filter: blur(30px); will-change: transform;
}
.b-cut-grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
/* overlay: MISMA métrica, recortado al corte, en tinta — inversión SIN reborde */
.b-over { z-index: 3; pointer-events: none; clip-path: polygon(56.32% 0, 100% 0, 100% 100%, 48% 100%); }
.b-over .b-word { color: var(--tinta); }
/* chrome inferior-izquierda (SIEMPRE sobre el negro → legible) */
.b-foot {
  position: absolute; left: var(--pad-x); bottom: clamp(28px, 6vh, 58px); z-index: 20;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 46%;
}
.b-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-dark);
}
/* cue de scroll (reposo) */
.b-scrollhint {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 36px); transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hueso); opacity: .8; mix-blend-mode: difference;
}
.b-scrollhint i { font-style: normal; font-size: 15px; }
/* mensaje-gancho (aparece cuando el coral llena la pantalla) */
.b-message {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  padding: 0 var(--pad-x); text-align: center; pointer-events: none; opacity: 0;
}
.b-msg-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,246,238,.7); margin-bottom: clamp(12px, 2vh, 20px);
}
.b-msg-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 8vw, 128px); line-height: .92; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--hueso);
}
.b-msg-cue {
  margin-top: clamp(20px, 3.4vh, 40px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,246,238,.9); display: inline-flex; align-items: center; gap: 10px;
}
.b-msg-cue i { font-style: normal; font-size: 15px; }
html.reduced .b-zone { height: auto; }
html.reduced .b-sticky { position: relative; height: auto; min-height: 100vh; min-height: 100dvh; }
@media (max-width: 860px) {
  /* D38 (Joshi 2026-07-23, con captura del móvil): al abrir, NO se leía «NOVARA» —
     el coral arrancaba justo en el centro de las letras y el logotipo se perdía.
     En móvil la prioridad es LEERLO: el coral pasa a ser una BANDA INFERIOR y NOVARA
     queda entero sobre el negro (crema, nítido). El «corte» sigue ocurriendo AL BAJAR:
     el scrub sube el coral hasta llenar la pantalla y funde NOVARA a tinta (eso ya se
     veía bien: «construimos mundos» se lee al scrollear). */
  .b-cut  { position: absolute; width: 100%; clip-path: polygon(0 66%, 100% 56%, 100% 100%, 0 100%); }
  .b-over { display: grid; clip-path: polygon(0 66%, 100% 56%, 100% 100%, 0 100%); }
  .b-word { font-size: clamp(52px, 17vw, 120px); }
  /* chrome inferior: cae sobre la banda coral → colores legibles ahí */
  .b-foot { max-width: 84%; }
  .b-tag  { color: var(--tinta); }                              /* tinta sobre coral, no muted */
  .b-foot .btn-cta { background: var(--tinta); color: var(--crema); }  /* pastilla oscura sobre coral */
  .b-scrollhint { display: none; }                              /* dejaba «BAJE» encima del CTA */
}

/* ============================================================
   D39 · PÁGINAS DE SERVICIO (subcarpetas /paginas-web, /motion-design,
   /automatizacion-ia, /marketing-digital). Páginas independientes, para que las IAs
   citen cada oficio por su propia URL. NO tocan la experiencia principal de index.html:
   son adicionales, con el mismo sistema visual (hueso + tinta, Clash + Space Mono).
   Joshi 2026-07-25.
   ============================================================ */
.svc-page { background: var(--hueso); color: var(--tinta); padding: clamp(118px, 15vh, 172px) 0 var(--pad-section); }
.svc-wrap { max-width: 940px; margin: 0 auto; padding: 0 var(--pad-x); }
.svc-eyebrow { color: var(--coral); }
.svc-lede { margin-top: 22px; max-width: 60ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: var(--muted); }
.svc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.svc-section { margin-top: clamp(44px, 6.5vh, 78px); }
.svc-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 20px; }
.svc-p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.68; color: var(--muted); max-width: 68ch; }
.svc-p + .svc-p { margin-top: 16px; }
.svc-p strong { color: var(--tinta); font-weight: 600; }
.svc-list { display: grid; gap: 13px; margin-top: 22px; }
.svc-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--tinta); }
.svc-list li::before { content: "→"; color: var(--coral); font-weight: 700; }
.svc-list li strong { font-weight: 600; }
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 24px; }
.svc-card { border: 1.5px solid var(--border); border-radius: 8px; padding: 22px; background: var(--carta); }
.svc-card-folio { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--coral); }
.svc-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 8px 0 8px; }
.svc-card p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.svc-evid { margin-top: 24px; border: 2px solid var(--tinta); border-radius: 8px; overflow: hidden; display: block;
  box-shadow: 10px 12px 0 rgba(22, 19, 14, 0.14); transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth); }
.svc-evid:hover { transform: translate(-3px, -4px); box-shadow: 14px 17px 0 rgba(22, 19, 14, 0.18); }
.svc-evid img, .svc-evid video { width: 100%; height: clamp(200px, 32vw, 360px); object-fit: cover; display: block; background: var(--tinta); }
.svc-evid-tag { padding: 12px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crema); background: var(--tinta); }
/* mini-FAQ reutiliza .faq-item/.faq-q/.faq-a del bloque D32 */
.svc-band { margin-top: clamp(50px, 7vh, 96px); padding: clamp(30px, 5vh, 54px); border-radius: var(--radius); background: var(--tinta); color: var(--crema); }
.svc-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1; margin-bottom: 14px; }
.svc-band p { color: rgba(244, 239, 226, 0.78); margin-bottom: 26px; max-width: 54ch; }
.svc-band .svc-cta-row { margin-top: 0; }
.svc-cross { margin-top: clamp(44px, 6vh, 70px); }
.svc-cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 20px; }
.svc-cross-grid a { border: 1.5px solid var(--border); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth); }
.svc-cross-grid a:hover { border-color: var(--coral); transform: translateY(-3px); }
.svc-cross-grid .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.svc-cross-grid .t { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.svc-crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 20px; }
.svc-crumbs a { color: var(--muted); }
.svc-crumbs a:hover { color: var(--coral); }