/* FARO Markets — landing "From blueprint to clarity" (master brief 2026-09-02).
   La pagina NACE papel (Bone White) y ANOCHECE: actos 1-3 papel, acto 4 hace
   el viaje sketch→foto, actos 5-7 noche, acto 8 papel (corte tecnico), 9-10
   noche. Reveals de texto: CSS + IO (tokens.css); los pins los maneja GSAP.
   REGLA APRENDIDA: nada de overflow-x:hidden en body (rompe sticky/pin). */

* { margin: 0; padding: 0; box-sizing: border-box; }
body.lp {
  background: var(--bone);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
}
/* .mono ya no cambia de familia (toda la landing es Poppins desde el
   2026-09-15): marca peso medio, cifras tabulares y tracking neutro. */
.mono { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.acento { color: var(--acento); }
img { max-width: 100%; }

/* ───────────────── nav ───────────────── */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Sin fondo propio, el texto que pasa por debajo se leia a traves del nav y
     se mezclaba con el logotipo: de eso se encarga el degradado de mas abajo,
     que se desvanece hacia el centro de la barra.
     🔴 NADA DE `backdrop-filter` AQUI. Lo llevaba, y DIFUMINABA EL FARO: la
     punta -el techo conico y el pararrayos- cae dentro de la franja de la
     barra en cualquier pantalla, y se veia emborronada como si estuviera
     tapada. Gabriel lo fotografio. El degradado solo la vela; el desenfoque la
     borraba. */
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(20px, 4vw, 56px);
  transition: background var(--t-ui) var(--ease-data);
}
.lp-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.lp-marca span { font-size: clamp(13.5px, 0.94vw, 16px); letter-spacing: .28em; font-weight: 300; }
.lp-marca b { font-weight: 600; }
.marca-tri { fill: var(--navy); }
.lp-nav nav { display: flex; align-items: center; gap: 18px; }
/* El nav es lo UNICO que se ve en las 24 pantallas y era lo unico que no
   respondia al puntero: ni hover, ni pulsacion, ni transicion. Usa los tiempos
   del sistema (tokens.css), como el resto de la pagina. */
.lp-nav-link { color: var(--tinta-suave); text-decoration: none; font-size: clamp(13.5px, .86vw, 16px);
  transition: color var(--t-fast) var(--ease-data); }
.lp-nav-link:hover { color: var(--deep-teal); }
.lp-btn-nav {
  background: var(--navy); color: var(--bone); text-decoration: none;
  padding: 9px 18px; font-size: clamp(13px, .82vw, 15.5px); font-weight: 600; border-radius: 3px;
  transition: background var(--t-fast) var(--ease-data), transform var(--t-fast) var(--ease-data);
}
.lp-btn-nav:hover { background: var(--deep-navy); transform: translateY(-1px); }
.lp-btn-nav:active, .lp-btn:active { transform: translateY(1px); }
body[data-tema="noche"] { --foco: var(--teal); }
body[data-tema="noche"] .lp-nav-link:hover { color: var(--teal); }
body[data-tema="noche"] .lp-btn-nav:hover { background: #17B8A6; }
/* nav sobre secciones noche */
body[data-tema="noche"] .lp-nav { background: linear-gradient(rgba(9,19,33,.9), rgba(9,19,33,0)); }
body[data-tema="noche"] .lp-marca, body[data-tema="noche"] .lp-nav-link { color: var(--bone); }
body[data-tema="noche"] .marca-tri { fill: var(--bone); }
body[data-tema="noche"] .lp-btn-nav { background: var(--teal); color: #fff; }
body[data-tema="papel"] .lp-nav { background: linear-gradient(rgba(247,247,247,.92), rgba(247,247,247,0)); }

/* ───────────────── actos: bases ───────────────── */
/* El contenido de los actos va SIEMPRE por encima del faro y del velo. Y las
   secciones dejan de pintar su propio fondo: el papel lo pone el velo cuando
   toca, y el resto del tiempo se ve el faro. */
.acto { position: relative; z-index: 2; scroll-margin-top: 78px; }
.acto.papel { background: transparent; color: var(--tinta); }
.acto.noche { background: transparent; color: var(--bone); }
/* EL SUELO DEL ACTO (tokens.css): los actos de noche -y el bloque «claro» del
   acto 4, que cae sobre la noche dentro de una seccion que empieza en papel-
   invierten el texto secundario y las lineas. Toda pieza que use --texto-suave,
   --texto-tenue o --linea acierta sola en los dos suelos. */
.acto.noche, .copy.centrado.claro {
  --texto-suave: var(--hueso-suave);
  --texto-tenue: var(--hueso-tenue);
  --linea: var(--linea-navy);
  --foco: var(--teal);
  /* el teal PROFUNDO nacio para leerse sobre papel; sobre la noche se apaga */
  --acento: var(--teal);
}
/* legibilidad por acto sobre el fondo nocturno fijo */
.acto.noche::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
#acto10::before { background: rgba(9,19,33,.45); }
/* Alturas de PARTIDA. Las de los actos con secuencia (4 y 5) las recalcula
   landing.js a partir de cuantos fotogramas cubre cada uno: escribirlas aqui
   en vh fijos daba por hecho un numero de fotogramas, y cuando el manifiesto
   traia otro el ritmo se descuadraba -el acto 4 llego a pedir 12 pantallas de
   scroll para 189 fotogramas-. Estas cifras solo evitan el salto de layout y
   mantienen la pagina usable sin JS. */
.acto.pin { height: 240vh; }
.acto.pin#acto4 { height: 600vh; }
.acto.pin#acto5 { height: 260vh; }
.acto.pin#acto9 { height: 150vh; }
.lienzo { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* papel tecnico */
.papel-grid {
  position: absolute; inset: -12% 0;
  background-image:
    linear-gradient(var(--linea-papel) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-papel) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
}
.papel-grid.estatica { inset: 0; }

/* ── EL FARO NOCTURNO: un solo fondo fijo (se enciende al final del armado
      y persiste hasta el cierre; mismo asset que el frame final del canvas,
      asi el empalme es invisible) ── */
/* ─────────── EL FARO: el fondo continuo de TODA la pagina ───────────
   Antes cada acto llevaba su propio lienzo dentro de la seccion y, al acabar
   su pin, el faro subia con ella mientras el siguiente entraba desde abajo.
   Ahora el faro vive aqui, fijo y por debajo de todo: no se va nunca. Lo unico
   que lo tapa es el velo blanco del encandilamiento. */
#escenario-faro {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bone);
}
#lienzo-faro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#lienzo-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#plano-unico { transform-origin: 0 0; will-change: transform; }
#escenario-faro.fuera { visibility: hidden !important; }
/* EL CORTE (v7): un solo booleano decide quien se ve. Con visibility no hay
   ninguna ventana en la que el plano y el canvas existan a la vez, que era de
   donde salia el faro doble de la anotacion 6. Ahora el corte es entre los DOS
   HIJOS del escenario, no entre el escenario y un canvas de otra seccion. */
body.relevado #plano-unico { visibility: hidden !important; }
body:not(.relevado) #lienzo-faro, body:not(.relevado) #lienzo-fallback { visibility: hidden; }
/* el contenido de los actos pinta SOBRE el faro (el grid tenue no estorba)...
   EXCEPTO el lienzo del armado: su canvas es opaco y el plano debe verse
   ENCIMA mientras viaja a su sitio y se funde (acto 4) */
.lienzo { z-index: 2; }

/* ───────────────── plano + anotaciones (actos 1-2) ───────────────── */
.plano-wrap {
  /* en pantallas anchas todo vive en una banda central de ~1580px:
     el texto a la izquierda y el faro a la derecha se leen JUNTOS */
  position: absolute; right: max(6vw, calc(50vw - 790px)); bottom: 5vh;
  width: min(46vw, 680px); height: 88vh;
  display: flex; align-items: flex-end; justify-content: center;
}
/* el line-art canonico: EL MISMO faro 3D, misma camara (v4) */
.lineart {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  user-select: none; -webkit-user-drag: none;
}
/* trazado: mascara que "dibuja" de abajo hacia arriba (fallback del SVG) */

.nota {
  position: absolute; opacity: 0;
  font-weight: 500;
  font-size: clamp(10px, .9vw, 15px); letter-spacing: .02em; white-space: nowrap;
}
.nota small { display: block; font-size: .82em; color: var(--tinta-tenue); letter-spacing: .12em; }
.nota::after { content: ""; position: absolute; top: 50%; height: 1px; background: var(--tinta-tenue); width: var(--guia, 40px); }
.nota.izq::after { left: 100%; margin-left: 8px; }
.nota.der::after { right: 100%; margin-right: 8px; }

/* ── LAS LLAMADAS DEL PLANO ──────────────────────────────────────────────
   Sustituyen a las notas y chips que colgaban del wrap con porcentajes
   negativos. Estas van ancladas a partes del faro y se centran sobre su punto,
   asi que no invaden la columna de texto ni rozan el borde. */
.capa-html { position: absolute; inset: 0; pointer-events: none; }
.etq {
  position: absolute; opacity: 0; white-space: nowrap; transform: translate(-50%, -50%);
  font-weight: 500; font-size: clamp(10px, .78vw, 13px);
  letter-spacing: .08em; color: var(--tinta-suave);
}
.etq.dim { color: var(--tinta); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--tinta-tenue); padding-bottom: 3px; }
.etq.dim.izq { transform: translate(-100%, -50%); }
.etq.dim.der { transform: translate(0, -50%); }
.etq.paso { color: var(--tinta-suave); letter-spacing: .14em; text-transform: uppercase;
  transform: translate(0, -50%); }
.etq.paso.activa { color: var(--deep-teal); }
/* el nombre del nodo va A LA IZQUIERDA de su punto y con halo de papel:
   centrado encima, tapaba el circulo y se leia partido */
.etq.nodo { font-size: clamp(9.5px, .7vw, 12px); letter-spacing: .01em; color: var(--tinta);
  transform: translate(-100%, -50%); text-align: right; white-space: normal;
  width: 112px; line-height: 1.28; background: rgba(247,247,247,.92);
  padding: 2px 8px 2px 6px; border-radius: 2px; }
.etq.nodo.a-der { transform: translate(0, -50%); text-align: left; padding: 2px 6px 2px 8px; }
/* el SVG del plano se sale de su viewBox a proposito: la red y las llamadas
   viven fuera de la caja del dibujo */
#plano-svg { overflow: visible; width: 100%; height: 100%; }

.dim, .tramo {
  position: absolute; opacity: 0;
  font-weight: 500; font-size: clamp(10.5px, .8vw, 13.5px);
  letter-spacing: .12em; white-space: nowrap;
}
.dim { color: var(--tinta); border-bottom: 1.5px solid var(--tinta-tenue); padding-bottom: 4px; }
.tramo { color: var(--tinta-suave); }
.senales { position: absolute; opacity: 0; }
.senales text { fill: var(--tinta); font-size: 12px; }
.senales text.acento { fill: var(--deep-teal); }
.senales path { stroke: var(--tinta-suave); stroke-width: 1.2; }
.senales marker path { fill: var(--tinta-suave); stroke: none; }

/* ───────────────── copys de pin ───────────────── */
.copys {
  position: absolute; left: max(clamp(24px, 7vw, 110px), calc(50vw - 790px)); top: 0; height: 100vh;
  display: flex; align-items: center; width: min(40vw, 600px);
}
.copy { position: absolute; opacity: 0; }
.copy.visible-inicial { opacity: 1; }
/* TIPOGRAFIA UNICA (2026-09-15): Poppins en todo, y el peso hace el trabajo
   que antes hacia el cambio de familia. Regla de tracking para que Poppins no
   se vea estirada: mayusculas .10-.18 em (nunca los .22-.30 em de la mono),
   mixtas 0-.02 em, cifras 0. */
.eyebrow {
  font-size: clamp(12px, .85vw, 15px); letter-spacing: .16em;
  color: var(--acento); text-transform: uppercase; margin-bottom: 22px; font-weight: 600;
}
h1, h2 { font-weight: 600; line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(34px, 3.6vw, 76px); margin-bottom: 14px; }
.copy h2, .col-texto h2 { font-size: clamp(28px, 3vw, 60px); margin-bottom: 14px; }
.frase { font-weight: 300; font-size: clamp(18px, 1.55vw, 30px); line-height: 1.42; color: inherit; opacity: .88; text-wrap: balance; }
.cuerpo { font-weight: 400; font-size: clamp(15.5px, 1vw, 19px); line-height: 1.75; opacity: .82; max-width: 48ch; margin-top: 8px; }
.hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: clamp(10px, 0.69vw, 12px); letter-spacing: .18em; font-weight: 500; color: var(--texto-suave); text-transform: uppercase; }

