/* ===== NexMed landing — hoja del rediseño «lujo absoluto» (turno 3.5, V2+) =====
   Base: dirección B «Gran hotel» (v1-lujo/muestra-b.html, certificada) portada a
   producción + tipografía de C + sumario de líneas de C + header adaptativo.
   Plan rector: PLAN-LUJO.md. Paleta: SOLO var(--…) de brand/tokens.css (se enlaza
   ANTES de esta hoja) y color-mix de tokens. Movimiento: solo transform/opacity;
   reduced-motion = estático (el ESTADO del header y el scrollspy corren siempre:
   son máquina de estados, no animación). */

/* ---------- Despensa tipográfica (auto-hospedada, ficheros variables) ----------
   El woff2 de Bodoni es variable (fvar wght): una sola cara 400–700 sirve el 600
   de los H3 sin peso sintetizado. Archivo igual (100–900 desde archivo-500). */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/bodoni-moda-400.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/bodoni-moda-400-italic.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/eb-garamond-400.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-400-italic.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/cinzel-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}

/* ---------- Sistema local (voces, escala y espaciado; colores = tokens) ---------- */
:root{
  /* Voces (mapa tipográfico de la fusión, PLAN-LUJO §6) */
  --f-didona:"Bodoni Moda","Bodoni MT",Didot,Georgia,serif;      /* display */
  --f-materia:"EB Garamond",Georgia,"Times New Roman",serif;     /* cuerpo */
  --f-servicio:"Archivo","Helvetica Neue",Arial,sans-serif;      /* UI caps */
  --f-rotulo:"Cinzel",Georgia,serif;                             /* wordmark + versales */
  --f-datos:"IBM Plex Mono","Consolas",monospace;                /* datos de ficha */

  /* Escala tipográfica (tokens de C; mata el cargo de los 22 cuerpos) */
  --d1:clamp(2.55rem, 6.4vw, 5.9rem);          /* H1 verso 1 */
  --d1-verso:clamp(1.72rem, 4.9vw, 4.4rem);    /* H1 verso 2 — piso <=1.78rem: la itálica
     de Bodoni ocupa +16,3% que la de Garamond y a 390px la caja real es 346px (§6) */
  --d2:clamp(2.15rem, 4.4vw, 4.15rem);         /* displays de pliego */
  --h3:clamp(1.55rem, 2.3vw, 2.15rem);         /* entradas de sumario */
  --lead:clamp(1.1rem, 1.3vw, 1.28rem);
  --cuerpo:clamp(1.02rem, 1.1vw, 1.12rem);
  --caps:.72rem;
  --micro:.68rem;
  /* Bodoni tiene caja de línea 1.525em (+21,6% sobre Marcellus): el 1.08 del
     esqueleto B tocaba las líneas — recalibración obligatoria del plan (§6). */
  --lh-display:1.14;

  /* Aires del esqueleto B */
  --aire-salon:clamp(92px, 11vw, 164px);
  --aire-camara:clamp(48px, 6vw, 84px);
  --alto-marq:93px; /* altura declarada de la marquesina (85 nav + 8 cornisa);
     main-lujo.js la re-mide en runtime para que anclas y sentinel sigan a la real */

  /* Kit del sumario de C (PLAN-LUJO §7). --solape en :root: lo consume también
     el pie del atrio en el acople — scoped al sumario colapsaría a 0 en silencio. */
  --solape:clamp(48px, 6vw, 88px);
  --sp-pliego-mayor:clamp(96px, 12vw, 170px);
  --sp-pliego-menor:clamp(64px, 8vw, 112px);
  --dur-4:420ms; /* local de C; la costura lo necesita (no está en tokens.css) */

  --ease-p:cubic-bezier(.16, 1, .3, 1);
  --linea-suave:color-mix(in srgb, var(--gold-500) 34%, transparent);
  --stone-velo:color-mix(in srgb, var(--stone-300) 40%, transparent);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip} /* el monograma y el solape del sumario sangran a propósito */
body{margin:0;background:var(--ivory);color:var(--ink);
  font:400 var(--cuerpo)/1.62 var(--f-materia);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
b{font-weight:600}
img,svg{max-width:100%}
::selection{background:var(--gold-300);color:var(--navy-900)}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.marquesina :focus-visible,.atrio :focus-visible,.cortina :focus-visible,.reverso :focus-visible,
.noche :focus-visible,.joya :focus-visible,.climax :focus-visible{
  outline-color:var(--gold-300)}
/* Dentro de las tarjetas blancas del clímax vuelve el foco estándar */
.wa-carta :focus-visible{outline-color:var(--gold-600)}
/* Ancho 100% por orden del dueño (turno 3, e8497cd): .wrap sin tope, padding fluido.
   UNA sola medida de composición para toda la página (PLAN-LUJO §3). */
.wrap{max-width:none;margin-inline:auto;padding-inline:clamp(22px, 4.6vw, 110px)}
html.sinscroll{overflow:hidden}
.nb{white-space:nowrap}
[id]{scroll-margin-top:calc(var(--alto-marq) + 7px)}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy-900);
  color:var(--gold-300);font-family:var(--f-servicio);font-size:.85rem;
  padding:12px 20px;text-decoration:none}
.skip:focus-visible{left:12px;top:12px}

/* Voces compartidas (kit de C) */
.display{font-family:var(--f-didona);font-weight:400;letter-spacing:-.01em;
  line-height:var(--lh-display);text-wrap:balance;font-optical-sizing:auto}
.kicker{display:flex;align-items:center;gap:14px;
  font:500 var(--caps)/1.4 var(--f-servicio);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700)}
.kicker::before{content:"";width:40px;height:1px;background:currentColor;flex:none}

/* ============================================================
   LA MARQUESINA — barra superior con escudo al centro exacto
   + estado adaptativo is-baja (la exigencia nueva del dueño, §5)
   ============================================================ */
/* backdrop-filter convierte la barra en bloque contenedor de position:fixed:
   la cortina y el skip viven FUERA del <header>, como hermanos — no meterlos. */
.marquesina{position:sticky;top:0;z-index:90;background:var(--navy-900);
  transition:background-color var(--dur-3) var(--ease-estandar)}
.marquesina::after{content:"";display:block;height:8px;
  background-image:
    linear-gradient(var(--gold-hairline), var(--gold-hairline)),
    linear-gradient(var(--stone-velo), var(--stone-velo));
  background-repeat:no-repeat;background-size:100% 1px;
  background-position:0 0, 0 7px}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:13px;column-gap:clamp(16px, 3vw, 48px)}
.nav__l,.nav__r{display:flex;align-items:center;gap:clamp(16px, 2.4vw, 42px)}
.nav__l{justify-self:start}
.nav__r{justify-self:end}
.nav__l a,.nav__r a:not(.nav__cta){
  position:relative;font:500 var(--caps)/1 var(--f-servicio);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory-wordmark);text-decoration:none;padding-block:8px;
  transition:color var(--dur-3) var(--ease-estandar)}
.nav__l a::after,.nav__r a:not(.nav__cta)::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:1px;background:var(--gold-300);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform 200ms var(--ease-p),
  background-color var(--dur-3) var(--ease-estandar)}
