/* ═══════════════════════════════════════════════════════════════════════════
   LA CONSOLA — marco HUD + radar de navegación del landing myvigia.
   Sustituye al header clásico: la página se presenta como el instrumento
   encendido. Cuatro esquinas de instrumento, marca arriba-izquierda, señal
   viva arriba-centro, CTA-comando arriba-derecha, contador de actos abajo-
   izquierda (lo puebla landing-film.js) y el radar-nav abajo-derecha.

   El chrome tiene CUERPO: velo, notch y zócalo (el bisel, §0) — carcasa opaca
   que se posa cuando la página se mueve, para que el HUD nunca se lea encima
   del contenido.

   Capas: grano/viñeta 90-95 < HUD 96 < radar-nav 98 < boot 200.
   Gates: móvil compacto ≤900px (sin señal, velo bajo, zócalo recogido) ·
   reduced-motion posa el bisel sin recorrido · print oculta todo el chrome ·
   sin JS el bisel nace puesto, el radar abre por :hover/:focus-within y el
   reloj queda estático.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · EL BISEL — por qué el HUD tiene cuerpo ──────────────────────────
   El chrome iba suelto sobre el documento y, al bajar, se leía ENCIMA del
   contenido. Medido sobre el fondo real (contraste del texto del HUD contra
   el color del texto de la página que cruza por debajo):

     y=500   señal  1,00 : 1   sobre el lead del hero
     y=2100  CTA    1,52 : 1   sobre «no se subsana»
     y=4000  señal  1,69 : 1   sobre «firma.myvigia.com/inbox»
     y=9800  señal  1,00 : 1   sobre el titular del Dispositivo
     y=16000 señal  2,00 : 1   sobre «Un plan para cada realidad»
     y=400   rótulo 1,00 : 1   sobre el párrafo de El problema

   La solución no es opacidad ni desenfoque: es DARLE CUERPO al instrumento.
   En reposo (el hero) el HUD flota, como estaba. En cuanto la página se mueve
   el chrome SE POSA y aparecen tres piezas de carcasa, todas opacas, todas
   con hairline, ninguna con backdrop-filter:

     .hud-velo    lavado de --canvas desde el canto superior, sólido en la
                  franja donde vive el chrome y disuelto a los 108 px: el
                  suelo de la marca y del CTA. Es la «línea de agua».
     .hud-notch   la carcasa de la señal viva: cuelga del canto superior
                  (sin borde ni radio arriba) y abre su hairline a los lados.
     .hud-zocalo  el espejo del notch para el rótulo de sección: sube del
                  canto inferior y arranca pegado al canto izquierdo.

   Con carcasa opaca el fondo del texto del HUD deja de depender de la página:
   es --canvas siempre, en todas las secciones. Lo único animado es opacity y
   transform (el asiento de 8 px con la misma curva que la aguja del radar).

   ESTADOS. Sin JS, el HUD nace POSADO (el estado legible: nadie se queda con
   la señal encima de un titular). landing-boot.js marca html.lp-hud-vivo antes
   del primer paint, y solo entonces el reposo libera el chrome; landing-hud.js
   pone y quita .is-posada con histéresis (posa a 40 px, suelta a 24 px). */

/* ── 1 · Marco (esquinas de instrumento) ─────────────────────────────────── */
.hud { position: fixed; inset: 0; z-index: 96; pointer-events: none; }

/* Velo: NO es un bloque opaco de borde a borde ni una barra de navegación.
   Es un lavado sin canto: sólido solo en los 40 px donde se apoyan la marca,
   la señal y el CTA, y disuelto por completo a los 108 px. El único canto
   horizontal de todo el bisel es el hairline del notch, que se abre a los
   lados en degradado — la línea de agua. */
.hud-velo {
  position: absolute; top: 0; left: 0; right: 0; height: 108px;
  background: linear-gradient(to bottom,
    var(--canvas) 0,
    var(--canvas) 40px,          /* la marca baja hasta 44: sólido hasta ahí */
    color-mix(in srgb, var(--canvas) 74%, transparent) 68px,
    transparent 100%);
  opacity: 1;
  transition: opacity .38s ease-out;
}

