/* =====================================================================
   SignFlex3D · versión cinemática
   La estética viene de la referencia que pasaste —superficies de vidrio,
   halos de neón, retícula de plano técnico, Sora muy grande y etiquetas
   monoespaciadas— pero con el turquesa de TU manual de marca, no el verde,
   y con tu contenido.

   Reutiliza las mismas clases que la versión clara, así que las páginas
   que no se reescriben heredan el aspecto nuevo sin tocar su HTML.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  --fondo:#0A0A0A;
  --sup:#131313;
  --sup-min:#0E0E0E;
  --sup-baja:#1C1B1B;
  --sup-alta:#2A2A2A;

  --neon:#2EE6D6;
  --neon-fill:#22E0CE;
  --neon-hover:#5BEFE2;
  --on-neon:#03211E;
  --neon-10:rgba(46,230,214,.10);

  --cian:#8FD8FF;
  --ambar:#FFE08C;

  --txt:#E9E7E6;
  --txt-var:#A8BCB9;
  --txt-min:#7C8E8C;

  --borde:rgba(255,255,255,.10);
  --borde-fino:rgba(255,255,255,.06);
  --borde-neon:rgba(46,230,214,.32);

  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px; --r-xxl:32px;
  --ancho:1280px;
  --t:.3s cubic-bezier(.2,.8,.2,1);

  /* alias para que las páginas de la versión clara hereden sin tocarlas */
  --turquesa:var(--neon-fill); --turquesa-texto:var(--neon); --turquesa-claro:var(--neon);
  --tinta:var(--txt); --tinta-2:var(--txt-var); --tinta-3:var(--txt-min);
  --linea:var(--borde); --linea-fuerte:rgba(255,255,255,.18); --linea-osc:var(--borde);
  --papel:var(--sup-baja); --papel-2:var(--sup-min); --panel-osc:var(--sup-baja);
  --negro:var(--fondo); --hueso:var(--txt); --aviso:var(--ambar);
  --grafito:var(--fondo);
  --sombra:none; --sombra-alta:none;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{margin:0;background:var(--fondo);color:var(--txt);
  font:400 16px/1.6 'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}

h1,h2,h3,h4{font-family:Sora,sans-serif;margin:0 0 .5em;letter-spacing:-.03em;line-height:1.12;color:#fff}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
h2{font-size:clamp(1.85rem,4vw,2.9rem);font-weight:700}
h3{font-size:1.24rem;font-weight:600}

.apagado{color:var(--txt-var)}
.pequeno{font-size:.9rem}
.centro{text-align:center}
.env{max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
@media (min-width:900px){.env{padding-inline:48px}}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------ fondo técnico */
.plano{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(46,230,214,.06) 1px,transparent 1px);background-size:32px 32px}
.resplandor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.resplandor i{position:absolute;display:block;border-radius:50%}
.resplandor i:nth-child(1){top:-14%;right:-10%;width:620px;height:620px;
  background:radial-gradient(circle,rgba(46,230,214,.13),transparent 66%)}
.resplandor i:nth-child(2){bottom:-16%;left:-12%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(143,216,255,.07),transparent 66%)}

/* ------------------------------------------------------ cabecera */
.saltar{position:absolute;left:-9999px;top:0;background:var(--neon-fill);color:var(--on-neon);
  padding:10px 16px;border-radius:0 0 var(--r-s) 0;z-index:100;font-weight:600}
.saltar:focus{left:0}
.aviso-proto{position:relative;z-index:51;background:rgba(46,230,214,.07);
  border-bottom:.5px solid var(--borde-neon);color:var(--neon);
  font:500 .78rem/1.5 'Geist Mono',monospace;letter-spacing:.04em;padding:9px 16px;text-align:center}
.aviso-proto b{font-weight:500;color:#fff}

header.cab{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:.5px solid var(--borde);box-shadow:0 0 24px rgba(46,230,214,.10)}
.cab .env{display:flex;align-items:center;gap:28px;min-height:72px}
.cab .marca img{height:42px;width:auto}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font:500 .93rem 'Hanken Grotesk',sans-serif;color:var(--txt-var);
  padding:8px 12px;border-radius:var(--r-s);transition:color var(--t)}
.nav a:hover{color:var(--neon)}
.nav a[aria-current="page"]{color:var(--neon);border-bottom:2px solid var(--neon);border-radius:0;padding-bottom:5px}
.nav .sep{width:1px;height:22px;background:var(--borde);margin:0 6px}
.menu-btn{display:none;margin-left:auto;background:none;border:.5px solid var(--borde);
  border-radius:var(--r-s);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px;stroke:var(--txt);fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:1000px){
  .menu-btn{display:flex}
  .nav{position:fixed;left:0;right:0;top:112px;background:rgba(10,10,10,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);flex-direction:column;
    align-items:stretch;gap:0;padding:12px 24px 24px;border-bottom:.5px solid var(--borde);display:none}
  .nav.abierto{display:flex}
  .nav a{padding:14px 8px;font-size:1.05rem}
  .nav .sep{display:none}
  .nav .btn{margin-top:12px;justify-content:center}
}

/* ------------------------------------------------------ botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 .97rem/1 'Hanken Grotesk',sans-serif;text-decoration:none;cursor:pointer;
  padding:15px 26px;border-radius:var(--r-m);border:1px solid transparent;min-height:50px;
  transition:box-shadow var(--t),background var(--t),border-color var(--t),transform .12s ease}
.btn:active{transform:scale(.97)}
.btn-1{background:var(--neon-fill);color:var(--on-neon);font-weight:700}
.btn-1:hover{background:var(--neon-hover);box-shadow:0 0 26px rgba(46,230,214,.42)}
.btn-2{background:transparent;color:var(--neon);border-color:var(--neon)}
.btn-2:hover{background:var(--neon-10);box-shadow:0 0 20px rgba(46,230,214,.22)}
.btn-3{background:rgba(255,255,255,.045);color:var(--txt);border-color:var(--borde)}
.btn-3:hover{background:rgba(255,255,255,.09);border-color:var(--borde-neon)}
.btn-fantasma{background:transparent;color:var(--txt-var);padding:12px 14px;min-height:44px}
.btn-fantasma:hover{color:var(--neon)}
.btn-grande{padding:18px 34px;font-size:1.02rem;min-height:58px}
.btn-ancho{width:100%}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ------------------------------------------------------ secciones */
section{padding:104px 0;position:relative}
section.ajustada{padding:72px 0}
.oscuro{background:transparent}
.gris{border-block:.5px solid var(--borde-fino);background:rgba(255,255,255,.012)}

.etiqueta{display:inline-flex;align-items:center;gap:9px;
  font:500 .76rem/1 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--neon);margin-bottom:22px;border:.5px solid var(--borde-neon);
  background:var(--neon-10);padding:7px 15px;border-radius:999px}