.nav__l a:hover::after,.nav__r a:not(.nav__cta):hover::after{transform:scaleX(1)}
.nav__cta{font:600 var(--micro)/1 var(--f-servicio);letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-300);text-decoration:none;padding:10px 18px 10px calc(18px + .16em);
  border-radius:2px;
  border:1px solid color-mix(in srgb, var(--gold-300) 55%, transparent);
  position:relative;transition:transform 150ms var(--ease-estandar),
  color var(--dur-3) var(--ease-estandar),border-color var(--dur-3) var(--ease-estandar)}
.nav__cta::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--gold-300);opacity:0;transition:opacity 150ms var(--ease-estandar),
  border-color var(--dur-3) var(--ease-estandar);
  pointer-events:none}
.nav__cta:hover{transform:translateY(-1px)}
.nav__cta:hover::after{opacity:1}

.escudo{display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;justify-self:center}
/* Colorear el monograma SIEMPRE con color: del contenedor (el fill="currentColor"
   del <use> gana al fill del CSS sobre el <svg>) */
.escudo svg{width:30px;aspect-ratio:14404.1/15788.2;color:var(--gold-300);display:block;
  transition:color var(--dur-3) var(--ease-estandar)}
.escudo .wm{font:400 .95rem/1 var(--f-rotulo);letter-spacing:.3em;margin-right:-.3em;
  color:var(--ivory-wordmark);transition:color var(--dur-3) var(--ease-estandar)}

/* CTA de barra en tableta (insumo de jueces b): visible de 601 a 1099, absoluto
   a la izquierda como espejo del toggle; bajo 601 la fila desborda y se oculta.
   El de escritorio vive en .nav__r (se esconde junto con su grupo bajo 1100). */
.nav__cta--m{display:none}
@media (min-width:601px) and (max-width:1099px){
  .nav__cta--m{display:inline-block;position:absolute;left:9px;top:50%;translate:0 -50%}
}
/* Scrollspy (cargo 21): el enlace de la sección vigente conserva su subrayado */
.nav__l a[aria-current="true"]::after,
.nav__r a:not(.nav__cta)[aria-current="true"]::after{transform:scaleX(1)}

/* padding-block 6px: con 10px el botón medía 54.5px y desbordaba 3px la barra
   móvil de 48 (el focus lo «revelaba» corriendo la página); 46.5px entra y
   conserva el objetivo táctil de 44 */
.nav__toggle{display:none;background:none;border:0;padding:6px 11px;cursor:pointer;
  min-width:44px;min-height:44px;flex-direction:column;justify-content:center;align-items:center}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--ivory-wordmark);
  margin:5px 0;transition:transform 200ms var(--ease-p), opacity 200ms var(--ease-p),
  background-color var(--dur-3) var(--ease-estandar)}
/* Aspa: barras de 1.5px con margin 5px → centros a 11.5px; la traslación DEBE ser 11.5 */
html.menu-abierto .nav__toggle span:nth-child(1){transform:translateY(11.5px) rotate(45deg)}
html.menu-abierto .nav__toggle span:nth-child(2){opacity:0}
html.menu-abierto .nav__toggle span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg)}
/* Sin JS la cortina no puede abrirse: el toggle no se pinta — un control visible
   e inerte es una promesa rota (hallazgo del panel; la página una-sola-columna
   sigue completa y desplazable sin él) */
html:not(.js) .nav__toggle{display:none}

/* ----- Estado is-baja: vidrio esmerilado claro; el logo pasa a su versión de
   fondo claro (constancia de interpretación del voto, PLAN-LUJO §0.4).
   El 92% no es decorativo: al 88% el focus ring gold-600 da 2.91:1 sobre el
   compuesto y reprueba 1.4.11; al 92% da 3.15:1 (pares en contraste.mjs). ----- */
.marquesina.is-baja{
  background:color-mix(in srgb, var(--ivory) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:var(--sombra-1)}
/* Safari<18 solo entiende la prefijada: el guard cubre ambas para no caer al
   opaco sin necesidad; sin blur el velo sube a 96% (3.42:1 el focus ring). */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .marquesina.is-baja{background:color-mix(in srgb, var(--ivory) 96%, transparent)}
}
/* Cornisa sobre el vidrio: un solo filete opaco gold-600 (los hairlines con alfa
   dan 1.02–1.16:1 sobre el compuesto y el header quedaría flotando sin canto). */
.marquesina.is-baja::after{background-image:linear-gradient(var(--gold-600), var(--gold-600));
  background-size:100% 1px;background-position:0 7px}
.marquesina.is-baja .nav__l a,.marquesina.is-baja .nav__r a:not(.nav__cta){color:var(--ink)}
/* Hover del nav sobre el vidrio: gold-300 daría ~1.1:1 y el subrayado desaparecería */
.marquesina.is-baja .nav__l a::after,
.marquesina.is-baja .nav__r a:not(.nav__cta)::after{background:var(--gold-600)}
/* Borde en gold-700 PLENO (§5: «texto y borde» = 5.01:1): la mezcla al 65%
   componía 2.60:1 sobre el vidrio y apagaba el canto (hallazgo del panel) */
.marquesina.is-baja .nav__cta{color:var(--gold-700);border-color:var(--gold-700)}
.marquesina.is-baja .nav__cta::after{border-color:var(--gold-600)}
.marquesina.is-baja .escudo svg{color:var(--navy-800)}
.marquesina.is-baja .escudo .wm{color:var(--ink)}
/* Las barras del toggle son background, no heredan color: sin esta línea la
   hamburguesa queda en 1.19:1 — y bajo 1100px es el ÚNICO control visible */
.marquesina.is-baja .nav__toggle span{background:var(--ink)}
.marquesina.is-baja :focus-visible{outline-color:var(--gold-600)}

/* ----- Menú móvil abierto: el header vuelve al reposo REAL de B (navy opaco)
   sea cual sea is-baja — la barra (z-90) se pinta ENCIMA de la cortina (z-80):
   con vidrio claro aparecería una franja clara atravesando la cortina navy y el
   backdrop-filter difuminaría la propia cortina (patrón certificado de C). ----- */
