/* ============================================================
   Kardumen — portada (index.php)
   ------------------------------------------------------------
   Sustituye los estilos incrustados que traía el archivo
   generado en Claude Design. Mismos colores y medidas, pero
   en un archivo aparte que el navegador puede cachear.
   ============================================================ */

:root{
  --tinta:#e9f6ff;
  --agua:#02121f;
  --cian:#5ee0ff;
  --cian-vivo:#6fe6ff;
  --texto:#a3c8de;
  --texto-2:#93b8ce;
  --texto-3:#9dc0d6;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Archivo', system-ui, -apple-system, Helvetica, sans-serif;
  --btn:linear-gradient(120deg,#6ce4ff,#1487d2);
  --panel:linear-gradient(160deg,rgba(7,34,55,.92),rgba(3,14,25,.95));
  --panel-2:linear-gradient(160deg,rgba(7,32,52,.9),rgba(3,14,25,.94));
  --borde:rgba(94,224,255,.18);
  --pad-x:clamp(18px,5vw,40px);
  --sec-y:clamp(56px,13vw,110px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--agua);color:var(--tinta);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  /* «hidden» convierte al elemento en contenedor de scroll y eso rompe
     position:sticky de la barra. «clip» corta igual el desbordamiento
     horizontal pero sin crear contenedor. El «hidden» queda de reserva
     para navegadores viejos que no entienden «clip». */
  overflow-x:hidden;
  overflow-x:clip;
}
a{color:var(--cian);text-decoration:none}
a:hover{color:#a8f0ff}
::selection{background:#0e7fb6;color:#fff}
img{max-width:100%}
h1,h2,h3,h4{font-weight:800}
h3,h4{font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── Animaciones ────────────────────────────────────────── */
@keyframes ping{0%{transform:scale(.35);opacity:.55}100%{transform:scale(1);opacity:0}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sheen{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes riseIn{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ── Utilidades ─────────────────────────────────────────── */
.mono{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase}
.epigrafe{
  font-family:var(--mono);font-size:clamp(9.5px,2.6vw,11px);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(150,210,240,.6);
}
.titulo{margin:14px 0 0;font-size:clamp(28px,8vw,52px);line-height:1.04;letter-spacing:-.03em}
.centro{text-align:center}
.sinbarra::-webkit-scrollbar{display:none}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ancla{position:absolute;top:-90px}

/* ── Lienzo de la página ────────────────────────────────── */
.pagina{
  position:relative;width:100%;
  overflow-x:hidden;
  overflow-x:clip;
  background:linear-gradient(180deg,#073048 0%,#052538 18%,#03192a 45%,#02121f 72%,#010a13 100%);
}
.fondo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fondo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:transform,opacity;
}
.fondo .tinte{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,26,44,.3) 0%,rgba(3,18,32,.5) 55%,rgba(1,9,17,.8) 100%);
}
.mar{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.destello{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(70,205,255,.18),transparent 60%);
}
.seccion{position:relative;z-index:3;padding:0 var(--pad-x) var(--sec-y)}
.limite{max-width:960px;margin:0 auto}
.limite-860{max-width:860px;margin:0 auto}
.limite-900{max-width:900px;margin:0 auto}
.limite-1000{max-width:1000px;margin:0 auto}
.limite-760{max-width:760px;margin:0 auto}

/* ── Barra fija de móvil ────────────────────────────────── */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(2,14,24,.6),rgba(2,12,21,.97));
  backdrop-filter:blur(14px);border-top:1px solid rgba(94,224,255,.18);
  animation:riseIn .4s cubic-bezier(.22,1,.36,1);
}
.barra-movil.visible{display:block}
.barra-movil a{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;
  border-radius:999px;background:var(--btn);color:#032030;font-weight:700;font-size:15px;
  box-shadow:0 10px 30px rgba(35,165,230,.4);
}
.barra-movil span{
  display:block;text-align:center;margin-top:7px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(150,205,235,.6);
}
@media (min-width:860px){.barra-movil{display:none!important}}

/* ── Cabecera «Marea» ───────────────────────────────────
   Arriba la barra es invisible y deja ver el video. Al bajar
   sube la marea: se opaca el vidrio y aparece el borde. La
   línea del fondo marca cuánto se lleva leído de la página. */
.cabecera{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px clamp(16px,4vw,40px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,backdrop-filter .5s ease;
}
/* Velo tenue permanente: deja ver el video pero asegura que el
   logo y los enlaces se lean si abajo pasa un fotograma claro. */
.cabecera::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,14,24,.55),rgba(2,14,24,0));
  transition:opacity .5s ease;
}
.cabecera.hundida::before{opacity:0}
.cabecera.hundida{
  background:linear-gradient(180deg,rgba(4,28,48,.96),rgba(3,18,32,.86));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:rgba(94,224,255,.22);box-shadow:0 12px 40px rgba(1,10,20,.5);
}
/* Reserva: si el navegador no entiende «clip», el JavaScript
   marca body.barra-fija y la barra pasa a fija, que no depende
   del desbordamiento del padre. */
body.barra-fija .cabecera{position:fixed;left:0;right:0;top:0}
body.barra-fija .pagina{padding-top:var(--alto-barra,60px)}

/* Nivel de avance de lectura */
.cabecera .nivel{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--cian-vivo),#1487d2);
  box-shadow:0 0 12px rgba(111,230,255,.7);transition:transform .12s linear;
}
.cabecera .marca{display:flex;align-items:center;flex:none}
.cabecera .marca img{
  height:clamp(24px,6vw,32px);width:auto;display:block;
  filter:drop-shadow(0 0 18px rgba(94,224,255,.35));
}
.cabecera .enlaces{display:flex;align-items:center;gap:clamp(2px,1.4vw,8px);margin-left:auto}
.cabecera .enlaces a{
  position:relative;overflow:hidden;padding:9px clamp(9px,2.6vw,16px);
  font-size:clamp(12px,3vw,14px);font-weight:500;color:#cfe7f6;white-space:nowrap;
  transition:color .3s ease;
}
.cabecera .enlaces a:hover,.cabecera .enlaces a:focus-visible{color:#9beeff}
/* La ola que se dibuja y luego se desplaza sola */
.cabecera .enlaces a svg{
  position:absolute;left:10px;bottom:4px;width:calc(100% - 20px);height:7px;overflow:visible;
}
.cabecera .enlaces a svg path{
  fill:none;stroke:var(--cian);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1);
}
.cabecera .enlaces a:hover svg path,
.cabecera .enlaces a:focus-visible svg path{stroke-dashoffset:0;animation:onda 2.4s linear .5s infinite}
@keyframes onda{to{transform:translateX(-16px)}}

