/* ══════════════════════════════════════════════════════════════════
   AILUMNOS — Landing
   Sistema de diseño derivado de la identidad de la app:
   naranja cálido sobre fondo oscuro, tipografía Gabarito + Lexend.
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Neutros — grises cálidos, misma temperatura que el naranja */
  --void:      #080808;
  --bg-1:      #0F0C0A;
  --bg-2:      #171210;
  --bg-3:      #201815;
  --line:      rgba(255,107,53,.14);
  --line-soft: rgba(255,255,255,.07);

  /* Marca */
  --brand:       #FF6B35;
  --brand-deep:  #FF4500;
  --brand-light: #FF9A5C;
  --brand-glow:  rgba(255,107,53,.35);

  /* Acentos semánticos (mismos de la app) */
  --kelp:  #4ADE80;
  --sonar: #00C8FF;
  --jelly: #C084FC;

  /* Texto — contraste verificado sobre --void */
  --text-hi:  #F5EDE7;   /* 15.8:1  */
  --text-mid: #C4AE9F;   /*  8.1:1  */
  --text-lo:  #9A8676;   /*  5.2:1  */

  /* Escala tipográfica */
  --fs-caption: .78rem;
  --fs-small:   .88rem;
  --fs-body:    1rem;
  --fs-lead:    1.15rem;
  --fs-h3:      1.5rem;
  --fs-h2:      2.25rem;
  --fs-h1:      clamp(2.6rem, 7vw, 4.75rem);

  /* Gabarito para todo lo que sea titular o cifra: geométrica,
     informal y con mucha presencia en sus pesos altos. Nació para
     una plataforma de educación en línea, así que su tono encaja
     con un público universitario sin caer en lo infantil. */
  --f-head: 'Gabarito', system-ui, sans-serif;
  --f-body: 'Lexend', system-ui, sans-serif;
  --f-fun:  'Gabarito', system-ui, sans-serif;

  /* Espaciado — escala no lineal */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radios */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Elevación — 4 niveles con significado */
  --e1: 0 2px 8px rgba(0,0,0,.35);
  --e2: 0 8px 24px rgba(0,0,0,.45);
  --e3: 0 16px 48px rgba(0,0,0,.55);
  --e4: 0 28px 80px rgba(0,0,0,.65);
  --e-brand: 0 12px 40px rgba(255,69,0,.32);

  --container: 1180px;
  --nav-h: 68px;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  background: var(--void);
  color: var(--text-hi);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

/* Foco visible — accesibilidad de teclado */
:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Salto al contenido para lectores de pantalla */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background: var(--brand); color:#1a0a00; padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus { left:0; }

.container { width:min(100% - 2.5rem, var(--container)); margin-inline:auto; }

/* ── TIPOGRAFÍA ────────────────────────────────────────────────── */
/* Gabarito es geométrica: a pesos altos pide tracking negativo para
   que las contraformas no se abran de más en titulares grandes. */
h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.028em;
}
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 4.5vw, var(--fs-h2)); }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size: var(--fs-caption); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand-light);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255,107,53,.10);
  border: 1px solid rgba(255,107,53,.22);
}
.lead { font-size: var(--fs-lead); color: var(--text-mid); max-width: 62ch; }
.grad {
  background: linear-gradient(115deg, var(--brand-light) 5%, var(--brand) 45%, var(--brand-deep) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Acento — Gabarito en peso alto, para cifras y palabras sueltas */
.fun { font-family: var(--f-fun); font-weight:800; letter-spacing:-.02em; }

/* Títulos de sección más grandes y con más presencia */
.section-head h2 { font-size: clamp(2.1rem, 5.2vw, 3.1rem); }
.section-head .lead { font-size:1.12rem; }

/* ══ SISTEMA DE ICONOS ══════════════════════════════════════════
   Todos los SVG comparten trazo redondeado y grosor 2.
   `.ico` controla el tamaño; el color se hereda de currentColor. */
.ico {
  width:24px; height:24px; flex-shrink:0;
  stroke: currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ico-sm { width:18px; height:18px; }
.ico-lg { width:28px; height:28px; }

/* ── BOTONES ───────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding: 14px 28px; border-radius: var(--r-pill);
  font-weight:600; font-size:.97rem; letter-spacing:.01em;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, border-color .18s;
  white-space: nowrap; text-align:center;
  min-height: 48px;   /* objetivo táctil cómodo */
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand) 55%, var(--brand-light));
  background-size: 200% 200%;
  color: #23100A; font-weight:700;
  box-shadow: var(--e-brand);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(255,69,0,.45); background-position: 100% 50%; }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  border: 1.5px solid var(--line); color: var(--text-hi);
  background: rgba(255,255,255,.03); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--brand); background: rgba(255,107,53,.10); transform: translateY(-2px); }
.btn-lg { padding: 17px 38px; font-size: 1.05rem; min-height: 56px; }
.btn-block { width:100%; }