html.menu-abierto .marquesina{background:var(--navy-900);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html.menu-abierto .marquesina::after{background-image:
  linear-gradient(var(--gold-hairline), var(--gold-hairline)),
  linear-gradient(var(--stone-velo), var(--stone-velo));
  background-size:100% 1px;background-position:0 0, 0 7px}
html.menu-abierto .marquesina .escudo svg{color:var(--gold-300)}
html.menu-abierto .marquesina .escudo .wm{color:var(--ivory-wordmark)}
html.menu-abierto .marquesina .nav__toggle span{background:var(--ivory-wordmark)}
/* El CTA de la barra también vuelve a su tinta de reposo (gold-700 sobre navy
   opaco quedaría en ~2.6:1) */
html.menu-abierto .marquesina .nav__cta{color:var(--gold-300);
  border-color:color-mix(in srgb, var(--gold-300) 55%, transparent)}
html.menu-abierto .marquesina .nav__cta::after{border-color:var(--gold-300)}
html.menu-abierto .marquesina :focus-visible{outline-color:var(--gold-300)}

/* Cortina móvil (estructura B; enlaces en Bodoni — menú certificado de C) */
.cortina{position:fixed;inset:0;z-index:80;background:var(--navy-900);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;justify-content:safe center;overflow-y:auto;
  padding:96px 24px 120px;transform:translateY(-102%);visibility:hidden;
  transition:transform 200ms var(--ease-p), visibility 0s 200ms}
.cortina.abierta{transform:none;visibility:visible;
  transition:transform 400ms var(--ease-p), visibility 0s}
.cortina a{display:block;text-align:center;
  font:600 clamp(1.5rem, 6vw, 1.9rem)/1.25 var(--f-didona);
  color:var(--ivory-wordmark);text-decoration:none;padding:10px 12px}
.cortina a + a::before{content:"";display:block;width:24px;height:1px;
  background:var(--linea-suave);margin:14px auto 20px}
.cortina .nav__cta{display:inline-block;margin-top:40px;font-size:var(--caps);
  font-family:var(--f-servicio);letter-spacing:.16em;line-height:1;
  padding:14px 26px 14px calc(26px + .16em)}
.cortina .nav__cta::before{display:none}
.cortina__mk{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:84px;aspect-ratio:14404.1/15788.2;color:var(--gold-soft)}
/* Alturas cortas (apaisado, móviles bajos): todo fluye, es desplazable y el
   monograma entra al flujo. (Excepción local documentada: no es un breakpoint
   de ancho — este bloque va DESPUÉS de las reglas base: a igual especificidad
   gana el orden de fuente.) */
@media (max-height:800px){
  .cortina{justify-content:flex-start;padding:84px 24px 48px}
  .cortina__mk{position:static;left:auto;bottom:auto;transform:none;margin:32px auto 0}
}

/* ============================================================
   EL ATRIO — hero axial bajo luz cenital
   ============================================================ */
.atrio{position:relative;background:
  radial-gradient(90% 70% at 50% 0%, var(--navy-700), var(--navy-800) 55%, var(--navy-900));
  color:var(--ivory);text-align:center;
  display:flex;flex-direction:column;
  min-height:min(calc(100svh - var(--alto-marq)), 1080px)} /* tope: heros infinitos no */
.atrio::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 46% at 50% 0%, var(--gold-100), transparent 72%);
  opacity:.05;animation:velo 1600ms var(--ease-p) both}
@keyframes velo{from{opacity:0}to{opacity:.05}}
.atrio .wrap{display:flex;flex-direction:column;flex:1;position:relative}
.atrio__cuerpo{margin:auto;padding-block:clamp(48px, 7vh, 84px) clamp(30px, 4vh, 56px)}

.escudo-atrio{display:block;margin:0 auto 24px;width:clamp(64px, 7vw, 104px);
  aspect-ratio:14404.1/15788.2}

/* Rotulación centrada con tracking: padding-left = letter-spacing compensa el
   espacio fantasma del último glifo (mismo oficio que .wm con margin-right) */
.eyebrow{display:block;font:500 var(--caps)/1.4 var(--f-servicio);
  letter-spacing:.16em;text-transform:uppercase;padding-left:.16em;
  color:var(--gold-700);text-wrap:balance}
.atrio .eyebrow{color:var(--gold-300)}

.atrio h1{margin:20px 0 24px}
.atrio h1 .l1{display:block;font-family:var(--f-didona);font-optical-sizing:auto;
  letter-spacing:-.01em;
  font-size:var(--d1);line-height:var(--lh-display);color:var(--ivory)}
.atrio h1 .l2{display:block;font-family:var(--f-didona);font-style:italic;font-weight:400;
  font-optical-sizing:auto;
  font-size:var(--d1-verso);line-height:1.16;
  color:var(--gold-300);margin-top:.14em}
.atrio__sub{max-width:48ch;margin:0 auto 34px;text-wrap:pretty;
  font-size:var(--lead);line-height:1.66;color:var(--stone-300)}

.ctas{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;position:relative;font-family:var(--f-servicio);font-weight:600;
  font-size:var(--caps);letter-spacing:.16em;text-transform:uppercase;line-height:1.4;
  text-decoration:none;text-align:center;
  padding:16px 32px 16px calc(32px + .16em);border:1px solid transparent;border-radius:2px;
  transition:transform 150ms var(--ease-estandar)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 10px 26px color-mix(in srgb, var(--navy-900) 30%, transparent);
  opacity:0;transition:opacity 200ms var(--ease-estandar)}
.btn:hover{transform:translateY(-1px)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold-500);color:var(--navy-900)}
.btn--ghost{color:var(--ivory);border-color:color-mix(in srgb, var(--gold-300) 45%, transparent)}
.btn--ghost::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--gold-300);opacity:0;transition:opacity 150ms var(--ease-estandar);
  pointer-events:none}
.btn--ghost:hover::before{opacity:1}
/* (.btn--navy murió con el cargo 14: los CTAs intermedios son enlaces tipográficos) */

/* La conserjería — mostrador al pie del atrio (fuera del wrap:
   a 1920 cada casilla cabe en una sola línea, friso parejo).
   El padding-bottom reserva el solape: el sumario monta SOBRE ese aire,
   jamás sobre el contenido (acople de C, PLAN-LUJO §7). */
.conserjeria{width:min(1720px, 100%);margin-inline:auto;
  padding-inline:20px;padding-bottom:calc(clamp(30px, 4.5vh, 54px) + var(--solape))}
.conserjeria__linea{display:block;width:min(680px, 100%);height:1px;margin:0 auto 26px;
  background:linear-gradient(90deg, transparent, var(--gold-hairline) 16%,
    var(--gold-hairline) 84%, transparent);
  transform-origin:50% 50%;animation:linea 900ms var(--ease-p) .95s both}
@keyframes linea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.conserjeria__grid{display:grid;grid-template-columns:repeat(4, auto);
  justify-content:center;margin:0}
.c-item{padding:2px clamp(18px, 2.6vw, 40px);text-align:center;
  animation:entra 700ms var(--ease-p) both}
.c-item:nth-child(2),.c-item:nth-child(3){animation-delay:1.15s}
.c-item:nth-child(1),.c-item:nth-child(4){animation-delay:1.27s}
.c-item + .c-item{border-left:1px solid color-mix(in srgb, var(--gold-300) 26%, transparent)}
.c-item dt{font:500 var(--micro)/1.4 var(--f-servicio);letter-spacing:.16em;
  text-transform:uppercase;padding-left:.16em;color:var(--gold-300);margin-bottom:7px}
/* dd en Archivo con tabular-nums — NO mono (homólogo certificado: .cred de C).
   Es el pie del atrio: sale en las cuatro capturas de todos los gates. */
.c-item dd{margin:0;font-family:var(--f-servicio);font-size:.85rem;letter-spacing:.01em;
  color:var(--ivory);font-variant-numeric:tabular-nums}
.c-item dd a{color:var(--ivory);text-decoration:none;white-space:nowrap;
  display:inline-block;padding-block:11px;margin-block:-11px}
.c-item dd a:hover{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-300)}

/* Secuencia axial de entrada */
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
[data-e]{animation:entra 700ms var(--ease-p) both}
[data-e="1"]{animation-delay:.05s}
[data-e="2"]{animation-delay:.16s}
[data-e="3"]{animation-delay:.27s}
[data-e="4"]{animation-delay:.38s}
[data-e="5"]{animation-delay:.49s}

