/* ============================================================================
   RS.CSS — sistema de diseño del rediseño 2026 · Ruta Segura Perú
   Tesis: «la página no se anima, se registra» (CREATIVE-THESIS.md, vinculante).
   Arquitectura: TOKENS → BASE → LAYOUT → COMPONENTES → MOTION → PÁGINAS.
   Sin framework, sin build. Solo transform/opacity en animaciones.
   ============================================================================ */

/* ── 1 · TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* color (tesis §4) */
  --negro-obturador:#050506;
  --negro-carcasa:#161A22;      /* superficie elevada: legible sobre el negro */
  --superficie-alta:#1C212B;    /* paneles/inputs: un paso más de luz */
  --blanco-luz:#F2F3F5;
  --gris-metadato:#9AA3AF;      /* microtexto que SÍ se lee (8.2:1) */
  --rojo-registro:#FF2A16;   /* SOLO emisivo: barrido, foco, filo */
  --rojo-marca:#CC2200;      /* superficies sólidas: CTA primario */
  --linea:rgba(242,243,245,.13);
  --linea-fuerte:rgba(242,243,245,.28);

  /* superficie interactiva — dirección «Metallic Steel» (override 2026-08-11):
     el panel se separa del fondo por MATERIAL (gradiente de luminancia + filo
     especular), no por otro negro. Reservado a paneles y campos de formulario. */
  --acero-alto:#43444A;              /* panel: parada superior (recibe la luz) */
  --acero-medio:#333439;             /* panel: cuerpo */
  --acero-bajo:#28292D;              /* panel: parada inferior */
  --filo-especular:rgba(255,255,255,.34);  /* 1px superior: la firma del sistema */
  --campo:#4C4D55;                   /* input/select/textarea: MÁS claro que el panel */
  --campo-borde:rgba(255,255,255,.26);
  --gris-legible:#B0B2BA;            /* suelo del texto secundario: nada por debajo */

  /* tipografía: 3 roles */
  --f-display:"Helvetica Neue","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-texto:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;

  /* escala display fluida (home 64→112 / interiores 44→72) */
  --t-hero:clamp(2.6rem,7.5vw,7rem);
  --t-escena:clamp(2.3rem,5.9vw,4.9rem);
  --t-interior:clamp(2.1rem,4.6vw,4.5rem);
  --t-cifra:clamp(2.6rem,5.2vw,4.6rem);

  /* espaciado y límites */
  --borde-safe:clamp(20px,4.5vw,72px);   /* respiración lateral, no una caja */
  --medida-texto:64ch;
  --radio:6px;

  /* motion (MOTION-SYSTEM.md) */
  --ease-reveal:cubic-bezier(.16,1,.3,1);
  --dur-reveal:.7s;
  --dur-barrido:.6s;

  --alto-nav:64px;

  /* motion de producto — sistema canónico (una sola fuente) */
  --motion-ease-premium:cubic-bezier(.22,.8,.26,.99);
  --motion-product-hover:.55s;      /* zoom de foco */
  --motion-product-reset:.7s;       /* vuelta al reposo */
  --motion-scale-focus:1.20;        /* owner 2026-08-12: efecto reducido 35% sobre el incremento (0.30→0.20); visible pero controlado */
  --motion-tilt-max:3.2deg;         /* inclinación máxima por puntero */
  --motion-idle-dur:8s;             /* respiración ambiental */
  --motion-idle-amp:5px;            /* amplitud de la respiración */
}

/* ── 2 · BASE ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--negro-obturador);color:var(--blanco-luz);
  font-family:var(--f-texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{max-width:100%;height:auto}
/* el atributo hidden gana SIEMPRE, aunque el elemento tenga display propio */
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display)}
p{margin:0}
:focus-visible{outline:2px solid var(--rojo-registro);outline-offset:3px;border-radius:2px}
::selection{background:var(--rojo-marca);color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--negro-carcasa);
  color:var(--blanco-luz);padding:10px 18px;font:600 14px var(--f-texto);
}
.skip-link:focus{left:12px;top:12px}

/* roles tipográficos */
.k-display{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.95;color:var(--blanco-luz);
}
.k-mono{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris-metadato);font-weight:600;
}
.k-lead{font-size:clamp(1rem,1.35vw,1.19rem);line-height:1.65;color:rgba(242,243,245,.88);max-width:var(--medida-texto)}
/* acento rojo tipográfico: UNA palabra clave por viewport, nunca relleno */
em.r{font-style:normal;color:var(--rojo-registro)}
/* ley de precios (owner 2026-08-11F): monto monetario = rojo, el resto conserva su rol */
.precio-rojo{color:var(--rojo-registro) !important;font-weight:700}