/* ── NAV ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: rgba(8,8,8,.55);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.scrolled { background: rgba(8,8,8,.92); border-bottom-color: var(--line); }
.nav .container { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); }
.brand-mark {
  display:flex; align-items:center; gap:11px;
  font-family:var(--f-head); font-size:1.3rem; letter-spacing:-.015em;
}
.brand-mark img {
  height:40px; width:auto;
  filter: drop-shadow(0 2px 10px rgba(255,107,53,.45));
  transition: transform .28s cubic-bezier(.2,.8,.3,1), filter .28s;
}
.brand-mark:hover img {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 4px 16px rgba(255,107,53,.75));
}
.brand-mark .dot { color: var(--brand); }

/* Logotipo grande del hero */
.hero-logo {
  display:flex; align-items:center; gap:var(--s3);
  margin-bottom: var(--s5);
}
.hero-logo img {
  height:78px; width:auto;
  filter: drop-shadow(0 6px 26px rgba(255,69,0,.55));
}
.hero-cta .btn { flex:1 1 auto; min-width:190px; }
.hero-trust { gap: var(--s4) var(--s5); }
.nav-links { display:flex; gap:var(--s5); align-items:center; }
.nav-links a {
  font-size:.93rem; color: var(--text-mid); font-weight:500;
  position:relative; padding: 6px 0; transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--brand); border-radius:2px; transition: right .25s ease;
}
.nav-links a:hover { color: var(--text-hi); }
.nav-links a:hover::after { right:0; }
.nav-cta { display:flex; gap:var(--s3); align-items:center; }
.nav-cta .btn { padding: 10px 20px; min-height:42px; font-size:.9rem; }

.nav-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--r-sm); }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text-hi); position:relative; transition:.25s; }
.nav-toggle span::before, .nav-toggle span::after {
  content:''; position:absolute; left:0; width:22px; height:2px; background:var(--text-hi); transition:.25s;
}
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top:0; transform:rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════
   HERO — imagen fija (sin animación)
   Capas (de atrás hacia adelante):
     1. .hero-img   → foto, estática y sin escalar (máxima nitidez)
     2. .hero-veil  → degradado que oscurece solo el lado del texto
     3. .hero-mesh  → tinte naranja fijo, para unidad de marca
     4. .hero-inner → contenido, con su propio fondo para el contraste

   Las capas .hero-scan, .hero-grid y #hero-particles quedaron
   desactivadas; sus reglas se conservan por si se quieren reactivar.
   ══════════════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height: 100svh;
  display:flex; align-items:center;
  padding: calc(var(--nav-h) + var(--s8)) 0 var(--s9);
  overflow:hidden; isolation:isolate;
}
/* El degradado de respaldo vive en el contenedor: si la foto no carga,
   el hero sigue viéndose bien en vez de quedar en negro plano. */
.hero-media {
  position:absolute; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(70% 80% at 72% 40%, rgba(255,107,53,.22), transparent 62%),
    radial-gradient(50% 60% at 20% 70%, rgba(0,200,255,.10), transparent 60%),
    linear-gradient(160deg, var(--bg-3), var(--void) 70%);
}
/* Imagen estática, sin zoom ni movimiento.
   El encuadre al 53 % deja fuera la pizarra del logo que trae la
   foto arriba a la izquierda —que se duplicaría con el logotipo
   del panel— y centra la vista en las caras y la tablet. */
.hero-img {
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 53%;
  image-rendering: -webkit-optimize-contrast;   /* nitidez en Chrome/Edge */
}

/* El oscurecido se concentra en el tercio izquierdo, donde va el
   texto. Del 44 % hacia la derecha la foto queda limpia, para que
   se vean bien el estudiante y el holograma. El contraste del
   titular no lo da este velo, sino el fondo propio de .hero-inner. */
.hero-veil {
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(95deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.40) 26%, rgba(8,8,8,.04) 44%, transparent 62%),
    linear-gradient(to top, var(--void) 0%, rgba(8,8,8,.30) 14%, transparent 36%),
    linear-gradient(to bottom, rgba(8,8,8,.58) 0%, transparent 18%);
}

/* Tinte naranja muy tenue en el borde izquierdo. Se mantiene bajo
   a propósito: esta foto ya trae mucho color propio (azules del
   cuarto, amarillo del polerón) y un naranja fuerte los ensuciaría. */
.hero-mesh {
  position:absolute; inset:-15%; z-index:-2; pointer-events:none; opacity:.45;
  background: radial-gradient(32% 42% at 8% 32%, rgba(255,69,0,.22) 0%, transparent 72%);
  filter: blur(30px);
}

/* Capas de animación desactivadas: el banner es estático. */
.hero-scan,
.hero-grid,
#hero-particles { display:none; }

/* Panel de texto pegado al borde izquierdo.
   Se mantiene angosto (máx. 500 px) a propósito: así termina antes
   de donde está el estudiante en la foto y no lo tapa. El degradado
   se disuelve rápido para dejar la escena limpia. */