/* Cornisa triple — umbral navy ↔ marfil (cargo 9). En la costura atrio↔sumario
   la reemplaza la tarjeta del sumario (acople §7); en la obra remata la salida
   de la noche hacia la carta (oscuro→claro, el mismo papel que tenía en B);
   las costuras claro→oscuro llevan el canto hairline de cada banda navy. */
.cornisa{height:12px;background:var(--ivory);background-image:
  linear-gradient(var(--gold-hairline), var(--gold-hairline)),
  linear-gradient(var(--stone-300), var(--stone-300)),
  linear-gradient(var(--linea-suave), var(--linea-suave));
  background-repeat:no-repeat;background-size:100% 1px;
  background-position:0 0, 0 7px, 0 11px}

/* Cabeceras compartidas del esqueleto B (las consumen la vitrina y los pliegos de V3) */
.salon{padding-block:var(--aire-salon)}
.sec-head{text-align:center;max-width:820px;margin:0 auto var(--aire-camara)}
.pleca{display:block;width:32px;height:1px;background:var(--gold-600);margin:0 auto 20px}
.sec-head h2,.dhead h2,.carta__head h2{font-family:var(--f-didona);font-optical-sizing:auto;
  letter-spacing:-.01em;
  font-size:var(--d2);line-height:var(--lh-display);color:var(--ink);
  margin:14px 0 18px}
.sec-head > p{max-width:62ch;margin-inline:auto;font-size:var(--lead);color:var(--gray-600);
  text-wrap:pretty}

/* ============================================================
   EL SUMARIO — las tres líneas de C sobre el atrio de B
   (transplante §7, sometido a la medida única de §3: la caja
   es .wrap; la retícula gobierna solo las 12 columnas internas)
   ============================================================ */
.sumario{position:relative;z-index:2;
  margin-top:calc(-1 * var(--solape));
  background:var(--ivory);
  border-radius:clamp(10px, 1.5vw, 20px) clamp(10px, 1.5vw, 20px) 0 0;
  padding-block:var(--sp-pliego-menor) var(--sp-pliego-mayor)}
/* La sombra-3 vive en un pseudo recortado bajo el canto inferior: trabaja contra
   el atrio navy (arriba y flancos) y la costura claro-claro con el umbral queda
   limpia, sin la banda gris difusa a todo lo ancho (hallazgo del panel; cargo 9).
   En el pseudo y no en .sumario para no recortar la tarjeta misma (cabecera
   sticky y cualquier sangrado futuro quedan libres del clip). */
.sumario::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;box-shadow:var(--sombra-3);
  clip-path:inset(-96px -96px 0 -96px)}
/* El sentinel del header vive aquí: el borde superior de ESTA tarjeta —no el
   final del atrio— es donde el fondo se vuelve claro. El desfase sigue al token. */
.sentinela{position:absolute;left:0;top:calc(-1 * var(--alto-marq));
  width:1px;height:1px;pointer-events:none}
.sumario .pliego{display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr)) clamp(28px, 6vw, 110px) repeat(6, minmax(0,1fr))}
/* Cabecera pegajosa: sigue al token de la marquesina en sus dos alturas (§7) */
.sumario__head{grid-column:1/6;grid-row:1;align-self:start;
  position:sticky;top:calc(var(--alto-marq) + clamp(16px, 2vw, 27px));
  padding-right:clamp(0px, 1.6vw, 24px)}
.sumario__head h2{margin:clamp(18px, 2.2vw, 30px) 0 0;font-size:var(--d2);color:var(--ink)}
.sumario__head>p{margin-top:clamp(16px, 2vw, 26px);
  color:var(--gray-600);font-size:var(--cuerpo);max-width:38ch}
.costura{grid-column:6/7;grid-row:1;justify-self:center;width:1px;height:100%;
  background:var(--gold-hairline);transform-origin:top center}
.entradas{grid-column:7/13;grid-row:1;margin-top:8px;border-top:1px solid var(--stone-300)}
.entrada{position:relative;
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:clamp(18px, 2.2vw, 34px);align-items:center;
  padding:clamp(28px, 3.4vw, 46px) clamp(14px, 1.8vw, 28px);
  border-bottom:1px solid var(--stone-300);
  transition:background var(--dur-2) var(--ease-estandar)}
.entrada::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold-500);transform:scaleY(0);transform-origin:top center;
  transition:transform var(--dur-2) var(--ease-estandar)}
.entrada:hover,.entrada:focus-within{background:var(--white)}
.entrada:hover::before,.entrada:focus-within::before{transform:scaleY(1)}
.medallon{width:56px;height:56px;border-radius:50%;
  border:1px solid var(--gold-300);
  display:grid;place-items:center;color:var(--gold-700);
  align-self:start;margin-top:4px}
/* Versal de rotulación por línea (L · M · B) — misma voz Cinzel que el
   hierro del wordmark; jamás numeración. */
.medallon__v{font:400 1.35rem/1 var(--f-rotulo);color:var(--gold-700);transform:translateY(1px)}
.entrada__k{display:block;font:500 var(--micro)/1 var(--f-servicio);
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-700);
  margin-bottom:10px}
.entrada h3{font-family:var(--f-didona);font-weight:600;font-optical-sizing:auto;
  font-size:var(--h3);
  line-height:1.12;letter-spacing:-.005em;color:var(--ink)}
.entrada__p{margin-top:10px;color:var(--gray-600);font-size:var(--cuerpo);max-width:52ch}
.entrada__go{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:12px 0;margin:-12px 0;
  font:600 var(--micro)/1 var(--f-servicio);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-700);text-decoration:none;white-space:nowrap}
.entrada__go .fl{transition:transform var(--dur-2) var(--ease-desacel)}
.entrada:hover .entrada__go .fl,.entrada__go:focus-visible .fl{transform:translateX(5px)}

/* ============================================================
   EL UMBRAL — pleca-monograma entre salones
   ============================================================ */
.umbral{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  width:min(300px, 70%);margin:0 auto}
.umbral__l,.umbral__r{height:1px;background:var(--gold-hairline)}
.umbral__l{transform-origin:100% 50%}
.umbral__r{transform-origin:0% 50%}
.umbral__mk{width:36px;aspect-ratio:14404.1/15788.2;color:var(--gold-600);display:block}

/* ============================================================
   LA VITRINA — arranque del láser, ficha como pieza de museo
   ============================================================ */
.vitrina-salon{padding-block:0 var(--aire-salon)}
.vitrina-salon .dhead{text-align:center;max-width:900px;
  margin:0 auto var(--aire-camara);padding-top:var(--aire-salon)}
/* La vitrina procesa por el eje: párrafo → altar → CTA, todo centrado */
.vitrina-texto{max-width:52ch;margin:0 auto clamp(40px, 5vw, 64px);text-align:center}
.vitrina-texto p{font-size:var(--cuerpo);line-height:1.7;color:var(--ink);text-wrap:pretty}
.vitrina-wrap{max-width:920px;margin-inline:auto}
.vitrina-pie{text-align:center;margin-top:clamp(36px, 4.5vw, 56px)}