.etiqueta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neon);animation:latido 2.4s infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.3}}

.encabezado-sec{max-width:690px;margin-bottom:58px}
.encabezado-sec.centrado{margin-inline:auto;text-align:center}
.encabezado-sec p{font-size:1.09rem;color:var(--txt-var);margin:0}

/* ------------------------------------------------------ rejillas */
.rej{display:grid;gap:24px}
.rej-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rej-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rej-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.rej-3,.rej-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rej-2,.rej-3,.rej-4{grid-template-columns:1fr}}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.bento>*{grid-column:span 12}
@media (min-width:900px){.b-8{grid-column:span 8}.b-6{grid-column:span 6}.b-4{grid-column:span 4}}

/* ------------------------------------------------------ vidrio */
.tarjeta,.plan,.panel,.pieza,.video,.destacado-video,.tabla-env,.cintillo,.cierre{
  background:rgba(30,30,30,.42);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:.5px solid var(--borde);
}
.tarjeta{border-radius:var(--r-xl);padding:30px;position:relative;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.tarjeta h3{margin-bottom:.45em}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t);
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(46,230,214,.10),transparent 60%)}
.tarjeta:hover{border-color:var(--borde-neon);box-shadow:0 0 28px rgba(46,230,214,.10);transform:translateY(-3px)}
.tarjeta:hover::after{opacity:1}
@media (hover:none){.tarjeta::after{display:none}.tarjeta:hover{transform:none}}