/* ───────────────── acto 3: flujo papel ───────────────── */
.acto.flujo { padding: 16vh clamp(24px, 7vw, 110px); }
.tramo-flujo {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px); align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 10vh 0;
}
.tramo-flujo.columna { grid-template-columns: 1fr; justify-items: center; }
.col-texto.centrada { text-align: center; }
/* Un parrafo con ancho maximo dentro de una columna centrada se pegaba a la
   izquierda (el texto iba centrado DENTRO de su caja, pero la caja no):
   «descuadrado», dijo Gabriel el 16-sep. La caja tambien se centra. */
.col-texto.centrada .cuerpo, .col-texto.centrada .frase { margin-left: auto; margin-right: auto; }

.capas-lectura { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
/* la atenuacion va en el COLOR, no en opacity: el motor de flujo escribe la
   opacidad en linea y el arnes leeria una de diseño como «en transito» */
.capas-lectura li { display: flex; gap: 16px; align-items: baseline; font-size: clamp(15px, 1.04vw, 17.5px); line-height: 1.6; color: rgba(14,25,42,.85); }
.capas-lectura .mono { flex: none; width: 150px; font-size: clamp(11.5px, .8vw, 13px); font-weight: 600; letter-spacing: .04em; color: var(--acento); }



/* LA TARJETA DE SUGERENCIA (superficie de producto sobre papel). Rediseñada el
   2026-09-15 -Gabriel: «mas user friendly, con mas graficos, mas vistosa»-:
   pildora del veredicto, conviccion en cinco puntos, mini grafica de precio,
   barras de cobertura e iconos SVG. El color del texto lo sigue poniendo el
   SUELO (el bloque de superficies, abajo). Todo marcado como ejemplo. */
.tarjeta-conviction {
  position: relative;
  background: radial-gradient(90% 70% at 100% 0%, rgba(18,161,146,.22), transparent 60%), var(--surface);
  border-radius: 12px; padding: clamp(22px, 2vw, 30px); max-width: 520px; width: 100%;
  border: 1px solid rgba(247,247,247,.10);
  box-shadow: 0 24px 60px rgba(14,25,42,.18), inset 0 1px 0 rgba(247,247,247,.08);
}
.tc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tc-nombre { font-size: clamp(22px, 1.7vw, 28px); font-weight: 600; line-height: 1.1; }
.tc-ticker { font-size: clamp(12px, .85vw, 14px); font-weight: 500; color: var(--texto-suave); letter-spacing: .04em; margin-top: 2px; }
.chip-demo { font-size: clamp(9px, 0.62vw, 11px); font-weight: 600; letter-spacing: .10em; color: var(--notice); border: 1px solid rgba(125,211,252,.4); padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.k { font-size: clamp(10.5px, .7vw, 12.5px); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 6px; font-weight: 500; }
.tc-veredicto { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.pildora { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: clamp(15px, 1.1vw, 18px); background: rgba(18,161,146,.18); border: 1px solid rgba(18,161,146,.6); }
.pildora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tc-conviccion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-conviccion .k { margin: 0; }
.puntos { display: inline-flex; gap: 6px; }
.puntos i { width: 11px; height: 11px; border-radius: 50%; background: rgba(247,247,247,.14); border: 1px solid rgba(247,247,247,.28); }
.puntos i.on { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,161,146,.18); }
.tc-v { font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums; }
.tc-grafica { margin: 16px 0 4px; }
.tc-grafica svg { display: block; width: 100%; height: clamp(72px, 7vw, 96px); overflow: visible; }
.tc-grafica .area { fill: url(#tc-relleno); }
/* el trazo va en CSS: var() no funciona en atributos de presentacion */
.tc-grafica .linea { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tc-grafica .ultimo { fill: var(--teal); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tc-grafica figcaption { margin-top: 8px; }
.tc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 14px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tc-datos dd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: clamp(14px, 1vw, 16.5px); font-weight: 500; }
.tc-datos small { flex-basis: 100%; font-size: 11.5px; color: var(--texto-tenue); letter-spacing: .04em; }
.barras { display: inline-flex; gap: 4px; }
.barras i { width: 20px; height: 6px; border-radius: 3px; background: rgba(247,247,247,.14); }
.barras i.llena { background: var(--teal); }
.glifo { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.glifo.marca { color: var(--positive); }
.glifo.aviso { color: #F6C453; }   /* ambar (10:1 sobre navy); --negative queda para las bajas reales */
.tc-razones { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 0 4px; font-size: clamp(13.5px, .94vw, 16px); line-height: 1.55; }
.tc-razones li { display: flex; gap: 10px; align-items: flex-start; }
.tc-razones .glifo { margin-top: 3px; }
.tc-razones strong { color: var(--tinta); font-weight: 600; }
.tarjeta-conviction footer { margin-top: 12px; font-size: clamp(12.5px, .85vw, 14.5px); color: var(--texto-suave); }
.conclusiones span { display: inline-block; margin: 4px 6px 0 0; padding: 2px 9px; border: 1px solid var(--linea); border-radius: 999px; font-size: .92em; }
.conclusiones .activa { border-color: var(--teal); color: var(--tinta); }
/* LAS SUPERFICIES DE PRODUCTO SON DE NOCHE, pise el acto papel o noche: llevan
   fondo navy propio. Decidir el color del texto por el ACTO -como hacia
   `.acto.papel .k`- pintaba tinta OSCURA sobre estas cajas OSCURAS en los actos
   3, 6 y 7. Lo que manda es la superficie sobre la que se pinta, no la seccion
   que la contiene. */
.tarjeta-conviction, .track-record, .pulse, .panel-producto, .consola, .ficha-precios {
  --texto-suave: var(--hueso-suave);
  --texto-tenue: var(--hueso-tenue);
  --linea: var(--linea-navy);
  --acento: var(--teal);
  /* Y LA TINTA COMO VARIABLE: lo que dentro de la superficie pida `--tinta`
     -los «Razón:» y «Riesgo:» en negrita de la tarjeta- recibe hueso. Con la
     tinta del acto salian NAVY SOBRE NAVY, 1,13:1, y el arnes no lo veia
     porque la lista lleva opacidad de diseño (medido el 2026-09-15). */
  --tinta: var(--bone);
  /* Y LA TINTA TAMBIEN. Solo `.tarjeta-conviction` declaraba su color; el
     resto heredaba el del acto, asi que sobre papel la maqueta de la
     plataforma y la tabla de seguimiento salian en NAVY SOBRE NAVY: medido,
     1,04:1 -el texto estaba ahi y no se veia-. */
  color: var(--bone);
}

/* ───────────────── acto 4: transicion ───────────────── */
/* transparente: el canvas la cubre mientras vive; al retirarse (fin del
   armado) la seccion sale dejando ver el faro nocturno fijo */
.acto.transicion { background: transparent; }
/* el grid del papel sigue encima del faro mientras el prologo es dibujo;
   la timeline lo retira cuando la toma revela el mundo */
#grid-armado { z-index: 1; pointer-events: none; }

body.sin-canvas #lienzo-faro { display: none; }
body.sin-canvas #lienzo-fallback { display: block; }
/* los copys del armado viven en la columna IZQUIERDA, centrados en
   vertical, lejos del faro (que ocupa el centro-derecha del frame) */
.velo-copys { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-start; padding-left: max(clamp(24px, 7vw, 110px), calc(50vw - 790px)); }
.copy.centrado { text-align: left; max-width: min(38vw, 600px); position: absolute; padding: 26px 34px; border-radius: 6px; background: radial-gradient(ellipse at center, rgba(247,247,247,.62), rgba(247,247,247,0) 78%); }
.copy.centrado.claro { background: radial-gradient(ellipse at center, rgba(9,19,33,.45), rgba(9,19,33,0) 75%); }
.copy.centrado.claro { color: var(--bone); }
.copy.centrado.claro .frase { opacity: .92; }

/* ───────────────── acto 5: la luz revela ───────────────── */
.acto.noche.flujo { overflow: hidden; }
/* el FLASH del encandilamiento: remata el climax renderizado (el haz 3D
   girando a camara) y de su blanco decae la noche del acto 5 */
/* EL VELO. Nace del encandilamiento, se sostiene durante los actos de
   documento y se retira cuando el haz gira. Va DELANTE del faro y DETRAS del
   contenido: por eso el texto de esos actos se lee sobre el blanco. */
#flash {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  /* BLANCO PURO. Tenia un degradado a #c9f2ea, un verde menta, que pintaba
     todo el borde de la pantalla: «se debe ver todo blanco, no con el halo
     verde alrededor». El encandilamiento ya trae su propia luz en el render;
     el velo solo tiene que rematarlo, no teñirlo. */
  background: #ffffff;
}
.panel-luz {
  position: absolute; left: max(clamp(24px, 7vw, 110px), calc(50vw - 790px)); top: 20vh;
  max-width: 560px; color: var(--bone); opacity: 0;
}
.acto.papel .panel-luz { color: var(--tinta); }
.acto.papel .panel-producto { left: max(clamp(24px, 7vw, 110px), calc(50vw - 790px)); box-shadow: 0 18px 50px rgba(14,25,42,.14); }
.panel-producto {
  position: absolute; left: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-50%) translateX(-24px);
  width: min(88vw, 470px);
  /* BLANCAS CON TEXTO NEGRO (Gabriel, 2026-09-22; antes el verde de la
     marca #12A192 con texto navy, decision del 16-sep). Las variables de
     suelo se redefinen abajo (#acto5 .panel-producto) porque el bloque de
     superficies navy las pone en hueso. */
  background: #FFFFFF; color: #0B0B0C;
  border: 1px solid rgba(255,255,255,.6); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 24px 26px; opacity: 0;
}
#acto5 .panel-producto {
  --tinta: #0B0B0C; --texto-suave: rgba(11,11,12,.78); --texto-tenue: rgba(11,11,12,.62);
  --linea: rgba(11,11,12,.14); --acento: #0B0B0C; color: #0B0B0C;
}
#acto5 .panel-producto .pie-panel { opacity: .9; font-weight: 400; }
.panel-producto h3 { font-size: clamp(17px, 1.25vw, 21px); font-weight: 700; margin: 4px 0 16px; }
.cambio { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; }
.cambio .acento { color: var(--teal); font-weight: 600; }
.cambio .flecha { color: rgba(247,247,247,.5); }
.pie-panel { font-size: clamp(11.5px, 0.80vw, 13.5px); opacity: .6; margin-top: 10px; line-height: 1.6; }

/* ───────────────── acto 6: track record ───────────────── */
.track-record { background: var(--surface); border: 1px solid rgba(247,247,247,.08); border-radius: 6px; padding: 22px 24px; width: 100%; }
.track-record figcaption { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.track-record table { width: 100%; border-collapse: collapse; font-size: clamp(13px, 0.90vw, 15.5px); }
.track-record th { text-align: left; font-weight: 500; font-size: clamp(10px, 0.7vw, 12px); letter-spacing: .10em; text-transform: uppercase; color: rgba(247,247,247,.62); padding: 8px 8px; border-bottom: 1px solid rgba(247,247,247,.12); }
.track-record td { padding: 10px 8px; border-bottom: 1px solid rgba(247,247,247,.06); }
/* alza y baja con el MISMO peso (regla del brief) */
.track-record .ok { color: var(--positive); }
.track-record .mal { color: var(--negative); }

/* ───────────────── acto 7: pulse + pilares ───────────────── */
.pulse { background: var(--surface); border: 1px solid rgba(247,247,247,.08); border-radius: 8px; width: min(100%, 620px); padding: 20px 22px; }
.pulse header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pulse .marca-mini { display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .14em; font-weight: 600; }
.pulse-hero { padding: 8px 0 16px; border-bottom: 1px solid rgba(247,247,247,.08); }
.pulse-hero .v { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pulse-tabs { display: flex; gap: 16px; font-size: clamp(10px, 0.7vw, 12px); letter-spacing: .08em; text-transform: uppercase; padding: 14px 0; color: rgba(247,247,247,.5); flex-wrap: wrap; }
.pulse-tabs .activa { color: var(--teal); border-bottom: 1px solid var(--teal); padding-bottom: 3px; }
.pulse-filas { display: flex; flex-direction: column; }
.pulse-fila { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; padding: 11px 0; font-size: clamp(13px, 0.90vw, 15.5px); border-bottom: 1px solid rgba(247,247,247,.05); }
.pulse-fila .ok { color: var(--positive); }
.pulse-fila .mal { color: var(--negative); }

.acto.papel .track-record, .acto.papel .pulse { box-shadow: 0 18px 50px rgba(14,25,42,.14); }

/* ───────────────── acto 8: corte del sistema ───────────────── */
.corte { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; width: 100%; max-width: 1140px; }
.corte-dibujo { position: relative; height: min(62vh, 560px); }
.corte-dibujo .lineart { object-position: center; }
.guia-nivel { position: absolute; left: 8%; right: 8%; height: 1px; background: var(--tinta-tenue); opacity: .35; transition: background var(--t-fast) var(--ease-data), opacity var(--t-fast) var(--ease-data); }
.guia-nivel.activa { background: var(--deep-teal); opacity: .9; }
.niveles-sistema { list-style: none; counter-reset: n; display: grid; grid-template-columns: 1fr; gap: 14px; }
/* MUCHO MAS GRANDES (Gabriel, 2026-09-15): antes el titulo iba a 12 px, el
   numero a 10 y el cuerpo a 11,5. El numero va a la izquierda, a dos filas. */
.niveles-sistema li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start;
  border: 1px solid var(--linea); border-top: 3px solid var(--texto-tenue); border-radius: 6px;
  padding: 22px 24px 24px; letter-spacing: 0; font-weight: 400;
  position: relative; background: rgba(247,247,247,.85);
  transition: border-top-color var(--t-ui) var(--ease-data), background var(--t-ui) var(--ease-data), box-shadow var(--t-ui) var(--ease-data);
}
.niveles-sistema li.activa { border-top-color: var(--deep-teal); background: #fff; box-shadow: 0 14px 36px rgba(14,25,42,.10); }
.niveles-sistema li.activa .num { color: var(--deep-teal); }
.niveles-sistema .num { grid-row: 1 / span 2; font-size: clamp(30px, 2.6vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--texto-tenue); font-variant-numeric: tabular-nums; padding-top: 2px; }
.niveles-sistema b { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; line-height: 1.2; }
.niveles-sistema small { display: block; margin-top: 6px; font-size: clamp(14.5px, 1.05vw, 17px); font-weight: 400; letter-spacing: 0; color: var(--texto-suave); line-height: 1.6; max-width: 46ch; }

/* ───────────────── acto 9: la reaparicion (canvas) + consola ───────────────── */

#acto9 .scrim-lateral { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9,19,33,.66) 0%, rgba(9,19,33,.42) 42%, rgba(9,19,33,0) 72%); }
#acto9 .lienzo-contenido { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 clamp(24px, 7vw, 110px); }
#acto9 .rev { opacity: 0; }
/* Mientras el encandilamiento aun tiene la pantalla en blanco, el degradado
   oscuro del acto 9 no pinta nada: entraria como una mancha sobre el papel.
   Aparece cuando la luminancia MEDIDA del fotograma dice que ya es de noche. */
#acto9.aclarado .scrim-lateral { opacity: 0; }
#acto9 .scrim-lateral { transition: opacity .35s linear; }


/* ── ACTO 5 NOCTURNO (v7): el haz de fondo y las tarjetas que revela ──
   Mismo patron que el acto 9, que ya estaba resuelto: canvas al fondo,
   degradado direccional y contenido flotando encima. */

#acto5 .scrim-lateral { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,19,33,.72) 0%, rgba(9,19,33,.46) 46%, rgba(9,19,33,0) 76%);
  transition: opacity .35s linear; }
/* MISMA PROTECCION QUE EL ACTO 9. El degradado existe para leer sobre la noche,
   pero el acto termina en el ENCANDILAMIENTO: con el velo blanco ya puesto, el
   lienzo sigue en pantalla un tramo mas y su degradado quedaba encima del
   blanco como una banda gris de bordes rectos -bien visible en el telefono-.
   Lo decide la luminancia MEDIDA del fotograma, igual que el resto. */
#acto5.aclarado .scrim-lateral { opacity: 0; }
#acto5 .panel-luz.noche { color: var(--bone); }
/* sin JS las cuatro se apilan legibles en vez de quedarse invisibles */
/* sin barrido (secuencia anterior) el acto 5 vuelve a ser de papel */
body.sin-haz #acto5 { background: var(--bone); color: var(--tinta); }
body.sin-haz #acto5 .scrim-lateral { display: none; }
body.sin-haz #acto5 .panel-luz.noche { color: var(--tinta); }
body.sin-canvas #acto5 .panel-producto { opacity: 1; position: relative; top: auto; transform: none; margin: 0 0 18px; }
body.sin-canvas #acto9 .rev { opacity: 1; }
.consola { background: var(--surface); border: 1px solid rgba(247,247,247,.08); border-radius: 6px; padding: 22px 24px; width: 100%; }
.consola figcaption { margin-bottom: 14px; }
/* EL PANEL DE SEGURIDAD EN VERDE (Gabriel, 2026-09-15: «el recuadro azul no
   combina con el fondo; usa el verde del boton»). Es la familia del boton un
   tono mas profundo: el blanco sobre el teal del boton (#12A192) da 3,2:1 y no
   se lee; sobre --teal-panel da 6,5:1. El brillo del boton va en la esquina,
   sin pasar de .35 para que el blanco siga en 4,7. Las variables de suelo se
   redefinen aqui: el hueso de las superficies navy no llega sobre verde. */
#acto9 .consola {
  color: #fff; --tinta: #fff; --texto-suave: rgba(255,255,255,.92); --texto-tenue: rgba(255,255,255,.80);
  --linea: rgba(255,255,255,.22); --acento: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(18,161,146,.35), transparent 55%),
              linear-gradient(170deg, var(--teal-panel-alto) 0%, var(--teal-panel) 45%, var(--teal-panel-bajo) 100%);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 26px 28px;
  box-shadow: 0 24px 60px rgba(3,130,122,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
#acto9 .consola .seguridad-grid h3 { font-size: clamp(15px, 1.05vw, 18px); }
#acto9 .consola .seguridad-grid p { opacity: .9; }

/* ───────────────── acto 10: cierre ───────────────── */
.acto.cierre { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.cierre-cuerpo { position: relative; z-index: 2; max-width: 680px; padding: 20vh 24px; }
.cierre-cuerpo h2 { font-size: clamp(28px, 3.6vw, 48px); }
.lema { margin: 34px 0 26px; font-size: clamp(12px, 0.83vw, 14.5px); letter-spacing: .18em; font-weight: 500; color: var(--teal); }
.lp-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* transicionaba transform y background, pero el secundario cambia BORDE y
   COLOR: el primario se deslizaba y el fantasma saltaba en seco */
.lp-btn { display: inline-block; text-decoration: none; padding: 14px 28px; border-radius: 4px; font-size: clamp(14.5px, .92vw, 17px);
  transition: transform var(--t-fast) var(--ease-data), background var(--t-fast) var(--ease-data),
              border-color var(--t-fast) var(--ease-data), color var(--t-fast) var(--ease-data); }
.lp-btn.primario { background: var(--teal); color: #fff; font-weight: 600; }
.lp-btn.primario:hover { background: #17B8A6; transform: translateY(-1px); }
.lp-btn.fantasma { border: 1px solid rgba(247,247,247,.3); color: var(--bone); }
.lp-btn.fantasma:hover { border-color: var(--teal); color: var(--teal); }
/* Nacio para el cierre, que va sobre la noche, con el color escrito a mano en
   hueso. La MISMA linea se reutiliza en el hero, que es papel: alli era blanca
   sobre blanca -invisible-, y encima se le bajaba la opacidad. Ahora el color
   lo pone el suelo del acto. */
.nota-beta { margin-top: 20px; font-size: clamp(12.5px, .8vw, 14.5px); font-weight: 400; letter-spacing: .01em; color: var(--texto-suave); }

/* ───────────────── footer legal ───────────────── */
.lp-footer { background: var(--navy); border-top: 1px solid var(--linea-navy); padding: 38px clamp(20px, 6vw, 90px) 46px; text-align: center; color: var(--hueso-suave); }
.lp-footer p { font-size: clamp(11.5px, 0.80vw, 13.5px); line-height: 1.7; max-width: 780px; margin: 0 auto 14px; }
.lp-footer-links { font-size: clamp(12px, 0.83vw, 14.5px); }
.lp-footer-links a { color: var(--teal); text-decoration: underline; }

/* ───────────────── contenido 2026-09-14 ─────────────────
   Piezas nuevas del texto definitivo. Reutilizan los tokens y los componentes
   que ya existen; ninguna toca la animacion, el faro ni las capas. */

/* el acceso dentro del primer bloque del acto 1 */
.ctas-hero { margin-top: 26px; justify-content: flex-start; }
/* sin la opacidad de antes: sobre papel restaba justo lo que hacia falta leer */
.copy .nota-beta { margin-top: 12px; }
/* El boton secundario nacio para el cierre, que va sobre la noche: su borde y
   su letra son color hueso. En la primera pantalla, que es papel, quedaba
   BLANCO SOBRE BLANCO -invisible-. Aqui va en tinta. */
.acto.papel .lp-btn.fantasma { border-color: rgba(14,25,42,.3); color: var(--tinta); }
.acto.papel .lp-btn.fantasma:hover { border-color: var(--deep-teal); color: var(--deep-teal); }

/* LEGIBILIDAD sobre la toma. El velo de papel original desvanecia demasiado
   pronto y, cuando llega el mar -cielo y agua claros-, la frase de apoyo se
   perdia sobre el fondo. Se refuerza el centro y se alarga la caida, sin
   convertirlo en una caja opaca que tape el faro. */
.copy.centrado {
  background: radial-gradient(ellipse 128% 104% at 32% 50%,
              rgba(247,247,247,.90) 0%, rgba(247,247,247,.74) 52%, rgba(247,247,247,0) 100%);
}
/* Este bloque cae sobre el ANOCHECER, no sobre la noche cerrada: el cielo
   todavia tiene luz y el velo al 80 % dejaba el antetitulo teal en 1,79:1
   -medido-. Un punto mas de velo y se lee sin tapar el faro. */
.copy.centrado.claro {
  background: radial-gradient(ellipse 128% 104% at 32% 50%,
              rgba(9,19,33,.88) 0%, rgba(9,19,33,.68) 52%, rgba(9,19,33,0) 100%);
}
.copy.centrado .frase { opacity: 1; }

/* titulo de segundo nivel dentro de una columna de texto */
.sub-editorial { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; margin: 30px 0 10px; }

/* desplegables: elemento nativo, sin JS (la CSP prohibe guiones en linea) */
.desplegable { border-top: 1px solid var(--linea); padding: 14px 0; }
.desplegable summary { cursor: pointer; font-size: clamp(15.5px, 1.08vw, 18px); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: "+"; font-weight: 300; color: var(--teal); font-size: 26px; line-height: 1; flex: none; }
.desplegable[open] summary::after { content: "−"; }
.desplegable p { font-size: clamp(14px, 0.97vw, 16.5px); line-height: 1.7; opacity: .82; margin-top: 12px; max-width: 70ch; }
.preguntas { width: 100%; max-width: 780px; margin: 0 auto; }
.preguntas .desplegable:last-child { border-bottom: 1px solid var(--linea); }

/* EL COSTO: UNA ficha protagonista (2026-09-15; Gabriel: «mas grande y
   llamativa, en el estilo FARO») y la referencia del gasto detras de un «+».
   Navy con brillo teal: la superficie mas llamativa que ya existe, y hereda
   las variables de suelo con solo estar en el selector de superficies. */
.ficha-precios {
  position: relative; overflow: hidden; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px);
  max-width: 980px; margin: 0 auto; padding: clamp(26px, 2.6vw, 40px);
  border-radius: 12px; border: 1px solid rgba(247,247,247,.10);
  background: radial-gradient(70% 60% at 100% 0%, rgba(18,161,146,.22), transparent 60%), var(--surface);
  box-shadow: 0 24px 60px rgba(14,25,42,.18);
}
.precio-col + .precio-col { border-left: 1px solid var(--linea); padding-left: clamp(28px, 3vw, 48px); }
.precio-grande { margin-top: 14px; font-size: clamp(44px, 4.2vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--acento); font-variant-numeric: tabular-nums; }
.precio-grande .moneda { font-size: .5em; vertical-align: top; font-weight: 600; margin-right: .06em; line-height: 1.4; }
.precio-grande .unidad { display: block; margin-top: 8px; font-size: clamp(13px, .95vw, 16px); font-weight: 500; letter-spacing: .02em; color: var(--texto-suave); }
.precio-sub { margin-top: 6px; font-size: clamp(14px, 1vw, 17px); font-weight: 400; }
/* EL DESCUADRE, DE RAIZ: una rejilla dt/dd con el valor SIEMPRE a la derecha.
   Antes cada fila era un flex-wrap y el valor caia debajo cuando el texto era
   largo, asi que unas filas lo tenian al lado y otras abajo. */
.precio-lineas { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; margin-top: 18px; }
.precio-lineas dt, .precio-lineas dd { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: clamp(13.5px, .94vw, 16px); line-height: 1.45; }
.precio-lineas dt { color: var(--texto-suave); }
.precio-lineas dd { text-align: right; margin: 0; }
.precio-lineas strong { font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }
.ficha-precios .pie-panel { margin-top: 14px; }
/* el boton «+»: un circulo con dos barras que rota 45 grados al abrir (se
   vuelve una x sin cambiar de contenido); el cuerpo se despliega con un
   keyframe de rejilla (el contenido de details nace en display:none, asi que
   una transition no arrancaria; una animation si corre al insertarse) */
.desplegable-mas { width: 100%; max-width: 780px; margin: 10px auto 0; border: 0; }
.desplegable-mas summary { justify-content: flex-start; gap: 16px; font-size: clamp(16px, 1.15vw, 19px); }
/* sin el «+»/«−» de texto de los desplegables normales: el circulo lo sustituye
   (la regla [open] generica gana en especificidad, por eso las dos) */
.desplegable-mas summary::after, .desplegable-mas[open] summary::after { content: none; }
.mas { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--acento); position: relative; transition: transform var(--t-ui) var(--ease-data), background var(--t-fast) var(--ease-data); }
.mas::before, .mas::after { content: ""; position: absolute; inset: 0; margin: auto; background: #fff; border-radius: 1px; }
.mas::before { width: 18px; height: 2px; }
.mas::after { width: 2px; height: 18px; }
.desplegable-mas[open] .mas { transform: rotate(45deg); }
.desplegable-mas summary:hover .mas { background: #17B8A6; }
.desplegable-mas summary:focus-visible .mas { box-shadow: 0 0 0 3px var(--bone), 0 0 0 5px var(--foco); }
/* dentro de la ficha (Gabriel, 16-sep): ocupa las dos columnas abajo, con su
   linea de separacion; el anillo de foco se apoya en la superficie navy */
.ficha-precios .desplegable-mas { grid-column: 1 / -1; max-width: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linea); }
.ficha-precios .desplegable-mas summary:focus-visible .mas { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--teal); }
.desplegable-cuerpo { display: grid; grid-template-rows: 1fr; overflow: hidden; }
.desplegable-cuerpo > div { min-height: 0; padding: 12px 0 6px 60px; }
.desplegable-mas[open] .desplegable-cuerpo { animation: abrir var(--t-ui) var(--ease-editorial); }
@keyframes abrir { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.desplegable-mas p { font-size: clamp(15px, 1.04vw, 17.5px); line-height: 1.7; margin-top: 0; }
.desplegable-mas p + p { margin-top: 8px; }
.desplegable-mas strong { font-size: 1.1em; color: var(--acento); font-weight: 700; }

/* ───────────────── contenido 2026-09-22 ─────────────────
   El texto y las piezas de la propuesta que Gabriel aprobo (orden editorial,
   titulares, ejemplo explicado, precios en dos situaciones), montados SOBRE
   los actos de siempre. Nada de esto toca el faro, las capas ni el motor. */

/* los accesos de la barra a los actos que fluyen */
.lp-nav-ancla { white-space: nowrap; }
/* el ancla nativa (sin Lenis) deja el destino por debajo de la barra fija */
#ejemplo, #como-funciona, #precios { scroll-margin-top: 72px; }

/* el dato del catalogo bajo el acceso de la bienvenida */
.dato-activos { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.num-activos { font-size: clamp(26px, 2vw, 34px); font-weight: 600; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.k-activos { font-size: clamp(12.5px, .8vw, 14px); color: var(--texto-suave); max-width: 8em; line-height: 1.3; }
.lema-activos { padding-left: 14px; border-left: 1px solid var(--linea); font-size: clamp(12.5px, .8vw, 14px); line-height: 1.45; color: var(--texto-suave); }
.nota-beta a { color: var(--acento); }

/* el texto del ejemplo no pasa de su media columna: el plano del faro se
   dibuja en el centro de la pantalla y la lista larga lo cruzaba */
@media (min-width: 901px) { #acto3 .col-texto { max-width: 470px; } }
/* las tres partes de la lectura: numero, titulo y explicacion */
.partes-lectura li { align-items: flex-start; }
.partes-lectura .mono { width: 26px; padding-top: 3px; }
.partes-lectura b { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 2px; }

/* el acceso al informe archivado */
.franja-ejemplo { margin-top: 28px; padding: 18px 22px; border-left: 3px solid var(--deep-teal); background: #ECEEEF; border-radius: 0 6px 6px 0; }
/* fondo SOLIDO, el mismo tono que daba el 4,5 % de navy sobre el papel: con
   el transparente, en 390×915 las lineas del faro cruzaban el 6,7 % del texto */
.franja-ejemplo p { font-size: clamp(13.5px, .92vw, 15.5px); line-height: 1.6; color: var(--texto-suave); }
.franja-ejemplo strong { color: var(--tinta); font-weight: 600; }
.franja-ejemplo a, .enlace-limites a { display: inline-block; margin-top: 10px; color: var(--acento); font-weight: 500; font-size: clamp(13.5px, .92vw, 15.5px); text-underline-offset: 3px; }
.copy.centrado.claro .enlace-limites a { color: var(--teal); }
.enlace-limites { margin-top: 4px; }

/* la nota que acompaña al seguimiento, debajo de sus dos columnas */
.nota-seguimiento { grid-column: 1 / -1; max-width: 80ch; font-size: clamp(12.5px, .85vw, 14.5px); line-height: 1.65; color: var(--texto-suave); }

/* EL COSTO EN DOS SITUACIONES: la beta en papel y el precio posterior en navy.
   La mitad de papel redefine sus variables de suelo -el color lo decide la
   superficie, no la ficha que la contiene (regla del 14-sep)-. */
.ficha-precios.dos-situaciones { gap: 0; padding: 0; }
.dos-situaciones .precio-col { padding: clamp(26px, 2.6vw, 40px); }
.dos-situaciones .precio-col + .precio-col { border-left: 0; }
.precio-beta {
  background: #E6EEEB;
  --tinta: var(--navy); --texto-suave: var(--tinta-suave); --texto-tenue: rgba(14,25,42,.58);
  --linea: var(--linea-papel); --acento: var(--deep-teal);
  color: var(--navy);
}
.precio-beta .precio-grande { color: var(--navy); }
.precio-beta .precio-sub strong { font-weight: 700; }
.precio-beta .lp-btn { margin-top: 22px; }
.precio-lineas dd small { display: block; margin-top: 2px; font-size: .82em; color: var(--texto-tenue); }
.dos-situaciones .desplegable-mas { margin: 0; padding: 18px clamp(26px, 2.6vw, 40px) 22px; }

/* el cierre: el lema pasa a antetitulo */
.cierre-cuerpo .lema { margin: 0 0 18px; }
.cierre-cuerpo .frase { margin-bottom: 30px; }

@media (max-width: 900px) {
  /* en el telefono la barra solo lleva acceso y registro: cabe en una linea */
  .lp-nav-ancla { display: none; }
  .ficha-precios.dos-situaciones { padding: 0; }
  .dos-situaciones .precio-col { padding: 24px 18px; }
  .dos-situaciones .precio-col + .precio-col { border-top: 0; padding: 24px 18px; }
  .dos-situaciones .desplegable-mas { padding: 16px 18px 20px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .lp-nav nav { gap: 12px; }
}

/* seguridad en cuatro grupos */
.seguridad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.seguridad-grid h3 { font-size: clamp(14px, 1vw, 17px); font-weight: 600; margin-bottom: 5px; }
.seguridad-grid p { font-size: clamp(12.5px, 0.87vw, 15px); line-height: 1.65; opacity: .78; }

/* pie de la maqueta de producto */
.pulse-pie { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(247,247,247,.08); font-size: 10.5px; letter-spacing: .02em; opacity: .6; }

/* RED DE SEGURIDAD: en los actos clavados el bloque vive dentro de un lienzo
   con overflow oculto, asi que lo que no cabe se pierde sin forma de llegar a
   el. Con alto maximo y desplazamiento propio, el texto largo sigue siendo
   alcanzable en pantallas bajas. Los bloques llevan data-lenis-prevent para
   que el desplazamiento suave no se coma el gesto.

   🔴 NADA DE `overscroll-behavior: contain` AQUI. Lo llevaba, y en el telefono
   DEJABA LA PAGINA TRABADA: el primer bloque es un contenedor desplazable que
   ocupa la pantalla, y `contain` corta el encadenamiento con la pagina —
   incluso cuando el bloque NO tiene nada que desplazar—, asi que el dedo movia
   un bloque quieto y la landing entera no bajaba. Con el valor normal, el
   gesto desplaza el bloque mientras tenga recorrido y sigue con la pagina
   cuando se acaba, que es justo lo que se espera.
   ⚠️ Un recorrido con `window.scrollTo` NO ve esto: hay que arrastrar. */
.copys .copy, .copy.centrado, #acto5 .panel-producto, #acto9 .consola {
  max-height: calc(100svh - 150px); overflow-y: auto; overscroll-behavior-y: auto;
}
/* La bienvenida se lee completa: no debe tener desplazamiento propio. */
#acto1 [data-copy="a1-1"] { max-height: none; overflow: visible; }
@media (min-width: 901px) and (max-height: 720px) {
  #acto1 .copys { padding: 84px 0 24px; }
  #acto1 [data-copy="a1-1"] .eyebrow { margin-bottom: 12px; }
  #acto1 [data-copy="a1-1"] h1 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 10px; }
  #acto1 [data-copy="a1-1"] .cuerpo { font-size: 14px; line-height: 1.6; }
  #acto1 .ctas-hero { margin-top: 12px; gap: 8px; }
  #acto1 .ctas-hero .lp-btn { padding: 11px 18px; font-size: 14px; }
  #acto1 .copy .nota-beta { margin-top: 9px; font-size: 11px; line-height: 1.5; }
}
/* en pantallas bajas se compacta antes de tener que desplazar nada */
@media (max-height: 720px) {
  /* Y el bloque se centra RESPETANDO la barra: con 610 px de alto -la ventana
     de Gabriel- un bloque de tres parrafos centrado en la pantalla arrancaba
     en y=59 y su titular quedaba por debajo de la barra, medido. */
  .copys { padding-top: 84px; }
  .copy h1 { font-size: clamp(28px, 3vw, 46px); }
  .copy h2, .col-texto h2 { font-size: clamp(24px, 2.4vw, 38px); }
  .copy .cuerpo, .copy .frase { font-size: 14px; }
  .ctas-hero { margin-top: 16px; }
}

.lp-footer { position: relative; z-index: 2; --foco: var(--teal); }
/* El foco tambien tiene dos suelos: el teal claro sobre papel se queda en 2,5:1
   -por debajo del minimo legible-, asi que sobre papel va el teal profundo. */
a:focus-visible, summary:focus-visible, .lp-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

/* ── PANTALLAS ESTRECHAS (hasta 380 px) ──
   Lo que en 390 cabe en dos columnas aqui se apila: las lineas de la ficha de
   precios, la cabecera de la tarjeta de sugerencia y la frase del acto 4. */
@media (max-width: 380px) {
  #acto4 .copy.centrado .frase { font-size: 14px; line-height: 1.5; }
  /* en 360 px la ficha de precios y la tarjeta de sugerencia apilan sus filas */
  .precio-lineas { grid-template-columns: 1fr; }
  .precio-lineas dt { padding-bottom: 0; border-bottom: 0; }
  .precio-lineas dd { text-align: left; padding-top: 2px; }
  .tc-cab { flex-direction: column; }
  .pildora { padding: 8px 14px; font-size: 14.5px; }
  .tc-grafica svg { height: 72px; }
}

/* ── LA BARRA SUPERIOR EN EL TELEFONO ──
   Medida: 90 px de alto porque los tres elementos no caben en una linea y el
   navegador parte «Iniciar sesion» y «Solicitar acceso» en dos. Ocupaba una
   novena parte de la pantalla y se leia como un encabezado desordenado. Se
   aprieta lo justo para que quepa en una sola linea; ningun texto se acorta. */
@media (max-width: 620px) {
  .lp-nav { padding: 11px 16px; }
  .lp-marca { gap: 7px; }
  .lp-marca span { font-size: 11.5px; letter-spacing: .1em; white-space: nowrap; }
  .lp-marca svg { width: 20px; height: 18px; }
  .lp-nav nav { gap: 9px; }
  .lp-nav-link { font-size: 12px; white-space: nowrap; }
  .lp-btn-nav { padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
}

/* ── EL FONDO DE LA BARRA EN UNA COLUMNA (≤ 900 px) ──
   Gabriel, 2-oct (captura del teléfono): las cotas del plano y el «4,7 m»
   pasaban por encima de «Iniciar sesión» y cruzaban «MARKETS». El degradado
   de arriba llega a 0 % justo en el borde inferior de la barra, así que a la
   altura del texto la barra ya es medio transparente. Aquí la barra es SÓLIDA
   detrás de todo su alto y el desvanecido vive DEBAJO de ella (--nav-velo):
   lo que sube al hacer scroll se apaga antes de tocar el texto, sin un borde
   duro. Sigue sin `backdrop-filter` (ver arriba: emborrona el faro). El color
   lo pone el suelo de cada momento: papel o noche. En el teléfono la punta del
   faro queda por debajo de esta franja (medido en 390 × 844 y 390 × 915). */
@media (max-width: 900px) {
  .lp-nav { --nav-fondo: 247, 247, 247; --nav-velo: 26px; }
  body[data-tema="noche"] .lp-nav { --nav-fondo: 9, 19, 33; }
  body[data-tema] .lp-nav { background: none; }
  .lp-nav::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    bottom: calc(-1 * var(--nav-velo)); z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgb(var(--nav-fondo)) 0,
      rgb(var(--nav-fondo)) calc(100% - var(--nav-velo)),
      rgba(var(--nav-fondo), 0) 100%);
  }
}
/* Y en las pantallas mas estrechas que existen (320-340 px) sigue sin caber:
   la marca se queda en el simbolo y FARO, que es como firma en un espacio
   pequeño. El nombre completo vuelve en cuanto hay sitio. */
@media (max-width: 349px) {
  .lp-marca b { display: none; }
}

/* ── EL TRAMO QUE FALTABA: portatil pequeño y tableta (901-1200 px) ──
   Habia un solo punto de corte, en 900 px. Justo por encima, el faro conserva
   su tamaño de escritorio pero la pantalla ya no da para las dos columnas:
   medido a 1000 px, la caja del plano invadia 195 px de la columna de texto y
   las llamadas del plano -«ECONOMÍA Y MUNDO»- se montaban sobre el antetitulo
   del acto. El faro no se toca: solo se le da menos ancho al DIBUJO y se
   estrecha el texto, que es lo que el JS vuelve a medir y recolocar solo. */
@media (min-width: 901px) and (max-width: 1200px) {
  .plano-wrap { right: 2vw; width: min(40vw, 400px); }
  .copys { width: min(38vw, 360px); left: clamp(20px, 3.2vw, 44px); }
  .copys .copy h1 { font-size: clamp(30px, 3.4vw, 42px); }
  .copys .copy h2 { font-size: clamp(25px, 2.9vw, 36px); }
  .velo-copys { padding-left: clamp(20px, 3.2vw, 44px); }
  .copy.centrado { max-width: min(46vw, 440px); }
  /* La llamada «Economía y mundo» cuelga a la izquierda de su punto del faro y
     cae justo a la altura del antetitulo: a este ancho las dos se pisaban
     letra sobre letra. El texto baja lo justo para cruzarse por debajo, y las
     llamadas llevan papel detras por si algo vuelve a pasar cerca. */
  .copys { padding-top: 96px; }
  .etq.dim { background: rgba(247,247,247,.9); padding: 2px 7px 4px; }
}

/* ───────────────── responsive ───────────────── */
@media (max-width: 900px) {
  /* el faro entero, centrado, bajo el nav, sin recortes (anotacion 2026-09-02) */
  .plano-wrap {
    /* centrado por LAYOUT (left), jamas por transform: el transform es
       propiedad exclusiva de GSAP (zoom del acto 3 y viaje del acto 4) */
    left: 18vw; right: auto; transform: none; width: 64vw;
    top: 11vh; bottom: auto; height: 54vh; opacity: 1;
  }
  .lineart { object-position: center; }
  .nota { font-size: 9px; }
  .nota.izq { left: 0 !important; }
  .nota.der { right: 0 !important; }
  .nota::after { display: none; }
  .cat, .senales { display: none; }
  .dim { font-size: 9px; background: rgba(247,247,247,.88); padding: 3px 7px; border-bottom-width: 1px; }
  /* los 4 cimientos: chips en los FLANCOS de la base (los lados estan
     libres; abajo vive el copy con su scrim) */
  .a2d-1 { left: -24% !important; right: auto !important; top: 76% !important; }
  .a2d-2 { left: -24% !important; right: auto !important; top: 85% !important; }
  .a2d-3 { right: -26% !important; left: auto !important; top: 72% !important; max-width: 34vw; white-space: normal; text-align: right; line-height: 1.55; }
  .a2d-4 { right: -26% !important; left: auto !important; top: 84% !important; max-width: 34vw; white-space: normal; text-align: right; line-height: 1.55; }
  .tramo { background: rgba(247,247,247,.88); padding: 3px 7px; right: -10% !important; }
  /* los copys abajo, con scrim de papel para leer sobre el dibujo.
     La banda llega hasta el 62 % del alto porque el primer bloque trae ahora
     los dos parrafos de presentacion y los botones de acceso: con 34vh el
     texto crecia hacia arriba y se salia del velo, encima del faro. */
  .copys {
    /* La banda se fijo en 62vh pensando en pantallas de 844 px. En un telefono
       mas alto (915) el bloque crece mas que la banda, se sale por arriba y su
       titular queda CORTADO contra la barra -medido: y=-14-. Ahora la banda
       acompaña a la pantalla sin llegar nunca a la barra. */
    width: 100vw; left: 0; top: auto; bottom: 0;
    height: min(70vh, calc(100svh - 96px));
    align-items: flex-end; padding: 0 22px 4vh;
    background: linear-gradient(transparent, rgba(247,247,247,.90) 16%, rgba(247,247,247,.97) 34%);
  }
  .copys .copy h1 { font-size: clamp(27px, 8.2vw, 36px); }
  .copys .copy h2 { font-size: clamp(23px, 6.6vw, 30px); }
  .copys .copy .cuerpo, .copys .copy .frase { font-size: 14.5px; line-height: 1.6; }
  .ctas-hero { margin-top: 16px; gap: 8px; }
  .ctas-hero .lp-btn { padding: 11px 18px; font-size: 14px; }
  .copy .nota-beta { margin-top: 9px; font-size: 11px; line-height: 1.5; }
  .copy { position: absolute; max-width: calc(100vw - 48px); }
  .tramo-flujo { grid-template-columns: 1fr; }
  .corte { grid-template-columns: 1fr; }
  .corte-dibujo { height: 44vh; }
  .niveles-sistema { max-width: 520px; gap: 10px; }
  .niveles-sistema li { padding: 16px 16px 18px; column-gap: 14px; }
  .niveles-sistema .num { font-size: 26px; }
  .niveles-sistema b { font-size: 17px; }
  .niveles-sistema small { font-size: 14px; }
  .velo-copys { justify-content: center; align-items: flex-end; padding: 0 0 12vh; }
  /* EL VELO DEL ACTO 4, CENTRADO. Su degradado nace en el 32 % del ancho
     porque en escritorio el bloque vive a la izquierda; en el telefono el
     bloque va centrado y el velo dejaba los bordes al aire, con las lineas del
     faro cruzando las palabras (medido: hasta el 12 % del area). */
  /* El velo se mantiene denso hasta el 78 % del radio y funde solo en el tramo
     exterior, donde ya no hay texto. Adelgazandose desde el 58 %, la ultima
     linea de la frase caia en la zona rala y en un telefono de 915 px de alto
     -donde el faro se dibuja mas grande- sus lineas cruzaban el 7,0 % del area
     (medido el 2026-09-15 contra produccion y reproducido en local). */
  .copy.centrado {
    background: radial-gradient(ellipse 136% 118% at 50% 50%,
                rgba(247,247,247,.96) 0%, rgba(247,247,247,.90) 78%, rgba(247,247,247,0) 100%);
  }
  .copy.centrado.claro {
    background: radial-gradient(ellipse 136% 118% at 50% 50%,
                rgba(9,19,33,.92) 0%, rgba(9,19,33,.82) 78%, rgba(9,19,33,0) 100%);
  }
  /* El boton secundario no tiene fondo: sobre la noche del cierre el faro se
     ve A TRAVES de el y sus lineas cruzan la palabra (medido: 7,3 % en 360 px).
     Un fondo apenas perceptible lo asienta sin convertirlo en un boton mas. */
  .acto.noche .lp-btn.fantasma { background: rgba(9,19,33,.55); }
  /* y el cierre, que se apoya en la noche con el faro encendido detras */
  #acto10::before { background: rgba(9,19,33,.62); }
  .copy.centrado { text-align: center; max-width: calc(100vw - 48px); }
  .acto.pin#acto9 { height: 130vh; }
  /* LOS VELOS NOCTURNOS, REORIENTADOS PARA EL TELEFONO. Nacieron en 90 grados
     -de izquierda a derecha- porque en escritorio el texto vive a la izquierda
     y el haz a la derecha. En una sola columna el texto va DEBAJO de la
     linterna, asi que el velo tiene que caer de arriba abajo: arranca
     transparente para no tapar la linterna ni el haz, y se cierra justo donde
     empieza el texto (--texto-top). Medido: los antetitulos «El informe» y
     «Seguridad» se quedaban en 1,3 y 1,8 contra 1. */
  #acto9 .scrim-lateral { background: linear-gradient(rgba(9,19,33,0) 6%, rgba(9,19,33,.62) 24%, rgba(9,19,33,.84) 46%); }
  #acto5 .scrim-lateral { background: linear-gradient(rgba(9,19,33,0) 6%, rgba(9,19,33,.72) 20%, rgba(9,19,33,.86) 40%); }
  /* en el telefono el bloque (titulo + 8 medidas) es mas alto que la banda
     inferior: se alinea arriba, bajo el nav, y se compacta */
  /* el padding lo fija mas abajo --texto-top (la franja bajo la linterna):
     aqui iba un `padding: 13vh 20px 4vh` que la regla posterior pisaba entera */
  #acto9 .lienzo-contenido { align-items: flex-start; }
  #acto9 .tramo-flujo { padding: 0; gap: 14px; }
  #acto9 .col-texto h2 { font-size: clamp(24px, 6.4vw, 30px); margin-bottom: 8px; }
  #acto9 .consola { padding: 16px 18px; }
  /* Centrado por LAYOUT (left/right), no por transform: asi el desplazamiento
     de entrada que anima GSAP sigue siendo suyo. Antes un transform con
     !important lo anulaba y la tarjeta solo aparecia y desaparecia. */
  .panel-producto, .acto.papel .panel-producto {
    left: 20px; right: 20px; width: auto; max-width: none;
    top: var(--texto-top); transform: none;
  }
  /* El bloque de entrada del acto 5 comparte SITIO con su primera tarjeta
     (las dos en --texto-top): darle caja propia hacia asomar un recuadro por
     detras de la tarjeta. Se queda sin caja y quien lo hace legible es el velo
     del acto, que en el telefono cierra antes -justo encima de donde arranca
     el texto- en vez de tapar la linterna. */
  /* Velo PROPIO, en degradado y sin bordes: cae sobre la linterna encendida,
     que es lo mas claro de la escena, y ahi el velo del acto no alcanza. Un
     recuadro con borde no sirve: comparte sitio con la primera tarjeta y se
     veria asomar por detras. El degradado se funde y no deja costura. */
  .panel-luz { left: 20px; right: 20px; top: var(--texto-top);
    padding: 16px 14px 18px;
    background: radial-gradient(ellipse 130% 112% at 42% 50%,
                rgba(9,19,33,.88) 0%, rgba(9,19,33,.66) 56%, rgba(9,19,33,0) 100%); }
  .acto.pin { height: 200vh; }
  .acto.pin#acto4 { height: 480vh; }
  .acto.pin#acto5 { height: 220vh; }
  .hint { display: none; }

  /* ── EL TEXTO SOBRE EL FARO, EN EL TELEFONO ──
     En escritorio el texto vive a la izquierda y el faro a la derecha: no se
     tocan. En el telefono hay una sola columna y el texto cae ENCIMA del
     dibujo; medido, las lineas del faro cruzaban hasta el 13 % del area de un
     titular y la pantalla se volvia ilegible (Gabriel la fotografio).
     Los actos 6, 7 y 8 no necesitan nada: el velo blanco ya esta puesto. El 3
     es el unico que se apoya en el faro desnudo, y se resuelve como lo que es
     -una ficha de lectura sobre el plano-: papel, borde de tinta y sombra. */
  #acto3 .col-texto {
    position: relative; z-index: 2;
    background: rgba(247,247,247,.94);
    border: 1px solid var(--linea-papel); border-radius: 8px;
    padding: 22px 18px;
    box-shadow: 0 10px 30px rgba(14,25,42,.10);
  }
  #acto3 .tramo-flujo { padding: 6vh 0; }

  /* Y en los actos 1 y 2 la banda de papel empieza antes: su degradado nacia
     transparente justo donde se apoya la primera linea del bloque, asi que el
     dibujo cruzaba el titular por arriba. */
  .copys {
    background: linear-gradient(transparent, rgba(247,247,247,.92) 8%, rgba(247,247,247,.98) 22%);
  }

  /* ── contenido 2026-09-14 en telefono ──
     La linterna del faro vive en la franja alta de la pantalla: todo bloque
     que se apoye sobre el canvas arranca POR DEBAJO de ella. */
  :root { --texto-top: max(150px, 23svh); }
  .copys .copy, .copy.centrado, #acto5 .panel-producto, #acto9 .consola {
    max-height: calc(100svh - var(--texto-top) - 40px);
  }
  /* y los de la banda, dentro de la banda: si el bloque puede ser mas alto que
     ella, vuelve a asomar por arriba */
  .copys .copy { max-height: calc(70vh - 40px); }
  .seguridad-grid { grid-template-columns: 1fr; }
  .tc-datos { grid-template-columns: 1fr; }
  /* la ficha de precios en una columna, con la linea entre las dos mitades */
  .ficha-precios { grid-template-columns: 1fr; padding: 22px 18px; }
  .precio-col + .precio-col { border-left: 0; border-top: 1px solid var(--linea); padding: 22px 0 0; }
  .precio-grande { font-size: 44px; }
  .desplegable-cuerpo > div { padding-left: 0; }
  .pulse-pie { flex-direction: column; gap: 5px; }
  .desplegable summary { font-size: 14.5px; }
  .desplegable-mas summary { font-size: 15.5px; }
  /* La tabla de seguimiento en el telefono: «+0,8 %» se partia en dos lineas
     -el numero arriba y el simbolo debajo- y la cabecera perdia «Sugerencia».
     Las cifras no se parten y la primera columna manda. */
  .track-record td.mono, .track-record th.mono { white-space: nowrap; }
  .track-record th { font-size: 9.5px; letter-spacing: .06em; padding: 8px 5px; }
  .track-record td { padding: 10px 5px; }
  .track-record th:first-child, .track-record td:first-child { width: 42%; }
  #acto9 .lienzo-contenido { padding: var(--texto-top) 20px 4vh; }
  #acto9 .seguridad-grid { gap: 12px; }
  #acto9 .seguridad-grid p { font-size: 11.5px; }
}

/* ───────────────── reduced motion: la historia completa, quieta ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .acto.pin { height: auto !important; }
  .lienzo { position: relative; height: auto; min-height: 100vh; padding: 14vh 0; }
  .copy, .nota, .cat, .dim, .tramo, .senales, .panel-luz, .panel-producto { opacity: 1 !important; position: static !important; transform: none !important; margin: 20px clamp(24px, 7vw, 110px); }
  .copys { position: static; height: auto; display: block; }
  #lienzo-faro, #grid-armado, #flash, #acto9 .scrim-lateral, #acto5 .scrim-lateral { display: none; }
  #escenario-faro { background: none; }
  /* el acto 5 nocturno cae a papel legible: sin movimiento no hay haz que revele */
  #acto5 { background: var(--bone); color: var(--tinta); }
  #acto5 .panel-producto { opacity: 1; position: relative; top: auto; transform: none; margin: 0 0 18px; }

  #acto9 .lienzo-contenido { position: static; display: block; padding: 0; }
  #acto9 .rev { opacity: 1 !important; }

  .lineart-wipe { -webkit-mask-image: none; mask-image: none; }
  #escenario-faro { position: static; }
  #escenario-faro .plano-wrap { position: static; transform: none !important; width: min(80vw, 420px); height: 58vh; margin: 100px auto 0; opacity: 1; }
  #escenario-faro .nota, #escenario-faro .cat, #escenario-faro .dim,
  #escenario-faro .tramo, #escenario-faro .senales { display: none; }
  #lienzo-fallback { position: static; display: block; height: auto; }
  .velo-copys { position: static; padding: 30px 0; }
  #flash { display: none; }
  .hint { display: none; }
  /* sin movimiento no hay pin, asi que ningun bloque necesita su propio
     desplazamiento: el texto fluye entero con la pagina */
  .copys .copy, .copy.centrado, #acto5 .panel-producto, #acto9 .consola {
    max-height: none !important; overflow: visible !important;
  }
}


/* ─────────── MODO «SOLO FARO» ───────────
   Para trabajar el comportamiento del faro sin nada delante, y decidir despues
   que informacion entra en cada escena. Se oculta con opacity y NUNCA con
   display: asi las alturas no se mueven ni un pixel y lo que se ve es el ritmo
   real de la landing, con los huecos donde luego ira el texto. */
body.solo-faro .acto,
body.solo-faro .lp-nav,
body.solo-faro .capa-html { opacity: 0 !important; pointer-events: none; }
body.solo-faro #grid-armado { opacity: 0 !important; }

/* ═══════════ FORMATO LIMPIO DE LAS SUPERFICIES DE PRODUCTO (5-oct-2026) ═══════════
   Gabriel: «el formato azul que se muestra ya no es el que se ofrece en la
   interfaz». Desde el 29-sep el panel (Astra) es claro: superficie blanca, borde
   fino, texto navy y el verde de la marca como acento. La tarjeta de sugerencia,
   la tabla de seguimiento, la pantalla de inicio y la ficha de precios se pintan
   igual. Las variables de suelo se redefinen AQUÍ (la regla del 14-sep: el color
   lo decide la superficie, no el acto) y los colores que estaban escritos para
   fondo navy (hueso translúcido, verde y ámbar claros) pasan a su par legible
   sobre blanco. Va al final de la hoja para ganar a las reglas navy de arriba. */
.tarjeta-conviction, .track-record, .pulse, .ficha-precios {
  --surface: #FFFFFF;
  --tinta: #192431;
  --texto-suave: #536172;
  --texto-tenue: #617083;
  --linea: #E3E7EC;
  --acento: #00796E;
  --positive: #1F8A5B;
  --negative: #B83C50;
  color: #192431;
  background: #FFFFFF;
  border: 1px solid #E3E7EC;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(14, 25, 42, .10);
}
.acto.papel .track-record, .acto.papel .pulse { box-shadow: 0 18px 44px rgba(14, 25, 42, .10); }
.chip-demo { color: #00796E; background: #E4F2EF; border: 0; border-radius: 999px; padding: 4px 10px; letter-spacing: .06em; }
.tarjeta-conviction .pildora { background: #E4F2EF; border-color: rgba(0, 121, 110, .35); color: #192431; }
.tarjeta-conviction .pildora::before { background: #00796E; }
.tarjeta-conviction .puntos i { background: #E3E7EC; border-color: #C8D0DA; }
.tarjeta-conviction .puntos i.on { background: #00796E; border-color: #00796E; box-shadow: 0 0 0 3px rgba(0, 121, 110, .14); }
.tarjeta-conviction .barras i { background: #E3E7EC; }
.tarjeta-conviction .barras i.llena { background: #00796E; }
.tarjeta-conviction .tc-grafica .linea { stroke: #00796E; }
.tarjeta-conviction .tc-grafica .ultimo { fill: #00796E; stroke: #FFFFFF; }
.tarjeta-conviction .glifo.marca { color: #00796E; }
.tarjeta-conviction .glifo.aviso { color: #8A5A00; }
.tarjeta-conviction .conclusiones .activa { border-color: #00796E; color: #00796E; font-weight: 600; }
.track-record th { color: #617083; border-bottom-color: #E3E7EC; }
.track-record td { border-bottom-color: #F1F3F6; }
.pulse header { padding-bottom: 2px; }
.pulse .marca-mini { color: #192431; }
.pulse-tabs { color: #617083; }
.pulse-tabs .activa { color: #00796E; border-bottom-color: #00796E; }
.pulse-hero, .pulse-pie { border-color: #E3E7EC; }
.pulse-fila { border-bottom-color: #F1F3F6; }
.pulse-pie { opacity: 1; color: #617083; }

/* La ficha de precios: blanca, con la beta en un tono verde muy claro. */
.ficha-precios.dos-situaciones { overflow: hidden; }
.precio-beta { background: #F1F7F5; --linea: #E3E7EC; }
.ficha-precios .precio-col + .precio-col { border-left: 1px solid #E3E7EC; }
.ficha-precios .precio-grande { color: #192431; }
.precio-grande .mas-iva { display: block; margin-top: 10px; font-size: clamp(14px, 1vw, 17px); font-weight: 500; letter-spacing: 0; color: #536172; }
.precio-total { margin-top: 8px; font-size: clamp(12.5px, .86vw, 14.5px); color: #617083; }
.precio-total strong { font-weight: 600; color: #536172; }
.ficha-precios .desplegable-mas { border-top-color: #E3E7EC; }
/* las líneas de «Saldo de uso» y «Recargas» se cortaban en el hueco entre las
   dos columnas de la rejilla: el hueco pasa a ser relleno del término */
.ficha-precios .precio-lineas { column-gap: 0; }
.ficha-precios .precio-lineas dt { padding-right: 18px; }

/* LA SEGURIDAD SIN RECUADRO (5-oct-2026). Gabriel: «el fondo verde rompe el
   formato limpio». Las cuatro medidas van como lista con un icono de trazo y
   una línea fina entre ellas, sobre un velo navy SIN BORDES: el color sólido
   cubre la caja y una sombra difusa del mismo color lo prolonga hacia fuera,
   así el texto queda sobre fondo parejo (el faro pasa detrás) y no se ve el
   contorno de una caja. Nada de verde de fondo; el verde queda en los iconos. */
#acto9 .consola.seguridad-lista {
  color: #F7F7F7; --tinta: #F7F7F7; --texto-suave: rgba(247, 247, 247, .86); --texto-tenue: rgba(247, 247, 247, .72);
  --linea: rgba(247, 247, 247, .16); --acento: #5FD3C4;
  background: rgba(9, 19, 33, .78);
  border: 0; border-radius: 28px;
  box-shadow: 0 0 46px 34px rgba(9, 19, 33, .78);
  padding: 8px 6px;
}
#acto9 .seguridad-lista figcaption { color: #5FD3C4; letter-spacing: .14em; margin-bottom: 6px; }
#acto9 .seguridad-lista .seguridad-grid { gap: 0 32px; }
#acto9 .seguridad-lista .seguridad-grid > div {
  display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; align-items: start; align-content: start;
  padding: 16px 0; border-top: 1px solid rgba(247, 247, 247, .16);
}
#acto9 .seguridad-lista .seg-icono {
  grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 2px;
  fill: none; stroke: #5FD3C4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#acto9 .seguridad-lista .seguridad-grid h3 { margin-bottom: 4px; }
#acto9 .seguridad-lista .seguridad-grid p { opacity: 1; color: rgba(247, 247, 247, .82); }
@media (max-width: 900px) {
  #acto9 .consola.seguridad-lista { padding: 4px 8px; box-shadow: 0 0 34px 26px rgba(9, 19, 33, .78); }
  #acto9 .seguridad-lista .seguridad-grid > div { padding: 12px 0; }
  .ficha-precios .precio-col + .precio-col { border-left: 0; border-top: 1px solid #E3E7EC; }
}