.hud-corner {
  position: absolute; width: 18px; height: 18px; opacity: .55;
  transition: opacity .3s ease-out;
}
.hud-corner::before, .hud-corner::after {
  content: ""; position: absolute; background: var(--text-subtle);
}
.hud-corner::before { width: 100%; height: 1px; }
.hud-corner::after  { width: 1px; height: 100%; }
.hud-corner.tl { top: 14px; left: 14px; }
.hud-corner.tr { top: 14px; right: 14px; transform: scaleX(-1); }
.hud-corner.bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.hud-corner.br { bottom: 14px; right: 14px; transform: scale(-1); }
/* El zócalo del rótulo ocupa la esquina inferior izquierda cuando sube. La
   marca de esquina se retira en vez de quedar dibujada POR DENTRO de la
   carcasa (dos hairlines a 14 px uno del otro es ruido, no instrumento).
   Sin :has() el zócalo la tapa igual —mismo resultado, sin el fundido—. */
.hud:has(.hud-section.on) .hud-corner.bl { opacity: 0; }

/* ── 2 · Marca (arriba-izquierda) ────────────────────────────────────────── */
.hud-brand {
  position: absolute; top: 22px; left: 28px; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text-strong);
}
.hud-brand .mark { width: 22px; height: 22px; }
.hud-brand .lock { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }

/* ── 3 · Señal viva (arriba-centro): estado + reloj Bogotá ───────────────── */
/* La caja YA NO es el texto: es la carcasa. El texto se sostiene con padding
   (20 arriba / 18 abajo sobre un renglón de 17,6) para que el notch nazca
   pegado al canto superior y la lectura quede ópticamente centrada en él:
   centro del texto 28,8 · centro de la carcasa 27,8. */
.hud-signal {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  isolation: isolate;                /* el notch va detrás del texto, no del HUD */
  display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 22px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--text-subtle); white-space: nowrap;
}

/* EL NOTCH. z-index:-1 dentro del contexto de apilamiento que ya crea el
   translateX(-50%) de la señal: se pinta bajo el texto de su propia caja y no
   se escapa por debajo del resto del HUD. Opaco a propósito — es lo que hace
   que el contraste deje de depender de la página. */
.hud-notch {
  position: absolute; inset: 0; z-index: -1;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-top: 0;                     /* nace del canto: arriba no hay carcasa */
  border-radius: 0 0 12px 12px;
  opacity: 1;
}
/* La línea de agua: el hairline inferior no termina en la carcasa, se abre a
   los dos lados y se disuelve. Da horizonte sin poner una barra de navegación
   de borde a borde. El ancho se calcula para que NUNCA rebase la ventana (la
   carcasa suelta mide ~390 px, o sea 195 de media caja: 210 deja holgura),
   así ninguna resolución hereda un corte seco ni una barra horizontal. */
.hud-notch::before, .hud-notch::after {
  content: ""; position: absolute; bottom: -1px; height: 1px;
  width: max(0px, calc(50vw - 210px));
}
.hud-notch::before { right: 100%; background: linear-gradient(to right, transparent, var(--border)); }
.hud-notch::after  { left: 100%;  background: linear-gradient(to left,  transparent, var(--border)); }

