/* =====================================================================
   CAPA «APPLE» — rediseño paralelo de la landing (landing_apple.html)

   Esta hoja va ENCIMA de los estilos de landing_8.html y solo cambia la
   forma: aire, jerarquia tipografica, secciones a pantalla completa y
   transiciones. El marcado, los textos, los precios, los colores de marca,
   el logo, los videos y el carrusel son los mismos bytes que la original.

   Va en fichero aparte (y su JS tambien) a proposito: la CSP de la landing
   exige hash para cada <script> inline. Con ficheros servidos desde 'self'
   no hay ningun hash nuevo que mantener si se adopta.

   Escala tipografica aurea (ver memoria de proporcion aurea):
     cuerpo 17 px  ->  x1.618 = h3 27.5  ->  x1.618 = h2 44.5  ->  x1.618 = h1 72
     lead = cuerpo x sqrt(phi) = 21.6 px
   Todos con clamp() para que en movil bajen sin desbordar 390 px.
   ===================================================================== */

:root{
  /* Montserrat se queda en titulares, cifras y precios (la voz de la marca);
     el texto corrido pasa a la fuente del sistema, que es la que mejor se lee
     en cuerpo pequeno. Es lo que recomienda branding.md › Best practices:
     «a custom font for headlines and subheadings while using system fonts
     for body copy and captions». Para volver a Montserrat en todo, basta con
     --text:var(--sans). */
  --text:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --phi:1.618;
  --t-body:1.0625rem;                          /* 17 px */
  --t-lead:clamp(1.12rem,1.6vw,1.35rem);       /* 21.6 px */
  --t-h3:clamp(1.3rem,2.2vw,1.72rem);          /* 27.5 px */
  --t-h2:clamp(2rem,4.6vw,2.78rem);            /* 44.5 px */
  --t-h1:clamp(2.45rem,6.4vw,4.5rem);          /* 72 px */
  --ease-apple:cubic-bezier(.16,1,.3,1);
  --r:22px;
  /* Aire entre secciones. Primera pasada: 96/122 px por lado, y se paso de
     frenada — en las costuras del MISMO fondo (Socrates->Precio->FAQ, todo
     navy) los dos paddings se sumaban en 238 px de azul seguido. Calibrado:
       --sec-filo   costura con cambio de fondo: el filo de color ya separa.
                    56 px por lado = 112 de hueco a 1440.
       --sec-plano  costura sin cambio de fondo: un escalon mas (x1.15),
                    no el doble. 64 por lado = 128.
     Cada seccion declara abajo cual le toca en cada lado. */
  --sec-filo:clamp(34px,3.9vw,56px);
  --sec-plano:calc(var(--sec-filo) * 1.15);
}

body{font-family:var(--text);font-size:var(--t-body);line-height:1.5;letter-spacing:-.003em}
/* Fuera el grano: el acabado premium es una superficie limpia. */
body::after{content:none}

h1,h2,h3,h4,.stat .n,.price,.pname,.pull,.dk-n,.pst .pn,.vh-them-name,.vh-us-name,
.badge,.btn,.eyebrow,.plat-cap .tag,.nav-links a,.promo-link,.qa-q,.vs-feat-title,.tf h4,.aif h4,.virtue h3{
  font-family:var(--sans)}