/* ── 3 · LAYOUT ────────────────────────────────────────────────────────── */
.borde{padding-left:var(--borde-safe);padding-right:var(--borde-safe)}
.medida{max-width:var(--medida-texto)}
main{display:block}

/* ── 4 · COMPONENTES ───────────────────────────────────────────────────── */

/* 4.1 navegación — UN solo control aislado: MENÚ (owner override final).
   Sin barra, sin logo arriba, sin Cotizar arriba. El velo es la navegación
   completa; sus enlaces abren en un nuevo contexto (target=_blank seguro). */
.retorno{display:inline-block;margin-bottom:22px;text-decoration:none;transition:color .2s ease}
.retorno:hover{color:var(--blanco-luz)}
.menu-chip{
  position:fixed;top:calc(18px + env(safe-area-inset-top));right:var(--borde-safe);z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  font:600 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,243,245,.78);border:1px solid rgba(242,243,245,.16);
  background:rgba(5,5,6,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.menu-chip::before{
  content:"";width:14px;height:1px;background:currentColor;flex:none;
  box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor;opacity:.9;
}
.menu-chip:hover{color:var(--blanco-luz);border-color:rgba(242,243,245,.4);background:rgba(5,5,6,.62)}

/* 4.1b SONIDO — capa ambiental opcional (OFF por defecto). Mismo lenguaje del
   chip de MENÚ: discreto, accesible, sin parecer un reproductor. */
/* Composición editorial (macrosesión 2026-08-13): el ancho del viewport se
   aprovecha con GRID — columna de lectura 55-80ch + contenido complementario —
   nunca con líneas interminables. Primitives reutilizables, no parches. */
.ed-grid{display:grid;gap:clamp(26px,3.5vw,64px);align-items:start}
@media (min-width:1020px){
  .ed-60-40{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .ed-40-60{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .ed-50-50{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-pegajoso{position:sticky;top:96px}
}
.dato-lista{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.dato-lista>div{background:var(--negro-carcasa);padding:18px 20px}
.dato-lista .k-mono{display:block;margin-bottom:6px}
.dato-lista p{font-size:14.5px;line-height:1.55;color:rgba(242,243,245,.82)}
/* Tipografía editorial (owner 2026-08-12): los cuerpos largos se justifican;
   títulos, kickers, datos, botones y microcopy conservan su alineación de
   composición. En móvil manda la legibilidad: vuelve la bandera izquierda. */
.prosa,.faq details p,.legal p,.lead-full{text-align:justify}
/* OWNER LAW 2026-08-13: el body descriptivo usa el content box completo,
   justificado tipo Word, también en móvil (los gutters lo encuadran). */
.lead-full{max-width:none}
.sonido-chip{
  position:fixed;top:calc(18px + env(safe-area-inset-top));
  right:calc(var(--borde-safe) + 118px);z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;
  font:600 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,243,245,.78);border:1px solid rgba(242,243,245,.16);
  background:rgba(5,5,6,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.sonido-chip:hover{color:var(--blanco-luz);border-color:rgba(242,243,245,.4);background:rgba(5,5,6,.62)}
.sonido-chip::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  border:1.5px solid currentColor;background:transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
.sonido-chip[data-estado="playing"]{color:var(--blanco-luz);border-color:rgba(242,243,245,.34)}
.sonido-chip[data-estado="playing"]::before{background:var(--rojo-registro);border-color:var(--rojo-registro)}
/* preparado a la espera del primer gesto: anillo tenue, sin texto técnico */
.sonido-chip[data-estado="awaiting"]{color:var(--blanco-luz);border-color:rgba(242,243,245,.3)}
.sonido-chip[data-estado="awaiting"]::before{border-color:var(--rojo-registro)}
@media (prefers-reduced-motion:no-preference){
  .sonido-chip[data-estado="awaiting"]::before{animation:sonidoLate 3.2s ease-in-out infinite}
}
/* silenciado por el usuario: punto vacío atenuado */
.sonido-chip[data-estado="muted"]::before{border-color:rgba(242,243,245,.3)}
.sonido-chip[data-estado="muted"]{opacity:.72}
@media (prefers-reduced-motion:no-preference){
  .sonido-chip[data-estado="playing"]::before{animation:sonidoLate 2.4s ease-in-out infinite}
  .sonido-chip[data-estado="loading"]::before{animation:sonidoCarga .9s ease-in-out infinite}
}
@keyframes sonidoLate{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sonidoCarga{0%,100%{opacity:.25}50%{opacity:1}}
.sonido-chip[data-estado="unavailable"]{opacity:.35;cursor:not-allowed}
@media (max-width:640px){
  .sonido-chip{right:calc(var(--borde-safe) + 112px);padding:0 13px}
  .sonido-chip .sonido-txt{display:none}
}

/* velo de navegación */
.velo{
  position:fixed;inset:0;z-index:90;
  background:rgba(5,5,6,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;
  opacity:1;transition:opacity .3s ease;
}
.velo[hidden]{display:none}
.velo-marca img{display:block;width:clamp(160px,15vw,220px);height:auto;margin-bottom:clamp(20px,4vh,40px)}
.velo-nav a{
  display:block;max-width:fit-content;padding:clamp(6px,1.1vh,11px) 0;text-decoration:none;
  font:700 clamp(1.8rem,4.9vw,3.6rem)/1.05 var(--f-display);
  letter-spacing:-.015em;text-transform:uppercase;color:rgba(242,243,245,.88);
  transition:color .2s ease;
}
.velo-nav a:hover,.velo-nav a[aria-current="page"]{color:var(--blanco-luz)}
.velo-nav a[aria-current="page"]{border-bottom:2px solid var(--rojo-registro)}
.velo-secundaria{margin-top:clamp(18px,3.5vh,34px);display:flex;gap:26px}
.velo-secundaria a{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-metadato);text-decoration:none}
.velo-secundaria a:hover{color:var(--blanco-luz)}
.velo-meta{margin-top:clamp(20px,4vh,40px);font:500 11.5px/1.9 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gris-metadato)}
.velo-cerrar{
  position:absolute;top:calc(18px + env(safe-area-inset-top));right:var(--borde-safe);
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
  font:600 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  color:rgba(242,243,245,.85);border:1px solid rgba(242,243,245,.25);background:transparent;
}
.velo-cerrar:hover{color:#fff;border-color:rgba(242,243,245,.5)}
body.con-velo{overflow:hidden}
@media (prefers-reduced-motion:reduce){.velo{transition:none}}
/* 4.2 botones — el botón dice lo que ocurre */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:var(--radio);
  font:700 13px/1 var(--f-display);letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.btn-primario{background:var(--rojo-marca);color:#fff;border:1px solid var(--rojo-marca)}
.btn-primario:hover{background:#e02b10;transform:translateY(-1px)}
.btn-fantasma{
  background:rgba(242,243,245,.04);color:rgba(242,243,245,.92);
  border:1px solid var(--linea-fuerte);
}
.btn-fantasma:hover{border-color:rgba(242,243,245,.55);color:#fff;transform:translateY(-1px)}
/* eco del barrido en el CTA primario: recorre el borde una vez al entrar el puntero */
.btn-primario::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-101%);
}
.btn-primario:hover::after,.btn-primario:focus-visible::after{
  transition:transform var(--dur-barrido) var(--ease-reveal);transform:translateX(101%);
}
.btn-mini{min-height:40px;padding:0 18px;font-size:11px}

/* 4.3 título de escena: la regla superior barre y el título queda (firma §3.2) */
.escena-cabecera{position:relative;padding-top:26px;max-width:fit-content}
.escena-cabecera::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--rojo-registro),rgba(255,42,22,.15) 82%,transparent);
}
/* variante sin barrido: el presupuesto de firma es de 3 en toda la home
   (hero + escenas 01/02); el resto de cabeceras lleva la regla estática. */
.escena-cabecera--quieta::after{content:none !important}
.escena-num{display:block;margin-bottom:14px}
.escena-titulo{font-size:var(--t-escena);letter-spacing:-.02em;text-transform:uppercase;font-weight:700;line-height:.96}

/* 4.4 fila de datos en mono — la voz de la verdad comercial */
.datos{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--linea)}
.datos li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--linea);
}
@media (max-width:480px){
  .datos li{flex-direction:column;align-items:flex-start;gap:6px}
  .datos .d-v{text-align:left}
}
.datos .d-k{
  font:700 12.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--blanco-luz);padding-left:14px;position:relative;
}
.datos .d-k::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:2px;background:var(--rojo-registro)}
.datos .d-v{font:700 15px/1.45 var(--f-mono);letter-spacing:.03em;color:#fff;text-align:right;overflow-wrap:anywhere;text-wrap:balance;max-width:40ch;margin-left:auto}

/* 4.5 precio editorial — cifra grande, contexto corto, sin tachados */
.precio{display:flex;flex-direction:column;gap:6px}
.precio-etiqueta{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-metadato)}
.precio-cifra{
  font:700 var(--t-cifra)/0.95 var(--f-display);letter-spacing:-.02em;color:var(--rojo-registro);
}
.precio-cifra .moneda{font-size:.42em;font-weight:600;vertical-align:.62em;letter-spacing:0;margin-right:.08em;color:var(--rojo-registro);opacity:.88}
/* lockup A6 (owner 2026-08-11D): comparación SIMULTÁNEA — S/899 rojo dominante
   frente a valor regular blanco sólido a menor cuerpo; jerarquía por tamaño,
   nunca por alpha. El rojo se parte en el eje para no competir con el CTA. */