.hud-live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.hud-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: hud-beat 2.4s ease-in-out infinite;
}
@keyframes hud-beat { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hud-clock { font-variant-numeric: tabular-nums; }

/* ── 4 · CTA-comando (arriba-derecha) ────────────────────────────────────── */
.hud-cta {
  position: absolute; top: 18px; right: 28px; pointer-events: auto;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-decoration: none; color: var(--text);
  padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  /* UNA sola lista de propiedades, y solo se modula la DURACIÓN. Antes el
     :hover redeclaraba el atajo con tres propiedades y dejaba `transform`
     fuera (transition-property se reemplaza, no se fusiona): con ratón el
     hundido de :active era un salto seco, porque a :active solo se llega
     desde :hover. Y en el otro sentido, el longhand de :not(:hover) —.55s—
     se aplicaba a las CUATRO, así que al activar con teclado (Enter/Espacio
     dan :active sin :hover) el mismo hundido de 1px tardaba 550 ms. */
  transition-property: color, background, border-color, transform;
  transition-timing-function: ease-out;
  transition-duration: .3s, .3s, .3s, .07s;
}
.hud-cta:hover {
  color: #fff; background: var(--brand); border-color: var(--brand);
}
/* Fricción asimétrica: la salida es más lenta que la entrada — salvo el
   hundido, que se mantiene inmediato venga del ratón o del teclado. */
.hud-cta:not(:hover) { transition-duration: .55s, .55s, .55s, .07s; }
.hud-cta:active { transform: translateY(1px); }
.hud-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── 5 · RADAR-NAV (abajo-derecha) — la navegación ES el radar ───────────── */
.rnav { position: fixed; right: 22px; bottom: 22px; z-index: 98; }

.rnav-toggle {
  display: block; width: 88px; height: 88px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: transform .07s ease-out;
}
.rnav-toggle:active { transform: translateY(1px); }
.rnav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rnav-dial { width: 100%; height: 100%; display: block; }
.rnav-dial .ring   { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.rnav-dial .ring.r2 { opacity: .6; }
.rnav-dial .ring.r3 { opacity: .3; }
.rnav-dial .face {
  fill: color-mix(in srgb, var(--canvas) 78%, transparent);
  stroke: var(--border-strong); stroke-width: 1;
}
.rnav-dial .tick { stroke: var(--text-subtle); stroke-width: 1; opacity: .5; }
.rnav-dial .blip { fill: var(--text-subtle); transition: fill .3s ease-out, r .3s ease-out; }
.rnav-dial .blip.is-active { fill: var(--accent); }
/* La aguja gira con el progreso de scroll (JS setea --rnav-ang en el nav). */
.rnav-needle {
  transform: rotate(var(--rnav-ang, -132deg));
  transform-origin: 48px 48px;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.rnav-needle line { stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; }
.rnav-needle .hub { fill: var(--brand); }
/* Barrido tenue permanente (cortesía visual, no informativo). */
.rnav-sweep {
  transform-origin: 48px 48px;
  animation: rnav-sweep 7s linear infinite;
  opacity: .5;
}
@keyframes rnav-sweep { to { transform: rotate(360deg); } }
/* Eco de confirmación: la escena de la tesis emite "mv:confirm" y el JS pone
   .is-pinging en el nav → el anillo se expande y desvanece DOS veces
   (transform/opacity, compositor). En reposo el círculo es invisible. */
.rnav-dial .rnav-ping {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  opacity: 0; pointer-events: none;
  transform-origin: 48px 48px;
}
.rnav.is-pinging .rnav-ping { animation: rnav-ping .85s ease-out 2; }
@keyframes rnav-ping {
  0%   { opacity: .95; transform: scale(.35); }
  100% { opacity: 0;   transform: scale(3.1); }
}

/* ── 5b · Contactos (los enlaces): abanico en arco hacia arriba ──────────── */
.rnav-menu {
  list-style: none; margin: 0; padding: 0;
  position: absolute; right: 44px; bottom: 44px; width: max-content;
}
.rnav-menu li { position: absolute; right: 0; bottom: 0; }
/* Posiciones del abanico (de abajo hacia arriba, arco a la izquierda). */
.rnav-menu li:nth-child(1) { transform: translate(-66px,   6px); }
.rnav-menu li:nth-child(2) { transform: translate(-84px, -34px); }
.rnav-menu li:nth-child(3) { transform: translate(-78px, -74px); }
.rnav-menu li:nth-child(4) { transform: translate(-52px,-112px); }
.rnav-menu li:nth-child(5) { transform: translate( -10px,-144px); }
.rnav-menu a {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  text-decoration: none; color: var(--text);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid transparent;
  opacity: 0; translate: 18px 10px; pointer-events: none;
  transition: opacity .3s ease-out, translate .3s ease-out,
              color .3s ease-out, border-color .3s ease-out, background .3s ease-out;
}
.rnav-menu a .idx { font-size: 10px; color: var(--text-subtle); }
.rnav-menu a:hover, .rnav-menu a.is-active {
  color: var(--text-strong); border-color: var(--border-strong);
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rnav-menu a.is-active .idx { color: var(--accent); }
.rnav-menu a:focus-visible {
  outline: none; opacity: 1; translate: 0 0; pointer-events: auto;
  box-shadow: var(--focus-ring);
}
/* Apertura: hover o foco dentro (CSS puro — funciona sin JS) o .is-open (JS móvil). */
.rnav:hover .rnav-menu a,
.rnav:focus-within .rnav-menu a,
.rnav.is-open .rnav-menu a {
  opacity: 1; translate: 0 0; pointer-events: auto;
}
/* Cascada de contactos: aparecen del más cercano al más lejano. */
.rnav:hover .rnav-menu li:nth-child(2) a, .rnav.is-open .rnav-menu li:nth-child(2) a,
.rnav:focus-within .rnav-menu li:nth-child(2) a { transition-delay: .035s; }
.rnav:hover .rnav-menu li:nth-child(3) a, .rnav.is-open .rnav-menu li:nth-child(3) a,
.rnav:focus-within .rnav-menu li:nth-child(3) a { transition-delay: .07s; }
.rnav:hover .rnav-menu li:nth-child(4) a, .rnav.is-open .rnav-menu li:nth-child(4) a,
.rnav:focus-within .rnav-menu li:nth-child(4) a { transition-delay: .105s; }
.rnav:hover .rnav-menu li:nth-child(5) a, .rnav.is-open .rnav-menu li:nth-child(5) a,
.rnav:focus-within .rnav-menu li:nth-child(5) a { transition-delay: .14s; }

/* ── 6 · Rótulo de la señal + etiqueta de sección legible ───────────────── */
.hud-clock-wrap { display: inline-flex; align-items: baseline; gap: 8px; }
.hud-clock-wrap .lbl {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .02em; text-transform: none; color: var(--text-muted);
}
.hud-clock-wrap .suf { color: var(--text-subtle); }

/* "El problema · 2 de 8" — abajo-izquierda; lo alimenta landing-hud.js.
   Igual que la señal, la caja es la carcasa y el texto va con padding: el
   zócalo arranca pegado a la esquina inferior izquierda de la ventana. */
.hud-section {
  position: absolute; bottom: 0; left: 0; isolation: isolate;
  padding: 13px 22px 19px 28px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); letter-spacing: .01em;
  opacity: 0; translate: 0 6px;
  transition: opacity .3s ease-out, translate .3s ease-out;
}
.hud-section.on { opacity: 1; translate: 0 0; }
/* EL ZÓCALO — espejo del notch: sube del canto inferior, sin borde izquierdo
   ni inferior, y abre su hairline superior hacia la derecha. */
.hud-zocalo {
  position: absolute; inset: 0; z-index: -1;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-left: 0; border-bottom: 0;
  border-radius: 0 12px 0 0;
  opacity: 1;
}
.hud-zocalo::after {
  content: ""; position: absolute; top: -1px; left: 100%; height: 1px; width: 26vw;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ── 6a · LOS DOS ESTADOS DEL BISEL ──────────────────────────────────────
   Por defecto —que es lo que ve quien no tiene JS— el HUD está POSADO: velo,
   notch y zócalo puestos, señal recogida. Es el estado legible, y es el que
   nunca falla.

   Con JS, landing-boot.js marca html.lp-hud-vivo antes del primer paint y el
   reposo del hero libera el chrome (sin flash: la clase existe desde el primer
   frame). landing-hud.js vuelve a posarlo con .is-posada en cuanto la página
   se mueve — 40 px para posar, 24 px para soltar, con histéresis para que no
   parpadee en el borde.

   El asiento es físico: la carcasa NO aparece de golpe, entra desde arriba
   8 px con la misma curva que la aguja del radar (.16,1,.3,1), como una pieza
   que cae en su alojamiento. El velo solo cruza opacidad. Nada más se anima:
   ni filtros, ni sombras, ni layout por frame. */
html.lp-hud-vivo .hud-velo,
html.lp-hud-vivo .hud-notch,
html.lp-hud-vivo .hud-zocalo { opacity: 0; }
html.lp-hud-vivo .hud-notch  { transform: translateY(-8px); }
html.lp-hud-vivo .hud-zocalo { transform: translateY(8px); }

html.lp-hud-vivo .hud.is-posada .hud-velo,
html.lp-hud-vivo .hud.is-posada .hud-notch,
html.lp-hud-vivo .hud.is-posada .hud-zocalo { opacity: 1; }
html.lp-hud-vivo .hud.is-posada .hud-notch,
html.lp-hud-vivo .hud.is-posada .hud-zocalo { transform: translateY(0); }

.hud-notch, .hud-zocalo {
  transition: opacity .34s ease-out, transform .34s cubic-bezier(.16,1,.3,1);
}

/* LA RETRACCIÓN. Posada, la señal se recoge: caen el rótulo «Hora judicial» y
   el huso «· −05», y la carcasa mide ~120 px menos. Se retira solo lo
   redundante (el title del <span> sigue explicando de qué hora hablamos), así
   que el abogado no pierde ni un dato. Es un cambio de estado, no una
   animación: ocurre UNA vez, en el mismo instante en que baja la carcasa. */
.hud.is-posada .hud-clock-wrap .lbl,
.hud.is-posada .hud-clock-wrap .suf { display: none; }

/* El CTA, posado, cambia el cristal por materia: fondo opaco en vez de
   translúcido + desenfoque. Además de garantizar el contraste, quita un
   backdrop-filter de encima del canvas WebGL del hero — es más barato.
   El :not(:hover) no es cosmética: sin él esta regla (0,3,0) le ganaba a
   .hud-cta:hover (0,2,0) y el CTA perdía su relleno Iris al pasar el ratón. */
.hud.is-posada .hud-cta:not(:hover) {
  background: var(--canvas);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 6b · Detección, no fade: el contenido no aparece — es detectado ─────── */
/* Al revelarse una cabecera (.lp-shown vía IntersectionObserver), una línea
   cian de 1px la cruza UNA vez y el dot del eyebrow emite un eco de anillo.
   CSS puro colgado del sistema de reveal existente; sin JS nuevo. */
.lp-head { position: relative; overflow: clip; }
.lp-head::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -4%; width: 1px;
  background: var(--accent); opacity: 0; pointer-events: none;
}
.lp-head.lp-shown::after { animation: hud-scan .6s ease-out 1 both; }
@keyframes hud-scan {
  0%   { opacity: .8; transform: translateX(0); }
  100% { opacity: 0;  transform: translateX(min(108vw, 1400px)); }
}
.lp .eyebrow .dot { position: relative; }
.lp .eyebrow .dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0; pointer-events: none;
}
.lp-head.lp-shown .eyebrow .dot::after,
.lp-reveal.lp-shown .dot::after { animation: hud-echo .9s ease-out 1 both; }
@keyframes hud-echo {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(3.4); }
}

/* ── 6c · WhatsApp cede la esquina al radar: sube por encima del dial ──────
   Por VARIABLE, no por prioridad: el botón vive en otro archivo (landing.css,
   que también sirve a las legales, donde no hay radar) y aquí solo se le
   levanta el suelo mientras el dial ocupe la esquina. */
:root { --wa-piso: 122px; }
@media (max-width: 900px) { :root { --wa-piso: 92px; --wa-lado: 16px; } }

/* ── 7 · Decrypt de eyebrows (el JS monta .dec; sin JS no existe) ────────── */
.eyebrow .dec { font-variant-ligatures: none; }

/* ── 8 · Gates ───────────────────────────────────────────────────────────── */

/* SUELO DEL CHROME. En ancho el HUD vive en el canalón y no se posa sobre
   nada; en angosto el rótulo de sección (abajo-izquierda) y el dial del radar
   (abajo-derecha) ocupan la franja inferior de la ventana, y el texto pasa por
   debajo. Las piezas que TERMINAN en texto denso —y que en el teléfono miden
   casi una pantalla, como EL CONTADOR— reservan esa franja como su propio
   suelo, así su último renglón nunca queda tapado. El HUD no cambia: sigue
   completo en todas las secciones.
   Medida: dial 64px + 14px de margen ≈ 78px, con un respiro de lectura. */
:root { --hud-piso: 0px; }
@media (max-width: 940px) { :root { --hud-piso: 92px; } }

@media (max-width: 900px) {
  .hud-signal { display: none; }               /* el reloj cede espacio */
  .hud-brand { top: 16px; left: 18px; }
  .hud-cta { top: 14px; right: 16px; font-size: 11px; padding: 8px 11px; }
  .hud-corner.tl, .hud-corner.tr { display: none; }  /* esquinas top chocan con la marca */
  /* En el teléfono el bisel se estrecha con el chrome: sin señal no hay notch,
     el velo baja a la altura real de marca+CTA y el zócalo se recoge para no
     comerle ancho al rótulo ni acercarse al dial. Nada nuevo estorba. */
  .hud-velo {
    height: 76px;
    background: linear-gradient(to bottom,
      var(--canvas) 0, var(--canvas) 26px,
      color-mix(in srgb, var(--canvas) 74%, transparent) 46px, transparent 100%);
  }
  .hud-section { padding: 10px 16px 15px 18px; font-size: 11.5px; }
  .hud-zocalo::after { width: 14vw; }
  .rnav { right: 14px; bottom: 14px; }
  .rnav-toggle { width: 64px; height: 64px; }
  /* En táctil no hay hover: el abanico se vuelve pila vertical y abre por tap. */
  .rnav-menu { right: 12px; bottom: 74px; }
  .rnav-menu li { position: static; transform: none !important; display: block; text-align: right; margin-top: 6px; }
  .rnav-menu a { background: color-mix(in srgb, var(--canvas) 88%, transparent); border-color: var(--border); }
  .rnav:hover:not(.is-open) .rnav-menu a { opacity: 0; translate: 18px 10px; pointer-events: none; }
  .rnav.is-open .rnav-menu a { opacity: 1; translate: 0 0; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-live .dot { animation: none; }
  .rnav-sweep { animation: none; opacity: .25; }
  .rnav.is-pinging .rnav-ping { animation: none; }
  .rnav-needle { transition: none; }
  .rnav-menu a { transition: none; }
  .lp-head.lp-shown::after,
  .lp-head.lp-shown .eyebrow .dot::after,
  .lp-reveal.lp-shown .dot::after { animation: none; }
  .hud-section { transition: none; }
  /* El bisel se posa igual —es legibilidad, no adorno— pero sin recorrido:
     aparece puesto, sin el asiento de 8 px. */
  .hud-notch, .hud-zocalo, .hud-velo, .hud-corner { transition: none; }
  html.lp-hud-vivo .hud-notch  { transform: none; }
  html.lp-hud-vivo .hud-zocalo { transform: none; }
}

@media print {
  .hud, .rnav { display: none !important; }
  .lp-head::after { display: none !important; }
  /* En papel manda el texto real: fuera la capa animada, visible la semántica. */
  .eyebrow .dec { display: none !important; }
  .eyebrow .sr-only {
    position: static !important; width: auto !important; height: auto !important;
    clip: auto !important; clip-path: none !important; overflow: visible !important;
  }
}

/* Utilidad de texto solo-para-lectores (no existía en el landing). */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}