.vitrina{position:relative;padding:16px;
  background-image:
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600)),
    linear-gradient(var(--gold-600), var(--gold-600));
  background-repeat:no-repeat;
  background-size:26px 1px, 1px 26px, 26px 1px, 1px 26px,
                  26px 1px, 1px 26px, 26px 1px, 1px 26px;
  background-position:0 0, 0 0, 100% 0, 100% 0,
                      0 100%, 0 100%, 100% 100%, 100% 100%}
.ficha{margin:0;background:var(--white);border:1px solid var(--stone-300);
  box-shadow:var(--sombra-1);padding:10px}   /* paspartú de 10px */
.ficha__img{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, var(--navy-700),
    var(--navy-800) 60%, var(--navy-900));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px 22px;text-align:center} /* los rótulos largos no rozan el marco */
.ficha__img .ph-mk{width:clamp(64px, 8vw, 110px);aspect-ratio:14404.1/15788.2;
  color:var(--gold-soft)}
.ficha__k{font:500 var(--caps)/1.4 var(--f-servicio);letter-spacing:.14em;
  text-transform:uppercase;padding-left:.14em;color:var(--gold-300)}
.ficha__note{position:absolute;right:14px;bottom:11px;font:500 var(--micro)/1.4 var(--f-servicio);
  letter-spacing:.08em;color:var(--gray-300)}
.ficha figcaption{padding:24px 14px 10px}
.ficha__title{display:block;text-align:center;font:600 var(--caps)/1 var(--f-servicio);
  letter-spacing:.16em;text-transform:uppercase;padding-left:.16em;color:var(--gold-700)}
.ficha__title::before{content:"";display:block;width:24px;height:1px;
  background:var(--gold-600);margin:0 auto 12px}
.ficha dl{margin:18px 0 0}
.fr{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:9px 2px}
.fr::after{content:"";order:1;flex:1;min-width:24px;
  border-bottom:1px dotted var(--stone-300);transform:translateY(-.22em)}
.fr dt{order:0;font:500 var(--micro)/1.5 var(--f-servicio);
  letter-spacing:.13em;text-transform:uppercase;color:var(--gray-600)}
/* Datos en Plex Mono (voz de datos del sistema C) */
.fr dd{order:2;margin:0 0 0 auto;flex:0 1 auto;max-width:100%;
  font:400 .86rem/1.5 var(--f-datos);color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}

/* CTA de línea como enlace tipográfico (cargo 14: lámina dorada SOLO hero y
   contacto; los CTAs intermedios bajan de jerarquía — patrón entrada__go de C).
   Decisión del director, se ratifica en G-V2. */
.cta-linea{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:12px 0;margin:-12px 0;
  font:600 var(--micro)/1 var(--f-servicio);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-700);text-decoration:none;white-space:nowrap}
.cta-linea .fl{transition:transform var(--dur-2) var(--ease-desacel)}
.cta-linea:hover .fl,.cta-linea:focus-visible .fl{transform:translateX(5px)}
.cta-linea:hover{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--gold-600)}

/* ============================================================
   LA NOCHE — banda navy de la línea metabólica (V3.2)
   Cargo 8 muerto: retícula equilibrada texto/altar y CTA pegado
   a los pasos — sin esquinas muertas ni CTA lejano.
   ============================================================ */
.noche{background:
  radial-gradient(80% 60% at 50% 0%, var(--navy-700), var(--navy-800) 52%, var(--navy-900));
  color:var(--ivory);border-block:1px solid var(--gold-hairline);
  padding-block:var(--aire-salon)}
/* Cabecera editorial a lo ancho (patrón del turno 3): pleca y rótulos a la izquierda */
.dhead--noche{max-width:1560px;margin-inline:auto}
.dhead--noche h2{color:var(--ivory);max-width:24ch}
/* padding-left:0 anula la compensación de tracking, que es para centrados */
.dhead--noche .eyebrow{text-align:left;padding-left:0}
.noche .eyebrow{color:var(--gold-300)}
.pleca--noche{background:var(--gold-500);margin:0 0 20px}
.noche__grid{max-width:1560px;margin:var(--aire-camara) auto 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px, 6vw, 100px);align-items:start}
.noche__intro{color:var(--gray-300);font-size:var(--cuerpo);line-height:1.7;max-width:54ch}
.pasos{display:grid;gap:22px;margin-block:clamp(28px, 3.5vw, 44px)}
.paso{position:relative;padding-left:20px}
.paso::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
  background:var(--gold-500)}
.paso h3{font:600 var(--lead)/1.25 var(--f-didona);font-optical-sizing:auto;
  color:var(--gold-300);margin-bottom:4px}
.paso p{color:var(--gray-300);font-size:var(--cuerpo);max-width:48ch}
.cta-linea--noche{color:var(--gold-300)}
.cta-linea--noche:hover{text-decoration-color:var(--gold-300)}
.noche__figura{margin:0;width:min(100%, 800px);justify-self:end}
.vitrina--noche{background-image:
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(var(--gold-500), var(--gold-500))}
.ficha__img--noche{outline:1px solid var(--gold-hairline);outline-offset:-10px}
/* La nota entra del marco interior (-10px): con los offsets del láser rozaba el filete */
.ficha__img--noche .ficha__note{right:20px;bottom:17px}

/* ============================================================
   LA CARTA — línea biológica como carta de salón (V3.3)
   Cargo 11 muerto: lista abierta con filetes, sin cajas de
   comparador. Cargo 10: el gofrado invisible se reemplaza por
   un sello de lacre visible (gold-600 = 3.71:1 sobre marfil);
   decisión del director, revisable en G-V5.
   ============================================================ */
.carta{padding-block:var(--aire-salon)}
.carta__head{text-align:center;max-width:820px;margin:0 auto}
.carta__head>p{max-width:62ch;margin-inline:auto;font-size:var(--lead);
  color:var(--gray-600);text-wrap:pretty}
.sello-lacre{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;
  border:1px solid var(--gold-600);border-radius:50%;color:var(--gold-600);
  outline:1px solid var(--gold-hairline);outline-offset:4px}
.sello-lacre svg{width:28px;aspect-ratio:14404.1/15788.2}
.carta__lista{list-style:none;position:relative;width:min(1240px, 100%);
  margin:var(--aire-camara) auto 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px, 6vw, 110px)}
.carta__lista::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;
  background:var(--gold-hairline)}
.carta__lista li{padding:clamp(22px, 2.6vw, 32px) 4px;border-bottom:1px solid var(--stone-300)}
.carta__lista li:nth-last-child(-n+2){border-bottom:0}
.carta__lista h3{font:600 var(--lead)/1.3 var(--f-didona);font-optical-sizing:auto;
  color:var(--ink)}
.carta__lista p{margin-top:6px;color:var(--gray-600);font-size:var(--cuerpo);max-width:52ch}
.carta__pie{text-align:center;margin-top:clamp(32px, 4vw, 48px)}

/* ============================================================
   EL MANIFIESTO — método y respaldo (V3.4)
   Cargo 5 muerto: cero iconografía (el tríptico habla con
   plecas y filetes). Cargo 12: la joya navy para el manifiesto.
   ============================================================ */