.precio-lockup{display:flex;gap:clamp(20px,3.5vw,44px);align-items:flex-end;flex-wrap:wrap}
.precio-cifra--promo,.precio-cifra--promo .moneda{color:var(--rojo-registro)}
.precio-cifra--promo .moneda{opacity:.88}
.precio-lockup-sep{width:1px;align-self:stretch;background:rgba(242,243,245,.22)}
.precio-regular{display:flex;flex-direction:column;justify-content:flex-end}
.precio-regular .cap{font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#C9CFD8;margin-bottom:8px}
.precio-regular .v{font:800 clamp(1.6rem,2.6vw,2.3rem)/1 var(--f-display);color:var(--rojo-registro)}
.precio-regular .v .moneda{font-size:.5em;font-weight:700;vertical-align:.5em;color:var(--rojo-registro);opacity:.88;letter-spacing:0;margin-right:.06em}

/* px-1: dos niveles — la información secundaria de precio SE LEE (override 2026-08-11) */
.precio-nota{font:600 15px/1.55 var(--f-texto);letter-spacing:0;color:#E7EAEF;margin-top:2px}
.precio-nota b{color:#fff;font-weight:800}
.precio-nota .pd{color:var(--rojo-registro);font-weight:800;margin:0 8px}
.precio-nota2{font:500 14px/1.6 var(--f-texto);color:var(--gris-legible)}

/* 4.6 acordeón FAQ — arquitectura a dos columnas: la intro sostiene la
   izquierda (sticky) y el acordeón ocupa el área derecha que quedaba vacía */
.faq-split{
  display:grid;gap:clamp(28px,5vw,84px);align-items:start;
  grid-template-columns:minmax(250px,1fr) minmax(0,1.7fr);
}
.faq-intro{position:sticky;top:calc(var(--alto-nav) + 28px)}
.faq-intro .k-lead{margin:20px 0 26px}
@media (max-width:900px){
  .faq-split{grid-template-columns:1fr}
  .faq-intro{position:static}
}
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 0;font:600 15.5px/1.45 var(--f-texto);color:var(--blanco-luz);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font:400 22px/1 var(--f-mono);color:var(--gris-metadato);flex:none;
  transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--rojo-registro)}
.faq details p{padding:0 0 22px;max-width:62ch;color:rgba(242,243,245,.78);font-size:15px}
.faq details[open] p{border-left:2px solid var(--rojo-registro);padding-left:18px;margin-left:2px}
.faq details[open] summary{color:var(--blanco-luz)}

/* 4.7 whatsapp flotante — safe area, nunca tapa CTA */
.wa-float{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;
  background:#1DAA53;border:1px solid #1DAA53;border-radius:999px;
  color:#fff;text-decoration:none;font:700 13px/1 var(--f-texto);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:background-color .25s ease,transform .25s ease;
}
.wa-float:hover{background:#22c05f;transform:translateY(-1px)}
/* Mientras el hero está en pantalla, el float se retira: tapaba la firma y
   ensuciaba la primera impresión; el hero ya tiene su propio CTA. */
.wa-float.is-oculto{opacity:0;pointer-events:none}
.wa-float{transition:opacity .35s ease,border-color .25s ease,transform .25s ease}

/* 4.8 sticky CTA móvil */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-cta a{
  display:flex;align-items:center;justify-content:center;min-height:54px;
  font:700 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.mcta-primary{background:var(--rojo-marca);color:#fff}
.mcta-secondary{background:var(--negro-carcasa);color:var(--blanco-luz)}
@media (max-width:760px){
  .mobile-cta{display:grid}
  /* en móvil el sticky ya trae WhatsApp: el float duplicaba y tapaba contenido */
  body.has-mcta .wa-float{display:none}
  .wa-float{bottom:calc(70px + env(safe-area-inset-bottom))}
  body.has-mcta{padding-bottom:56px}
}

/* 4.9 cierre — dirección B: identidad + dos grupos de utilidad, con banda de
   confianza integrada. Ni columnas heredadas ni fila infinita. */
.cierre{border-top:1px solid var(--linea);padding-block:clamp(34px,6vh,62px)}
.cierre-grid{
  display:grid;gap:clamp(24px,4vw,64px);align-items:start;
  grid-template-columns:minmax(250px,1.7fr) repeat(2,minmax(140px,1fr));
}
.cierre-logo{display:block;width:clamp(150px,14vw,196px);height:auto;margin:0}
.cierre-marca{font:700 clamp(19px,1.8vw,26px)/1.15 var(--f-display);letter-spacing:.03em;text-transform:uppercase;margin:0}
.cierre-tag{font:500 11.5px/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris-metadato);margin:8px 0 18px}
.cierre-dato{display:block;font:500 12.5px/2 var(--f-mono);letter-spacing:.05em;color:rgba(242,243,245,.75);text-decoration:none}
a.cierre-dato:hover{color:var(--blanco-luz)}
.cierre-grupo h3{font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gris-metadato);margin:0 0 14px}
.cierre-grupo a{display:block;font:500 13.5px/2.1 var(--f-texto);color:rgba(242,243,245,.78);text-decoration:none;transition:color .2s}
.cierre-grupo a:hover{color:var(--blanco-luz)}
.cierre-trust{
  margin-top:clamp(26px,4vh,42px);padding-top:18px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 28px;
}
.cierre-trust span{font:500 11.5px/1.8 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gris-metadato)}
@media (max-width:760px){.cierre-grid{grid-template-columns:1fr 1fr}.cierre-id{grid-column:1 / -1}}

/* 4.10 producto vivo — el mismo lenguaje del hero, extendido con criterio.
   IDLE: respiración sutil · HOVER: zoom controlado + tilt por puntero (JS
   escribe --tx/--ty) · TOUCH: sin hover falso (solo entry) · REDUCED: quieto. */
.producto-vivo{position:relative}
.producto-vivo > img,.producto-vivo .p-obj{
  transform:
    translate3d(var(--tx,0px),calc(var(--ty,0px) + var(--idle-y,0px)),0)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    scale(var(--esc,1));
  transition:transform var(--motion-product-reset) var(--motion-ease-premium),
             filter var(--motion-product-reset) var(--motion-ease-premium);
  will-change:transform;
  transform-style:preserve-3d;
}
.p-obj{position:relative;display:inline-block;max-width:100%}
.p-obj img{display:block;max-width:100%;height:auto}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .producto-vivo:hover > img,.producto-vivo:hover .p-obj{
    --esc:var(--motion-scale-focus);
    transition-duration:var(--motion-product-hover);
    filter:drop-shadow(0 34px 70px rgba(0,0,0,.6)) brightness(1.04);
  }
}
@media (prefers-reduced-motion:no-preference){
  .producto-vivo[data-idle] > img,.producto-vivo[data-idle] .p-obj{animation:productoRespira var(--motion-idle-dur) ease-in-out infinite}
}
@keyframes productoRespira{
  0%,100%{--idle-y:0px}
  50%{--idle-y:calc(var(--motion-idle-amp) * -1)}
}
/* la respiración necesita custom property animable */
@property --idle-y{syntax:"<length>";inherits:false;initial-value:0px}