h1,h2,h3{letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
h2{font-size:var(--t-h2);font-weight:800}
h3{font-size:var(--t-h3)}
.lead{font-size:var(--t-lead);line-height:1.45;font-weight:400}

/* Eyebrow: sin la rayita, mas Apple. El rojo de marca pasa al texto. */
.eyebrow{font-size:.8rem;letter-spacing:.08em;color:var(--red);gap:0}
.eyebrow::before{content:none}
.on-dark .eyebrow{color:#7fb4e6}

/* Botones en pildora, como los de Apple; mismo rojo de marca. */
.btn{border-radius:980px;font-weight:600;letter-spacing:-.005em}
.btn-primary{box-shadow:none}
.btn-primary:hover{transform:none;box-shadow:none;background:var(--red-700)}
.btn-ghost:hover{transform:none}
.btn-lg{padding:1em 2.1em;font-size:1.06rem}

/* ---------- cabecera: mas fina y mas cristal ---------- */
header{background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
header.scrolled{box-shadow:none;border-bottom-color:rgba(10,58,99,.08)}
.nav-links{gap:2.2em}
.nav-links a{font-weight:500;font-size:.88rem;color:var(--ink)}
.nav-links a::after{content:none}
.promo-band{padding:.6em 0}
.promo-link{font-weight:500;font-size:.9rem}

/* ---------- secciones ---------- */
.sec-head{max-width:none;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{margin:.3em 0 .35em}
/* Cabeceras centradas por defecto: una sola columna de lectura. */
#problema .sec-head,#comparativa .sec-head,.compare .sec-head{text-align:center;margin-inline:auto}
#problema .sec-head .lead,#comparativa .sec-head .lead{max-width:44ch;margin-inline:auto}
#comparativa .sec-head h2{font-size:var(--t-h2);max-width:none}

/* ---------- HERO: titular centrado y la bobina de videos a sangre ---------- */
.hero{padding:0}
.hero .aurora,.hero .dots{display:none}
.hero.on-dark{background:linear-gradient(180deg,#0a3a63 0%,#062a48 100%)}
.hero-grid{grid-template-columns:1fr;gap:0;text-align:center;justify-items:center}
/* Arriba CERO: la etiqueta va pegada a la banda «Pruebelo sin costo», que es
   del mismo azul, y las dos se leen como una sola franja superior. El aire que
   queda entre ambas es el propio de la banda bajo su texto. Con 84 px, y luego
   con 20, la etiqueta flotaba sola en medio del azul. Abajo no se toca. */
.hero-grid>div:first-child{max-width:980px;padding:0 0 clamp(32px,4vw,52px)}
.hero h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.045em;margin:.25em auto .4em;max-width:21ch}
.hero .lead{max-width:36ch;margin-inline:auto;color:#c4d6ea}
.hero-cta{justify-content:center;margin:1.8em 0 1.2em}
.reassure{justify-content:center}
.badge-soft{margin-bottom:.4em}
/* La bobina: a todo el ancho de la ventana, 21:9 en escritorio. */
.stage{width:100vw;margin:0 calc(50% - 50vw)}
.hero-photos{flex:1;margin:0;border:0;border-radius:0;box-shadow:none;aspect-ratio:21/9;min-height:0;max-height:78vh}

/* ---------- cifras ---------- */
.stat .n{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.04em}
.stats{--f-cifra:clamp(2.2rem,4.6vw,3.6rem)}
.stat .l{font-size:.95rem}
/* La fila de escudos (.fuentes) ya no vive aqui: sube a la portada, encima del
   video. Sin ella, el ultimo elemento de la franja vuelve a ser texto y su aire
   de abajo vuelve a la escala general en vez de a --f-aire. */
.stats{--sec-pb:var(--sec-filo)}

/* ---------- escudos en la portada: cinta de arriba del video ----------
   Mismo estilo que tenian bajo las cifras. Las alturas cuelgan de variables que
   la original declara en .stats; aqui se declaran IGUALES (con el --f-cifra de
   esta capa) para que los escudos midan exactamente lo mismo que antes.
   Arriba conserva su filete y su aire; abajo se le da el mismo --f-aire para
   que no quede pegada al video. A todo el ancho util, como bajo las cifras. */
.hero .fuentes{
  --f-cifra:clamp(2.2rem,4.6vw,3.6rem);
  --f-glifo:calc(var(--f-cifra) * .871);
  --f-media:calc(var(--f-glifo) / var(--phi));
  --f-max:calc(var(--f-media) / .805);
  --f-aire:calc(var(--f-max) / var(--phi));
  justify-self:stretch;width:100%;
  margin-top:0;padding-bottom:var(--f-aire);
  /* El filete se saca del borde (que solo cubria el ancho de .wrap y se veia
     recortado) y pasa a un pseudo a sangre, IGUAL que los filos de la cinta de
     datos de abajo: 1 px de blanco al 7%, de lado a lado de la ventana. Asi el
     video queda enmarcado por dos filos gemelos: arriba el de los escudos y
     abajo el del ticker. */
  border-top:0;position:relative}
.hero .fuentes::before{content:"";position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;
  height:1px;background:rgba(255,255,255,.07);pointer-events:none}

/* ---------- problema: citas grandes sin caja ---------- */
#problema{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-filo)}
.pains{gap:clamp(18px,2.4vw,28px);max-width:1040px;margin:0 auto}
.pain{background:var(--paper-2);border:0;box-shadow:none;border-radius:var(--r);padding:clamp(28px,3.6vw,44px)}
.pain:hover{transform:none;box-shadow:none}
.pain p{font-size:clamp(1.08rem,1.5vw,1.28rem);font-style:normal;font-weight:500;line-height:1.45;padding-left:0;color:var(--ink)}
.pain .q{position:static;display:block;line-height:.6;font-size:3.4rem;color:var(--red);margin-bottom:.15em;font-family:var(--sans)}
.pull{font-size:clamp(1.6rem,3.2vw,2.4rem);max-width:22ch;margin-top:clamp(32px,4vw,52px)!important;letter-spacing:-.035em;line-height:1.12}

/* ---------- comparativa ---------- */
#comparativa{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-filo)}
.vs-table{max-width:960px;border-radius:28px;box-shadow:0 30px 80px -40px rgba(10,58,99,.35)}
.vs-head>div{padding:24px 28px}
.vs-feat{padding:24px 28px}
.vs-them,.vs-us{padding:24px 22px}
.vs-feat-title{font-size:1.02rem}
.vs-head .vh-them{border-radius:28px 0 0 0}

/* ---------- plataforma: el carrusel respira ---------- */
#plataforma{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-filo);background:#fff!important}
#plataforma .sec-head{margin-bottom:clamp(28px,4vw,48px)}
.car-card{border-radius:24px;box-shadow:0 30px 70px -36px rgba(10,58,99,.4)}
.car-card.is-active{box-shadow:0 40px 90px -40px rgba(10,58,99,.5)}
.car-shot{border-radius:24px;border:0}
.car-nav{width:48px;height:48px;border:0;box-shadow:0 8px 24px -10px rgba(10,58,99,.4)}
.car-dots{margin-top:28px}
.plat-cap h3{font-size:var(--t-h3)}
.plat-cap p{font-size:1.02rem}

/* ---------- Track: pantalla completa, una sola columna ---------- */
/* Sin min-height:100svh: con el padding encima, en una ventana alta todo el
   sobrante quedaba como azul vacio. La seccion mide lo que mide su contenido. */
.track{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-filo)}
.track .aurora{opacity:.6}
.track-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(36px,5vw,64px)}
.track-copy{max-width:760px}
.track-copy h2{font-size:clamp(2.4rem,5.6vw,3.6rem)}
.track-copy .lead{margin-inline:auto}
.track .track-feats{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;margin-top:36px}
.tf{background:rgba(255,255,255,.05);border-radius:18px;padding:20px 22px}
.track-demo{width:100%;max-width:1120px}
/* El video es 1280x984 (1.30:1) y la original lo topa a 80vh de alto. A todo el
   ancho, el marco medía 1120 y el video solo llenaba ~940: el resto eran bandas
   de azul vacio a los lados. El marco se ajusta a la proporcion del video. */
.track-demo .frame{width:min(100%,calc(80vh * 1.3));margin-inline:auto}
.track .frame{border-radius:22px;border:0;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
/* La escala la anima apple.js con --p (0 -> 1) segun el scroll. Sin JS, o con
   movimiento reducido, --p no existe y el marco queda a tamano final. */
.track-demo .frame,.carousel,.vs-table,.life-img{
  transform:scale(calc(.9 + .1 * var(--p,1)));transform-origin:50% 50%;will-change:transform}

/* ---------- equipo ---------- */
.life{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-plano)}
.life-img{border-radius:28px;box-shadow:none}
.life h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:.35em 0 .45em}

/* ---------- por que: tarjetas planas ---------- */
.virtues{gap:clamp(14px,2vw,24px)}
.virtue{background:var(--paper-2);border:0;box-shadow:none;border-radius:var(--r);padding:32px 28px}
.virtue:hover{transform:none;box-shadow:none}
.vic{background:#fff;border-radius:14px;width:50px;height:50px}
.virtue h3{font-size:1.15rem;letter-spacing:-.02em}
.virtue p{font-size:.98rem;line-height:1.5}

/* ---------- Socrates: casi pantalla completa, el orbe manda ---------- */
.socrates .wrap{max-width:1040px}
.socrates{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-plano)}
.socrates h2{font-size:clamp(2.4rem,5.6vw,3.6rem);margin:.3em 0 .35em}
.orb-wrap{transform:scale(1.35);margin-bottom:44px}
.ai-feats{gap:20px;margin-top:48px}
.aif{border:0;border-radius:20px;padding:28px 24px;background:rgba(255,255,255,.06)}

/* ---------- precio: mas aire, tarjetas limpias ---------- */
#precio{padding:var(--sec-plano) 0}
#precio .sec-head h2{font-size:var(--t-h2);margin:.25em 0 .2em!important}
.bill-toggle{margin:24px auto 40px}
.plans-3{gap:24px}
.plans-3 .plan{padding:30px 28px 32px;border-radius:26px;border:0;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.plan:hover{transform:none}
.plan.best{border:2px solid var(--blue)}
.plans-3 .price{font-size:2.3rem;letter-spacing:-.035em}
.plans-3 .plan .btn{padding:.8em 1.4em;margin-top:18px;font-size:.95rem}
.plans-3 .plan-inc{margin:18px 0 10px;padding-top:16px}
.plans-3 .plan ul{gap:8px}
.cmp-wrap{margin-top:72px}
.cmp-table{border-radius:20px;border:0}
.cmp-head{border-radius:20px 20px 0 0}
.price-note{margin-top:36px}

/* ---------- FAQ: lista con filetes, sin cajas ---------- */
.faq{--sec-pt:var(--sec-plano);--sec-pb:var(--sec-plano)}
.faq-list{gap:0}
.qa{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;box-shadow:none}
.qa:first-child{border-top:1px solid rgba(255,255,255,.14)}
.qa-q{color:#fff;font-size:1.12rem;padding:26px 4px}
.qa-q .pm::before,.qa-q .pm::after{background:#7fb4e6}
.qa-a p{color:#b9c9de;padding:0 4px 26px;font-size:1rem;line-height:1.6}

/* ---------- transiciones al scroll ---------- */
/* Mismas clases .reveal que pone la landing; solo cambia la curva: mas
   recorrido, mas largas y con la desaceleracion de Apple. */
.reveal{transform:translateY(40px);transition:opacity 1.1s var(--ease-apple),transform 1.1s var(--ease-apple)}

/* La pantalla corta (portatiles de 800 px) ya no comprime la comparativa
   ni la plataforma: aqui se prima el aire, no caber en una pantalla. */
@media(max-height:820px) and (min-width:861px){
  #comparativa{padding-top:var(--sec-filo);padding-bottom:var(--sec-filo);scroll-margin-top:calc(127px - var(--sec-filo))}
  #comparativa .sec-head .lead{display:block}
  #comparativa .sec-head h2{font-size:var(--t-h2)}
  #plataforma{--sec-pt:var(--sec-filo);--sec-pb:var(--sec-filo)}
  #plataforma .plat-intro{display:block}
}

@media(max-width:980px){
  .virtues{grid-template-columns:repeat(2,1fr)}
  /* En movil el texto va PRIMERO (en la original iba la foto): asi el boton
     queda sobre el pliegue. */
  .stage{order:0;margin-bottom:0}
  .hero-photos{aspect-ratio:4/3;border-radius:0;border:0}
  .hero-grid>div:first-child{padding:0 0 36px}
  .track .track-feats{grid-template-columns:1fr}
  .hero.has-ticker{padding-bottom:0}
}
@media(max-width:680px){
  .virtues,.ai-feats{grid-template-columns:1fr}
  .qa-q{font-size:1.02rem;padding:22px 2px}
  /* El pie de la original desborda los 390 px con sus tres columnas: aqui se reparten. */
  .foot-links{flex-wrap:wrap;gap:28px 40px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:none}
  .track-demo .frame,.carousel,.vs-table,.life-img{transform:none}
}