.icono{width:48px;height:48px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--neon-10);border:.5px solid var(--borde-neon);color:var(--neon);margin-bottom:20px}
.icono svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------ portada */
.heroe,.escena{position:relative;padding:84px 0 100px;overflow:clip;isolation:isolate}
.heroe-rej,.escena-rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
@media (max-width:1000px){.heroe-rej,.escena-rej{grid-template-columns:1fr;gap:40px}}
.titular{margin:0 0 .5em}
.titular .linea{display:block;overflow:hidden}
.titular .linea>span{display:block}
.titular em,.heroe h1 em{font-style:normal;color:var(--neon);text-shadow:0 0 24px rgba(46,230,214,.45)}
.entradilla{font-size:1.1rem;color:var(--txt-var);margin-bottom:34px;max-width:54ch}
.acciones{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.micro{font:500 .8rem/1.6 'Geist Mono',monospace;letter-spacing:.04em;color:var(--txt-min);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.micro svg{width:16px;height:16px;stroke:var(--neon);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* visor */
.visor-caja{position:relative;border-radius:var(--r-xxl);overflow:hidden;background:#0B0D14;
  border:.5px solid var(--borde);aspect-ratio:4/3;min-height:340px;
  box-shadow:0 0 60px rgba(46,230,214,.10),0 40px 90px -50px #000}
.visor-caja::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 10%,transparent 75%)}
#visor{position:absolute;inset:0;z-index:2}
#visor canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#visor canvas:active{cursor:grabbing}
.visor-barra{position:absolute;z-index:3;left:18px;right:18px;top:18px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.pastilla{font:500 .72rem/1.5 'Geist Mono',monospace;letter-spacing:.05em;color:var(--txt-var);
  background:rgba(10,10,10,.72);border:.5px solid var(--borde);border-radius:999px;padding:6px 13px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pastilla b{color:var(--neon);font-weight:500}
.visor-pie{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 18px;display:flex;gap:12px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.92) 60%)}
.visor-controles{display:flex;gap:8px}
.mini{background:rgba(255,255,255,.06);border:.5px solid var(--borde);color:var(--txt);
  border-radius:var(--r-s);padding:9px 14px;min-height:40px;cursor:pointer;
  font:500 .76rem 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase;
  transition:background var(--t),border-color var(--t),color var(--t)}
.mini:hover{background:rgba(255,255,255,.12);border-color:var(--borde-neon)}
.mini[aria-pressed="true"]{background:var(--neon-fill);border-color:var(--neon-fill);color:var(--on-neon)}
.cargando{position:absolute;z-index:4;inset:0;display:grid;place-items:center;text-align:center;
  color:var(--txt-min);font:500 .82rem 'Geist Mono',monospace;letter-spacing:.05em;padding:24px}
.giro{width:30px;height:30px;border:2px solid var(--borde);border-top-color:var(--neon);
  border-radius:50%;animation:gira .8s linear infinite;margin:0 auto 14px}
@keyframes gira{to{transform:rotate(360deg)}}

/* ------------------------------------------------------ cifras y ticker */
.cifra{font:700 clamp(2.6rem,6vw,4.2rem)/1 Sora,sans-serif;letter-spacing:-.045em;color:var(--neon);
  text-shadow:0 0 26px rgba(46,230,214,.3)}
.cifra small{font-size:.34em;letter-spacing:0;color:var(--txt-var);text-shadow:none}
/* ---------------------------------------------- qué te resuelve (iconos) */
.capacidades{border-block:.5px solid var(--borde-fino);padding:56px 0}
.rejilla-capacidades{list-style:none;margin:0;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.capacidad{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 14px;border:.5px solid var(--borde-fino);border-radius:14px;
  background:rgba(255,255,255,.015);text-align:center;
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.capacidad svg{width:30px;height:30px;fill:none;stroke:var(--neon);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:opacity .25s ease,transform .25s ease}
.capacidad b{font:600 .84rem/1.25 Sora,sans-serif;letter-spacing:-.01em;color:var(--tinta)}
/* La explicación vive en el hueco, no en un tooltip flotante: así no tapa
   nada, no se sale por el borde en móvil y se puede leer con el teclado. */
.capacidad p{margin:0;font-size:.78rem;line-height:1.45;color:var(--tinta-baja);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease}
.capacidad:hover,.capacidad:focus-within{border-color:var(--borde-neon);background:rgba(46,230,214,.05);transform:translateY(-2px)}
.capacidad:hover svg,.capacidad:focus-within svg{opacity:1;transform:scale(1.06)}
.capacidad:hover p,.capacidad:focus-within p{max-height:9em;opacity:1}
.pie-capacidades{margin:26px 0 0;text-align:center;font-size:.82rem;color:var(--tinta-baja)}
/* En táctil no hay ratón: el texto va siempre visible. */
@media (hover:none){
  .capacidad p{max-height:none;opacity:1}
  .pie-capacidades{display:none}
}
@media (prefers-reduced-motion:reduce){.capacidad,.capacidad svg,.capacidad p{transition:none}}

/* ------------------------------------------------------ pasos */
.pasos-rej{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
@media (max-width:1000px){.pasos-rej{grid-template-columns:1fr;gap:32px}}
.paso-indice{display:flex;gap:10px;margin-bottom:28px}
.paso-indice b{width:28px;height:3px;border-radius:99px;background:var(--borde);transition:all var(--t)}
.paso-indice b[data-activo="si"]{background:var(--neon);width:54px;box-shadow:0 0 12px rgba(46,230,214,.6)}
.paso-item h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700}
.paso-item p{font-size:1.05rem;color:var(--txt-var);max-width:46ch}
.paso-item .num{font:500 .76rem 'Geist Mono',monospace;letter-spacing:.14em;color:var(--neon);margin-bottom:14px;display:block}
@media (min-width:1001px){
  .cine .paso-panel{display:grid}
  .cine .paso-item{grid-area:1/1;opacity:.2;transition:opacity .4s ease}
  .cine .paso-item[data-activo="si"]{opacity:1}
}
.paso-lienzo{position:relative;aspect-ratio:4/3;border-radius:var(--r-xxl);overflow:hidden;
  background:#0B0D14;border:.5px solid var(--borde);display:grid;place-items:center}
.paso-capa{grid-area:1/1;width:100%;height:100%;display:grid;place-items:center;padding:11%;transition:opacity .45s ease}
.cine .paso-capa{opacity:0}
.cine .paso-capa[data-activo="si"]{opacity:1}
.dibujado{fill:none;stroke:var(--neon);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(46,230,214,.55))}
.cuerpo-trazo{fill:none;stroke:#1E2A30;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------ precios */
.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:920px;margin-inline:auto}
@media (max-width:860px){.planes{grid-template-columns:1fr}}
.plan{border-radius:var(--r-xxl);padding:36px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.plan:hover{border-color:var(--borde-neon)}
.plan.destacado{border-color:var(--borde-neon);background:rgba(28,27,27,.82);box-shadow:0 0 50px rgba(46,230,214,.13)}
.plan .cinta{position:absolute;top:0;left:36px;background:var(--neon-fill);color:var(--on-neon);
  font:500 .7rem/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:0 0 var(--r-s) var(--r-s)}
.plan h3{font-size:1.5rem;margin:18px 0 .2em;font-weight:700}
.plan.destacado h3{color:var(--neon)}
.plan .para{color:var(--txt-var);font-size:.95rem;margin-bottom:26px;min-height:3.2em}
.precio{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.precio .n{font:800 3.4rem/1 Sora,sans-serif;letter-spacing:-.05em;color:#fff}
.precio .u{color:var(--txt-var);font-size:.96rem}
.plan .nota-precio{font:500 .74rem 'Geist Mono',monospace;letter-spacing:.05em;color:var(--txt-min);margin-bottom:30px}
.lista{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:13px}
.lista li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;line-height:1.5}
.lista svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;stroke:var(--neon);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lista li.no{color:var(--txt-min)}
.lista li.no svg{stroke:#3A4442}
.plan .btn{margin-top:auto}
.hueco-paypal{border:1px dashed var(--ambar);background:rgba(255,224,140,.07);border-radius:var(--r-m);
  padding:13px 15px;font:500 .76rem/1.6 'Geist Mono',monospace;color:var(--ambar);margin-top:14px}
.hueco-paypal b{color:#fff;font-weight:500}
.hueco-paypal code{background:rgba(255,224,140,.14);padding:2px 6px;border-radius:4px;word-break:break-all}

/* ------------------------------------------------------ tabla */
.tabla-env{overflow-x:auto;border-radius:var(--r-xl)}
table.comparativa{border-collapse:collapse;width:100%;min-width:660px;font-size:.94rem}
.comparativa th,.comparativa td{padding:17px 22px;text-align:left;border-bottom:.5px solid var(--borde-fino)}
.comparativa thead th{font:500 .74rem 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-min)}
.comparativa thead th:nth-child(3){color:var(--neon)}
.comparativa tbody tr:hover td,.comparativa tbody tr:hover th{background:rgba(255,255,255,.03)}
.comparativa tbody tr:last-child td{border-bottom:none}
.comparativa td:not(:first-child),.comparativa th:not(:first-child){text-align:center;width:160px}
.comparativa .si{color:var(--neon);font-weight:600}
.comparativa .no{color:#3A4442}
.comparativa tbody th{font-weight:400;color:var(--txt)}
.grupo-fila td{background:rgba(255,255,255,.025);font:500 .72rem 'Geist Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--neon)}

/* ------------------------------------------------------ biblioteca */
.pieza{border-radius:var(--r-xl);overflow:hidden;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.pieza:hover{border-color:var(--borde-neon);box-shadow:0 0 26px rgba(46,230,214,.12);transform:translateY(-4px)}
.pieza .lienzo{aspect-ratio:4/3;background:#0B0D14;display:grid;place-items:center;padding:22px;
  border-bottom:.5px solid var(--borde-fino)}
.pieza .lienzo svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(46,230,214,.35))}
.pieza .info{padding:20px}
.pieza .info h3{font-size:1.02rem}
.pieza .fila{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.marca-plan{font:500 .66rem 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--neon-10);color:var(--neon);border:.5px solid var(--borde-neon)}
.marca-plan.experto{background:rgba(143,216,255,.09);color:var(--cian);border-color:rgba(143,216,255,.28)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filtro{background:var(--sup-alta);border:.5px solid transparent;border-radius:999px;padding:10px 20px;
  min-height:44px;cursor:pointer;color:var(--txt-var);
  font:500 .76rem 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;transition:all var(--t)}
.filtro:hover{color:var(--txt)}
.filtro[aria-pressed="true"]{background:var(--neon-fill);color:var(--on-neon)}
.trazo{fill:none;stroke:var(--neon);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------ aprende */
.video{display:flex;gap:20px;padding:22px;align-items:center;border-radius:var(--r-xl);transition:border-color var(--t)}
.video:hover{border-color:var(--borde-neon)}
.video .mini-lienzo{width:132px;height:80px;flex-shrink:0;border-radius:var(--r-m);background:#0B0D14;
  display:grid;place-items:center;color:var(--neon);border:.5px solid var(--borde-fino)}
.video .mini-lienzo svg{width:28px;height:28px;fill:currentColor;filter:drop-shadow(0 0 8px rgba(46,230,214,.5))}
.video h3{font-size:1.02rem;margin-bottom:.2em}
.video p{margin:0;font-size:.91rem;color:var(--txt-var)}
.video .dur{font:500 .76rem 'Geist Mono',monospace;color:var(--txt-min);margin-left:auto;flex-shrink:0}
@media (max-width:640px){.video{flex-wrap:wrap}.video .dur{margin-left:0}}
.destacado-video{display:grid;grid-template-columns:1.15fr 1fr;gap:38px;align-items:center;
  border-radius:var(--r-xxl);padding:38px;margin-bottom:56px}
@media (max-width:880px){.destacado-video{grid-template-columns:1fr;padding:26px}}
.lienzo-video{aspect-ratio:16/9;border-radius:var(--r-xl);background:#0B0D14;display:grid;place-items:center;
  border:.5px solid var(--borde-fino)}
.play{width:66px;height:66px;border-radius:50%;background:var(--neon-fill);display:grid;place-items:center;
  box-shadow:0 0 26px rgba(46,230,214,.45)}
.play svg{width:26px;height:26px;fill:var(--on-neon);margin-left:4px}
.listado{display:grid;gap:14px}

/* ------------------------------------------------------ preguntas */
.pregunta{border-bottom:.5px solid var(--borde-fino)}
.pregunta summary{cursor:pointer;padding:24px 46px 24px 0;list-style:none;position:relative;
  font:600 1.05rem Sora,sans-serif;color:#fff;transition:color var(--t)}
.pregunta summary:hover{color:var(--neon)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--neon);border-bottom:2px solid var(--neon);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t)}
.pregunta[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pregunta .cuerpo{padding-bottom:26px;color:var(--txt-var);max-width:76ch}
.pregunta .cuerpo p:last-child{margin-bottom:0}

/* ------------------------------------------------------ cuenta */
.panel{border-radius:var(--r-xl);padding:28px}
.dato{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:.5px solid var(--borde-fino);font-size:.95rem}
.dato:last-child{border-bottom:none}
.dato dt{color:var(--txt-var);margin:0}
.dato dd{margin:0;font-weight:600;text-align:right;color:#fff}
.pastilla-estado{display:inline-flex;align-items:center;gap:8px;
  font:500 .74rem 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:var(--neon-10);color:var(--neon);border:.5px solid var(--borde-neon)}
.pastilla-estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:latido 2.4s infinite}
.proyecto{display:flex;gap:16px;align-items:center;padding:16px;border:.5px solid var(--borde);
  border-radius:var(--r-m);background:rgba(255,255,255,.02);transition:border-color var(--t)}
.proyecto:hover{border-color:var(--borde-neon)}
.proyecto .mini-lienzo{width:64px;height:52px;border-radius:var(--r-s);background:#0B0D14;flex-shrink:0;display:grid;place-items:center}
.proyecto .mini-lienzo svg{width:75%;height:75%}
.proyecto h4{margin:0 0 2px;font:600 1rem Sora,sans-serif;color:#fff}
.proyecto p{margin:0;font:500 .76rem 'Geist Mono',monospace;color:var(--txt-min)}
.historial{width:100%;border-collapse:collapse;font-size:.92rem}
.historial th,.historial td{padding:13px 4px;text-align:left;border-bottom:.5px solid var(--borde-fino)}
.historial thead th{font:500 .72rem 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-min)}
.historial tbody tr:last-child td{border-bottom:none}
.historial td:last-child,.historial th:last-child{text-align:right}

/* ------------------------------------------------------ cierre */
.cintillo,.cierre{position:relative;border-radius:var(--r-xxl);padding:76px 40px;text-align:center;overflow:hidden}
.cintillo::before,.cierre::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(46,230,214,.16),transparent 66%);pointer-events:none}
.cintillo h2,.cierre h2,.cintillo p,.cierre p,.cintillo .btn,.cierre .btn{position:relative}
.cintillo p,.cierre p{color:var(--txt-var);max-width:58ch;margin:0 auto 32px;font-size:1.05rem}
@media (max-width:640px){.cintillo,.cierre{padding:46px 24px}}

/* ------------------------------------------------------ marco del generador */
.marco-app{border:.5px solid var(--borde);border-radius:var(--r-xxl);overflow:hidden;
  background:#0B0D14;box-shadow:0 0 50px rgba(46,230,214,.08)}
.marco-app .barra{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--sup-baja);border-bottom:.5px solid var(--borde)}
.marco-app .puntos{display:flex;gap:6px}
.marco-app .puntos i{width:10px;height:10px;border-radius:50%;background:#333;display:block}
.marco-app .url{flex:1;text-align:center;font:500 .76rem 'Geist Mono',monospace;color:var(--txt-min);
  background:var(--sup-min);border-radius:999px;padding:6px 14px}
.marco-app iframe{display:block;width:100%;height:min(78vh,780px);border:0;background:var(--fondo)}

/* ------------------------------------------------------ legal */
.doc-legal{max-width:780px;margin-inline:auto}
.doc-legal h2{margin-top:1.9em;font-size:1.5rem}
.doc-legal h3{margin-top:1.4em}
.doc-legal ul{padding-left:1.3em;color:var(--txt-var)}
.doc-legal li{margin-bottom:.5em}

/* ------------------------------------------------------ pie */
footer.pie{border-top:.5px solid var(--borde);background:var(--sup-min);color:var(--txt-var);
  padding:76px 0 34px;font-size:.93rem;position:relative;z-index:1}
.pie-rej{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:52px}
@media (max-width:860px){.pie-rej{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pie-rej{grid-template-columns:1fr}}
.pie h4{color:#fff;font:500 .74rem 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.pie a{text-decoration:none;transition:color var(--t)}
.pie a:hover{color:var(--neon)}
.pie .logo-pie{height:30px;width:auto;margin-bottom:20px}
.pie .legal{border-top:.5px solid var(--borde-fino);padding-top:28px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  font:500 .76rem 'Geist Mono',monospace;letter-spacing:.04em;color:var(--txt-min)}

/* ------------------------------------------------------ progreso */
.progreso{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:var(--neon);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;box-shadow:0 0 12px rgba(46,230,214,.85)}

/* ------------------------------------------------------ animación */
/* El contenido se ve SIEMPRE. Solo se esconde si cine.js confirma que puede animar. */
.cine [data-anim]{opacity:0;will-change:opacity,transform}
.cine [data-anim="subir"]{transform:translate3d(0,36px,0)}
.cine [data-anim="izq"]{transform:translate3d(-40px,0,0)}
.cine [data-anim="der"]{transform:translate3d(40px,0,0)}
.cine [data-anim="crecer"]{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){
  .cine [data-anim]{opacity:1 !important;transform:none !important}
}


/* ------------------------------------------------------ pantalla completa
   El generador ocupa la ventana entera y la página NO tiene scroll propio.
   Así solo hay un scroll en pantalla —el del panel de la aplicación— y deja
   de pasar que la rueda mueva la página cuando creías estar en la app. */
body.pantalla{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.pantalla #cabecera{flex:0 0 auto}
body.pantalla main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.pantalla .marco-app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  border-radius:0;border-inline:0;border-bottom:0;box-shadow:none}
body.pantalla .marco-app iframe{flex:1 1 auto;height:auto;min-height:0}
body.pantalla #pie{display:none}
body.pantalla .plano,body.pantalla .resplandor,body.pantalla .progreso{display:none}

.barra-app{display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;
  flex:0 0 auto;background:var(--sup-baja);border-bottom:.5px solid var(--borde)}
.barra-app .titulo{font:500 .78rem 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--turquesa-texto,#0C7C73)}
.barra-app .sep{flex:1}
@media (max-width:700px){
  .barra-app{padding:8px 14px;gap:10px}
  .barra-app .oculta-movil{display:none}
}
/* En pantallas bajas el generador necesita alto: se permite el scroll normal */
@media (max-height:560px){
  body.pantalla{height:auto;overflow:auto}
  body.pantalla .marco-app iframe{height:520px;flex:0 0 auto}
}

/* =====================================================================
   PORTADA A PANTALLA COMPLETA CON EL MOTOR DE FONDO
   El letrero 3D ocupa toda la ventana, detrás del texto, y se puede
   arrastrar. El texto no captura el ratón —salvo los botones— para que
   se pueda agarrar el letrero desde cualquier punto de la pantalla.
   ===================================================================== */
.escena-total{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:0;overflow:clip;isolation:isolate;
}
.lienzo-fondo{position:absolute;inset:0;z-index:0}
/* El letrero de fondo es ambiente, no protagonista: si compite con el
   titular, gana el letrero y se pierde el mensaje. */
.lienzo-fondo canvas{opacity:.42}
.lienzo-fondo canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.lienzo-fondo canvas:active{cursor:grabbing}

/* Velo para que el texto se lea sobre el letrero, sin apagarlo del todo */
.velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 66% 62% at 50% 46%,rgba(10,10,10,.93),rgba(10,10,10,.55) 58%,rgba(10,10,10,.15) 84%),
    linear-gradient(180deg,rgba(10,10,10,.82),transparent 24%,transparent 70%,rgba(10,10,10,.95));
}

.escena-total .contenido{
  position:relative;z-index:2;text-align:center;pointer-events:none;
  padding-block:120px 96px;
}
.escena-total .contenido a,
.escena-total .contenido button,
.escena-total .contenido select{pointer-events:auto}
.escena-total h1{margin-bottom:.35em}
.escena-total .entradilla{margin-inline:auto;text-align:center}

/* «de esto → a esto» */
.transformacion{
  display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;
  margin:6px 0 34px;
}
.muestra{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;
}
.muestra .marco{
  width:150px;height:96px;border-radius:var(--r-l);display:grid;place-items:center;padding:14px;
  background:rgba(10,10,10,.66);border:.5px solid var(--borde);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.muestra figcaption{
  font:500 .7rem 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-min);
}
.muestra.destino figcaption{color:var(--neon)}
.muestra.destino .marco{border-color:var(--borde-neon);background:rgba(46,230,214,.06)}
.curva-plana{fill:none;stroke:var(--txt-var);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.flecha{width:34px;height:20px;fill:none;stroke:var(--neon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media (max-width:560px){
  .transformacion{gap:14px}
  .muestra .marco{width:118px;height:76px}
  .flecha{width:26px}
}

/* pista de arrastre, abajo del todo */
.pista-arrastre{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;pointer-events:none;
  font:500 .74rem 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-min);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.pista-arrastre svg{width:16px;height:16px;stroke:var(--neon);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.pista-arrastre .solo-raton{display:none}}

/* estado de carga, centrado sobre el lienzo */
.escena-total .cargando{z-index:3;background:transparent}

/* =====================================================================
   TRANSICIÓN ENTRE PÁGINAS
   El parpadeo al cambiar de pestaña es el navegador pintando su fondo
   blanco antes de aplicar el CSS. Se ataca por tres lados: el color de
   esquema, el fondo puesto en el propio <html> antes de la hoja, y una
   transición de vista donde el navegador la soporta.
   ===================================================================== */
html{color-scheme:dark;background:#0A0A0A}

@view-transition{navigation:auto}
::view-transition-old(root){animation:sale .16s ease both}
::view-transition-new(root){animation:entra .26s ease both}
@keyframes sale{to{opacity:0}}
@keyframes entra{from{opacity:0}}

/* Para los navegadores sin transición de vista, una entrada suave */
@supports not (view-transition-name: none){
  body{animation:entra .22s ease both}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body{animation:none}
}

/* ---------------------------------------------- muestras de la portada */
.muestra .marco img{display:block;width:100%;height:auto;border-radius:inherit}
/* El trazo va translucido: es un apunte, no la foto. */
.muestra:not(.destino) .marco img{opacity:.55;filter:drop-shadow(0 0 10px rgba(46,230,214,.18))}

/* ---------------------------------------------- cuenta: campo de correo */
.campo{
  width:100%;padding:14px 16px;border-radius:10px;
  border:1px solid var(--borde);background:rgba(255,255,255,.03);
  color:var(--tinta);font:400 1rem Inter,system-ui,sans-serif;
  transition:border-color .2s ease,background .2s ease;
}
.campo::placeholder{color:var(--tinta-baja)}
.campo:focus{outline:none;border-color:var(--neon);background:rgba(46,230,214,.05)}
.campo:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* La rejilla de la cuenta ya existia en el HTML antiguo; se define aqui para
   que no dependa de una etiqueta <style> suelta en la pagina. */
.cuenta-rej{display:grid;grid-template-columns:1fr 1.5fr;gap:26px;align-items:start}
@media (max-width:880px){.cuenta-rej{grid-template-columns:1fr}}