/* barrido de luz del producto — el ADN del hero, enmascarado a la silueta
   real (mask = el propio asset). Se dispara al entrar en vista y en hover. */
.p-scan{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask-mode:alpha;mask-mode:alpha;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  background:linear-gradient(115deg,
    transparent 26%,
    rgba(255,255,255,.30) 40%,
    rgba(255,42,22,.44) 50%,
    rgba(255,255,255,.14) 60%,
    transparent 74%);
  background-size:320% 100%;background-position:145% 0;
}
@media (prefers-reduced-motion:no-preference){
  /* entrada: cuando la sección revela (.in) o en heroes visibles desde el load */
  .in .producto-vivo .p-scan{animation:pScan 4.2s var(--motion-ease-premium) .35s 1}
  .page-hero .producto-vivo .p-scan{animation:pScan 4.2s var(--motion-ease-premium) .35s 1}
  .producto-vivo:hover .p-scan{animation:pScanHover 1.8s var(--motion-ease-premium) 1 !important}
}
@keyframes pScan{
  0%{opacity:0;background-position:150% 0}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;background-position:-60% 0}
}
@keyframes pScanHover{
  0%{opacity:0;background-position:150% 0}
  15%{opacity:.9}
  85%{opacity:.9}
  100%{opacity:0;background-position:-60% 0}
}
@media (prefers-reduced-motion:reduce){
  .producto-vivo > img,.producto-vivo .p-obj{animation:none !important;transition:none !important;transform:none !important}
  .p-scan{display:none}
}