.triptico{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(3, minmax(0,1fr))}
.pilar{padding:8px clamp(22px, 3vw, 48px);text-align:center}
.pilar + .pilar{border-left:1px solid var(--stone-300)}
.pilar::before{content:"";display:block;width:22px;height:1px;background:var(--gold-600);
  margin:0 auto 16px}
.pilar h3{font:600 var(--lead)/1.3 var(--f-didona);font-optical-sizing:auto;
  color:var(--ink);margin-bottom:8px}
.pilar p{color:var(--gray-600);font-size:var(--cuerpo);max-width:34ch;margin-inline:auto}
.joya{position:relative;max-width:1240px;margin:clamp(40px, 5vw, 64px) auto 0;
  padding:clamp(28px, 4vw, 48px);color:var(--ivory);
  background:radial-gradient(90% 120% at 50% 0%, var(--navy-700), var(--navy-800) 62%);
  border-top:1px solid var(--gold-hairline)}
.joya::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;
  border-style:solid;border-color:var(--gold-300);border-width:1px 0 0 1px;pointer-events:none}
.joya::after{content:"";position:absolute;bottom:10px;right:10px;width:14px;height:14px;
  border-style:solid;border-color:var(--gold-300);border-width:0 1px 1px 0;pointer-events:none}
.joya__k{display:block;font:600 var(--micro)/1.4 var(--f-servicio);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:18px}
.joya ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:14px 40px}
.joya li{position:relative;padding-left:26px;color:var(--gray-300);font-size:var(--cuerpo)}
.joya li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;
  background:var(--gold-500)}
/* Excepción local comentada (§4.V2.5): la joya abre su columna de rótulo a
   1000px — a 1100 desperdiciaría el tramo 1000-1099, donde las dos columnas
   ya componen con holgura (patrón heredado del incluye de producción). */
@media (min-width:1000px){
  .joya{display:grid;grid-template-columns:minmax(180px, 240px) minmax(0,1fr);
    column-gap:clamp(32px, 4vw, 72px);align-items:start}
  .joya__k{margin-bottom:0;padding-top:4px}
}

/* ============================================================
   LOS MÉDICOS — el momento de máxima confianza (V3.5, cargo 13)
   Cero credenciales: solo «Médico/Médica» (regla permanente).
   ============================================================ */
.galeria-medicos{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(20px, 3vw, 40px)}
.medico{position:relative;background:var(--white);border:1px solid var(--stone-200);
  box-shadow:var(--sombra-1);padding:clamp(30px, 3.4vw, 44px) 32px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.medico::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;
  border-style:solid;border-color:var(--gold-600);border-width:1px 0 0 1px;pointer-events:none}
.medico::after{content:"";position:absolute;bottom:10px;right:10px;width:14px;height:14px;
  border-style:solid;border-color:var(--gold-600);border-width:0 1px 1px 0;pointer-events:none}
/* La medalla: luz cenital, doble anillo, iniciales en el hierro Cinzel */
.medalla{width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, var(--navy-700), var(--navy-900) 74%);
  color:var(--gold-300);display:grid;place-items:center;
  font:400 1.6rem/1 var(--f-rotulo);letter-spacing:.08em;padding-left:.08em;
  margin-bottom:10px;
  box-shadow:0 0 0 1px var(--gold-600), inset 0 2px 6px color-mix(in srgb, var(--navy-900) 45%, transparent);
  outline:1px solid var(--gold-hairline);outline-offset:3px}
.medico h3{font:600 var(--h3)/1.2 var(--f-didona);font-optical-sizing:auto;color:var(--ink)}
.medico h3::after{content:"";display:block;width:28px;height:1px;
  background:var(--gold-hairline);margin:10px auto 2px}
.medico__rol{font:600 var(--caps)/1.4 var(--f-servicio);letter-spacing:.14em;
  padding-left:.14em;text-transform:uppercase;color:var(--gold-700)}
.medico p{color:var(--gray-600);font-size:var(--cuerpo);margin:4px 0 10px}

/* ============================================================
   EL PLANO — ubicación sobre piedra clara (V3.6, cargo 15:
   aquí vive la ÚNICA mención del horario en tratamiento pleno)
   ============================================================ */
.plano{background:var(--stone-200);border-block:1px solid var(--stone-300);
  padding-block:var(--aire-salon)}
.plano__grid{max-width:1560px;margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px, 5vw, 90px);align-items:center}
.plano .eyebrow{text-align:left;padding-left:0;margin-bottom:14px}
.plano h2{font-family:var(--f-didona);font-optical-sizing:auto;letter-spacing:-.01em;
  font-size:var(--d2);line-height:var(--lh-display);color:var(--ink);
  margin-bottom:24px;max-width:24ch}
.plano__datos{margin:0 0 26px;display:grid;gap:16px}
.plano__datos div{display:grid;gap:4px}
.plano__datos dt{font:600 var(--micro)/1.4 var(--f-servicio);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-700)}
.plano__datos dd{margin:0;color:var(--ink);font-size:var(--cuerpo);
  font-variant-numeric:tabular-nums;max-width:44ch}
.plano__figura{margin:0;justify-self:end;width:min(100%, 860px)}

/* ============================================================
   EL FAQ — acordeón con chevron de marca (V3.7, cargo 16;
   constancia c: el h3 vive DENTRO del summary para exponer la
   jerarquía a los lectores de pantalla)
   ============================================================ */
.faq__lista{max-width:880px;margin:0 auto;border-top:1px solid var(--stone-300)}
.faq__lista details{border-bottom:1px solid var(--stone-300)}
.faq__lista summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:18px;padding:clamp(20px, 2.6vw, 30px) 6px}
.faq__lista summary::-webkit-details-marker{display:none}
.faq__lista summary h3{flex:1;font:600 var(--lead)/1.35 var(--f-didona);
  font-optical-sizing:auto;color:var(--ink);
  transition:color var(--dur-1) var(--ease-estandar)}
.faq__lista summary:hover h3{color:var(--gold-700)}
/* Chevron de marca trazado (jamás un «+» crudo) */
.faq__ch{flex:none;width:11px;height:11px;border-style:solid;border-color:var(--gold-600);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-5px;
  transition:transform var(--dur-2) var(--ease-estandar)}
.faq__lista details[open] .faq__ch{transform:rotate(225deg);margin-top:5px}
.faq__r{padding:0 44px 28px 6px}
.faq__r p{color:var(--gray-600);font-size:var(--cuerpo);max-width:60ch}
.faq__r{animation:faq-entra var(--dur-2) var(--ease-desacel)}
@keyframes faq-entra{from{opacity:0;translate:0 -4px}}

/* ============================================================
   EL CLÍMAX — contacto (V3.8, cargo 17). Aquí SÍ lámina dorada;
   el aviso LOPDP va BAJO los botones, en su misma pantalla.
   ============================================================ */
.climax{background:
  radial-gradient(90% 70% at 50% 0%, var(--navy-700), var(--navy-800) 55%, var(--navy-900));
  color:var(--ivory);border-top:1px solid var(--gold-hairline);
  padding-block:var(--aire-salon)}