.cabecera .nav-cta{
  flex:none;padding:9px clamp(14px,3.4vw,22px);border-radius:999px;background:var(--btn);
  color:#032030;font-weight:600;font-size:clamp(12px,3vw,14px);white-space:nowrap;
  box-shadow:0 8px 26px rgba(30,160,225,.4);
  transition:box-shadow .35s ease,transform .35s ease;
}
.cabecera .nav-cta:hover{color:#032030;box-shadow:0 10px 32px rgba(35,165,230,.6);transform:translateY(-1px)}

/* Botón de menú, solo en pantallas chicas */
.cabecera .burger{
  display:none;flex:none;width:42px;height:42px;border-radius:12px;cursor:pointer;padding:0;
  border:1px solid rgba(94,224,255,.28);background:rgba(8,38,60,.6);
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
}
.cabecera .burger span{display:block;width:17px;height:1.6px;background:#cfe7f6;border-radius:2px;transition:.3s ease}
.cabecera.abierta .burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.cabecera.abierta .burger span:nth-child(2){opacity:0}
.cabecera.abierta .burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* Cajón lateral del celular */
.velo{
  position:fixed;inset:0;z-index:38;background:rgba(1,9,17,.65);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.velo.on{opacity:1;pointer-events:auto}
.cajon{
  position:fixed;top:0;right:0;bottom:0;width:min(80%,300px);z-index:39;
  background:linear-gradient(180deg,rgba(5,26,44,.98),rgba(2,12,21,.99));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-left:1px solid rgba(94,224,255,.2);
  padding:76px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateX(105%);transition:transform .45s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
}
.cajon.abierto{transform:translateX(0)}
.cajon .rotulo{
  margin:14px 0 6px;padding:0 12px;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(150,205,235,.55);
}
.cajon .rotulo:first-child{margin-top:0}
.cajon a{
  padding:13px 12px;border-radius:12px;font-size:15px;color:#cfe7f6;
  opacity:0;transform:translateX(16px);transition:background .25s ease,color .25s ease;
}
.cajon.abierto a{animation:entraCajon .4s cubic-bezier(.22,1,.36,1) forwards}
.cajon.abierto a:nth-of-type(1){animation-delay:.04s}
.cajon.abierto a:nth-of-type(2){animation-delay:.09s}
.cajon.abierto a:nth-of-type(3){animation-delay:.14s}
.cajon.abierto a:nth-of-type(4){animation-delay:.19s}
.cajon.abierto a:nth-of-type(5){animation-delay:.24s}
.cajon.abierto a:nth-of-type(6){animation-delay:.29s}
.cajon.abierto a:nth-of-type(7){animation-delay:.34s}
.cajon a:hover{background:rgba(16,66,100,.6);color:#9beeff}
/* Etiqueta «gratis» del enlace al clima */
.cajon a em{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;
  background:rgba(62,227,154,.16);border:1px solid rgba(62,227,154,.4);color:#3ee39a;
  font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.cajon .cta-cajon{
  margin-top:auto;text-align:center;background:var(--btn);color:#032030;font-weight:700;
  border-radius:999px;box-shadow:0 10px 30px rgba(35,165,230,.35);
}
.cajon .cta-cajon:hover{color:#032030;background:var(--btn)}
.cajon .pie-cajon{
  margin:16px 0 0;text-align:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;color:rgba(130,180,210,.4);
}
@keyframes entraCajon{to{opacity:1;transform:translateX(0)}}

/* Con «Clima» en el menú son seis enlaces más el botón: por debajo
   de 960 px ya no caben y el botón se salía del encabezado, así que
   ahí entra el cajón, que los lleva todos. */
@media (max-width:960px){
  .cabecera .enlaces{display:none}
  .cabecera .burger{display:flex}
}
@media (min-width:961px){
  .cajon,.velo{display:none}
}

/* Los anclajes se detienen debajo de la barra, no atrás de ella */
section[id],span.ancla{scroll-margin-top:80px}

/* ── Portada ────────────────────────────────────────────── */
.portada{
  position:relative;z-index:3;
  padding:clamp(48px,12vw,110px) var(--pad-x) clamp(40px,9vw,80px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.senal{
  display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(94,224,255,.28);background:rgba(6,36,58,.55);
  font-family:var(--mono);font-size:clamp(9px,2.4vw,10.5px);letter-spacing:.24em;
  text-transform:uppercase;color:#a9d9f0;
}
.senal i{width:7px;height:7px;border-radius:50%;background:#3ee39a;animation:blip 2s ease-in-out infinite}
.portada h1{
  margin:clamp(20px,5vw,30px) 0 0;font-size:clamp(40px,12.5vw,104px);line-height:.92;
  letter-spacing:-.04em;max-width:13ch;
}
.portada h1 em{
  font-style:normal;
  background:linear-gradient(96deg,#8fecff 5%,#1fa9e8 50%,#8fecff 95%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:sheen 6s linear infinite;
}
.portada .entrada{
  margin:clamp(16px,4vw,26px) 0 0;max-width:48ch;font-size:clamp(15px,4vw,19px);
  line-height:1.6;color:var(--texto);text-wrap:pretty;
}
.fichas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(16px,4vw,22px)}
.fichas span{
  padding:8px 14px;border-radius:999px;border:1px solid rgba(94,224,255,.2);
  background:rgba(7,34,55,.5);font-family:var(--mono);font-size:clamp(9px,2.4vw,10.5px);
  letter-spacing:.2em;text-transform:uppercase;color:#a9d9f0;
}
.acciones{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(24px,6vw,38px);width:100%;max-width:420px;
}
.btn-principal{
  flex:1 1 160px;padding:16px 22px;border-radius:999px;background:var(--btn);
  color:#032030;font-weight:600;font-size:15px;box-shadow:0 14px 44px rgba(35,165,230,.4);
}
.btn-principal:hover{color:#032030}
.btn-fantasma{
  flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 20px;border-radius:999px;border:1px solid rgba(120,195,230,.32);
  background:rgba(8,38,60,.45);color:#d7effc;font-weight:500;font-size:15px;
  white-space:nowrap;transition:border-color .3s ease,background .3s ease;
}
.btn-fantasma:hover{border-color:var(--cian);color:#d7effc;background:rgba(12,52,80,.6)}
/* Olitas con la flecha: dice «baja a ver el mar» sin escribirlo */
.btn-fantasma svg{
  width:19px;height:19px;flex:none;fill:none;stroke:var(--cian-vivo);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-fantasma:hover svg{stroke:#a8f0ff}
.letrita{
  flex:1 1 100%;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(150,205,235,.55);
}

/* ── Brújula de la portada ──────────────────────────────── */
.brujula{
  position:relative;margin-top:clamp(44px,11vw,76px);width:min(100%,300px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
.brujula .onda{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(94,224,255,.35);animation:ping 3.4s ease-out infinite}
.brujula .onda:nth-child(2){border-color:rgba(94,224,255,.3);animation-delay:1.13s}
.brujula .onda:nth-child(3){border-color:rgba(94,224,255,.25);animation-delay:2.26s}
.brujula .aro-int{position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(94,224,255,.16)}
.brujula .aro-ext{position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(94,224,255,.1)}
.brujula .anzuelo{position:absolute;top:-16%;left:50%;transform:translateX(-50%);pointer-events:none}
.brujula .anzuelo img{
  display:block;width:clamp(50px,14vw,70px);opacity:.92;
  filter:drop-shadow(0 0 26px rgba(94,224,255,.5));animation:drift 6s ease-in-out infinite;
}
.brujula .rosa{
  position:absolute;inset:6%;pointer-events:none;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;color:rgba(160,215,240,.5);
}
.brujula .rosa span{position:absolute}
.brujula .rosa .n{top:-2px;left:50%;transform:translateX(-50%)}
.brujula .rosa .e{right:-2px;top:50%;transform:translateY(-50%)}
.brujula .rosa .s{bottom:-2px;left:50%;transform:translateX(-50%)}
.brujula .rosa .o{left:-2px;top:50%;transform:translateY(-50%)}
.brujula .aguja{position:absolute;inset:6%;transition:transform 1.1s cubic-bezier(.33,1,.68,1)}
.brujula .aguja i{
  position:absolute;left:50%;top:8%;width:2px;height:34%;margin-left:-1px;
  background:linear-gradient(180deg,var(--cian-vivo),rgba(111,230,255,0));
  box-shadow:0 0 16px rgba(111,230,255,.9);
}
.brujula .aguja b{
  position:absolute;left:50%;top:5%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--cian-vivo);box-shadow:0 0 20px rgba(111,230,255,1);
}
.tarjeta-gps{
  position:relative;width:clamp(158px,48vw,200px);border-radius:20px;
  border:1px solid rgba(94,224,255,.3);
  background:linear-gradient(165deg,rgba(6,30,50,.96),rgba(3,14,25,.98));
  padding:16px 15px;box-shadow:0 30px 70px rgba(1,10,20,.65);animation:drift 6s ease-in-out infinite;
}
.tarjeta-gps .cinta{
  display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.2em;color:rgba(150,205,235,.6);
}
.tarjeta-gps .cinta em{font-style:normal;color:#3ee39a}
.tarjeta-gps .nombre{margin-top:8px;font-size:clamp(17px,5vw,20px);font-weight:700;letter-spacing:-.02em;color:#eaf7ff}
.tarjeta-gps .millas{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.tarjeta-gps .millas b{font-size:clamp(26px,8vw,34px);font-weight:800;letter-spacing:-.03em;color:var(--cian-vivo)}
.tarjeta-gps .millas span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#6d9ab4}
.tarjeta-gps .celdas{display:flex;gap:6px;margin-top:12px}
.tarjeta-gps .celdas div{
  flex:1;text-align:center;padding:8px 4px;border-radius:10px;background:rgba(9,36,56,.85);
  border:1px solid rgba(90,175,220,.16);
}
.tarjeta-gps .celdas b{display:block;font-size:14px;font-weight:600}
.tarjeta-gps .celdas span{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:#6d9ab4}

/* ── Pronóstico interactivo ─────────────────────────────── */
#mar{padding-top:var(--sec-y)}
.consola{
  margin-top:clamp(28px,7vw,46px);border-radius:22px;border:1px solid rgba(94,224,255,.22);
  background:var(--panel);padding:clamp(18px,5vw,34px);box-shadow:0 34px 90px rgba(1,10,20,.6);
}
.consola .cima{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.consola .dia{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:rgba(150,205,235,.6)}
.consola .hora{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.consola .hora b{font-size:clamp(38px,12vw,60px);font-weight:800;letter-spacing:-.04em;color:#eaf7ff}
.consola .hora span{font-size:clamp(14px,4vw,18px);font-weight:600}
.consola .medidas{display:flex;gap:8px;flex:1 1 260px;min-width:220px}
.consola .medidas div{
  flex:1;text-align:center;padding:12px 6px;border-radius:12px;background:rgba(8,34,54,.8);
  border:1px solid rgba(90,175,220,.16);
}
.consola .medidas b{display:block;font-size:clamp(18px,5vw,24px);font-weight:700}
.consola .medidas span{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#6d9ab4;margin-top:3px;
}
.dias{display:flex;gap:8px;margin-top:clamp(18px,4vw,26px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dias button{
  flex:1 0 auto;min-width:84px;text-align:left;cursor:pointer;padding:11px 12px;border-radius:13px;
  border:1px solid rgba(94,224,255,.14);background:rgba(6,28,46,.7);
  transition:border-color .3s ease,background .3s ease;font-family:inherit;
}
.dias button[aria-pressed="true"]{border-color:rgba(111,230,255,.7);background:rgba(16,66,100,.85)}
.dias button .nom{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(160,210,240,.65);
}
.dias button .val{display:flex;align-items:center;gap:6px;margin-top:7px}
.dias button .val i{width:7px;height:7px;border-radius:50%;flex:none}
.dias button .val span{font-size:13px;font-weight:600;color:#dcefFB}
.pista{
  position:relative;margin-top:clamp(20px,5vw,30px);height:132px;border-radius:16px;
  background:linear-gradient(180deg,rgba(4,20,34,.85),rgba(4,16,28,.5));
  border:1px solid rgba(90,175,220,.14);touch-action:pan-y;cursor:grab;overflow:hidden;
}
.pista:active{cursor:grabbing}
.pista .barras{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:12px 10px}
.pista .barras i{flex:1;border-radius:3px 3px 0 0;transition:background .25s ease,height .25s ease}
.pista .aguja{
  position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cian-vivo),rgba(111,230,255,.15));
  box-shadow:0 0 18px rgba(111,230,255,.8);pointer-events:none;
}
.pista .reglas{
  position:absolute;bottom:6px;left:12px;right:12px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:rgba(140,195,225,.45);pointer-events:none;
}
.nota-hora{margin:14px 0 0;font-size:clamp(13px,3.4vw,15px);line-height:1.6;color:var(--texto-3)}

/* ── Rejilla de tarjetas ────────────────────────────────── */
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,3vw,20px)}
.rejilla-3 article{
  border-radius:20px;height:100%;border:1px solid rgba(94,224,255,.2);
  background:linear-gradient(158deg,rgba(8,36,58,.94),rgba(3,14,25,.96));
  padding:clamp(20px,5vw,28px);box-shadow:0 26px 70px rgba(1,10,20,.5);
}
.rejilla-3 .marbete{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--cian)}
.rejilla-3 h3{margin:14px 0 10px;font-size:clamp(21px,5.6vw,26px);line-height:1.12;letter-spacing:-.02em}
.rejilla-3 p{margin:0 0 18px;font-size:clamp(13.5px,3.6vw,15px);line-height:1.6;color:var(--texto-2)}
.rejilla-3 dl{
  margin:0;border-radius:14px;border:1px solid rgba(90,175,220,.16);background:rgba(4,18,30,.8);padding:12px 14px;
}
.rejilla-3 dl div{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(90,175,220,.08);
}
.rejilla-3 dl div:last-child{border-bottom:0}
.rejilla-3 dt{font-size:13px;color:#cfe7f6}
.rejilla-3 dd{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--cian-vivo);white-space:nowrap}

/* ── Panel de celdas unidas (privacidad / estadísticas) ─── */
.celdas-unidas{
  display:grid;gap:1px;background:rgba(94,224,255,.16);border:1px solid rgba(94,224,255,.16);
  border-radius:20px;overflow:hidden;
}
.celdas-unidas.c-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.celdas-unidas.c-150{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.celdas-unidas > div{
  background:linear-gradient(160deg,rgba(6,28,46,.95),rgba(3,14,25,.96));
  padding:clamp(22px,5vw,30px);min-height:160px;transition:background .4s ease;
}
.celdas-unidas > div:hover{background:linear-gradient(160deg,rgba(12,52,80,.95),rgba(5,22,38,.96))}
.celdas-unidas .punto{width:8px;height:8px;border-radius:50%;background:var(--cian);box-shadow:0 0 14px rgba(94,224,255,.85)}
.celdas-unidas h4{margin:16px 0 8px;font-size:clamp(16px,4.4vw,18px);letter-spacing:-.01em}
.celdas-unidas p{margin:0;font-size:clamp(13px,3.4vw,14.5px);line-height:1.6;color:var(--texto-2)}
.cifras > div{padding:clamp(22px,5vw,32px) clamp(16px,4vw,24px);text-align:center;min-height:0}
.cifras .n{font-size:clamp(28px,8vw,42px);font-weight:800;letter-spacing:-.035em;color:var(--cian-vivo)}
.cifras .k{
  font-family:var(--mono);font-size:clamp(8.5px,2.4vw,10px);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(150,205,235,.65);margin-top:8px;line-height:1.5;
}

/* ── Pasos y confianza ──────────────────────────────────── */
.rejilla-230{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.paso{
  position:relative;border-radius:18px;border:1px solid var(--borde);background:var(--panel-2);
  padding:clamp(22px,5vw,30px);overflow:hidden;
}
.paso .fantasma{position:absolute;right:14px;top:2px;font-size:70px;font-weight:800;color:rgba(94,224,255,.07);letter-spacing:-.05em}
.paso .marbete{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--cian)}
.paso h4{margin:14px 0 8px;font-size:clamp(17px,4.6vw,20px);letter-spacing:-.015em}
.paso p{margin:0;font-size:clamp(13px,3.4vw,14.5px);line-height:1.6;color:#92b8ce}
.confianza{border-radius:18px;border:1px solid var(--borde);background:var(--panel-2);padding:clamp(20px,5vw,26px)}
.confianza .marbete{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cian)}
.confianza p{margin:12px 0 0;font-size:clamp(13.5px,3.6vw,15px);line-height:1.6;color:#cfe7f6}

/* ── Capturas de la app ─────────────────────────────────── */
.pantallas{display:flex;flex-direction:column;margin:clamp(30px,7vw,54px) calc(-1 * var(--pad-x)) 0}
.pantalla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,6vw,60px);align-items:center;padding:clamp(34px,8vw,66px) clamp(20px,5vw,56px);
}
.pantalla .foto{display:flex;justify-content:center;order:1}
.pantalla .texto{max-width:46ch;justify-self:center;order:2}
.pantalla:nth-child(even) .foto{order:2}
.pantalla:nth-child(even) .texto{order:1}
.celular{
  position:relative;width:min(100%,250px);border-radius:36px;padding:9px;
  background:linear-gradient(160deg,#1c2f3d,#060f19 55%,#16283a);
  box-shadow:0 34px 80px rgba(1,10,20,.7), inset 0 0 0 1px rgba(140,205,240,.18);
}
.celular .bot{position:absolute;width:2px;border-radius:2px;background:rgba(140,205,240,.25);top:50%}
.celular .b1{left:-2px;height:42px;margin-top:-70px}
.celular .b2{left:-2px;height:62px;margin-top:-14px}
.celular .b3{right:-2px;height:78px;margin-top:-40px}
.celular .lienzo{position:relative;border-radius:28px;overflow:hidden;background:#0a1a26}
.celular .lienzo img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top center}
.celular .muesca{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:21px;
  border-radius:999px;background:#05101a;
}
.pantalla .marbete{
  font-family:var(--mono);font-size:clamp(9.5px,2.6vw,11px);letter-spacing:.28em;
  text-transform:uppercase;color:#7fe9ff;
}
.pantalla h3{margin:14px 0 12px;font-size:clamp(24px,6.4vw,36px);line-height:1.08;letter-spacing:-.028em}
.pantalla p{margin:0 0 18px;font-size:clamp(14px,3.8vw,16.5px);line-height:1.65;color:#c9e4f5;text-wrap:pretty}
.pantalla .etiquetas{display:flex;flex-wrap:wrap;gap:8px}
.pantalla .etiquetas span{
  padding:7px 13px;border-radius:999px;border:1px solid rgba(160,225,255,.34);background:rgba(4,38,68,.5);
  font-family:var(--mono);font-size:clamp(9px,2.4vw,10.5px);letter-spacing:.18em;text-transform:uppercase;color:#d6f1ff;
}

/* ── Tablas claras (comparativa y planes) ───────────────── */
.tabla-clara{
  border-radius:22px;border:1px solid rgba(12,40,62,.12);overflow:hidden;background:#fff;
  box-shadow:0 30px 70px rgba(1,10,20,.5);
}
.tabla-clara .fila{
  display:grid;grid-template-columns:minmax(0,1.25fr) clamp(88px,24vw,150px) clamp(88px,24vw,150px);
  align-items:stretch;border-bottom:1px solid rgba(12,40,62,.08);
}
.tabla-clara .fila.encabezado{border-bottom-color:rgba(12,40,62,.1)}
.tabla-clara .fila:last-child{border-bottom:0}
.tabla-clara .fila .k{
  display:flex;align-items:center;padding:clamp(13px,3.4vw,17px) clamp(12px,3.5vw,24px);
  font-size:clamp(12.5px,3.4vw,15px);line-height:1.35;color:#12303f;
}
.tabla-clara .fila .a,.tabla-clara .fila .b{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(13px,3.4vw,17px) 8px;font-size:clamp(12px,3.2vw,14px);
}
.tabla-clara .fila .a{font-weight:600;color:#0d7cc4;background:rgba(20,135,210,.05)}
.tabla-clara .fila .b{color:#4d6675}
.tabla-clara .fila.encabezado .a,.tabla-clara .fila.encabezado .b{
  font-family:var(--mono);font-size:clamp(8.5px,2.4vw,10.5px);letter-spacing:.2em;
  text-transform:uppercase;padding:clamp(15px,4vw,22px) 6px;
}
.tabla-clara .fila.encabezado .a{color:#0d7cc4;background:rgba(20,135,210,.06)}
.tabla-clara .fila.encabezado .b{color:#7d93a4;background:transparent;font-weight:400}

/* ── Puertos ────────────────────────────────────────────── */
.puertos{
  border-radius:22px;border:1px solid var(--borde);background:var(--panel-2);
  padding:clamp(24px,6vw,40px);text-align:center;
}
.puertos h2{margin:14px 0 10px;font-size:clamp(24px,6.4vw,40px);line-height:1.06;letter-spacing:-.03em}
.puertos p{margin:0 auto 26px;max-width:50ch;font-size:clamp(13.5px,3.6vw,15.5px);line-height:1.6;color:var(--texto-3)}
.puertos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.puertos li{
  padding:9px 16px;border-radius:999px;border:1px solid rgba(94,224,255,.22);background:rgba(8,38,60,.6);
  font-size:clamp(12px,3.2vw,13.5px);color:#cfe7f6;
}

/* ── Precio ─────────────────────────────────────────────── */
.linea-tiempo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,3vw,18px)}
.etapa{
  position:relative;border-radius:20px;border:1px solid rgba(94,224,255,.16);
  background:linear-gradient(160deg,rgba(6,28,46,.9),rgba(3,14,25,.94));
  padding:clamp(22px,5vw,30px) clamp(18px,4.5vw,26px);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 50px rgba(1,10,20,.4);
}
.etapa.destacada{
  border:1px solid rgba(111,230,255,.55);
  background:linear-gradient(160deg,rgba(13,62,96,.95),rgba(5,26,44,.96));
  box-shadow:0 30px 70px rgba(12,90,150,.32);
}
.etapa .cuando{display:flex;align-items:center;gap:10px}
.etapa .cuando i{width:9px;height:9px;border-radius:50%;background:#5a86a3;box-shadow:0 0 12px #5a86a3;flex:none}
.etapa.destacada .cuando i{background:var(--cian-vivo);box-shadow:0 0 12px var(--cian-vivo)}
.etapa .cuando span{
  font-family:var(--mono);font-size:clamp(9px,2.5vw,10.5px);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(150,205,235,.7);
}
.etapa.destacada .cuando span{color:#9beeff}
.etapa h3{margin:0;font-size:clamp(19px,5vw,23px);line-height:1.14;letter-spacing:-.022em;color:#dbeeFA}
.etapa.destacada h3{color:#eaf7ff}
.etapa > p{margin:0;font-size:clamp(13px,3.4vw,14.5px);line-height:1.6;color:#92b8ce}
.etapa.destacada > p{color:#b9dcef}
.etapa ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.etapa li{display:flex;align-items:flex-start;gap:9px;font-size:clamp(12.5px,3.3vw,14px);line-height:1.5;color:#a9c8db}
.etapa li i{flex-shrink:0;font-size:13px;line-height:1.5;font-style:normal;color:#3ee39a}
.etapa li.no i{color:#ff7a7a}
.etapa li.no{color:#7d9aad}

.caja-precio{margin-top:clamp(20px,5vw,30px);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 30px 76px rgba(1,10,20,.5)}
.caja-precio .cabeza{
  padding:clamp(22px,5vw,32px) clamp(18px,4.5vw,32px) clamp(16px,4vw,22px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:1px solid rgba(12,40,62,.1);
}
.caja-precio .rotulo{font-family:var(--mono);font-size:clamp(9px,2.5vw,10.5px);letter-spacing:.22em;text-transform:uppercase;color:#52697b}
.caja-precio .cifra{display:flex;align-items:baseline;gap:9px;margin-top:10px;flex-wrap:wrap}
.caja-precio .cifra b{font-size:clamp(34px,10vw,46px);font-weight:800;letter-spacing:-.04em;color:#0d6fb8}
.caja-precio .cifra span{font-size:clamp(13px,3.4vw,15px);color:#52697b}
.caja-precio .aclara{margin-top:6px;font-size:clamp(12px,3.2vw,13.5px);color:#52697b;max-width:44ch}
.caja-precio .btn{
  flex:1 1 200px;max-width:260px;padding:15px 20px;border-radius:999px;text-align:center;
  background:linear-gradient(120deg,#1e9ada,#0d6fb8);color:#fff;font-weight:700;
  font-size:clamp(13px,3.4vw,15px);box-shadow:0 12px 30px rgba(20,135,210,.4);
}
.caja-precio .btn:hover{color:#fff}
.caja-precio .matriz{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(84px,24vw,138px) clamp(84px,24vw,138px);
  align-items:stretch;border-bottom:1px solid rgba(12,40,62,.07);
}
.caja-precio .matriz.encabezado{border-bottom-color:rgba(12,40,62,.1)}
.caja-precio .matriz .k{
  display:flex;align-items:center;padding:clamp(14px,3.6vw,18px) clamp(16px,4vw,30px);
  font-size:clamp(13px,3.5vw,15.5px);line-height:1.35;color:#12303f;
}
.caja-precio .matriz.encabezado .k{
  font-family:var(--mono);font-size:clamp(8.5px,2.4vw,10px);letter-spacing:.2em;
  text-transform:uppercase;color:#7d93a4;padding:clamp(13px,3.4vw,17px) clamp(16px,4vw,30px);
}
.caja-precio .matriz .libre,.caja-precio .matriz .pro{
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3.6vw,18px) 6px;
}
.caja-precio .matriz .pro{background:rgba(20,135,210,.05)}
.caja-precio .matriz.encabezado .libre,.caja-precio .matriz.encabezado .pro{
  display:block;text-align:center;padding:clamp(13px,3.4vw,17px) 6px;font-family:var(--mono);
  font-size:clamp(8.5px,2.4vw,10px);letter-spacing:.16em;text-transform:uppercase;
}
.caja-precio .matriz.encabezado .libre{font-weight:600;color:#7d93a4}
.caja-precio .matriz.encabezado .pro{font-weight:700;color:#0d6fb8;background:rgba(20,135,210,.06)}
.caja-precio .pastilla{
  padding:6px 12px;border-radius:999px;font-size:clamp(11px,3vw,13px);font-weight:500;white-space:nowrap;
}
.caja-precio .pastilla.no{background:rgba(190,60,60,.09);color:#a8383f}
.caja-precio .pastilla.si{background:linear-gradient(120deg,#1e9ada,#0d6fb8);color:#fff;font-weight:600;padding:6px 13px}
.caja-precio .pie{
  margin:0;padding:clamp(16px,4vw,22px) clamp(16px,4vw,30px);
  font-size:clamp(12px,3.2vw,13.5px);line-height:1.6;color:#52697b;
}
.promesa{
  margin-top:clamp(16px,4vw,22px);border-radius:18px;border:1px solid rgba(94,224,255,.28);
  background:rgba(6,34,56,.6);padding:clamp(18px,4.5vw,26px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.promesa b{font-size:clamp(16px,4.4vw,19px);font-weight:600;color:#eaf7ff}
.promesa span{flex:1 1 240px;font-size:clamp(13px,3.4vw,14.5px);line-height:1.6;color:#a9d0e5}
.promesa a{
  padding:12px 22px;border-radius:999px;border:1px solid rgba(111,230,255,.45);background:rgba(10,52,82,.6);
  color:#9beeff;font-weight:600;font-size:clamp(12.5px,3.3vw,14px);white-space:nowrap;
}
.promesa a:hover{border-color:#9beeff;background:rgba(16,72,110,.7);color:#9beeff}
.asterisco{margin:14px 2px 0;text-align:center;font-size:clamp(11px,3vw,12.5px);color:rgba(150,205,235,.5);font-style:italic}

/* ── Preguntas ──────────────────────────────────────────── */
.preguntas details{border-bottom:1px solid rgba(94,224,255,.16);padding:20px 2px}
.preguntas summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
  list-style:none;font-size:clamp(15px,4vw,17px);line-height:1.35;color:#eaf6ff;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary i{font-style:normal;font-size:20px;color:var(--cian);flex-shrink:0;transition:transform .35s ease}
.preguntas details[open] summary i{transform:rotate(45deg)}
.preguntas p{margin:12px 0 2px;font-size:clamp(13.5px,3.6vw,15px);line-height:1.65;color:var(--texto-2)}

/* ── Cierre ─────────────────────────────────────────────── */
.cierre{text-align:center}
.cierre h2{margin:0 auto clamp(22px,5vw,34px);font-size:clamp(28px,8vw,52px);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.cierre .botones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:460px;margin:0 auto}
.cierre .botones a{
  flex:1 1 100%;padding:16px 30px;border-radius:999px;background:var(--btn);color:#032030;
  font-weight:600;font-size:15px;box-shadow:0 14px 40px rgba(35,165,230,.4);
}
.cierre .botones a:hover{color:#032030}
.cierre .botones span{
  flex:1 1 140px;padding:14px 20px;border-radius:999px;border:1px solid rgba(120,195,230,.22);
  background:rgba(8,38,60,.3);color:rgba(207,231,246,.65);font-size:13.5px;
}

/* ── Pie ────────────────────────────────────────────────── */
.pie{
  position:relative;z-index:3;border-top:1px solid rgba(94,224,255,.14);
  padding:clamp(32px,8vw,48px) var(--pad-x) clamp(40px,9vw,56px);text-align:center;background:rgba(1,9,17,.6);
}
.pie img{height:30px;width:auto;margin:0 auto 16px;display:block}
.pie .lema{margin:0 0 16px;font-size:13.5px;color:#7fa5bd}
.pie nav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;font-size:13px}
.pie nav.secundaria{font-size:12.5px;margin-top:14px}
.pie .copia{margin:22px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(130,180,210,.4)}

/* Espacio para que la barra fija no tape el pie en móvil */
@media (max-width:859px){.pie{padding-bottom:calc(clamp(40px,9vw,56px) + 92px)}}