/* ── 5 · MOTION ─────────────────────────────────────────────────────────
   Revelado por estela: la línea cruza y el contenido queda asentado detrás.
   CSS = layout · JS = interacción (IO añade .in una vez) · nada de geometría
   JS realimentada (lección --rs-banda). Solo transform/opacity.            */
/* los desplazamientos previos al revelado no deben crear scroll horizontal */
[data-rv]{overflow-x:clip}
.rv{opacity:0;transform:translateX(44px)}
.rv-izq{transform:translateX(-44px)}
.rv-sube{transform:translateY(30px)}
.in .rv,.rv.in{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal);
}
/* escalonado por --i (tope 0.4s) */
.in .rv{transition-delay:calc(min(var(--i,0)*.09s,.4s))}

/* la estela del barrido en cabeceras de escena: se dispara con .in */
.escena-cabecera::after{
  content:"";position:absolute;left:0;top:-2px;height:5px;width:72px;
  background:linear-gradient(90deg,transparent,var(--rojo-registro) 45%,#ff8d80 55%,transparent);
  filter:blur(.4px);opacity:0;transform:translateX(-80px);
  pointer-events:none;
}
.in .escena-cabecera::after{
  animation:rsBarrido var(--dur-barrido) var(--ease-reveal) forwards;
}
@keyframes rsBarrido{
  0%{opacity:0;transform:translateX(-80px)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(min(46vw,560px))}
}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-izq,.rv-sube{opacity:1 !important;transform:none !important;transition:none !important}
  .escena-cabecera::after{animation:none !important;opacity:0 !important}
  .btn-primario::after{display:none}
}
/* sin JS, el contenido está presente */
.no-js .rv{opacity:1;transform:none}