.hero .container { width:100%; max-width:none; padding-inline: clamp(20px, 4vw, 56px); }
.hero-inner {
  position:relative; z-index:1;
  max-width: 500px; margin-right:auto;
  padding: var(--s6) var(--s6) var(--s6) var(--s5);
  border-radius: var(--r-lg);
  /* Sin backdrop-filter: el desenfoque restaba nitidez a la foto.
     El contraste lo da únicamente el degradado. */
  background:
    linear-gradient(100deg, rgba(8,6,5,.90) 0%, rgba(8,6,5,.78) 48%, rgba(8,6,5,.28) 82%, transparent 100%);
}
.hero h1 {
  margin: 0 0 var(--s4);
  font-size: clamp(2.3rem, 3.6vw, 3.5rem);
  text-shadow: 0 6px 44px rgba(0,0,0,.85);
}
.hero .lead { max-width: 44ch; }
/* El titular nunca debe desbordar: si una palabra no cabe, se parte. */
.hero h1, .section-head h2 {
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}
.hero .lead { text-shadow: 0 2px 22px rgba(0,0,0,.9); color:#E4D5C8; font-size:1.2rem; }
.hero-cta { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top: var(--s6); }

.hero-trust {
  display:flex; gap:var(--s5); flex-wrap:wrap; margin-top: var(--s6);
  font-size: var(--fs-small); color: #C9B6A8;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.hero-trust span { display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg { width:18px; height:18px; stroke:var(--kelp); fill:none; stroke-width:2.6; flex-shrink:0; }

.scroll-hint {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-lo);
}
.scroll-hint i {
  width:24px; height:38px; border:2px solid var(--line); border-radius:var(--r-pill);
  position:relative;
}
.scroll-hint i::after {
  content:''; position:absolute; left:50%; top:8px; width:3px; height:7px;
  background:var(--brand); border-radius:2px; transform:translateX(-50%);
  animation: wheel 1.9s ease-in-out infinite;
}
@keyframes wheel { 0%,100%{ transform:translate(-50%,0); opacity:1 } 55%{ transform:translate(-50%,12px); opacity:.2 } }

/* ── SECCIONES ─────────────────────────────────────────────────── */
.section { padding: var(--s9) 0; position:relative; }
.section-head { max-width: 720px; margin-bottom: var(--s7); }
.section-head h2 { margin: var(--s4) 0 var(--s3); }
.section-head-center { text-align:center; margin-inline:auto; }
.section-head-center .lead { margin-inline:auto; }

/* ══ HERRAMIENTAS — cada una con su color ═══════════════════════
   Cada tarjeta define `--c` (color base) y `--c2` (color de apoyo).
   Todo lo demás —aura, borde, icono, brillo— deriva de esos dos
   valores, así que cambiar el color de una herramienta es cambiar
   una sola línea en el HTML. */
.features {
  /* min() evita el desborde en pantallas de 320px: sin él la pista
     mide 290px aunque el contenedor sea más angosto, y la página
     entera termina con scroll horizontal. */
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%),1fr));
  gap: var(--s5);
}
.f-card {
  --c:  var(--brand);
  --c2: var(--brand-light);
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1) 60%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5) var(--s6);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, box-shadow .3s;
}
/* Aura de color que se enciende al pasar el cursor */
.f-card::before {
  content:''; position:absolute; inset:-40% 40% 55% -30%; z-index:-1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 68%);
  filter: blur(46px); opacity:.30; transition: opacity .35s;
}
/* Filete superior del color de la herramienta */
.f-card::after {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, transparent, var(--c), var(--c2), transparent);
  opacity:.5; transition: opacity .35s;
}
.f-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: var(--e3), 0 20px 60px color-mix(in srgb, var(--c) 22%, transparent);
}
.f-card:hover::before { opacity:.75; }
.f-card:hover::after  { opacity:1; }

/* Ficha del icono, en el color de la herramienta */
.f-ico {
  width:66px; height:66px; border-radius:20px;
  display:grid; place-items:center; margin-bottom: var(--s5);
  position:relative; overflow:hidden;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--c) 34%, transparent),
    color-mix(in srgb, var(--c2) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--c) 48%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 8px 24px color-mix(in srgb, var(--c) 24%, transparent);
  transition: transform .32s cubic-bezier(.2,.8,.3,1), box-shadow .32s;
}
/* Brillo diagonal tipo cristal */
.f-ico::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(140deg, rgba(255,255,255,.28), transparent 52%);
}
.f-card:hover .f-ico {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
              0 12px 34px color-mix(in srgb, var(--c) 42%, transparent);
}
/* Icono bicolor: trazo en el color claro, relleno translúcido */
.f-ico svg { width:34px; height:34px; position:relative; z-index:1; }
.f-ico svg [data-fill] { fill: color-mix(in srgb, var(--c) 55%, transparent); stroke:none; }
.f-ico svg [data-line] { fill:none; stroke: var(--c2); stroke-width:2;
                         stroke-linecap:round; stroke-linejoin:round; }

.f-card h3 {
  font-size:1.38rem; margin-bottom: 10px;
  font-family:var(--f-head); font-weight:800; letter-spacing:-.022em;
  color: var(--text-hi);
}
.f-card p { font-size:var(--fs-small); color: var(--text-mid); line-height:1.65; }

/* Etiqueta de categoría, arriba a la derecha */
.f-tag {
  position:absolute; top:var(--s5); right:var(--s5);
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--c2);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  padding: 5px 11px; border-radius: var(--r-pill);
}

/* Respaldo para navegadores sin color-mix() (Safari < 16.2, Firefox < 113).
   Ahí los colores se resuelven con opacidad sobre el color base, que da un
   resultado equivalente aunque menos afinado. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .f-card::before { background: radial-gradient(circle, var(--c), transparent 68%); opacity:.18; }
  .f-card:hover   { border-color: var(--c); box-shadow: var(--e3); }
  .f-ico {
    background: linear-gradient(145deg, var(--c), transparent);
    border-color: var(--c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.4);
  }
  .f-ico svg [data-fill] { fill: var(--c); opacity:.5; }
  .f-tag { background: rgba(255,255,255,.06); border-color: var(--c); }
}

/* En pantallas chicas la etiqueta estorba al título */
@media (max-width: 420px) {
  .f-tag { display:none; }
}

/* ══ SMARTY ═════════════════════════════════════════════════════
   La foto del holograma manda en esta sección. Alrededor de ella
   flotan burbujas con una conversación real, que explican el
   producto mejor que cualquier adjetivo. El acento pasa del
   naranja de marca al cian --sonar, para que dialogue con la luz
   del holograma de la imagen. */
.smarty {
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s9); align-items:center;
}

.smarty-visual {
  position:relative; margin:0;
  border-radius: var(--r-xl);
  /* Espacio extra a los lados para que quepan las burbujas */
  padding: var(--s5) var(--s4);
}
/* Sombra cálida bajo la foto. Sobre fondo naranja un halo luminoso
   no se distingue, así que la profundidad la da una sombra oscura. */