.climax__grid{max-width:1560px;margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(30px, 4vw, 80px);align-items:stretch}
.climax .eyebrow{color:var(--gold-300);text-align:left;padding-left:0;margin-bottom:14px}
.climax h2{font-size:var(--d2);color:var(--ivory);margin-bottom:18px;max-width:18ch}
.climax__p{color:var(--gray-300);font-size:var(--lead);line-height:1.62;
  max-width:54ch;margin-bottom:30px}
.wa-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin-bottom:20px}
.wa-carta{background:var(--white);border:1px solid var(--stone-200);box-shadow:var(--sombra-1);
  padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wa-carta__nombre{font:600 var(--lead)/1.2 var(--f-didona);font-optical-sizing:auto;
  color:var(--navy-800)}
.wa-carta__num{font:400 .86rem/1.5 var(--f-datos);color:var(--gray-600);
  font-variant-numeric:tabular-nums;margin-bottom:10px}
.wa-carta .btn{align-self:stretch}
.climax__nota{color:var(--gray-300);font-size:var(--cuerpo);max-width:56ch}
.climax__nota a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur-1) var(--ease-estandar)}
.climax__nota a:hover{color:var(--gold-100)}
/* El costado: lleno hasta el pie — sin vacíos (cargo 17) */
.climax__lado{border-left:1px solid var(--gold-hairline);
  padding-left:clamp(20px, 2.4vw, 34px);
  display:flex;flex-direction:column;gap:26px}
/* Horario y dirección DE-jerarquizados a voz de servicio (cargo 15) */
.lado__bloque .k{display:block;font:600 var(--micro)/1.4 var(--f-servicio);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300);margin-bottom:7px}
.lado__bloque p{font:400 .9rem/1.8 var(--f-servicio);color:var(--stone-300);
  font-variant-numeric:tabular-nums}
.lado__bloque a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur-1) var(--ease-estandar)}
.lado__bloque a:hover{color:var(--gold-100)}
.lado__mk{width:44px;aspect-ratio:14404.1/15788.2;color:var(--gold-soft);
  margin-top:auto;align-self:flex-end}

/* ============================================================
   EL REVERSO — footer monumental (V3.9, cargo 18): el reverso
   de la tarjeta de papelería como patrimonio — campo navy con
   el monograma gold-soft sangrando por el canto.
   ============================================================ */
.reverso{position:relative;overflow:clip;background:var(--navy-900);color:var(--gray-300);
  border-top:1px solid var(--gold-hairline);
  padding-block:clamp(48px, 6vw, 84px) 30px}
.reverso__mk{position:absolute;right:calc(-1 * clamp(40px, 6vw, 120px));
  bottom:calc(-1 * clamp(60px, 8vw, 160px));
  width:min(34vw, 520px);aspect-ratio:14404.1/15788.2;
  color:var(--gold-soft);pointer-events:none}