/* ── 6 · PÁGINAS ────────────────────────────────────────────────────────── */

/* 6.1 HOME · escenas de producto (01/02): producto sticky + datos laterales */
.escena{
  position:relative;padding-block:clamp(84px,13vh,150px);
  border-top:1px solid var(--linea);
}
.escena-grid{
  display:grid;align-items:center;gap:clamp(28px,5vw,84px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
.escena--espejo .escena-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.escena--espejo .escena-visual{order:2}
.escena-visual{position:relative;display:flex;justify-content:center}
.escena-visual img{
  width:min(100%,620px);height:auto;
  /* separación por luz, no por rojo (tesis §4): plano local apenas más claro */
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.escena-visual::before{
  content:"";position:absolute;inset:8% 4%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(242,243,245,.055),transparent 70%);
}
.escena-cuerpo>.k-lead{margin:22px 0 30px}
.escena-datos{margin:0 0 30px;max-width:460px}
.escena-acciones{display:flex;gap:14px;flex-wrap:wrap}
.escena-precio{margin:0 0 30px}

@media (max-width:900px){
  .escena-grid,.escena--espejo .escena-grid{grid-template-columns:1fr}
  .escena--espejo .escena-visual{order:0}
  .escena-visual img{width:min(78vw,440px)}
  .escena-datos{max-width:none}
}

/* 6.2 HOME · evidencia v2 — relato sticky a la izquierda, casos apilados */
.evidencia{padding-block:clamp(84px,13vh,150px);border-top:1px solid var(--linea)}
.evidencia-split{
  display:grid;gap:clamp(28px,5vw,84px);align-items:start;
  grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr);
}
.evidencia-relato{position:sticky;top:clamp(24px,6vh,64px)}
.evidencia-casos{display:grid;gap:clamp(20px,3.5vh,36px)}
@media (max-width:900px){
  .evidencia-split{grid-template-columns:1fr}
  .evidencia-relato{position:static}
}
.evidencia-statement{
  font-size:clamp(2.1rem,4.9vw,4.2rem);text-transform:uppercase;font-weight:700;
  letter-spacing:-.02em;line-height:1.0;max-width:14ch;
}
.evidencia-sub{margin:24px 0 0;max-width:56ch}
.evidencia-tipos{
  display:flex;flex-wrap:wrap;gap:8px 0;margin:26px 0 0;padding:0;list-style:none;
}
/* ch-1: texto ROJO por decisión directa del owner; flotan sobre el negro,
   sin superficie grafito (reservada a lo interactivo) */
.evidencia-tipos li{
  font:700 12.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:#FF4A38;padding:10px 16px;border:1px solid rgba(255,42,22,.38);
  border-radius:999px;margin-right:8px;background:rgba(255,42,22,.05);
  transition:border-color .25s ease, background-color .25s ease, color .25s ease;
}
.evidencia-tipos li:hover{color:#FF5A48;border-color:rgba(255,42,22,.65);background:rgba(255,42,22,.09)}
.expedientes{
  display:grid;gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vh,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}
.expediente{position:relative}
.expediente video{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;
  border:1px solid var(--linea);border-radius:var(--radio);
}
.expediente-meta{
  display:flex;justify-content:space-between;gap:14px;padding:12px 2px 0;
  font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris-metadato);
}
.expediente-meta b{color:var(--blanco-luz);font-weight:600}

/* 6.3 HOME · respaldo — composición asimétrica (override 2026-08-11):
   UNA idea dominante (EMPRESA NACIONAL como titular de la sección) + cinco
   hechos en riel. Sin cajas, sin retícula que no cierra, sin huérfanos. */
.respaldo{border-top:1px solid var(--linea);padding-block:clamp(56px,9vh,96px)}
.trust-asim{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.trust-proto .escena-num{display:block;margin-bottom:16px}
.trust-titulo{
  font:800 clamp(1.8rem,3.4vw,2.9rem)/1.08 var(--f-display);
  text-transform:uppercase;letter-spacing:-.015em;color:var(--blanco-luz);
}
.trust-proto p{margin:16px 0 0;font:400 15.5px/1.65 var(--f-texto);color:rgba(242,243,245,.78);max-width:44ch}
.trust-lista{display:grid}
.trust-item{
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:baseline;
  padding:16px 0;border-top:1px solid rgba(242,243,245,.14);
}
.trust-item:last-child{border-bottom:1px solid rgba(242,243,245,.14)}
.trust-item b{
  font:800 13.5px/1.3 var(--f-display);text-transform:uppercase;
  letter-spacing:.05em;color:var(--blanco-luz);white-space:nowrap;
}
.trust-item span{font:400 13.5px/1.55 var(--f-texto);color:var(--gris-legible);text-align:right}
@media (max-width:900px){
  .trust-asim{grid-template-columns:1fr}
  .trust-item{grid-template-columns:1fr;gap:4px}
  .trust-item b{white-space:normal}
  .trust-item span{text-align:left}
}

/* 6.4 CTA final */
.cta-final{
  border-top:1px solid var(--linea);padding-block:clamp(96px,15vh,180px);text-align:center;
}
.cta-final .k-display{font-size:clamp(2.1rem,5.7vw,4.8rem);max-width:16ch;margin:0 auto}
.cta-final .k-lead{margin:22px auto 34px;text-align:center}
.cta-final .escena-acciones{justify-content:center}

/* 6.5 secciones genéricas (FAQ, interiores) */
.seccion{padding-block:clamp(72px,11vh,130px);border-top:1px solid var(--linea)}
.seccion-cabecera{margin-bottom:clamp(30px,5vh,52px)}

/* 6.5b LANZAMIENTO DE PRODUCTO (owner 2026-08-11E): el nombre entra MONUMENTAL
   y convive con el producto en una sola escena — tipo detrás, producto delante,
   lema como cierre. No es un font-size grande: es la escena completa. */
.lanzamiento{
  padding-top:calc(var(--alto-nav) + clamp(18px,3vh,40px));padding-bottom:clamp(30px,5vh,56px);
  min-height:56vh;display:flex;flex-direction:column;
}
.lanza-escena{position:relative;text-align:center;margin:auto 0;padding:clamp(20px,4vh,44px) 0}
.lanza-nombre{
  font:800 clamp(3.4rem,12.8vw,12.6rem)/0.92 var(--f-display);
  text-transform:uppercase;letter-spacing:-.028em;color:var(--blanco-luz);
  margin:0;white-space:nowrap;
}
.lanza-nombre em{font-style:normal;color:var(--rojo-registro)}
.lanza-lema{
  margin:clamp(20px,3.2vh,38px) 0 0;
  font:700 clamp(1.35rem,3vw,2.5rem)/1.2 var(--f-display);
  text-transform:uppercase;letter-spacing:.01em;color:var(--blanco-luz);
}
.lanza-lema em{font-style:normal;color:var(--rojo-registro)}
.lanza-meta{margin-top:14px;color:var(--gris-legible)}
.lanza-regla{width:min(220px,32vw);height:2px;margin:clamp(18px,3vh,30px) auto 0;background:var(--rojo-registro);transform:scaleX(0);transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .in .lanza-nombre.rv{animation:lanzaClip 1.15s var(--motion-ease-premium) .1s both;opacity:1;transform:none;transition:none}
  .in .lanza-regla{transition:transform .8s var(--motion-ease-premium) 1s;transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){.lanza-regla{transform:scaleX(1)}}
@keyframes lanzaClip{
  from{clip-path:inset(0 100% 0 0);opacity:.35;transform:translateY(14px)}
  to{clip-path:inset(0 -2% 0 0);opacity:1;transform:none}
}
@media (max-height:940px) and (min-width:641px){
  .lanza-nombre{font-size:clamp(3.2rem,11.6vw,10.6rem)}
}
@media (max-width:640px){
  .lanza-nombre{font-size:clamp(2.7rem,13.5vw,4rem)}
  .lanza-visual img{width:min(84%,420px)}
  .lanza-visual{margin-top:clamp(-20px,-5vw,-10px)}
}

/* 6.5c LIGHTBOX (bugfix 2026-08-11E): el rediseño lo dejó sin estilos — se
   abría invisible con el scroll bloqueado. Overlay propio del sistema. */
.image-lightbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(5,5,6,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.image-lightbox.open{display:flex}
.image-lightbox img{
  max-width:min(100%,1100px);max-height:88vh;width:auto;height:auto;
  border-radius:var(--radio);box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lightbox-close{
  position:absolute;top:calc(16px + env(safe-area-inset-top));right:var(--borde-safe);
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  font:300 26px/1 var(--f-display);color:var(--blanco-luz);
  background:rgba(5,5,6,.6);border:1px solid rgba(242,243,245,.3);
  transition:border-color .2s ease,color .2s ease;
}
.lightbox-close:hover{border-color:var(--rojo-registro);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .image-lightbox.open img{animation:lbEntra .28s var(--ease-reveal)}
  @keyframes lbEntra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* 6.6 interiores · cabecera de página (sin WebGL) */
.pagina-hero{padding-top:calc(var(--alto-nav) + clamp(56px,9vh,110px));padding-bottom:clamp(48px,7vh,90px)}
.pagina-hero .k-mono{display:block;margin-bottom:18px}
.pagina-hero h1{font-size:var(--t-interior);text-transform:uppercase;letter-spacing:-.02em;line-height:.97;max-width:16ch}
.pagina-hero .k-lead{margin-top:24px}

/* 6.7 formularios (cotizar/comprar) — cero espectáculo, foco fuerte */
.form-page{padding-top:calc(var(--alto-nav) + clamp(40px,7vh,80px));padding-bottom:clamp(72px,10vh,120px)}
.form-shell{max-width:720px}
.form-grupo{margin:0 0 22px}
.form-label{
  display:block;margin-bottom:8px;
  font:700 12.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blanco-luz);
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:14px 16px;border-radius:var(--radio);
  background:var(--campo);border:1px solid var(--campo-borde);
  color:#fff;font:400 15.5px/1.5 var(--f-texto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:border-color .2s ease, background-color .2s ease;
}
.form-input::placeholder,.form-textarea::placeholder{color:#BDBFC6}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:rgba(255,255,255,.4)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--rojo-registro);background:#54555E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 3px rgba(255,42,22,.18);
}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{
  background:#33343A;border-color:rgba(255,255,255,.10);color:#8A8C94;box-shadow:none;cursor:not-allowed;
}
.form-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23D6D8DE' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
.form-ayuda{margin-top:8px;font:500 13.5px/1.6 var(--f-texto);color:var(--gris-legible)}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form-fila{grid-template-columns:1fr}}
.form-consent{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:rgba(242,243,245,.75)}
.form-consent input{margin-top:3px;accent-color:var(--rojo-marca);width:18px;height:18px;flex:none}
.form-error{color:#ff6b5e;font:500 13px/1.5 var(--f-texto);margin-top:8px}

/* 6.8 legales/garantía — superficie plana, densidad editorial alta */
.legal{padding-top:calc(var(--alto-nav) + clamp(48px,8vh,96px));padding-bottom:clamp(72px,10vh,120px)}
.legal h1{font-size:clamp(1.9rem,3.8vw,3.2rem);text-transform:uppercase;letter-spacing:-.015em;line-height:1;margin-bottom:34px}
.legal h2{font:700 19px/1.35 var(--f-display);margin:38px 0 12px;text-transform:none;letter-spacing:0}
.legal p,.legal li{color:rgba(242,243,245,.8);font-size:15.5px;max-width:72ch}
.legal ul{padding-left:22px;margin:12px 0}
.legal-shell{max-width:800px}

/* numeral display de garantía */
.numeral,.legal .numeral{
  /* longhands: el shorthand `font:` no admite clamp() literal antes de la barra.
     El selector doble gana a `.legal p` (0,1,1), que pisaba el tamaño display. */
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(4.4rem,12vw,10rem);line-height:.9;letter-spacing:-.03em;
  text-transform:uppercase;margin:18px 0 0;
}
.numeral small{display:block;font-size:.22em;letter-spacing:.14em;color:var(--gris-metadato);margin-top:14px}

/* utilidades */
.center{text-align:center}
.oculto-movil{}
@media (max-width:760px){.oculto-movil{display:none}}
.solo-movil{display:none}
@media (max-width:760px){.solo-movil{display:block}}

/* ficha JC450 movil: Tracksolid solo desktop (owner 2026-08-13) */
@media (max-width:760px){.ficha-extra{display:none}}