.smarty-visual::before {
  content:''; position:absolute; inset:14% 6% 2%; z-index:0;
  background: rgba(90,30,0,.55);
  filter: blur(46px);
}
/* Marco claro: separa la foto del naranja y le da aire */
.smarty-photo {
  position:relative; z-index:1;
  width:100%; display:block;
  border-radius: var(--r-lg);
  border:4px solid rgba(255,255,255,.72);
  box-shadow: 0 22px 60px rgba(70,24,0,.42);
}

/* Chip de estado sobre la foto */
.smarty-status {
  position:absolute; z-index:3;
  top: calc(var(--s5) + 14px); left: calc(var(--s4) + 14px);
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(6,14,22,.72);
  border:1px solid rgba(0,200,255,.30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size:.74rem; font-weight:600; color:#BFEBFF; letter-spacing:.02em;
}
.smarty-status i {
  width:7px; height:7px; border-radius:50%; background:var(--kelp);
  box-shadow:0 0 0 3px rgba(74,222,128,.22);
}

/* Burbujas de conversación */
.bubble {
  position:absolute; z-index:3; max-width:265px;
  padding: 13px 16px; border-radius:16px;
  font-size:.83rem; line-height:1.5;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--e3);
}
.bubble b { display:block; font-size:.66rem; letter-spacing:.12em;
            text-transform:uppercase; margin-bottom:5px; font-weight:700; }

/* Contraste de chat clásico: el estudiante en claro, Smarty en
   oscuro. Así las dos se distinguen tanto sobre la foto como
   sobre el naranja del fondo. */