.reverso__grid{position:relative;max-width:1560px;margin-inline:auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.reverso__firma{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
.reverso__firma svg{width:26px;aspect-ratio:14404.1/15788.2;color:var(--gold-300)}
.reverso__firma .wm{font:400 .95rem/1 var(--f-rotulo);letter-spacing:.3em;
  margin-right:-.3em;color:var(--ivory-wordmark)}
.reverso__marca p{font-size:var(--cuerpo);max-width:34ch}
.reverso__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.reverso__col .k{font:600 var(--micro)/1.4 var(--f-servicio);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:5px}
.reverso__col a{color:var(--gray-300);font-size:var(--cuerpo);text-decoration:none;
  padding-block:2px;transition:color var(--dur-1) var(--ease-estandar)}
.reverso__col a:hover{color:var(--ivory);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--gold-300)}
/* El colofón legal: pie de imprenta bajo filete champagne */
.reverso__legal{position:relative;margin-top:clamp(40px, 5vw, 64px);padding-top:26px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:linear-gradient(90deg, transparent, var(--gold-hairline), transparent)
    top / 260px 1px no-repeat}
.reverso__legal p:first-child{font:400 var(--lead)/1.5 var(--f-materia);
  color:var(--ivory-wordmark);max-width:52ch;text-wrap:balance}
.reverso__legal p:last-child{font:500 var(--micro)/1.4 var(--f-servicio);
  letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;
  color:var(--gold-300);font-variant-numeric:tabular-nums}

/* ============================================================
   REVEALS — se posan al entrar (translate, no transform:
   así ningún hover colisiona). UN solo sistema: data-rv + --rvd.
   ============================================================ */
html.js [data-rv]{opacity:0;translate:0 18px;
  transition:opacity 700ms var(--ease-p) var(--rvd, 0s),
             translate 700ms var(--ease-p) var(--rvd, 0s)}
html.js [data-rv].in{opacity:1;translate:0 0}
html.js [data-rv] .pleca{transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 900ms var(--ease-p) .15s}
html.js [data-rv].in .pleca{transform:none}
html.js .umbral[data-rv]{translate:0 0}
html.js .umbral[data-rv] .umbral__l,
html.js .umbral[data-rv] .umbral__r{transform:scaleX(0);
  transition:transform 700ms var(--ease-p) .1s}
html.js .umbral[data-rv].in .umbral__l,
html.js .umbral[data-rv].in .umbral__r{transform:none}
html.js .umbral[data-rv] .umbral__mk{opacity:0;transition:opacity 500ms var(--ease-p) .35s}
html.js .umbral[data-rv].in .umbral__mk{opacity:1}
/* La costura del sumario crece (portada del sistema data-reveal de C a data-rv) */
html.js .costura[data-rv]{opacity:1;translate:0 0;transform:scaleY(0);
  transition:transform var(--dur-4) var(--ease-estandar) var(--rvd, 0s)}
html.js .costura[data-rv].in{transform:scaleY(1)}
/* Momento firma de la noche: la regla de cada paso crece con su revelado */
html.js .paso[data-rv]::before{transform:scaleY(0);transform-origin:top center;
  transition:transform 600ms var(--ease-p) calc(var(--rvd, 0s) + .15s)}
html.js .paso[data-rv].in::before{transform:scaleY(1)}
/* Momento firma de la carta: la calle central se traza al entrar la lista */
html.js .carta__lista[data-rv]{opacity:1;translate:0 0}
html.js .carta__lista[data-rv]::before{transform:scaleY(0);transform-origin:top center;
  transition:transform var(--dur-4) var(--ease-estandar) .1s}
html.js .carta__lista[data-rv].in::before{transform:scaleY(1)}
/* La entrada con hover no puede heredar el translate del reveal: su transición
   base (background) ya vive en .entrada; el reveal usa translate y no colisiona. */

/* ============================================================
   RESPONSIVE — cortes globales 1100 / 880 / 600 / 480 (§4.V2.5)
   Excepciones locales comentadas: conserjería 1499/1120 (B),
   max-height:800 de la cortina.
   ============================================================ */
@media (max-width:1499px){
  /* Excepción (B): bajo el umbral de una sola línea, cada casilla compone dos
     líneas deliberadas — el separador «·» se retira, nada cuelga a fin de línea */
  .c-item .sep{display:none}
  .c-item .l2{display:block;margin-top:2px}
}
@media (max-width:1120px){
  /* Excepción (B): la conserjería pasa a 2×2 antes que el corte global */
  .conserjeria__grid{grid-template-columns:1fr 1fr;max-width:720px;margin-inline:auto}
  .c-item{padding:14px 20px}
  .c-item + .c-item{border-left:0}
  .c-item:nth-child(even){border-left:1px solid color-mix(in srgb, var(--gold-300) 26%, transparent)}
  .c-item:nth-child(n+3){border-top:1px solid color-mix(in srgb, var(--gold-300) 26%, transparent)}
}
@media (max-width:1099px){
  :root{--alto-marq:56px} /* altura declarada de la marquesina móvil (JS re-mide) */
  /* El escudo conserva el eje también en móvil; el toggle se ancla a la derecha */
  .nav{display:flex;justify-content:center;position:relative;padding-block:11px}
  .nav__l,.nav__r{display:none}
  .nav__toggle{display:inline-flex;position:absolute;right:9px;top:50%;translate:0 -50%}
  .escudo{flex-direction:row;gap:10px;padding-block:11px;margin-block:-11px}
  .escudo svg{width:24px}
  .escudo .wm{font-size:.78rem;letter-spacing:.3em;margin-right:-.3em}
}
@media (min-width:1100px){
  .cortina{display:none}
}
/* Banda 881–1100: la entrada pierde la tercera columna y el enlace baja a la
   columna de texto (re-mapeo del 881–980 nativo de C al corte global 1100). */
@media (min-width:881px) and (max-width:1100px){
  .entrada{grid-template-columns:56px minmax(0,1fr)}
  .entrada__go{grid-column:2;justify-self:start;margin-top:12px}
}
@media (max-width:880px){
  /* El sumario pasa a una columna: cabecera estática, costura fuera */
  .sumario .pliego{grid-template-columns:minmax(0,1fr)}
  .sumario__head{grid-column:1;grid-row:1;position:static;padding-right:0}
  .costura{display:none}
  .entradas{grid-column:1;grid-row:2;margin-top:clamp(34px, 7vw, 52px)}
  /* La noche en una columna: texto, CTA y luego el altar */
  .noche__grid{grid-template-columns:minmax(0,1fr)}
  .noche__figura{justify-self:stretch;width:auto}
  /* La carta pierde la calle central */
  .carta__lista{grid-template-columns:minmax(0,1fr)}
  .carta__lista::before{display:none}
  .carta__lista li:nth-last-child(2){border-bottom:1px solid var(--stone-300)}
  /* El tríptico se apila con filetes horizontales */
  .triptico{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .pilar + .pilar{border-left:0;border-top:1px solid var(--stone-300);padding-top:34px}
  .joya ul{grid-template-columns:1fr}
  /* Médicos, plano, clímax y reverso en columna */
  .galeria-medicos{grid-template-columns:minmax(0,1fr)}
  .plano__grid{grid-template-columns:minmax(0,1fr)}
  .plano__figura{justify-self:stretch;width:auto}
  .climax__grid{grid-template-columns:minmax(0,1fr)}
  .climax__lado{border-left:0;border-top:1px solid var(--gold-hairline);
    padding-left:0;padding-top:26px}
  .lado__mk{margin-top:6px}
  .reverso__grid{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media (max-width:600px){
  /* 640→600 re-mapeado (B): conserjería en una columna */
  .conserjeria__grid{grid-template-columns:1fr;max-width:none}
  .c-item{padding:13px 8px}
  .c-item:nth-child(even){border-left:0}
  .c-item + .c-item{border-top:1px solid color-mix(in srgb, var(--gold-300) 26%, transparent)}
  .ctas .btn{min-width:236px}
  /* 560→600 re-mapeado (B): la nota de la ficha entra al flujo */
  .ficha__note{position:static;right:auto;bottom:auto;margin-top:2px}
  /* Sumario compacto (C ≤600) */
  .entrada{grid-template-columns:44px minmax(0,1fr);align-items:start;row-gap:14px}
  .medallon{width:44px;height:44px;margin-top:0}
  .medallon__v{font-size:1.1rem}
  .entrada__go{grid-column:2;margin-top:0}
  /* Clímax y reverso a una sola columna */
  .wa-duo{grid-template-columns:1fr}
  .reverso__grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .btn{padding:14px 22px 14px calc(22px + .16em);font-size:var(--micro)}
  .ficha figcaption{padding:20px 6px 8px}
  /* Eyebrow del atrio a dos líneas deliberadas, sin separador colgante */
  .atrio .eyebrow .sep{display:none}
  .atrio .eyebrow .nb{display:block;margin-top:6px}
}

/* ============================================================
   REDUCED MOTION — todo estático, todo visible. OJO: aquí muere
   la ANIMACIÓN; la máquina de estados del header (is-baja) y el
   scrollspy viven en JS y corren SIEMPRE (§5).
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js [data-rv]{opacity:1;translate:none}
  html.js [data-rv] .pleca,
  html.js .umbral[data-rv] .umbral__l,
  html.js .umbral[data-rv] .umbral__r{transform:none}
  html.js .umbral[data-rv] .umbral__mk{opacity:1}
  html.js .costura[data-rv]{transform:none}
  html.js .paso[data-rv]::before,
  html.js .carta__lista[data-rv]::before{transform:none}
}

/* ============================================================
   IMPRESIÓN (V3.14) — nada oculto, nada animado, nada fijo.
   Materialidad en reposo (cargo 20): en pantalla van tres
   niveles de sombra con intención (1 = tarjetas y vitrinas,
   3 = el sumario montado); el grano de papel NO viaja al
   rediseño — B no lo usa y sobre navy moría.
   ============================================================ */
@media print{
  /* Tinta plana universal: los navegadores imprimen SIN fondos por defecto y
     todo texto claro-sobre-navy (atrio, noche, joya, clímax, reverso) pasaría
     a invisible. Esta obra no usa clip-text: no hay gradientes que revertir. */
  *,*::before,*::after{color:var(--ink) !important;background:none !important;
    box-shadow:none !important;text-shadow:none !important}
  html.js [data-rv]{opacity:1 !important;translate:none !important}
  html.js .costura[data-rv],html.js [data-rv] .pleca,
  html.js .paso[data-rv]::before,html.js .carta__lista[data-rv]::before,
  html.js .umbral[data-rv] .umbral__l,html.js .umbral[data-rv] .umbral__r{transform:none !important}
  html.js .umbral[data-rv] .umbral__mk{opacity:1 !important}
  [data-e],.atrio::before,.conserjeria__linea,.c-item{animation:none !important}
  .marquesina{position:static}
  .marquesina.is-baja{-webkit-backdrop-filter:none;backdrop-filter:none}
  .cortina,.nav__toggle,.nav__cta--m,.skip{display:none !important}
  .atrio{min-height:auto}
  .sumario{margin-top:0}
  .sumario::before{display:none}
  /* Los sangrados decorativos gigantes no gastan tinta */
  .reverso__mk,.lado__mk{display:none}
  .btn{border:1px solid var(--ink) !important}
  .ficha__img{outline:1px solid var(--stone-300)}
  /* Las respuestas del FAQ son contenido real: abiertas en papel (Chromium vía
     ::details-content; otros motores degradan al estado del usuario) */
  .faq__lista details::details-content{content-visibility:visible !important;block-size:auto !important}
  .faq__ch{display:none}
}