/* Pregunta del estudiante — blanca, arriba a la derecha */
.bubble-ask {
  top: 6%; right: -10px;
  background: rgba(255,252,250,.94);
  border:1px solid rgba(255,255,255,.9);
  color:#3A1C0B;
  border-bottom-right-radius:5px;
}
.bubble-ask b { color:#B24A12; }

/* Respuesta de Smarty — oscura con acento cian, abajo a la izquierda */
.bubble-answer {
  bottom: 8%; left: -16px;
  background: rgba(7,17,26,.94);
  border:1px solid rgba(0,200,255,.42);
  color:#DCEFF9;
  border-bottom-left-radius:5px;
}
.bubble-answer b { color:#5FD8FF; }
.bubble-answer em {
  display:block; margin-top:7px; font-style:normal;
  font-size:.72rem; color:#8FB4C7;
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN NARANJA DE MARCA — usada en Smarty
   ──────────────────────────────────────────────────────────────────
   Sobre naranja saturado el texto blanco NO alcanza el contraste
   mínimo (queda en 2,6:1). Por eso aquí el texto es marrón muy
   oscuro, que sobre el punto más claro del degradado da 8,3:1 y
   sobre el más oscuro 5,2:1 — ambos por encima del umbral AA.
   ══════════════════════════════════════════════════════════════════ */
.section-brand {
  --b-ink:    #2A1206;   /* titulares */
  --b-body:   #4A2611;   /* párrafos   */
  --b-soft:   #6B3C1E;   /* secundario */

  background: linear-gradient(135deg, #FF5A1F 0%, #FF8438 48%, #FFA25A 100%);
  color: var(--b-body);
}
.section-brand h2          { color: var(--b-ink); }
.section-brand .lead       { color: var(--b-body); }
.section-brand .grad {
  /* Sobre naranja un degradado naranja no se vería: se usa un tono
     crema muy claro, que además refuerza el titular. */
  background: linear-gradient(115deg, #FFF6ED, #FFE2C8 60%, #FFD0A6);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section-brand .eyebrow {
  color: var(--b-ink);
  background: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.55);
}
.section-brand .check-list li     { color: var(--b-body); }
.section-brand .check-list strong { color: var(--b-ink); }
.section-brand .check-list svg    { stroke: var(--b-ink); }
.section-brand :focus-visible     { outline-color: #2A1206; }

/* Lista de capacidades */
.check-list { list-style:none; display:grid; gap:var(--s4); margin-top: var(--s5); }
.check-list li { display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-small); color:var(--text-mid); }
.check-list svg { width:21px; height:21px; flex-shrink:0; margin-top:2px; stroke:var(--sonar); fill:none; stroke-width:2.6; }
.check-list strong { color: var(--text-hi); display:block; font-size:1rem; margin-bottom:2px; }

/* ══ SECCIÓN CON FOTO DE FONDO ══════════════════════════════════
   La foto se ve de verdad —velo moderado, no un manto negro— y la
   legibilidad se resuelve en cada tarjeta con vidrio esmerilado.
   Así la imagen respira entre y alrededor de los pasos. */
.section-photo { position:relative; overflow:hidden; isolation:isolate; }
.photo-bg { position:absolute; inset:0; z-index:-2; background: var(--bg-2); }
.photo-bg-img {
  width:100%; height:100%;
  object-fit:cover; object-position: 58% 42%;
}
.photo-veil {
  position:absolute; inset:0; z-index:-1;
  background:
    /* Viñeta: oscurece los bordes y deja el centro más limpio */
    radial-gradient(120% 90% at 50% 45%, transparent 20%, rgba(4,8,14,.62) 78%),
    /* Base pareja para que el muro blanco de la foto no deslumbre */
    linear-gradient(180deg, rgba(4,8,14,.80) 0%, rgba(4,8,14,.58) 38%, rgba(4,8,14,.86) 100%);
}
.section-photo .section-head h2,
.section-photo .section-head .lead { text-shadow: 0 3px 26px rgba(0,0,0,.85); }
.section-photo .eyebrow {
  background: rgba(10,16,24,.55);
  border-color: rgba(255,154,92,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── PASOS ─────────────────────────────────────────────────────── */
.steps {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%),1fr));
  gap: var(--s5); counter-reset: step;
}
/* Cada paso es una tarjeta de vidrio: garantiza el contraste del
   texto sobre cualquier zona de la foto. */
.step {
  position:relative; overflow:hidden;
  padding: var(--s6) var(--s5);
  border-radius: var(--r-xl);
  background: rgba(9,13,20,.60);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: var(--e3);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, background .3s;
}
.step:hover {
  transform: translateY(-6px);
  border-color: rgba(255,154,92,.42);
  background: rgba(12,17,25,.72);
}
/* Número grande como marca de agua en la esquina */
.step::before {
  counter-increment: step; content: "0" counter(step);
  position:absolute; top:-14px; right:2px;
  font-family: var(--f-head); font-weight:900; font-size:5.4rem;
  line-height:1; letter-spacing:-.05em;
  color: rgba(255,255,255,.07);
  pointer-events:none;
}
.step-ico {
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center; margin-bottom: var(--s4);
  background: linear-gradient(145deg, rgba(255,107,53,.30), rgba(255,69,0,.10));
  border:1px solid rgba(255,154,92,.40);
  color: #FFC49A;
  box-shadow: 0 8px 22px rgba(255,69,0,.22);
}
.step h3 { font-size:1.34rem; margin-bottom:10px; font-family:var(--f-head); font-weight:800; letter-spacing:-.022em; }
.step p { font-size:var(--fs-small); color:#C6B4A8; }

/* Sin backdrop-filter el vidrio no difumina y el texto quedaría
   sobre la foto cruda: se compensa con un fondo mucho más opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .step        { background: rgba(9,13,20,.92); }
  .step:hover  { background: rgba(12,17,25,.95); }
  .section-photo .eyebrow { background: rgba(10,16,24,.88); }
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN CLARA — usada en Planes
   ──────────────────────────────────────────────────────────────────
   Invierte el esquema sobre fondo blanco. Todos los colores se
   redefinen aquí dentro, así que basta con poner la clase
   `section-light` a una sección para cambiarle el modo.

   Contraste verificado sobre #FFFFFF:
     --l-text   #1A1310  →  16.4:1   (titulares y texto principal)
     --l-body   #574940  →   7.6:1   (párrafos)
     --l-muted  #7D6B60  →   4.8:1   (texto secundario, mínimo AA)
     --l-brand  #C43D00  →   5.1:1   (naranja legible como texto)
   El naranja de marca (#FF6B35) solo llega a 2.9:1, así que NUNCA
   se usa para texto sobre blanco: solo como relleno de botones.
   ══════════════════════════════════════════════════════════════════ */
.section-light {
  --l-text:   #1A1310;
  --l-body:   #574940;
  --l-muted:  #7D6B60;
  --l-brand:  #C43D00;
  --l-line:   #EADFD8;
  --l-card:   #FFFFFF;

  /* Corte recto contra las secciones oscuras vecinas. La textura
     ya no la da una retícula sino la fotografía de fondo. */
  background: #FFFFFF;
  color: var(--l-body);
  position:relative; overflow:hidden; isolation:isolate;
}

/* ── Estudiantes recortados, abajo a la derecha ──────────────────
   La imagen viene sobre blanco puro, igual que el fondo de la
   sección, así que se funde sola: no hace falta ningún velo encima.
   La caja recorta la mitad izquierda vacía de la imagen y ancla a
   los estudiantes al borde inferior derecho. */
/* Oculta por defecto: solo aparece cuando hay ancho de sobra
   (desde 1100 px), que es cuando el contenido se corre a la
   izquierda y queda sitio libre a la derecha. */
.plans-bg { display:none; }

@media (min-width: 1100px) {
  /* `contain` en vez de recorte: la imagen entra ENTERA en la caja,
     así que es imposible que corte a nadie. El truco es que la caja
     va muy ancha (90 %) y la mitad izquierda de la imagen es blanca:
     al coincidir con el fondo de la sección, ese sobrante no se ve.
     Como la caja es mucho más ancha que alta, manda la altura, y es
     ella la que fija el tamaño de los estudiantes. */
  .plans-bg {
    display:block;
    position:absolute; right:0; bottom:0; z-index:0;
    width: 90%;
    height: 84%;
    pointer-events:none;
  }
  .plans-bg img {
    width:100%; height:100%;
    object-fit: contain;
    object-position: right bottom;
  }
}
.section-light > .container { position:relative; z-index:2; }

/* ── Contenido cargado a la izquierda ───────────────────────────
   Deja libre el tercio derecho para que se vea a los estudiantes
   de la foto. Solo se aplica desde 1100 px: más abajo no hay
   espacio de sobra y el contenido vuelve a ocupar todo el ancho. */
@media (min-width: 1100px) {
  #planes .section-head { max-width: 560px; margin-inline: 0; }
  #planes .section-head .lead { margin-inline: 0; }
  #planes .toggle-wrap    { justify-content: flex-start; }
  #planes .plans          { margin-inline: 0; max-width: 830px; }
  #planes .compare        { margin-left: 0; margin-right: auto; max-width: 720px; }
  #planes .trust-row      { justify-content: flex-start; }
}

/* Es la sección que decide la conversión: titular más grande */
.section-light h2 {
  color: var(--l-text);
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
}
.section-light .lead         { color: var(--l-body); }
.section-light .grad {
  background: linear-gradient(115deg, #E85A1A 5%, var(--l-brand) 55%, #A83100 95%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section-light .eyebrow {
  color: var(--l-brand);
  background: rgba(255,107,53,.10);
  border-color: rgba(196,61,0,.26);
}

/* Toggle mensual / anual */
.section-light .toggle {
  background: #FFFFFF; border-color: var(--l-line);
  box-shadow: 0 2px 10px rgba(90,60,40,.07);
}
.section-light .toggle button              { color: var(--l-muted); }
.section-light .toggle button[aria-pressed="true"] { color: #FFFFFF; }
.section-light .toggle-pill {
  background: linear-gradient(135deg, #E0430A, #FF8A4C);
  box-shadow: 0 3px 12px rgba(224,67,10,.35);
}
.section-light .save-badge {
  color:#1B7A45; background: rgba(34,160,90,.10); border-color: rgba(27,122,69,.30);
}

/* Tarjetas */
.section-light .plan {
  background: var(--l-card);
  border-color: var(--l-line);
  box-shadow: 0 2px 4px rgba(90,60,40,.04), 0 12px 32px rgba(90,60,40,.07);
}
.section-light .plan:hover {
  box-shadow: 0 4px 8px rgba(90,60,40,.06), 0 20px 48px rgba(90,60,40,.12);
}
/* La tarjeta Pro domina: más grande, elevada y con halo naranja.
   Que se note cuál queremos que elijan. */
.section-light .plan-featured {
  background: linear-gradient(168deg, #FFF3EC 0%, #FFFFFF 58%);
  border:2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(168deg, #FFF3EC 0%, #FFFFFF 58%),
    linear-gradient(140deg, #FF8A3D, #E0430A 55%, #FFB070);
  transform: scale(1.045);
  z-index:2;
  /* El halo va como sombra y no como pseudo-elemento: un ::after
     con z-index negativo quedaría tapado por el fondo de la propia
     tarjeta y no se vería. */
  box-shadow:
    0 0 0 9px rgba(255,107,53,.07),
    0 6px 14px rgba(224,67,10,.16),
    0 28px 68px rgba(224,67,10,.26);
}
.section-light .plan-featured:hover {
  transform: scale(1.045) translateY(-5px);
  box-shadow:
    0 0 0 12px rgba(255,107,53,.09),
    0 10px 20px rgba(224,67,10,.20),
    0 36px 80px rgba(224,67,10,.30);
}
.section-light .plan-ico {
  background: rgba(255,107,53,.13);
  border-color: rgba(196,61,0,.28);
  color: var(--l-brand);
}
.section-light .plan-name      { color: var(--l-text); }
.section-light .plan-desc      { color: var(--l-muted); }
.section-light .plan-price .period { color: var(--l-muted); }
.section-light .plan-note      { color:#1B7A45; }
.section-light .plan li        { color: var(--l-body); }
.section-light .plan li strong { color: var(--l-text); }
/* Check en pastilla circular: se escanea mucho más rápido que un
   trazo suelto y refuerza la sensación de «esto viene incluido». */
.section-light .plan li svg {
  width:21px; height:21px; box-sizing:border-box;
  padding:3.5px; margin-top:1px;
  border-radius:50%;
  background: var(--l-brand);
  stroke:#FFFFFF; stroke-width:3.4;
}
.section-light .plan-featured li svg {
  background: linear-gradient(140deg, #FF8A3D, #E0430A);
  box-shadow: 0 2px 6px rgba(224,67,10,.35);
}
.section-light .plan li.muted     { color: var(--l-muted); }
.section-light .plan li.muted svg { background:#C9B8AD; box-shadow:none; }
.section-light .plan-fineprint { color: var(--l-muted); }

/* Botones sobre blanco */
.section-light .btn-ghost {
  border-color: rgba(196,61,0,.38);
  color: var(--l-brand);
  background: #FFFFFF;
  backdrop-filter:none;
}
.section-light .btn-ghost:hover {
  background: #FFF2EA; border-color: var(--l-brand);
}
.section-light :focus-visible  { outline-color: var(--l-brand); }

/* ── PLANES ────────────────────────────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; justify-content:center; gap:var(--s4); margin-bottom: var(--s7); flex-wrap:wrap; }
.toggle {
  display:inline-flex; background: var(--bg-2); border:1px solid var(--line-soft);
  border-radius: var(--r-pill); padding:5px; position:relative; gap:2px;
}
.toggle button {
  padding: 11px 26px; border-radius: var(--r-pill); font-size:.92rem; font-weight:600;
  color: var(--text-mid); transition: color .25s; position:relative; z-index:1; min-height:44px;
}
.toggle button[aria-pressed="true"] { color:#23100A; }
.toggle-pill {
  position:absolute; top:5px; bottom:5px; left:5px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-light));
  transition: transform .32s cubic-bezier(.34,1.4,.5,1), width .32s cubic-bezier(.34,1.4,.5,1);
  z-index:0;
}
.save-badge {
  font-size:.8rem; font-weight:700; color: var(--kelp);
  background: rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.3);
  padding: 7px 15px; border-radius: var(--r-pill);
}

/* gap holgado: la tarjeta destacada crece un 4,5 % y necesita aire
   para que su halo no choque con la de al lado. */
.plans {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s7); max-width: 940px; margin-inline:auto; align-items:center;
  padding: var(--s3) var(--s2);
}
.plan {
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line-soft); border-radius: var(--r-xl);
  padding: var(--s7) var(--s6);
  display:flex; flex-direction:column; gap: var(--s4);
  position:relative; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--e3); }
.plan-featured {
  border-color: rgba(255,107,53,.42);
  background: linear-gradient(165deg, rgba(255,107,53,.10), var(--bg-1) 55%);
  box-shadow: var(--e-brand);
}
.plan-featured::before {
  content: attr(data-badge);
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-light));
  color:#23100A; font-size:.74rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  padding: 6px 18px; border-radius: var(--r-pill); white-space:nowrap;
  box-shadow: var(--e2);
}
.plan-head { display:flex; align-items:center; gap:var(--s3); }
.plan-ico {
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background: rgba(255,107,53,.12); border:1px solid rgba(255,107,53,.26);
  color: var(--brand-light); flex-shrink:0;
}
.plan-name { font-family:var(--f-head); font-weight:800; font-size:1.55rem; line-height:1.1; letter-spacing:-.025em; }
.plan-desc { font-size:var(--fs-small); color:var(--text-lo); margin-top:-6px; }
.plan-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-block: var(--s2); }
.plan-price .amount {
  font-family:var(--f-head); font-weight:900; font-size:3.8rem; line-height:1; letter-spacing:-.04em;
  transition: opacity .18s;
}
.plan-price .period { font-size:.95rem; color:var(--text-lo); }
.plan-note { font-size:.83rem; color:var(--kelp); min-height:1.2em; }
.plan ul { list-style:none; display:grid; gap:13px; margin-block: var(--s3); }
.plan li { display:flex; gap:11px; font-size:var(--fs-small); color:var(--text-mid); align-items:flex-start; }
.plan li svg { width:18px; height:18px; flex-shrink:0; margin-top:3px; stroke:var(--brand); fill:none; stroke-width:3; }
.plan li.muted { color: var(--text-lo); }
.plan li.muted svg { stroke: var(--text-lo); }
.plan .btn { margin-top:auto; }
.plan-fineprint { font-size:.76rem; color:var(--text-lo); text-align:center; }

/* ══ COMPARADOR DE PRECIO ═══════════════════════════════════════
   Hace tangible el titular «menos que un café»: mismo monto,
   dos duraciones muy distintas. */
.compare {
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:stretch; gap: var(--s4);
  max-width: 760px; margin: var(--s8) auto 0;
}
.compare-item {
  display:flex; align-items:center; gap: var(--s4);
  padding: var(--s5); border-radius: var(--r-lg);
  background:#FFFFFF; border:1px solid var(--l-line);
}
.compare-item.is-win {
  border-color: rgba(224,67,10,.34);
  background: linear-gradient(150deg, #FFF4EC, #FFFFFF 65%);
  box-shadow: 0 10px 30px rgba(224,67,10,.13);
}
.compare-ico {
  width:50px; height:50px; border-radius:15px; flex-shrink:0;
  display:grid; place-items:center;
  background: rgba(125,107,96,.10); color: var(--l-muted);
}
.compare-item.is-win .compare-ico {
  background: rgba(255,107,53,.15); color: var(--l-brand);
}
.compare-label { font-size:.78rem; color: var(--l-muted); }
.compare-what  { font-family:var(--f-head); font-weight:800; font-size:1.06rem;
                 color: var(--l-text); letter-spacing:-.02em; line-height:1.2; }
.compare-item.is-win .compare-what { color: var(--l-brand); }
.compare-vs {
  align-self:center; font-family:var(--f-head); font-weight:800;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--l-muted);
}

/* ══ FILA DE CONFIANZA ══════════════════════════════════════════ */
.trust-row {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap: var(--s4) var(--s6); margin-top: var(--s7);
}
.trust-row span {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.84rem; color: var(--l-body);
}
.trust-row svg { width:19px; height:19px; stroke:#1B7A45; fill:none;
                 stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; gap: var(--s3); }
  .compare-vs { justify-self:center; }
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq { max-width: 800px; margin-inline:auto; display:grid; gap:var(--s3); }
.faq details {
  background: var(--bg-1); border:1px solid var(--line-soft); border-radius: var(--r-md);
  overflow:hidden; transition: border-color .25s;
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  padding: var(--s5); cursor:pointer; font-weight:600; font-size:1.02rem;
  display:flex; align-items:center; gap:var(--s4);
  list-style:none; min-height:60px;
}
.faq summary .ico { color: var(--brand); }
.faq summary span { flex:1; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; font-size:1.5rem; color:var(--brand); transition: transform .25s; flex-shrink:0; line-height:1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand-light); }
.faq p { padding: 0 var(--s5) var(--s5) calc(var(--s5) + 24px + var(--s4)); color: var(--text-mid); font-size:var(--fs-small); }
.footer ul a { display:inline-flex; align-items:center; gap:9px; }

/* ══ FOOTER — fondo blanco ══════════════════════════════════════
   Misma paleta clara verificada que la sección de planes:
     #1A1310 → 16,4:1   #574940 → 7,6:1
     #7D6B60 →  4,8:1   #C43D00 → 5,1:1
   Corte recto contra la sección oscura de arriba. */
.footer {
  --l-text:  #1A1310;
  --l-body:  #574940;
  --l-muted: #7D6B60;
  --l-brand: #C43D00;
  --l-line:  #EADFD8;

  background: #FFFFFF;
  color: var(--l-body);
  border-top: none;
  padding: var(--s8) 0 var(--s6);
}
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s7); }
.footer h4 {
  font-size:.82rem; text-transform:uppercase; letter-spacing:.11em;
  color: var(--l-muted); margin-bottom:var(--s4); font-weight:700;
}
.footer ul { list-style:none; display:grid; gap:11px; }
.footer a { font-size:var(--fs-small); color: var(--l-body); transition: color .2s; }
.footer a:hover { color: var(--l-brand); }
.footer ul a .ico { color: var(--l-muted); transition: color .2s; }
.footer ul a:hover .ico { color: var(--l-brand); }
.footer-about p { font-size:var(--fs-small); color: var(--l-muted); margin-top:var(--s3); max-width:34ch; }
.footer-bottom {
  border-top:1px solid var(--l-line); padding-top: var(--s5);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-size:.8rem; color: var(--l-muted);
}
/* El logo llevaba un halo naranja pensado para fondo oscuro: sobre
   blanco se ve sucio, así que se cambia por una sombra suave. */
.footer .brand-mark img {
  height:34px;
  filter: drop-shadow(0 2px 6px rgba(90,60,40,.18));
}
.footer .brand-mark:hover img {
  filter: drop-shadow(0 3px 10px rgba(196,61,0,.35));
}
.footer :focus-visible { outline-color: var(--l-brand); }

/* ── REVELADO AL HACER SCROLL ──────────────────────────────────── */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .smarty { grid-template-columns: 1fr; gap: var(--s7); }
  .smarty-visual { max-width: 560px; margin-inline:auto; order:-1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Burbujas: en pantallas angostas dejan de flotar sobre los bordes
   y pasan a apilarse bajo la foto, para no taparla ni cortarse. */
@media (max-width: 620px) {
  .smarty-visual { padding: 0; display:flex; flex-direction:column; gap:var(--s3); }
  .bubble {
    position:static; max-width:none; width:100%;
    box-shadow: var(--e2);
  }
  .bubble-ask    { border-bottom-right-radius:16px; }
  .bubble-answer { border-bottom-left-radius:16px; }
  .smarty-status { top:14px; left:14px; }
  .smarty-visual::before { inset:0; }
}
@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .nav-links, .nav-cta .btn-ghost { display:none; }
  .nav-toggle { display:flex; }
  .nav.open .nav-links {
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset: var(--nav-h) 0 auto 0;
    background: rgba(8,8,8,.98); backdrop-filter: blur(20px);
    padding: var(--s4) var(--s5) var(--s6);
    border-bottom:1px solid var(--line);
  }
  .nav.open .nav-links a { padding: var(--s4) 0; border-bottom:1px solid var(--line-soft); width:100%; }
  .nav.open .nav-links a::after { display:none; }
  .hero { min-height: 94svh; padding-top: calc(var(--nav-h) + var(--s6)); }
  /* En vertical la imagen llena el alto exacto y sobra ancho:
     centrada, el encuadre queda en los dos estudiantes. */
  .hero-img { object-position: 50% 50%; }
  /* El velo se degrada de arriba abajo: la foto se ve en la mitad
     superior y el texto descansa sobre la zona oscura de abajo. */
  .hero-veil { background:
    linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.20) 26%, rgba(8,8,8,.86) 62%, var(--void) 94%); }
  /* En vertical no hay espacio lateral: el panel ocupa el ancho
     completo y el degradado pasa a ser de arriba abajo. */
  .hero-inner {
    max-width:none; margin:0; padding: var(--s5) var(--s4);
    background: linear-gradient(180deg, rgba(8,6,5,.55), rgba(8,6,5,.88) 40%);
    border-radius: var(--r-lg);
  }
  .hero-logo { margin-bottom: var(--s4); }
  .hero-logo img { height:64px; }
  .hero-cta .btn { width:100%; flex:1 1 100%; }
  /* En vertical se encuadra al estudiante con el holograma */
  .photo-bg-img { object-position: 62% 40%; }
  .photo-veil {
    background: linear-gradient(180deg, rgba(4,8,14,.86) 0%, rgba(4,8,14,.66) 40%, rgba(4,8,14,.90) 100%);
  }
  .stat { flex-direction:column; text-align:center; }
  .section { padding: var(--s8) 0; }
  .scroll-hint { display:none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
}
/* Apiladas en una columna, escalar la destacada la desalinearía
   y le comería el ancho: se deja a tamaño natural. */
@media (max-width: 700px) {
  .plans { gap: var(--s6); }
  .section-light .plan-featured,
  .section-light .plan-featured:hover { transform:none; }

}
@media (max-width: 420px) {
  .plan { padding: var(--s6) var(--s5); }
  .plan-price .amount { font-size:2.7rem; }
}

/* ── MOVIMIENTO REDUCIDO ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .hero-img { transform:none; }
  .reveal { opacity:1; transform:none; }
  #hero-particles { display:none; }
}

/* ── TELÉFONOS ANGOSTOS (≤380px) ───────────────────────────────── */
/* iPhone SE, Android de gama de entrada y cualquiera que use el
   teléfono con la letra del sistema ampliada. */
@media (max-width: 380px) {
  /* Los botones llevan nowrap para que el texto no se parta en dos
     líneas en pantallas normales. Aquí eso mismo los haría más
     anchos que la pantalla, sobre todo en inglés, que es más largo:
     "Start your 7-day free trial". A este ancho sí pueden partirse. */
  .btn {
    white-space: normal;
    padding: 13px 20px;
    font-size: .92rem;
  }
  .hero-cta .btn { min-width: 0; }

  /* El logo del hero se comía media pantalla de alto */
  .hero-logo img { height: 54px; }

  .plan-price .amount { font-size: 2.4rem; }
  .plan { padding: var(--s5) var(--s4); }
}

/* ── ZONAS SEGURAS DEL IPHONE ──────────────────────────────────── */
/* Con el teléfono en horizontal, el notch y la barra de inicio se
   comen los bordes. Sin esto la barra de navegación queda mordida
   y el pie se mete bajo la línea del indicador. */
@supports (padding: env(safe-area-inset-left)) {
  .nav > .container {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .footer {
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── IMPRESIÓN ─────────────────────────────────────────────────── */
@media print {
  .nav, .scroll-hint, #hero-particles, .hero-mesh, .hero-scan { display:none !important; }
  body { background:#fff; color:#000; }
}