/* ═══════════════════════════════════════════════════════════════════════
   Alquie · site-toolkit.css — capa visual del rediseño (v5)
   ───────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de site-base.css y site.css. No toca el markup ni el
   contenido de las páginas: re-mapea el sistema visual completo.

   Tres bases:
   1) ATMÓSFERA — el lavado radial del login de profesor
      (login.html:611-616) sobre fondo casi blanco. Nunca secciones de
      color sólido ni héroes oscuros.
   2) COLOR CON FUNCIÓN — los 6 tintes pastel de styles/toolkit.css
      codifican áreas del kit; el naranjo se reserva para acento y CTA.
   3) RITMO — contenedor angosto, mucho aire vertical y radios
      escalonados por tamaño de componente.

   Referencias: docs/mockups/landing-v5-toddle.html (maqueta aprobada),
   docs/design/ruta-diseno-toolkit.md (brief normativo).
   ═══════════════════════════════════════════════════════════════════════ */


:root {
  /* ── Acento ── */
  --tk-acc:       #ff7a33;
  --tk-acc-deep:  #f05e1c;
  --tk-acc-light: #ff9a54;
  --tk-acc-soft:  #fff1e8;
  --tk-grad:      linear-gradient(160deg, #ff9a54, #ff7a33 65%, #f05e1c);

  /* ── Pasteles por área del kit ── */
  --tk-t-warm:  #fff1e8; --tk-t-warm-ink:  #f05e1c;
  --tk-t-teal:  #d6efec; --tk-t-teal-ink:  #0e8c80;
  --tk-t-navy:  #daeaf7; --tk-t-navy-ink:  #1f6aa8;
  --tk-t-pink:  #ffefee; --tk-t-pink-ink:  #d15668;
  --tk-t-green: #e4f5ec; --tk-t-green-ink: #2e9c66;
  --tk-t-gold:  #fdf3e0; --tk-t-gold-ink:  #b5791c;

  /* ── El lavado (atmósfera) ── */
  --tk-wash:
    radial-gradient(circle at 10% 15%, rgba(255,122,51,.14), transparent 42%),
    radial-gradient(circle at 90% 85%, rgba(218,234,247,.95), transparent 48%),
    radial-gradient(circle at 82% 12%, rgba(214,239,236,.9), transparent 36%);
  --tk-wash-flip:
    radial-gradient(circle at 88% 18%, rgba(255,122,51,.12), transparent 40%),
    radial-gradient(circle at 12% 82%, rgba(214,239,236,.85), transparent 46%),
    radial-gradient(circle at 18% 12%, rgba(218,234,247,.9), transparent 38%);

  /* ── Re-mapeo de los tokens de la landing ── */
  --navy:      #0d3b57;
  --navy-mid:  #17506f;
  --navy-soft: #daeaf7;
  --teal:      #0e8c80;
  --teal-soft: #d6efec;
  --mint:      #1fbf71;
  --coral:     #ff7a33;
  --coral-soft:#fff1e8;
  --peach:     #f05e1c;   /* acentos que antes eran durazno sobre oscuro */
  --peach-soft:#fff1e8;
  --gold:      #b5791c;

  --bg:        #fbfcfe;
  --bg-warm:   #ffffff;
  --ink:       #0d3b57;
  --ink-soft:  #5f7284;
  --ink-mute:  #93a3b3;
  --line:      #edf0f4;
  --line-soft: #f4f7fa;

  --f-sans:    'Nunito Sans', system-ui, sans-serif;
  --f-display: 'Manrope', system-ui, sans-serif;
  --f-btn:     'Poppins', system-ui, sans-serif;
  --f-serif:   'Manrope', system-ui, sans-serif;  /* se retira la serif editorial */

  --maxw: 1180px;

  --shadow-sm: 0 1px 2px rgba(13,59,87,.05), 0 6px 18px rgba(13,59,87,.06);
  --shadow-md: 0 1px 2px rgba(13,59,87,.05), 0 12px 32px rgba(13,59,87,.09);
  --shadow-lg: 0 2px 4px rgba(13,59,87,.06), 0 24px 60px rgba(13,59,87,.13);
  --shadow-xl: 0 30px 80px rgba(13,59,87,.20);

  --tk-r-btn: 10px; --tk-r-md: 16px; --tk-r-lg: 24px; --tk-r-xl: 32px;
  --tk-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ═══ TIPOGRAFÍA ═══ */
body { font-family: var(--f-sans); background: var(--bg); }

.aq-h1, .aq-h2, .aq-h3, .aq-h4 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.aq-h1 { line-height: 1.06; font-size: clamp(38px, 4.8vw, 62px); }
.aq-h2 { line-height: 1.16; font-size: clamp(26px, 3.2vw, 36px); }

/* La palabra acentuada: antes Fraunces italic sobre oscuro, ahora Manrope naranjo */
.aq-h1 i, .aq-h2 i, .aq-h3 i, .aq-ital, .aq-pagehero__h1 i {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -.02em;
  color: var(--tk-acc-deep);
}
.aq-eyebrow {
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--tk-acc-deep);
}
.aq-eyebrow::before { background: currentColor; opacity: .4; }

/* ═══ BOTONES ═══ */
.aq-btn {
  font-family: var(--f-btn);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--tk-r-btn);
  padding: 14px 22px;
  border-width: 1.5px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.aq-btn--lg { padding: 16px 28px; font-size: 15px; border-radius: var(--tk-r-btn); }
.aq-btn--md { padding: 11px 18px; font-size: 13px; border-radius: var(--tk-r-btn); }
.aq-btn:hover { transform: translateY(-1px); }

/* Primario: el gradiente naranjo del dashboard */
.aq-btn--coral, .aq-btn--navy {
  background: var(--tk-grad);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(240,94,28,.28);
}
.aq-btn--coral:hover, .aq-btn--navy:hover {
  background: var(--tk-grad);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(240,94,28,.34);
}
/* Secundario: blanco con borde. `ghost-light` vivía sobre héroes oscuros;
   ahora los héroes son claros, así que se comporta como el ghost normal. */
.aq-btn--ghost, .aq-btn--ghost-light, .aq-btn--white {
  background: #fff;
  color: var(--ink);
  border-color: #e3eaf1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
}
.aq-btn--ghost:hover, .aq-btn--ghost-light:hover, .aq-btn--white:hover {
  background: #fff;
  border-color: var(--tk-acc);
  color: var(--tk-acc-deep);
}
.aq-btn-play { background: var(--tk-acc-soft); color: var(--tk-acc-deep); }

/* ═══ NAV ═══ */
.aq-nav {
  background: rgba(251,252,254,.86);
  border: 1px solid rgba(13,59,87,.07);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.aq-nav__brand { font-family: var(--f-display); font-weight: 800; color: var(--ink); }
.aq-nav__links a { font-family: var(--f-sans); font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.aq-nav__links a:hover { color: var(--tk-acc-deep); }

/* ═══ HERO DEL HOME: de navy oscuro a claro con lavado ═══ */
.aq-hero {
  background: var(--tk-wash), #fbfcfe;
  color: var(--ink);
  border-radius: 0 0 40px 40px;
}
/* La foto de textura y la aurora del hero oscuro se retiran */
.aq-hero__texture { display: none; }
.aq-hero__aurora  { display: none; }
.aq-hero__noise   { display: none; }

.aq-hero .aq-h1, .aq-hero .aq-h2 { color: var(--ink); }
/* Manrope 800 es bastante más ancha que la Fraunces italic que reemplaza:
   sin bajar la escala, la última línea del H1 se monta sobre la foto. */
.aq-hero__h1 { font-size: clamp(32px, 3.6vw, 48px); }
/* El markup trae white-space:nowrap inline en la última línea; con la
   tipografía nueva desborda sobre la foto, así que se libera el corte. */
.aq-hero__h1 > span[style] { white-space: normal !important; }
.aq-hero .aq-lead, .aq-hero p { color: var(--ink-soft); }
.aq-hero .aq-lead b, .aq-hero p b { color: var(--ink); }
.aq-hero__eyebrow {
  background: var(--tk-acc-soft);
  border: 1px solid #ffd9c2;
  color: var(--tk-acc-deep);
  font-family: var(--f-sans);
  font-weight: 800;
  letter-spacing: .1em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aq-hero__note, .aq-hero__foot, .aq-hero small { color: var(--ink-mute); }

/* La palabra acentuada del H1 del hero tiene reglas propias más
   específicas en site-base.css (.aq-hero__h1 .accent): hay que
   igualarlas o la Fraunces italic sobrevive. */
.aq-hero__h1 .accent,
.aq-hero__h1 .accent i {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -.02em;
  color: var(--tk-acc-deep);
}
/* El sello bajo los CTAs era blanco translúcido sobre el hero oscuro */
.aq-hero__seal { color: var(--ink-soft); font-weight: 700; }
.aq-hero__seal:hover { color: var(--tk-acc-deep); }
.aq-hero__seal-icon { color: var(--tk-acc); }

/* Los orbes tomaban --peach/--coral (ahora naranjos) y quedaban como
   manchones saturados: pasan a los pasteles del kit, muy suaves. */
.aq-hero__orb--1 { background: var(--tk-t-warm);  opacity: .8; }
.aq-hero__orb--2 { background: var(--tk-t-navy);  opacity: .75; }
.aq-hero__orb--3 { background: var(--tk-t-teal);  opacity: .6; }

/* El marco punteado del placeholder de foto no aplica cuando hay imagen */
.aq-hero__photo:not(.aq-hero__photo--filled) {
  background: linear-gradient(160deg, var(--tk-t-warm), var(--tk-t-navy));
  border: 1.5px dashed #cfdae5;
  color: var(--ink-mute);
}
.aq-hero__photo--filled { box-shadow: var(--shadow-lg); }

/* Tarjetas de vidrio del hero → tarjetas blancas del toolkit */
.aq-glass-card {
  background: #fff;
  border: 1px solid rgba(13,59,87,.06);
  border-radius: var(--tk-r-md);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aq-glass-card *, .aq-glass-card strong, .aq-glass-card b { color: inherit; }
.aq-glass-card small, .aq-glass-card .aq-body-sm { color: var(--ink-mute); }

/* ═══ PAGEHEROES de las páginas internas: mismo tratamiento ═══ */
.aq-pagehero,
.aq-pagehero--navy, .aq-pagehero--teal, .aq-pagehero--mint,
.aq-pagehero--coral, .aq-pagehero--peach {
  background: var(--tk-wash-flip), #fbfcfe;
  color: var(--ink);
  border-radius: 0 0 40px 40px;
}
.aq-pagehero::before { display: none; }   /* textura fotográfica */
.aq-pagehero__aurora { display: none; }
.aq-pagehero__h1 { color: var(--ink); font-size: clamp(32px, 4.2vw, 54px); }
.aq-pagehero__lead { color: var(--ink-soft); font-size: 17.5px; }
.aq-pagehero__eyebrow {
  background: var(--tk-acc-soft);
  border: 1px solid #ffd9c2;
  color: var(--tk-acc-deep);
  font-weight: 800;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aq-pagehero__eyebrow-dot { background: var(--tk-acc); color: #fff; }
.aq-pagehero .aq-crumb, .aq-pagehero .aq-crumb a { color: var(--ink-mute); }
.aq-pagehero .aq-crumb a:hover { color: var(--tk-acc-deep); }

/* ═══ SUPERFICIES Y SECCIONES ═══ */
.aq-section { padding-top: 88px; padding-bottom: 88px; }

/* Las bandas "cálidas" pasan a panel blanco sobre el fondo claro */
.aq-problem { background: transparent; }
.aq-problem-wrap {
  background: #fff;
  border-radius: var(--tk-r-xl);
  box-shadow: var(--shadow-sm);
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
}
.aq-problem-wrap::before, .aq-problem-wrap::after { display: none; }

/* Radios y sombras del sistema en todas las tarjetas */
.aq-mech-card, .aq-lever, .aq-quote, .aq-shot, .aq-asset, .aq-card,
.aq-price-card, .aq-feature-card, .aq-faq-item, .aq-trust-card,
.aq-plan, .aq-tab {
  border-radius: var(--tk-r-lg);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.aq-mech-card:hover, .aq-lever:hover, .aq-trust-card:hover {
  border-color: #ffd9c2;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--tk-spring), border-color .3s ease, box-shadow .3s ease;
}
.aq-shot img, .aq-asset img { border-radius: 12px; }

/* Chips y pills */
.aq-compliance__chip, .aq-chip, .aq-pill {
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-weight: 800;
}

/* ═══ CTA FINAL: claro con lavado, no navy oscuro ═══ */
.aq-finalcta__inner {
  background: var(--tk-wash), #fbfcfe;
  border-radius: var(--tk-r-xl);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.aq-finalcta__inner::before { display: none; }   /* foto nocturna */
.aq-finalcta h2, .aq-finalcta .aq-h2 { color: var(--ink); }
.aq-finalcta p, .aq-finalcta .aq-lead { color: var(--ink-soft); }
.aq-finalcta__note { color: var(--ink-mute); }
.aq-finalcta__sparkle { display: none; }

/* ═══ FOOTER: ancla en tinta navy del toolkit ═══ */
.aq-footer { background: #0d3b57; }
.aq-footer h4, .aq-footer strong { font-family: var(--f-display); font-weight: 800; }

/* ═══ DETALLES ═══ */
/* Los squiggles dibujados a mano toman el naranjo */
.aq-draw path, .aq-draw line, .aq-draw polyline { stroke: var(--tk-acc); }

/* Todo componente con display propio respeta [hidden]
   (Lab Note 2026-07-29: display:flex vence al atributo hidden) */
.aq-btn[hidden], .aq-glass-card[hidden], .aq-lever[hidden],
.aq-mech-card[hidden], .aq-trust-card[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES NUEVOS (estructura del mockup v5)
   Tres patrones: franja de cifras, tour de pastillas y lista vertical.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Franja de confianza ── */
.tk-trust { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--pad) 0; }
.tk-trust__in { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; text-align: center; }
.tk-trust__item b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--ink); }
.tk-trust__item span { font-size: 12.5px; color: var(--ink-mute); font-weight: 700; }
.tk-trust__sep { width: 1px; height: 34px; background: var(--line); }

/* ── Tour de producto: pastillas → panel ── */
.tk-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.tk-tab {
  padding: 10px 20px; border-radius: 20px;
  font-family: var(--f-btn); font-weight: 600; font-size: 13px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: all .2s ease;
}
.tk-tab:hover { color: var(--ink); border-color: #dbe3ea; }
.tk-tab.is-on { border-color: transparent; color: var(--ink); }
.tk-tab.is-on[data-c="warm"]  { background: var(--tk-t-warm); }
.tk-tab.is-on[data-c="navy"]  { background: var(--tk-t-navy); }
.tk-tab.is-on[data-c="green"] { background: var(--tk-t-green); }
.tk-tab.is-on[data-c="teal"]  { background: var(--tk-t-teal); }
.tk-tab.is-on[data-c="gold"]  { background: var(--tk-t-gold); }

.tk-panel { border-radius: var(--tk-r-xl); padding: 44px; display: none; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.tk-panel.is-on { display: grid; }
.tk-panel[data-c="warm"]  { background: linear-gradient(151deg, #fff6ef 5%, var(--tk-t-warm) 98%); }
.tk-panel[data-c="navy"]  { background: linear-gradient(151deg, #eef5fc 5%, var(--tk-t-navy) 98%); }
.tk-panel[data-c="green"] { background: linear-gradient(151deg, #f0faf4 5%, var(--tk-t-green) 98%); }
.tk-panel[data-c="teal"]  { background: linear-gradient(151deg, #eaf7f5 5%, var(--tk-t-teal) 98%); }
.tk-panel[data-c="gold"]  { background: linear-gradient(151deg, #fdf8ee 5%, var(--tk-t-gold) 98%); }
.tk-panel__plan { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.75); margin-bottom: 14px; }
.tk-panel h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
.tk-panel p { font-size: 14.5px; color: #43606f; line-height: 1.6; }
.tk-panel ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.tk-panel li { font-size: 13.5px; font-weight: 700; color: #2c4f61; display: flex; gap: 10px; align-items: flex-start; }
.tk-panel li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-top: 7px; flex: none; opacity: .55; }
.tk-shot { background: #fff; border-radius: 12px; box-shadow: 0 18px 44px rgba(13,59,87,.16); overflow: hidden; }
.tk-shot img { width: 100%; display: block; }
.tk-shot__ph { aspect-ratio: 16/10; display: grid; place-items: center; background: repeating-linear-gradient(45deg,#f7fafc,#f7fafc 12px,#f1f5f9 12px,#f1f5f9 24px); color: var(--ink-mute); font-size: 12.5px; font-weight: 700; text-align: center; padding: 20px; }

/* ── Lista vertical + imagen que cambia ── */
.tk-vt { display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; align-items: center; }
.tk-vt__list { display: flex; flex-direction: column; gap: 6px; }
.tk-vt__item { border-left: 3px solid transparent; padding: 16px 20px; border-radius: 0 var(--tk-r-md) var(--tk-r-md) 0; cursor: pointer; transition: background .25s ease, border-color .25s ease; }
.tk-vt__item:hover { background: rgba(255,255,255,.6); }
.tk-vt__item.is-on { background: #fff; box-shadow: var(--shadow-sm); }
.tk-vt__item.is-on[data-c="warm"]  { border-color: var(--tk-t-warm-ink); }
.tk-vt__item.is-on[data-c="navy"]  { border-color: var(--tk-t-navy-ink); }
.tk-vt__item.is-on[data-c="green"] { border-color: var(--tk-t-green-ink); }
.tk-vt__item.is-on[data-c="teal"]  { border-color: var(--tk-t-teal-ink); }
.tk-vt__item h3 { font-family: var(--f-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tk-vt__item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin .25s ease; margin: 0; }
.tk-vt__item.is-on p { max-height: 120px; opacity: 1; margin-top: 6px; }
.tk-vt__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; }
.tk-vt__stage { border-radius: var(--tk-r-xl); padding: 26px; transition: background .4s ease; }
.tk-vt__stage[data-c="warm"]  { background: linear-gradient(151deg,#fff6ef,var(--tk-t-warm)); }
.tk-vt__stage[data-c="navy"]  { background: linear-gradient(151deg,#eef5fc,var(--tk-t-navy)); }
.tk-vt__stage[data-c="green"] { background: linear-gradient(151deg,#f0faf4,var(--tk-t-green)); }
.tk-vt__stage[data-c="teal"]  { background: linear-gradient(151deg,#eaf7f5,var(--tk-t-teal)); }
.tk-vt__stage > img { border-radius: 12px; box-shadow: 0 18px 44px rgba(13,59,87,.18); width: 100%; display: block; }

/* ── Carta del fundador ── */
.tk-letter { background: #fff; border-radius: var(--tk-r-xl); padding: 52px; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; }
.tk-letter__photo { width: 200px; height: 230px; border-radius: var(--tk-r-lg); background: linear-gradient(160deg,#fff6ef,var(--tk-t-warm)); display: grid; place-items: center; overflow: hidden; text-align: center; padding: 18px; }
.tk-letter__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tk-letter__photo span { font-family: var(--f-display); font-weight: 800; font-size: 13.5px; color: var(--tk-acc-deep); line-height: 1.5; }
.tk-letter__photo small { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.tk-letter p { font-size: 15px; color: var(--ink-soft); line-height: 1.72; margin-bottom: 14px; }
.tk-letter p b { color: var(--ink); }
.tk-letter__sign { margin-top: 22px; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.tk-letter__sign span { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }

@media (max-width: 940px) {
  .tk-panel.is-on, .tk-vt, .tk-letter { grid-template-columns: 1fr; }
  .tk-panel { padding: 28px 22px; }
  .tk-letter { padding: 28px; }
  .tk-letter__photo { width: 100%; height: 180px; }
  .tk-trust__sep { display: none; }
  .tk-trust__in { gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESTOS DE NAVY OSCURO
   El bloque de precios usa su propio sistema de componentes (.pr-*, no
   .aq-btn), y el menú móvil y el footer traían navy hardcodeado. Todo eso
   quedaba fuera de los overrides de arriba y se veía como el diseño viejo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Botones y controles del bloque de precios ── */
.pr-btn--navy, .pr-btn--coral {
  background: var(--tk-grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(240,94,28,.28);
}
.pr-btn--navy:hover, .pr-btn--coral:hover {
  background: var(--tk-grad);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(240,94,28,.34);
}
.pr-btn--ghost { background: #fff; color: var(--ink); border-color: #e3eaf1; }
.pr-btn--ghost:hover { background: #fff; border-color: var(--tk-acc); color: var(--tk-acc-deep); }
.pr-toggle__thumb { background: var(--tk-grad); }
.r-badge { background: var(--tk-grad); color: #fff; box-shadow: 0 8px 20px rgba(240,94,28,.28); }
.r-badge .ic { color: #fff; }
.r-eb { color: var(--tk-acc-deep); }

/* ── Menú móvil: era #012a48 con texto blanco ── */
.aq-mobile-menu { background: #fbfcfe; }
.aq-mobile-menu > a { color: var(--ink); }
.aq-mobile-menu > a i { color: var(--tk-acc-deep); font-family: var(--f-display); font-style: normal; }
.aq-mobile-menu__lang { color: var(--ink-soft); border-color: rgba(13,59,87,.14); }

/* ── Footer: pasa de navy oscuro a claro, como el resto del sitio ── */
.aq-footer {
  background: #fff;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.aq-footer__texture { display: none; }
.aq-footer__logo-img { filter: none; }
.aq-footer__col h4 { color: var(--ink); font-family: var(--f-display); font-weight: 800; }
.aq-footer__col a { color: var(--ink-soft); }
.aq-footer__col a:hover { color: var(--tk-acc-deep); }
.aq-footer__bottom, .aq-footer__legal, .aq-footer__copy {
  border-top-color: var(--line) !important;
  color: var(--ink-mute) !important;
}
.aq-footer a { color: var(--ink-soft); }
.aq-footer a:hover { color: var(--tk-acc-deep); }
.aq-footer p, .aq-footer span, .aq-footer small { color: var(--ink-mute); }

/* ── Collage del hero (patrón v5: fragmentos de UI, no mockup de aparato) ── */
.aq-hero__photo { display: none; }
.tk-frag {
  position: absolute; background: #fff; border-radius: var(--tk-r-md);
  box-shadow: var(--shadow-lg); padding: 14px; z-index: 3;
}
.tk-frag--roster { top: 4%; right: 0; width: 330px; }
.tk-frag--kit    { bottom: 6%; left: 0; width: 290px; }
.tk-frag__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tk-frag__t { font-family: var(--f-display); font-weight: 800; font-size: 12.5px; color: var(--ink); }
.tk-frag__pill { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--tk-t-green); color: var(--tk-t-green-ink); text-transform: uppercase; letter-spacing: .06em; }
.tk-frag__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tk-stu { border: 1px solid var(--line); border-radius: 10px; padding: 7px 4px; text-align: center; }
.tk-stu > i { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 4px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; line-height: 24px; }
.tk-stu b { display: block; font-size: 8.5px; font-weight: 800; color: var(--ink); }
.tk-stu u { display: block; height: 3px; border-radius: 99px; background: var(--line); margin-top: 4px; text-decoration: none; overflow: hidden; }
.tk-stu u i { display: block; height: 100%; background: var(--tk-grad); border-radius: 99px; }
.tk-frag__kit { display: flex; gap: 6px; }
.tk-tool { flex: 1; text-align: center; border-radius: 10px; padding: 9px 3px; }
.tk-tool img { width: 26px; height: 26px; margin: 0 auto; object-fit: contain; display: block; }
.tk-tool span { display: block; font-size: 8px; font-weight: 800; margin-top: 4px; color: var(--ink-soft); }
@media (max-width: 940px) {
  .tk-frag { position: static; width: auto !important; margin-bottom: 12px; }
  .aq-hero__stage { min-height: 0; aspect-ratio: auto; }
}

/* Reparto del collage: las tarjetas de vidrio y los fragmentos comparten el
   stage, así que hay que separarlos para que no se tapen entre sí. */
.aq-glass-card--quiz { top: 26%; left: -6%; z-index: 4; }
.aq-glass-card--xp   { bottom: 12%; right: -4%; z-index: 4; }
.tk-frag--roster { top: 0; right: 0; width: 320px; }
.tk-frag--kit    { bottom: 4%; left: 2%; width: 270px; }

/* ── Pie de página ──────────────────────────────────────────────────
   Todo esto venía pensado para un footer OSCURO: varios textos van en blanco
   con opacidad, y sobre el fondo claro del rediseño quedaban invisibles. El
   síntoma que vio Rai fue un hueco entre el logo y las redes: era la frase
   de marca, escrita en blanco sobre blanco. */
.aq-footer__tagline {
  margin-top: 14px; max-width: 320px;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}

/* Barra inferior: frase con alma · razón social · correo · idioma. */
.aq-footer__bottom {
  flex-wrap: wrap; gap: 6px 18px;
  border-top-color: var(--line) !important;
  color: var(--ink-mute) !important;
}
.aq-footer__made { font-weight: 600; color: var(--ink-soft); }
.aq-footer__company { color: var(--ink-mute) !important; }
/* El correo empuja al selector de idioma al extremo derecho. */
.aq-footer__mail { margin-left: auto; color: var(--ink-soft); text-decoration: none; }
.aq-footer__mail:hover { color: var(--tk-acc-deep); text-decoration: underline; }
/* Venía con margen y padding de cuando vivía apilado en la columna de marca:
   en la barra medía 41px contra 20 del resto y quedaba descentrado. */
.aq-footer__bottom .aq-footer__lang {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; line-height: 20px;
}
.aq-footer__bottom .aq-footer__lang a { line-height: 20px; }
@media (max-width: 720px) {
  .aq-footer__mail { margin-left: 0; }
}

/* Perfiles sociales del footer */
.aq-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.aq-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--ink-mute);
  transition: color .15s, border-color .15s, background .15s;
}
.aq-footer__social a:hover {
  color: var(--tk-acc-deep); border-color: var(--tk-acc-deep);
  background: rgba(255, 122, 51, .08);
}

/* El selector de idioma del footer estaba pensado para fondo oscuro */
.aq-footer__lang a { color: var(--ink-mute); }
.aq-footer__lang a.is-active { color: var(--ink); font-weight: 800; }
.aq-footer__lang a:hover { color: var(--tk-acc-deep); }

/* ── Fragmento de aula del hero: timer + semáforo (como en la pizarra) ── */
.tk-frag--aula { top: 40%; right: 6%; width: 190px; display: flex; flex-direction: column; gap: 12px; }
.tk-aula__timer { display: flex; align-items: center; gap: 10px; }
.tk-aula__ring {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 4px solid var(--tk-t-teal-ink); display: grid; place-items: center;
}
.tk-aula__ring b { font-family: var(--f-display); font-weight: 800; font-size: 10.5px; color: var(--ink); }
.tk-aula__lbl { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); line-height: 1.3; }
.tk-aula__sem { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.tk-aula__dot { width: 14px; height: 14px; border-radius: 50%; opacity: .22; }
.tk-aula__dot--red   { background: #f2555b; }
.tk-aula__dot--amber { background: #f59e0b; }
.tk-aula__dot--green { background: #1fbf71; }
.tk-aula__dot.is-on  { opacity: 1; box-shadow: 0 0 0 4px rgba(31,191,113,.18); }
.tk-aula__sem span { font-size: 10px; font-weight: 800; color: var(--ink-soft); margin-left: 2px; }
.tk-tab.is-on[data-c="pink"] { background: var(--tk-t-pink); }
.tk-panel[data-c="pink"] { background: linear-gradient(151deg, #fff5f4 5%, var(--tk-t-pink) 98%); }

/* Con cinco piezas el collage se apretaba: se reparte de nuevo */
.tk-frag--aula { top: 46%; right: 10%; width: 186px; }
.aq-glass-card--xp { bottom: 4%; right: -6%; }
.tk-frag--kit { bottom: 2%; left: 0; width: 258px; }

/* ── "Por qué funciona": la columna derecha quedaba vacía ── */
.tk-why { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
/* Gato a la izquierda y texto a la derecha (2026-09-28): se refleja para que siga apuntando al texto. */
.tk-why__mascot { order: -1; }
.tk-why .aq-section__head { margin-bottom: 0; }
.tk-why__mascot { position: relative; display: grid; place-items: center; }
.tk-why__mascot::before {
  content: ''; position: absolute; inset: 6% 0 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--tk-t-warm) 0%, rgba(255,241,232,.55) 45%, transparent 70%);
}
.tk-why__mascot img { position: relative; width: 100%; max-width: 280px; height: auto; transform: scaleX(-1); filter: drop-shadow(0 18px 30px rgba(13,59,87,.16)); }
@media (max-width: 940px) {
  .tk-why { grid-template-columns: 1fr; gap: 24px; }
  .tk-why__mascot { order: -1; }
  .tk-why__mascot img { max-width: 170px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOG (legado)
   El blog no es Astro: vive en /blog/ como HTML heredado y carga
   landing-v2.css. Como ese CSS usa los MISMOS nombres de token
   (--navy, --coral, --f-serif…), basta con enlazar este archivo después
   para que herede toda la paleta nueva. Aquí solo van los remates.
   ═══════════════════════════════════════════════════════════════════════ */
.blog-hero h1 i, .blog-hero h1 em,
article h1 i, article h1 em,
h1 i, h1 em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  color: var(--tk-acc-deep);
}

/* La tarjeta destacada del blog confía SOLO en el overflow:hidden del padre
   para recortar la imagen. Como `.aqb-featured:hover` aplica un transform,
   el navegador promueve la tarjeta a capa compuesta y en varios motores
   (Safari y algunas versiones de Chrome) el radio del padre deja de
   recortar: la imagen asoma por la esquina. Se redondea también el
   contenedor de la imagen para que el recorte sea suyo y no heredado. */
.aqb-featured__media {
  /* EL BUG REAL: blog.css combina `aspect-ratio: 4/3` con `height: 100%`.
     Fijada la altura en 468px, la proporción impone 624px de ancho e ignora
     el ancho de su columna del grid (570px), así que la imagen se derramaba
     53px sobre la columna del texto y tapaba el inicio de cada línea
     ("eer el artículo" en vez de "Leer el artículo"). La altura manda: se
     anula la proporción y el ancho lo define la celda. */
  aspect-ratio: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 28px 0 0 28px;
  overflow: hidden;
}
.aqb-featured__media img { border-radius: inherit; }
@media (max-width: 720px) {
  /* apilada: las esquinas redondeadas pasan arriba */
  .aqb-featured__media { border-radius: 28px 28px 0 0; }
}
/* Mismo blindaje para las tarjetas del listado */
.aqb-card__media { overflow: hidden; }

/* En las páginas Astro el héroe se extiende BAJO la barra (margen negativo),
   así que el lavado se ve a través de ella. El blog no hace eso: su <main>
   empieza bajo la nav y detrás quedaba el blanco plano del body. Se pinta el
   lavado con un pseudo-elemento que sube por detrás de la barra. */
/* El pseudo-elemento no servía: el propio héroe del blog tiene fondo opaco
   y lo tapaba. El lavado va al body, que es lo único visible tras la barra.
   En las páginas Astro queda oculto bajo sus héroes (que traen su propio
   lavado sobre color sólido), así que no interfiere. */
/* El lavado va en una capa FIJA del tamaño de la pantalla (body::before).
   Antes era background-attachment: fixed en el body, pero Safari de iPhone
   IGNORA esa propiedad: el lavado se estiraba a todo el alto del documento
   (miles de px) y el tinte naranja de la esquina teñía secciones enteras de
   un tono "café" (Rai, 2026-09-28). position: fixed sí funciona en iOS. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tk-wash);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aqb-hero-mag, .aqa-hero { background-color: transparent; }
/* blog.css pinta `.aq-root { background: var(--bg) }` — un contenedor que
   cubre TODA la página y tapaba el lavado del body, dejando una banda blanca
   a todo el ancho justo bajo la barra. En las páginas Astro ese elemento no
   lleva fondo, así que hacerlo transparente solo afecta al blog. */
.aq-root { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS DE AUTENTICACIÓN (legado)
   signup, reset-password, email-check, email-confirmed, auth-confirm y
   registro-exitoso cargan auth.css + colors_and_type.css, que usan la
   familia de tokens --brand-* con la paleta anterior (navy #003558, coral
   rosado #ffa8a6, teal). Se remapean a los del toolkit y se les da el
   mismo lavado de fondo que el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --brand-navy:        #17506f;
  --brand-navy-dark:   #0d3b57;
  --brand-navy-light:  #daeaf7;
  --brand-teal:        #0e8c80;
  --brand-teal-light:  #d6efec;
  --brand-teal-dark:   #0b6b60;
  --brand-mint:        #1fbf71;
  --brand-mint-light:  #e4f5ec;
  --brand-coral:       #ff7a33;
  --brand-coral-light: #fff1e8;
  --brand-peach:       #ff9a54;
  --brand-peach-light: #fff1e8;
  --brand-gold:        #b5791c;
  --ach-page:          #fbfcfe;
}
/* El botón principal usaba navy sólido: pasa al gradiente naranjo del kit */
.auth-btn--primary {
  background: var(--tk-grad) !important;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(240,94,28,.28);
  border-radius: 999px;
}
.auth-btn--primary:hover { filter: brightness(1.04); transform: translateY(-2px); }
/* El lavado, igual que en el blog y las páginas Astro */
/* (El body::before fijo de arriba ya cubre estas páginas; sin
   background-attachment: fixed, que iPhone ignora.) */

/* .auth-shell y .auth-form-pane pintan #fff a pantalla completa y tapaban el
   lavado del body (mismo caso que .aq-root en el blog). */
.auth-shell, .auth-form-pane { background: transparent; }
/* El subrayado del titular trae el coral rosado incrustado en el SVG */
.auth-h1 .accent::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M2 6 Q 15 1, 30 6 T 60 6 T 98 6' stroke='%23ff7a33' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ── Hero: tarjetas de alumno REALES (2026-09-25) ─────────────────────
   Réplica de la tarjeta del dashboard del profesor (profesor.html +
   styles/toolkit.css de la app): personaje, pill de nivel con escudo de
   rango (LV_levelTier / LV_rankSize), insignia de clase del Modo Aventura
   y barra de XP. Las medidas son las REALES, medidas con getComputedStyle,
   y el conjunto se achica con `zoom` para que no se desproporcione. */
.tk-frag--roster { width: 380px; }
.tk-frag__grid--real { grid-template-columns: repeat(3, 1fr); gap: 14px; zoom: .62; padding: 4px 4px 2px 8px; }
.tk-hs {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 24px 12px 14px; background: #fff;
  border: 1px solid rgb(237, 240, 244); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(13,59,87,.05), 0 6px 18px rgba(13,59,87,.06);
}
.tk-hs__av { display: block; width: 94px; height: 108px; margin-top: -8px; background: no-repeat center bottom / contain; }
.tk-hs__name { font-family: 'Manrope', var(--f-display), sans-serif; font-size: 14px; font-weight: 800; color: #0d3b57; line-height: 19px; }
.tk-hs__xp { display: block; width: calc(100% - 12px); height: 5px; margin-top: 6px; border-radius: 99px; background: #eef0f5; overflow: hidden; }
.tk-hs__xp i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7a33, #f05e1c); }
.tk-hs__lvl {
  --rk: 0px; position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; height: 18px; box-sizing: border-box; padding: 3px 8px;
  font-family: 'Manrope', var(--f-display), sans-serif; font-size: 10.5px; font-weight: 800; line-height: 12px;
  color: #0d3b57; background: #daeaf7; border-radius: 99px;
}
.tk-hs__lvl.has-rank { padding-left: calc(var(--rk) / 2 + 4px); }
.tk-hs__rank {
  position: absolute; top: calc((18px - var(--rk)) / 2); left: calc(-6px - (var(--rk) - 18px) / 2);
  width: var(--rk); height: var(--rk); object-fit: contain; filter: drop-shadow(0 1px 2px rgba(13,59,87,.28));
}
.lvl-t2 .tk-hs__lvl { box-shadow: 0 0 0 1px rgba(195,79,25,.30), 0 0 8px 1px rgba(195,79,25,.30); }
.lvl-t3 .tk-hs__lvl { box-shadow: 0 0 0 1px rgba(2,61,160,.30), 0 0 8px 1px rgba(2,61,160,.30); }
.lvl-t4 .tk-hs__lvl { box-shadow: 0 0 0 1px rgba(222,103,53,.30), 0 0 8px 1px rgba(222,103,53,.30); }
.lvl-t5 .tk-hs__lvl { box-shadow: 0 0 0 1px rgba(2,53,127,.30), 0 0 8px 1px rgba(2,53,127,.30); }
.tk-hs__cls { position: absolute; top: -2px; left: -10px; z-index: 3; width: 37px; height: 37px; }
.tk-hs__cls img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.30)); }

/* ── Hero "Constelación" (2026-09-29) ───────────────────────────────
   El arte va en capas (HeroSky.astro) y lo anima site-motion.js: el cielo de
   constelación con transparencia sobre el degradado azul→morado de antes, recortado
   en diagonal; Alchie y los seis íconos en una escena de diseño de 1020×960 px que el
   JS escala al ancho real. --x0/--x1 = borde diagonal arriba/abajo (también del JS;
   los valores por defecto son los de 1440 px). */
@property --hxo { syntax: '<number>'; inherits: true; initial-value: 1; }
.aq-hero--alchie .aq-hero__orb { display: none; }
.aq-hero--alchie { isolation: isolate; }
.aq-hero--alchie .aq-hero__inner { position: relative; z-index: 3; }
.hx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 0 0 40px 40px; }
.hx-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(520px 440px at calc(var(--x1, 50%) + 40px) 66%, rgba(63, 101, 161, .9), rgba(63, 101, 161, 0) 70%),
    linear-gradient(180deg, #203d7a 0%, #213b79 48%, #2d2f75 70%, #3f297a 100%);
  /* El cielo se abre desde la diagonal: --hxo va de 0 a 1 en la entrada. */
  clip-path: polygon(var(--x0, calc(50% + 430px)) 0, calc(var(--x0, calc(50% + 430px)) + var(--hxo) * 3000px) 0, calc(var(--x1, 50%) + var(--hxo) * 3000px) 100%, var(--x1, 50%) 100%);
}
.hx-sky__img { position: absolute; inset: -4%; background: url(/assets/hero/hero-cielo.webp) center / cover no-repeat; mix-blend-mode: screen; opacity: .8; will-change: transform; }
.hx-sky canvas, .hx-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx-fx { z-index: 4; }
.hx-seam-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-seam { opacity: .55; filter: drop-shadow(0 0 6px rgba(243, 200, 119, .9)); }
.hx-fit { position: absolute; left: 0; top: 0; width: 1020px; height: 960px; transform-origin: 0 0; transform: translateX(calc(50vw - 130px)); }
.hx-lines { position: absolute; left: 0; top: 0; width: 1020px; height: 960px; overflow: visible; z-index: 2; }
.hx-lines line { stroke: #f3c877; stroke-width: 1.6; stroke-dasharray: 4 7; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243, 200, 119, .9)); }
.hx-cat { position: absolute; z-index: 3; max-width: none; will-change: transform; filter: drop-shadow(-14px 22px 34px rgba(4, 12, 40, .34)); }
.hx-ico { position: absolute; z-index: 4; display: block; will-change: transform, opacity; }
.hx-ico img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(13, 59, 87, .24)); }
.hx-glint { position: absolute; color: #fff; z-index: 6; opacity: 0; }
.hx-glint svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(190, 150, 255, .8)); }
.hx.is-on .hx-glint { animation: hx-tw var(--d, 3.6s) ease-in-out var(--o, 0s) infinite; }
@keyframes hx-tw { 0%, 72%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: .2; transform: scale(.5) rotate(70deg); } }
/* Estado inicial de la entrada: lo destapa el JS. Si el JS no llega, la red de seguridad del <head> quita .aq-motion y todo se ve. */
html.aq-anim.aq-motion .hx-sky { --hxo: 0; }
html.aq-anim.aq-motion .hx-cat, html.aq-anim.aq-motion .hx-ico, html.aq-anim.aq-motion .hx-seam { opacity: 0; }
/* Pantallas anchas: el párrafo no se estira hasta los íconos. */
@media (min-width: 1441px) { .aq-hero--alchie .aq-hero__lead { max-width: 440px; } }
.aq-hero--alchie .aq-hero__stage { min-height: 560px; }
/* Entre 1081 y 1440 px la escena del hero se achica (la escala la pone el JS) y el
   párrafo se acota para no llegar a los íconos (medido 2026-09-28, ES y EN). */
@media (min-width: 1081px) and (max-width: 1440px) {
  .aq-hero--alchie .aq-hero__lead { max-width: min(440px, calc(100vw - 740px)); }
}
/* El titular no debe entrar bajo el arte (en inglés "A class that joins in."
   es más ancho que el español y lo tapaba la burbuja de idiomas). */
.aq-hero--alchie .aq-h1 { max-width: 430px; }
@media (max-width: 1080px) {
  .aq-hero--alchie { display: flex; flex-direction: column; }
  .aq-hero--alchie .aq-hero__inner { order: 1; padding-bottom: 0; }
  .aq-hero--alchie .aq-hero__stage { display: none; }
  /* Tablet vertical: la escena va bajo el texto; su alto lo calcula el JS. */
  .hx { position: relative; order: 2; inset: auto; height: var(--hxh, 600px); margin-top: 16px; }
}
/* En celular el dibujo no se lee bien bajo el texto: se oculta (Rai). */
/* Gato del hero en celular (brazos cruzados, volteado para mirar al texto). */
.aq-hero__catm { display: none; }
@media (max-width: 760px) {
  .hx { display: none; }
  .aq-hero--alchie .aq-hero__copy { position: relative; }
  .aq-hero__catm { display: block; position: absolute; top: -4px; right: -8px; width: 104px; z-index: 2; pointer-events: none; }
  .aq-hero__catm img { display: block; width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 10px 16px rgba(13,59,87,.16)); }
  /* Pastilla y título más chicos, a la izquierda del gato. */
  .aq-hero--alchie .aq-hero__eyebrow { font-size: 10px; letter-spacing: .12em; padding: 6px 12px 6px 8px; max-width: calc(100% - 100px); }
  .aq-hero--alchie .aq-hero__h1 { font-size: 30px; max-width: calc(100% - 96px); }
  .aq-hero--alchie .aq-hero__inner { padding-bottom: 48px; }
}

/* ── "Qué es Alquie": piezas reales de la app flotando (2026-09-25) ──
   Reemplaza la lista ✓. Cada pieza es una réplica de la app (tarjeta de
   alumno de profesor.html/toolkit.css, #assignPanel reducido, #class-picker
   de alumno.html en blanco, votación de saga-decisiones.html en blanco,
   .cl-team de clanes.html y .pm-strengths). Dos capas por pieza:
   .aq-fl__p lleva posición, giro y el zoom del hover (con transición);
   .aq-fl__bob lleva la oscilación en bucle. Así la animación y la
   transición nunca pelean por la misma propiedad (Lab Note 2026-08-26). */
/* Abanico de fichas tras el hero (estructura inspirada en ClassDojo).
   Lienzo de diseño fijo de 1440×600 centrado; las fichas de los extremos se
   salen a propósito y el lienzo se achica con `zoom` en pantallas medianas.
   Tres capas por ficha: .aq-col__t (posición + giro + crecer al hover, con
   transición), .aq-fl__bob (balanceo en bucle) y .aq-col__f (la ficha). */
.aq-whatis { padding-top: 40px; }
/* Ancho completo de la ventana: las fichas de los extremos se cortan en el borde de la pantalla. */
.aq-col { overflow: hidden; overflow: clip; width: 100vw; margin-left: calc(50% - 50vw); padding: 10px 0 20px; }
.aq-col__stage { position: relative; width: 1440px; height: 600px; left: 50%; margin-left: -720px; }
@media (max-width: 1360px) { .aq-col__stage { zoom: .88; } }
@media (max-width: 1180px) { .aq-col__stage { zoom: .76; } }
.aq-col__t {
  position: absolute; width: 250px; height: 200px; z-index: 1;
  transform: rotate(var(--r, 0deg));
  transition: transform .45s cubic-bezier(.2,.9,.25,1.2);
  cursor: pointer;
}
.aq-col__t:hover { z-index: 20; transform: rotate(0deg) scale(1.3); }
.aq-col__t:hover .aq-fl__bob { animation-play-state: paused; }
.aq-fl__bob { height: 100%; animation: aq-bob var(--d, 6s) ease-in-out var(--o, 0s) infinite; }
@keyframes aq-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-6px) rotate(1deg); }
  70%      { transform: translateY(3px) rotate(-.8deg); }
}
@media (prefers-reduced-motion: reduce) { .aq-fl__bob { animation: none; } .aq-col__t { transition: none; } }
.aq-col__f {
  position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(13,59,87,.05), 0 14px 34px rgba(13,59,87,.12);
  transition: box-shadow .35s;
}
.aq-col__t:hover .aq-col__f { box-shadow: 0 4px 8px rgba(13,59,87,.08), 0 30px 60px rgba(13,59,87,.22); }
.aq-col__in { pointer-events: none; }
.aq-col__title { position: absolute; left: 50%; top: 360px; width: 380px; transform: translateX(-50%); text-align: center; }
.aq-col__title .aq-h2 { font-size: 36px; line-height: 1.12; }
.aq-whatis .aq-whatis__head { margin: 18px auto 0; }
.aq-whatis .aq-whatis__pills { margin-top: 26px; }

/* Piezas (tarjeta blanca de la app) */
.aq-fl__card {
  background: #fff; border: 1px solid #edf0f4; border-radius: 20px; padding: 14px;
  box-shadow: 0 1px 2px rgba(13,59,87,.05), 0 10px 30px rgba(13,59,87,.08);
  font-family: 'Nunito Sans', sans-serif; color: #0d3b57;
}
.aq-fl__card--flat { padding: 10px; }
.aq-fl__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 800; }
.aq-fl__h em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #0d8a5f; background: #e4f5ec; border-radius: 99px; padding: 3px 9px; }
.aq-col__t--stu .aq-fl__card { width: 322px; }
.aq-col__t--pts .aq-fl__card { width: 200px; }
.aq-col__t--cls .aq-fl__card { width: 232px; }
.aq-col__t--saga .aq-fl__card { width: 268px; }
.aq-col__t--clan .aq-fl__card { width: 196px; }
.aq-col__t--str .aq-fl__card { width: 268px; }
.aq-col__t--sl .aq-fl__card { width: 200px; }

/* Ficha del mapa: el mapa llena la ficha */
.aq-col__f--map { display: block; }
.aq-col__f--map .aq-map { width: 100%; height: 100%; }
/* Ficha de la pizarra: lienzo real (#eef4f8 + puntos) con semáforo y temporizador */
.aq-col__f--pz {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #eef4f8 radial-gradient(rgba(0,74,121,.085) 1.3px, transparent 1.3px) 0 0 / 18px 18px;
}
.aq-pz__sem { padding: 8px 10px; zoom: .74; }
.aq-pz__tm { padding: 10px; zoom: .72; }

/* Chrome de widget de la pizarra (styles/pizarra.css .wg): sin barra de título */
.aq-fl__card--wg { border-color: #d4e4ef; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,74,121,.07), 0 18px 44px -18px rgba(0,74,121,.28); }

/* Semáforo (pizarra-widgets-aula.js .tl) */
.aq-tl { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0; }
.aq-tl__i { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aq-tl__i i { width: 46px; height: 46px; border-radius: 50%; opacity: .18; }
.aq-tl__i i.red { background: #e5484d; } .aq-tl__i i.amber { background: #f2a51d; } .aq-tl__i i.green { background: #2e9e6b; }
.aq-tl__i i.on { opacity: 1; }
.aq-tl__i i.green.on { box-shadow: 0 0 26px rgba(46,158,107,.5); }
.aq-tl__i span { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; color: #5a7a8c; text-align: center; line-height: 1.15; }

/* Temporizador (pizarra-widgets-tiempo.js .tm) */
.aq-tm { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 2px; }
.aq-tm__ring { position: relative; width: 92px; height: 92px; flex: none; }
.aq-tm__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aq-tm__ring .track { stroke: #007a6c; opacity: .12; }
.aq-tm__ring .prog { stroke: #007a6c; }
.aq-tm__ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; color: #0d2033; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.aq-tm__mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.aq-tm__digits { display: flex; align-items: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: #0d2033; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.aq-tm__digits em { font-style: normal; color: #94a3b8; padding: 0 2px; }
.aq-tm__ctl { display: flex; gap: 8px; }
.aq-tm__ctl i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d4e4ef; background: #fff; color: #5a7a8c; display: grid; place-items: center; font-size: 11px; }
.aq-tm__ctl i.play { background: #007a6c; border-color: #007a6c; color: #fff; }

/* Nivel de ruido (pizarra-widgets-aula.js .sl) */
.aq-sl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aq-sl__g { position: relative; width: 100%; }
.aq-sl__g svg { display: block; width: 100%; }
.aq-sl__g .bg { stroke: #007a6c; opacity: .12; fill: none; }
.aq-sl__g .arc { stroke: #007a6c; fill: none; }
.aq-sl__g .thr { stroke: #e5484d; }
.aq-sl__v { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.1; color: #0d2033; }
.aq-sl__v small { display: block; font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }
.aq-sl__mic { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #007a6c; background: #e6f3f1; color: #005f55; border-radius: 9999px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; padding: 6px 13px; }
.aq-sl__mic i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: aq-blink 1.1s infinite; }
@keyframes aq-blink { 50% { opacity: .25; } }

/* Mapa de actividades (mapa.html .map-node / .pin-*) */
.aq-fl__card--map { padding: 0; overflow: hidden; }
.aq-map__bar { padding: 8px 10px; background: #fff; border-bottom: 1px solid #d4e4ef; }
.aq-map__chap { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; background: #eef4f8; border: 1.5px solid #d4e4ef; border-radius: 10px; }
.aq-map__chap img { width: 18px; height: 18px; }
.aq-map__chap small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5a7a8c; line-height: 1.1; }
.aq-map__chap b { display: block; font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; color: #0d2033; line-height: 1.2; }
.aq-map { position: relative; height: 210px; background: #1a1a2e; overflow: hidden; }
.aq-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aq-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.aq-map__lines path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.aq-map__lines path.done { stroke: rgba(0,122,108,.95); stroke-dasharray: none; }
.aq-map__n { position: absolute; transform: translate(-50%, -18px); display: flex; flex-direction: column; align-items: center; }
.aq-pin { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); display: grid; place-items: center; box-shadow: 0 3px 12px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.15); }
.aq-pin img { width: 15px; height: 15px; filter: brightness(0) invert(1); opacity: .9; }
.aq-pin i { position: absolute; bottom: -4px; left: -4px; width: 14px; height: 14px; border-radius: 50%; background: #1e293b; border: 2px solid #fff; font-style: normal; font-size: 7.5px; font-weight: 900; color: #fff; display: grid; place-items: center; }
.aq-pin.done { background: linear-gradient(135deg, #007a6c, #005a51); border-color: #7ee8d8; }
.aq-pin.current { background: linear-gradient(135deg, #ffc691, #e8a060); border-color: #ffdcaa; animation: aq-pulse-pin 2s infinite; }
.aq-pin.locked { background: linear-gradient(135deg, #64748b, #475569); border-color: #cbd5e1; }
@keyframes aq-pulse-pin { 0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,.4), 0 0 0 2px rgba(255,198,145,.4); } 50% { box-shadow: 0 3px 12px rgba(0,0,0,.4), 0 0 0 8px rgba(255,198,145,.12); } }
.aq-pin__tail { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #cbd5e1; margin-top: -1px; }
.aq-pin__tail.done { border-top-color: #7ee8d8; } .aq-pin__tail.current { border-top-color: #ffdcaa; }
.aq-pin__lbl { background: rgba(255,255,255,.93); border: 1.5px solid rgba(255,255,255,.8); border-radius: 9px; padding: 4px 8px; margin-top: 4px; min-width: 92px; max-width: 124px; box-shadow: 0 3px 12px rgba(0,0,0,.25); text-align: center; }
.aq-pin__lbl b { display: block; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 900; color: #0d2033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-pin__lbl small { display: block; font-size: 8.5px; font-weight: 700; color: #5a7a8c; margin-top: 1px; }
.aq-pin__lbl u { display: block; height: 3px; background: #d4e4ef; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.aq-pin__lbl em { display: block; height: 100%; border-radius: 3px; }

/* Alumnos: la tarjeta real (.tk-hs) a escala */
.aq-fl__stu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; zoom: .7; padding: 8px 4px 0 12px; }

/* Asignar puntos (reducido) */
.aq-pts { display: flex; flex-direction: column; gap: 9px; }
.aq-pts__title { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid #edf0f4; }
.aq-pts__sign { display: flex; gap: 6px; }
.aq-pts__sign span { flex: 1; text-align: center; padding: 5px; border: 1.5px solid #e3eaf1; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: #5f7284; }
.aq-pts__sign .is-add { border-color: #1fbf71; background: #e4f5ec; color: #0d8a5f; }
.aq-pts__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aq-pts__in { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1.5px solid #e3eaf1; border-radius: 10px; font-size: 15px; font-weight: 900; }
.aq-pts__in img { width: 14px; height: 14px; }
.aq-pts__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aq-pts__chips span { padding: 4px 8px; background: #eef0f5; border: 1.5px solid transparent; border-radius: 99px; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
.aq-pts__chips .is-on { border-color: #ff7a33; color: #f05e1c; background: #fff1e8; }
.aq-pts__foot { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #edf0f4; }
.aq-pts__btn { padding: 7px 16px; border-radius: 99px; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; }
.aq-pts__btn--save { color: #fff; background: linear-gradient(160deg, #ff9a54, #ff7a33 65%, #f05e1c); box-shadow: 0 8px 20px rgba(240,94,28,.28); }

/* Elige tu clase (picker real, pasado a blanco) */
/* minmax(0,1fr): las tres tarjetas miden lo mismo y nunca se salen de la ficha, aunque la frase sea larga. */
.aq-cls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aq-cls__c { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; border-radius: 14px; border: 1.5px solid #edf0f4; text-align: center; }
.aq-cls__c img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.22)); margin-bottom: 3px; }
.aq-cls__c i { font-style: normal; font-family: 'Poppins', sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #93a3b3; }
.aq-cls__c b { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; }
.aq-cls__c small { font-family: 'Manrope', sans-serif; font-size: 8.5px; font-weight: 800; line-height: 1.25; color: #5f7284; text-wrap: balance; }
.aq-cls__c--paladin { background: #fdf6e3; border-color: rgba(214,179,68,.45); }
.aq-cls__c--healer  { background: #eaf8f2; border-color: rgba(108,206,166,.5); }
.aq-cls__c--mage    { background: #fff1e8; border-color: rgba(255,140,66,.45); }

/* Decisión de la clase (votación de la saga, pasada a blanco) */
.aq-saga { font-size: 12px; line-height: 1.45; color: #5f7284; }
.aq-saga__h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.aq-saga__check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #ff7a33; background: #fff1e8; color: #f05e1c; font-size: 11px; font-weight: 800; }
.aq-saga__t { flex: 1; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; color: #0d3b57; line-height: 1.25; }
.aq-saga__st { flex: none; padding: 3px 9px; border-radius: 99px; background: #fff1e8; color: #f05e1c; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; }
.aq-saga__pct { font-weight: 800; color: #0d8a5f; }
.aq-saga__det { font-size: 11px; margin-bottom: 6px; }
.aq-saga__opt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-top: 6px; border-radius: 10px; background: #f7f8fb; border: 1px solid #edf0f4; }
.aq-saga__opt b { font-family: 'Poppins', sans-serif; font-size: 11px; color: #f05e1c; min-width: 12px; }
.aq-saga__opt span { flex: 1; color: #0d3b57; font-weight: 700; font-size: 12px; line-height: 1.3; }
.aq-saga__opt i { font-style: normal; padding: 2px 8px; border-radius: 99px; background: #fff1e8; color: #f05e1c; font-size: 11px; font-weight: 800; min-width: 26px; text-align: center; }

/* Columna de clan */
.aq-clan { background: #eef0f5; border-radius: 16px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.aq-clan__head { display: flex; align-items: center; gap: 10px; }
.aq-clan__flag { position: relative; width: 30px; height: 41px; flex: none; border-radius: 7px; overflow: hidden; }
.aq-clan__flag .b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aq-clan__flag .i { position: absolute; width: 60%; top: 44%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.aq-clan__name { flex: 1; white-space: nowrap; font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 800; }
.aq-clan__count { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 800; color: #5f7284; background: #fff; border-radius: 99px; padding: 2px 9px; }
.aq-clan__list { display: flex; flex-direction: column; gap: 5px; }
.aq-clan__chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #edf0f4; border-radius: 11px; padding: 5px 8px; box-shadow: 0 1px 2px rgba(13,59,87,.05), 0 6px 18px rgba(13,59,87,.06); }
.aq-clan__chip i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #daeaf7; color: #1f6aa8; font-family: 'Manrope', sans-serif; font-size: 9px; font-weight: 800; display: grid; place-items: center; flex: none; }
.aq-clan__chip span { font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fortalezas destacadas */
.aq-str { padding: 12px 14px; border: 1.5px solid #d4e4ef; border-radius: 12px; background: #f8fbfd; }
.aq-str__t { font-size: 13px; font-weight: 900; color: #2a4a5e; }
.aq-str__s { font-size: 10.5px; font-weight: 600; color: #5a7a8c; margin: 2px 0 9px; }
.aq-str__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aq-str__chips span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #daeaf7; border-radius: 99px; padding: 4px 11px; font-size: 11.5px; font-weight: 800; color: #004a79; white-space: nowrap; }
.aq-str__chips b { font-size: 10.5px; font-weight: 900; color: #5a7a8c; }

/* Pantallas angostas: sin abanico. Las fichas van en UNA fila que se desliza
   con el dedo (scroll-snap), para no ocupar una columna larguísima. El título
   se saca del carril con position:absolute respecto de .aq-col (que no se
   desplaza), así queda quieto arriba mientras las fichas pasan. */
@media (max-width: 900px) {
  .aq-col { position: relative; width: auto; margin: 0 -18px; padding: 0; overflow: visible; }
  .aq-col__stage {
    position: static; width: auto; height: auto; margin: 0; left: auto; zoom: 1;
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 18px;
    padding: 118px 18px 48px; margin-bottom: -22px; scrollbar-width: none;
  }
  .aq-col__stage::-webkit-scrollbar { display: none; }
  .aq-col__title { position: absolute; top: 0; left: 18px; right: 18px; width: auto; transform: none; }
  .aq-col__title .aq-h2 { font-size: 28px; }
  .aq-col__t {
    position: relative; left: auto !important; top: auto !important; flex: 0 0 240px; width: 240px; height: 190px;
    scroll-snap-align: center; transform: rotate(calc(var(--r) / 4));
  }
  .aq-col__t:hover { transform: rotate(calc(var(--r) / 4)); }
  .aq-col__in { zoom: .92; }
}

/* ── Alchie en la portada (2026-09-27): tres poses sueltas ──────────────
   Brazos cruzados junto a "El problema…" y sentado en el borde de la caja
   final (el que apunta vive en "Por qué funciona", .tk-why__mascot). Decorativos (aria-hidden). */
.aq-cat { position: absolute; z-index: 3; pointer-events: none; height: auto; filter: drop-shadow(0 14px 22px rgba(13,59,87,.16)); }
/* Mira hacia la derecha: va a la IZQUIERDA del título, cerca del texto. */
.aq-cat--problem { width: 170px; left: calc(50% - 480px); top: 70px; }
.aq-finalcta { position: relative; }
/* Sentado: el asiento está a ~62 % de su alto; se alinea con el borde superior
   de la caja (que empieza a 80px del inicio de la sección). */
.aq-cat--cta { width: 186px; right: calc(var(--pad, 24px) + 70px); top: calc(80px - 162px); }
@media (max-width: 1279px) {
  .aq-cat--problem { display: none; }
}
/* Celular: más chico, sentado en el mismo borde (el asiento a ~62 % de su alto:
   140px de ancho → 196 de alto → asiento a 122px). Ocupa el espacio vacío que
   queda sobre la caja (Rai, 2026-09-28). */
@media (max-width: 760px) {
  .aq-cat--cta { width: 140px; right: calc(var(--pad, 24px) + 22px); top: calc(80px - 122px); }
  /* Los pies del gato tocaban el antetítulo ("Da el primer paso"): en celular se omite. */
  .aq-finalcta__inner > .aq-eyebrow { display: none; }
  /* …y la caja gana aire arriba: los pies bajan ~74px dentro de ella. */
  .aq-finalcta__inner { padding-top: 92px; }
}

/* ══ MOTION (2026-09-28, prueba local) ══════════════════════════════════
   Dos zonas: (1) hero — misma composición, pero el titular entra palabra por
   palabra, el subrayado se dibuja, el arte se asienta con un leve paralaje y
   brillan destellos sobre la gema/matraz/libro; (2) "Detrás de la aventura" —
   la captura fija pasa a ser 4 escenas animadas con réplicas de la app.
   Todo solo transform/opacity (Chromebooks). Sin JS o con "reducir
   movimiento": estado final quieto. Lo orquesta /site-motion.js. */

/* ── 1 · Hero ── */
.aq-hw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
.aq-hw > span { display: inline-block; }
.aq-hw--accent { overflow: visible; }          /* el subrayado sale por abajo */
html.aq-anim.aq-motion .aq-hw > span { transform: translateY(108%) rotate(5deg); transform-origin: 0 100%; }
html.aq-anim.aq-motion .aq-hw--accent > span { transform: translateY(40%) scale(.9); opacity: 0; }
html.aq-anim.aq-motion .aq-hero__h1--words.is-go .aq-hw > span {
  transform: none; opacity: 1;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  transition-delay: calc(120ms + var(--i) * 65ms);
}
html.aq-anim.aq-motion .aq-hero__h1--words .accent path { stroke-dasharray: 220; stroke-dashoffset: 220; }
html.aq-anim.aq-motion .aq-hero__h1--words.is-go .accent path { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) .8s; }
/* El resto del copy entra después del titular. */
html.aq-anim.aq-motion .aq-hero--alchie .aq-hero__lead.aq-reveal  { transition-delay: .75s; }
html.aq-anim.aq-motion .aq-hero--alchie .aq-hero__ctas.aq-reveal  { transition-delay: .9s; }
html.aq-anim.aq-motion .aq-hero--alchie .aq-hero__seal.aq-reveal  { transition-delay: 1.05s; }


/* Botón principal: un brillo lo recorre cada tanto. */
.aq-hero--alchie .aq-hero__ctas .aq-btn--coral { position: relative; overflow: hidden; }
.aq-hero--alchie .aq-hero__ctas .aq-btn--coral::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg);
  animation: aq-shimmer 5s 2.6s infinite;
}
@keyframes aq-shimmer { 0%, 72% { left: -60%; } 100% { left: 130%; } }
/* Punto del antetítulo: late suave. */
.aq-hero--alchie .aq-hero__eyebrow-dot { position: relative; }
.aq-hero--alchie .aq-hero__eyebrow-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--coral);
  animation: aq-ping 2.8s cubic-bezier(.16,1,.3,1) 1.6s infinite; opacity: 0;
}
@keyframes aq-ping { 0% { opacity: .7; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

/* ── 2 · Detrás de la aventura: escenas animadas ── */
.tk-vt__item { position: relative; overflow: hidden; }
.tk-vt__item .aq-lv-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: currentColor; opacity: .5; }
.tk-vt__item[data-c="navy"]  { color: var(--tk-t-navy-ink); }
.tk-vt__item[data-c="green"] { color: var(--tk-t-green-ink); }
.tk-vt__item[data-c="warm"]  { color: var(--tk-t-warm-ink); }
.tk-vt__item[data-c="teal"]  { color: var(--tk-t-teal-ink); }
.tk-vt__item h3 { color: var(--ink); }
.aq-lv { position: relative; width: 100%; aspect-ratio: 560 / 380; }
.aq-lv__canvas { position: absolute; left: 0; top: 0; width: 560px; height: 380px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.aq-lv__s { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.aq-lv__s.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.aq-lv__cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 30; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.aq-lv-tap { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--coral); z-index: 29; pointer-events: none; }
.aq-lv-tok {
  position: absolute; left: 0; top: 0; z-index: 28; display: inline-flex; align-items: center; gap: 4px; pointer-events: none;
  padding: 5px 10px 5px 6px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-lg);
  font: 800 13px 'Manrope', sans-serif; color: var(--tk-acc-deep);
}
.aq-lv-tok img { width: 18px; height: 18px; }
.aq-lv-conf { position: absolute; left: 0; top: 0; width: 7px; height: 10px; border-radius: 2px; z-index: 27; pointer-events: none; }

/* piezas comunes */
.aq-lv-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 11px;
  font: 600 13px 'Poppins', sans-serif; color: #fff; background: var(--tk-grad); box-shadow: 0 6px 14px rgba(240,94,28,.28);
}
.aq-lv-btn--sm { padding: 5px 11px; font-size: 11px; border-radius: 9px; }
.aq-lv-pop {
  position: absolute; width: 250px; padding: 14px; background: #fff; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; font-family: 'Nunito Sans', sans-serif;
}
.aq-lv-pop__t { font: 800 14px 'Manrope', sans-serif; display: flex; align-items: center; gap: 8px; }
.aq-lv-ibtag { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--tk-t-warm); color: var(--tk-t-warm-ink); }
.aq-lv-seg { display: flex; padding: 3px; border-radius: 10px; background: #f2f5f9; }
.aq-lv-seg span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; font: 700 11.5px 'Manrope', sans-serif; color: var(--ink-soft); }
.aq-lv-seg span.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.aq-lv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aq-lv-chips span { padding: 4px 9px; border-radius: 99px; background: #f2f5f9; font: 700 11px 'Nunito Sans', sans-serif; transition: background .25s, color .25s, box-shadow .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.aq-lv-chips span.is-on { background: var(--tk-acc-soft); color: var(--tk-acc-deep); box-shadow: inset 0 0 0 1.5px var(--tk-acc); transform: scale(1.06); }
.aq-lv-amt { display: flex; gap: 5px; }
.aq-lv-amt span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; border: 1px solid var(--line); font: 800 12px 'Manrope', sans-serif; transition: all .25s; }
.aq-lv-amt span.is-on { border-color: var(--tk-acc); color: var(--tk-acc-deep); background: var(--tk-acc-soft); }
.aq-lv-strchip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #cfe0ee; border-radius: 999px;
  padding: 5px 12px; font: 800 12px 'Nunito Sans', sans-serif; color: var(--ink);
}
.aq-lv-strchip b { font-size: 11px; font-weight: 900; color: #7a8a9a; }
.aq-lv-str { display: flex; flex-wrap: wrap; gap: 7px; }

/* escena 0: tabla */
.aq-lv-tbl { position: absolute; left: 0; top: 14px; width: 560px; background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; font-family: 'Nunito Sans', sans-serif; }
.aq-lv-tbl__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.aq-lv-tbl__bar b { font: 800 14px 'Manrope', sans-serif; flex: 1; }
.aq-lv-tbl__sel { font: 700 11.5px 'Nunito Sans', sans-serif; color: var(--tk-acc-deep); opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.aq-lv-tbl__sel.is-on { opacity: 1; transform: none; }
.aq-lv-tbl__row { display: grid; grid-template-columns: 22px 1.75fr .95fr .7fr .75fr .85fr .85fr; align-items: center; gap: 6px; padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); transition: background .4s; }
.aq-lv-tbl__row:last-child { border-bottom: 0; }
.aq-lv-tbl__row--h { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); padding-top: 8px; padding-bottom: 8px; background: #fafbfd; }
.aq-lv-tbl__row.is-sel { background: #fff6ef; }
.aq-lv-tbl__row.is-flash { background: #e9f7ef; }
.aq-lv-tbl__who { display: flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif; font-weight: 800; }
.aq-lv-tbl__who em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-soft); color: #1f6aa8; font-size: 8.5px; display: grid; place-items: center; }
.aq-lv-tbl__pts { color: var(--tk-acc-deep); font-weight: 800; display: inline-block; }
.aq-lv-tbl__ok { color: #2e9c66; }
.aq-lv-cb { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #cfd8e3; background: #fff; display: grid; place-items: center; transition: all .2s; }
.aq-lv-cb.is-on { background: var(--tk-acc); border-color: var(--tk-acc); }
.aq-lv-cb.is-on::after { content: ""; width: 6px; height: 3px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.aq-lv__s[data-s="0"] .aq-lv-pop { z-index: 5; right: 14px; top: 70px; opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 80% 0; pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.aq-lv__s[data-s="0"] .aq-lv-pop.is-open { opacity: 1; transform: none; }

/* escena 1: clanes */
.aq-lv-pool { position: absolute; left: 0; top: 10px; width: 170px; }
.aq-lv-clan { position: absolute; top: 10px; width: 180px; min-height: 120px; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .3s; }
.aq-lv-clan[data-clan="0"] { left: 188px; }
.aq-lv-clan[data-clan="1"] { left: 380px; }
.aq-lv-clan.is-hot { box-shadow: 0 0 0 3px rgba(46,156,102,.35), var(--shadow-sm); }
.aq-lv__s[data-s="1"] .aq-clan__chip { will-change: transform; }
.aq-lv-clan .aq-clan__chip { background: #f7f9fc; }
.aq-clan__chip.is-lift { box-shadow: var(--shadow-lg); z-index: 5; position: relative; }
.aq-lv-modal {
  position: absolute; left: 140px; top: 110px; width: 280px; padding: 16px; border-radius: 16px; background: #fff; z-index: 10;
  box-shadow: 0 30px 80px rgba(13,59,87,.25); display: flex; flex-direction: column; gap: 8px; font-family: 'Nunito Sans', sans-serif;
  opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);
}
.aq-lv-modal.is-open { opacity: 1; transform: none; }
.aq-lv-modal b { font: 800 14px 'Manrope', sans-serif; }
.aq-lv-modal small { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; }
.aq-lv-modal__n { display: flex; gap: 5px; margin-bottom: 4px; }
.aq-lv-modal__n span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; border: 1px solid var(--line); font: 800 12px 'Manrope', sans-serif; }
.aq-lv-modal__n span.is-on { border-color: var(--tk-acc); color: var(--tk-acc-deep); background: var(--tk-acc-soft); }

/* escena 2: IB */
.aq-lv-pop--ib { left: 0; top: 14px; width: 300px; }
.aq-lv-stu { position: absolute; left: 330px; top: 34px; width: 222px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aq-lv-stu .tk-hs { width: 170px; zoom: 1.12; }
.aq-lv-stu .tk-hs__xp i { transition: width .7s cubic-bezier(.16,1,.3,1); }
.aq-lv-stu .aq-lv-str { justify-content: center; }


/* colores extra de la lista (clases = oro, IA = rosa) */
.tk-vt__item[data-c="gold"] { color: var(--tk-t-gold-ink); }
.tk-vt__item[data-c="pink"] { color: var(--tk-t-pink-ink); }
.tk-vt__item.is-on[data-c="gold"] { border-color: var(--tk-t-gold-ink); }
.tk-vt__item.is-on[data-c="pink"] { border-color: var(--tk-t-pink-ink); }
.tk-vt__stage[data-c="gold"] { background: linear-gradient(151deg,#fffaf0,var(--tk-t-gold)); }
.tk-vt__stage[data-c="pink"] { background: linear-gradient(151deg,#fff6f5,var(--tk-t-pink)); }

/* escena 0: pill de nivel con escudo dentro de la tabla */
.aq-lv-tl { display: inline-flex; padding-left: 8px; }
.aq-lv-tl .tk-hs__lvl { position: relative; top: auto; right: auto; }
.aq-lv-tl .tk-hs__lvl b { display: inline-block; font-weight: 800; }
.aq-lv-toast {
  position: absolute; left: 50%; bottom: 18px; z-index: 12; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 8px 16px 8px 9px; border-radius: 14px; background: var(--ink); color: #fff; font: 800 13.5px 'Manrope', sans-serif;
  box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%, 16px) scale(.92); transition: opacity .3s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.aq-lv-toast img { width: 28px; height: 28px; object-fit: contain; }
.aq-lv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.aq-lv-fly { position: absolute; left: 0; top: 0; z-index: 28; width: 40px; height: 40px; pointer-events: none; }
.aq-lv-fly img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }

/* escena 2: clases */
.aq-lv-pick { position: absolute; left: 80px; top: 0; width: 400px; padding: 12px 14px 14px; background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.aq-lv-pick__t { font: 800 13px 'Manrope', sans-serif; margin-bottom: 9px; }
.aq-lv-pick .aq-cls { gap: 10px; }
.aq-lv-pick .aq-cls__c { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.aq-lv-pick .aq-cls__c.is-on { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 0 2.5px var(--tk-acc), var(--shadow-sm); }
.aq-lv-trio { position: absolute; left: 0; right: 0; top: 176px; display: flex; justify-content: center; gap: 22px; }
.aq-lv-trio .tk-hs { width: 150px; padding-bottom: 12px; }
.aq-lv-trio .tk-hs__av { height: 96px; }
.aq-lv-trio .tk-hs__cls:empty { display: none; }
.aq-lv-role { min-height: 15px; font: 600 9px 'Poppins', sans-serif; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-mute); }

/* escena 4: saga con IA + mapa */
.aq-lv-mapbg { position: absolute; inset: -4px; border-radius: 18px; overflow: hidden; opacity: 0; transform: scale(1.06); box-shadow: var(--shadow-lg); }
.aq-lv-mapbg .aq-map { height: 100%; }
.aq-lv-mapbg .aq-map__n { opacity: 0; }
.aq-lv-saga {
  position: absolute; left: 70px; top: 40px; width: 420px; padding: 18px; z-index: 5; background: #fff; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(13,59,87,.22); display: flex; flex-direction: column; gap: 6px; font-family: 'Nunito Sans', sans-serif;
}
.aq-lv-saga__eb { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tk-t-pink-ink); }
.aq-lv-saga__t { font: 800 17px 'Manrope', sans-serif; }
.aq-lv-saga__s { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.aq-lv-saga__in { min-height: 92px; padding: 11px 12px; border: 1.5px solid #dfe6ee; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--ink); background: #fbfcfe; }
.aq-lv-saga__in.is-focus { border-color: var(--tk-acc); box-shadow: 0 0 0 3px rgba(255,122,51,.15); }
.aq-lv-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: aq-caret 1s steps(1) infinite; }
@keyframes aq-caret { 50% { opacity: 0; } }
.aq-lv-saga__row { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 6px; }
.aq-lv-saga__ghost { font: 600 12.5px 'Poppins', sans-serif; color: var(--ink-soft); }
.aq-lv-btn.is-busy { background: linear-gradient(100deg, #ff9a54 20%, #ffc59e 50%, #ff9a54 80%); background-size: 200% 100%; animation: aq-busy 1s linear infinite; }
@keyframes aq-busy { to { background-position: -200% 0; } }
.aq-lv-ep {
  position: absolute; right: 10px; top: 22px; width: 300px; padding: 15px 16px; z-index: 6; border-radius: 16px;
  background: rgba(255,255,255,.95); box-shadow: 0 24px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px;
  font-family: 'Nunito Sans', sans-serif; opacity: 0;
}
.aq-lv-ep__t { font: 800 14px 'Manrope', sans-serif; }
.aq-lv-ep__p { margin: 0; min-height: 110px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.aq-lv-ep__ob { margin-top: 2px; color: var(--ink-mute); }
.aq-lv-ep__o { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 10px; border: 1.5px solid #e6ecf2; background: #fff; font: 700 11.5px 'Nunito Sans', sans-serif; color: var(--ink); opacity: 0; }
.aq-lv-ep__o em { font-style: normal; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--tk-t-pink); color: var(--tk-t-pink-ink); font: 800 11px 'Manrope', sans-serif; }


/* ── 3 · "Un kit, no una app suelta": grilla de las doce herramientas ──
   Cada tarjeta = mini animación + nombre + plan. Las animaciones solo corren
   con la sección en pantalla (.is-live, lo pone site-motion.js). */
.aq-kit { max-width: 1180px; margin: 0 auto; }
.aq-kit__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 26px; font: 700 13px 'Nunito Sans', sans-serif; color: var(--ink-soft); }
.aq-kit__legend span { display: inline-flex; align-items: center; gap: 7px; }
.aq-kit__legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kc-ink); }
.aq-kit [data-c="warm"]  { --kc: var(--tk-t-warm);  --kc-ink: var(--tk-t-warm-ink); }
.aq-kit [data-c="navy"]  { --kc: var(--tk-t-navy);  --kc-ink: var(--tk-t-navy-ink); }
.aq-kit [data-c="green"] { --kc: var(--tk-t-green); --kc-ink: var(--tk-t-green-ink); }
.aq-kit [data-c="teal"]  { --kc: var(--tk-t-teal);  --kc-ink: var(--tk-t-teal-ink); }
.aq-kit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aq-kit__c {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.aq-kit__c:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.aq-kit__v {
  position: relative; height: 150px; margin: 8px 8px 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(151deg, #fff, var(--kc)); display: flex; align-items: center; justify-content: center; gap: 14px;
}
.aq-kit__b { padding: 14px 18px 18px; }
.aq-kit__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aq-kit__h b { font: 800 15.5px 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.aq-kit__plan { font: 800 9.5px 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--kc); color: var(--kc-ink); }
.aq-kit__b p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
/* entrada en cascada */
html.aq-anim.aq-motion .aq-kit__c { opacity: 0; transform: translateY(26px) scale(.97); }
html.aq-anim.aq-motion .aq-kit.is-in .aq-kit__c { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1), box-shadow .35s; transition-delay: calc(var(--i) * 60ms); }
html.aq-anim.aq-motion .aq-kit.is-in .aq-kit__c:hover { transform: translateY(-5px); transition-delay: 0s; }
/* las mini animaciones esperan a que la sección esté en pantalla */
.aq-kit__v *, .aq-kit__v *::before, .aq-kit__v *::after { animation-play-state: paused !important; }
.aq-kit.is-live .aq-kit__v *, .aq-kit.is-live .aq-kit__v *::before, .aq-kit.is-live .aq-kit__v *::after { animation-play-state: running !important; }

.kv-ic { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(13,59,87,.18)); animation: kv-float 4s ease-in-out infinite; }
.kv-ic--sm { width: 62px; height: 62px; }
@keyframes kv-float { 50% { transform: translateY(-6px); } }

/* 1 pizarra */
.kv-board { position: absolute; inset: 12px; border-radius: 12px; background: #fff radial-gradient(#dfe6ee 1.2px, transparent 1.3px) 0 0 / 14px 14px; display: flex; align-items: center; justify-content: center; gap: 22px; box-shadow: inset 0 0 0 1px #edf0f4; }
.kv-note { width: 84px; padding: 12px 10px; background: #fff6c9; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 6px 12px rgba(13,59,87,.12); display: flex; flex-direction: column; gap: 6px; animation: kv-float 5s ease-in-out infinite; }
.kv-note i { height: 5px; border-radius: 3px; background: #e5c96b; }
.kv-note i:nth-child(2) { width: 70%; } .kv-note i:nth-child(3) { width: 85%; }
.kv-sema { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #1e293b; border-radius: 14px; }
.kv-sema i { width: 20px; height: 20px; border-radius: 50%; opacity: .18; animation: kv-light 6s infinite; }
.kv-sema .r { background: #ef4444; } .kv-sema .y { background: #f5b301; animation-delay: 2s; } .kv-sema .g { background: #22c55e; animation-delay: 4s; }
@keyframes kv-light { 0%, 33% { opacity: 1; box-shadow: 0 0 12px currentColor; } 34%, 100% { opacity: .18; } }
/* 2 timer + ruido */
.kv-timer { position: relative; width: 84px; height: 84px; }
.kv-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kv-timer circle { fill: none; stroke-width: 7; }
.kv-timer .bg { stroke: rgba(13,59,87,.1); } .kv-timer .fg { stroke: var(--tk-acc); stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.kv-timer b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px 'Manrope', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.kv-noise { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.kv-noise i { width: 8px; height: 100%; border-radius: 4px; background: linear-gradient(0deg, #22c55e, #f5b301 70%, #ef4444); transform-origin: bottom; animation: kv-bar 1.4s ease-in-out infinite alternate; }
.kv-noise i:nth-child(2) { animation-duration: 1.1s; } .kv-noise i:nth-child(3) { animation-duration: 1.7s; } .kv-noise i:nth-child(4) { animation-duration: .9s; }
.kv-noise i:nth-child(5) { animation-duration: 1.3s; } .kv-noise i:nth-child(6) { animation-duration: 1.9s; } .kv-noise i:nth-child(7) { animation-duration: 1.2s; }
@keyframes kv-bar { 0% { transform: scaleY(.2); } 100% { transform: scaleY(.85); } }
/* 3 selector */
.kv-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kv-pick small { font: 800 10px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--kc-ink); }
.kv-pick b { min-width: 150px; text-align: center; padding: 12px 18px; border-radius: 14px; background: #fff; font: 800 22px 'Manrope', sans-serif; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.kv-pick b.is-win { transform: scale(1.1); box-shadow: 0 0 0 3px var(--tk-acc), var(--shadow-lg); }
/* 4 asistencia */
.kv-att { display: flex; flex-direction: column; gap: 5px; width: 170px; }
.kv-att div { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #fff; border-radius: 9px; font: 800 11.5px 'Manrope', sans-serif; color: var(--ink); box-shadow: 0 1px 2px rgba(13,59,87,.06); }
.kv-att em { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--navy-soft); color: #1f6aa8; font-size: 7.5px; display: grid; place-items: center; }
.kv-att i { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #cfd8e3; animation: kv-check 6s infinite; }
.kv-att div:nth-child(2) i { animation-delay: .6s; } .kv-att div:nth-child(3) i { animation-delay: 1.2s; } .kv-att div:nth-child(4) i { animation-delay: 1.8s; }
@keyframes kv-check { 0%, 8% { background: #fff; border-color: #cfd8e3; transform: scale(1); } 12% { transform: scale(1.3); } 16%, 85% { background: #2e9c66; border-color: #2e9c66; transform: scale(1); box-shadow: inset 0 0 0 3px #fff; } 100% { background: #fff; border-color: #cfd8e3; } }
/* 5 quiz */
.kv-quiz { display: flex; flex-direction: column; gap: 7px; }
.kv-quiz small { font: 800 14px 'Manrope', sans-serif; color: var(--ink); }
.kv-quiz div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kv-quiz span { width: 50px; text-align: center; padding: 6px 0; border-radius: 9px; background: #fff; font: 800 13px 'Manrope', sans-serif; color: var(--ink); box-shadow: 0 1px 2px rgba(13,59,87,.08); animation: kv-dim 4s infinite; }
.kv-quiz span.ok { animation-name: kv-ok; }
@keyframes kv-dim { 0%, 45% { opacity: 1; } 55%, 90% { opacity: .4; } 100% { opacity: 1; } }
@keyframes kv-ok { 0%, 45% { background: #fff; color: var(--ink); transform: scale(1); } 55%, 90% { background: #22c55e; color: #fff; transform: scale(1.1); } 100% { background: #fff; } }
/* 6 duelo */
.kv-duel { display: flex; align-items: center; gap: 10px; }
.kv-duel img { width: 60px; height: 60px; object-fit: contain; animation: kv-clash 2.4s ease-in-out infinite; }
@keyframes kv-clash { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.12) rotate(-6deg); } 55% { transform: scale(1.12) rotate(6deg); } }
.kv-duel__p { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kv-duel__p span { width: 54px; height: 60px; border-radius: 14px; background: #fff no-repeat center bottom / contain; box-shadow: var(--shadow-sm); }
.kv-duel__p u, .kv-boss u { display: block; width: 58px; height: 6px; border-radius: 3px; background: rgba(13,59,87,.12); overflow: hidden; }
.kv-duel__p em, .kv-boss em { display: block; height: 100%; border-radius: 3px; background: #22c55e; transform-origin: left; }
.kv-duel__p em.a { animation: kv-hp-a 4.8s steps(1) infinite; } .kv-duel__p em.b { animation: kv-hp-b 4.8s steps(1) infinite; }
@keyframes kv-hp-a { 0% { transform: scaleX(1); } 50% { transform: scaleX(.7); } 75% { transform: scaleX(.45); } }
@keyframes kv-hp-b { 0% { transform: scaleX(1); } 25% { transform: scaleX(.65); } 62% { transform: scaleX(.35); } 88% { transform: scaleX(.1); } }
/* 7 jefe */
.kv-boss { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kv-boss img { width: 86px; height: 86px; object-fit: contain; animation: kv-hit 3s infinite; }
@keyframes kv-hit { 0%, 30%, 100% { transform: none; filter: none; } 34% { transform: translateX(-5px); filter: brightness(1.8); } 38% { transform: translateX(5px); } 42% { transform: none; filter: none; } }
.kv-boss u { width: 120px; height: 8px; }
.kv-boss em { background: linear-gradient(90deg, #ef4444, #f97316); animation: kv-boss-hp 9s steps(1) infinite; }
@keyframes kv-boss-hp { 0% { transform: scaleX(1); } 33% { transform: scaleX(.72); } 66% { transform: scaleX(.44); } }
.kv-boss__dmg { position: absolute; top: 4px; right: -14px; font: 900 15px 'Manrope', sans-serif; color: #ef4444; opacity: 0; animation: kv-dmg 3s infinite; }
@keyframes kv-dmg { 0%, 33% { opacity: 0; transform: translateY(8px); } 38% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(-16px); } }
/* 8 tesoro */
.kv-hunt { display: flex; flex-direction: column; gap: 8px; }
.kv-hunt i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(13,59,87,.18); animation: kv-station 6s infinite; }
.kv-hunt i:nth-child(2) { animation-delay: 1s; margin-left: 14px; } .kv-hunt i:nth-child(3) { animation-delay: 2s; } .kv-hunt i:nth-child(4) { animation-delay: 3s; margin-left: 14px; }
@keyframes kv-station { 0%, 5% { background: #fff; border-color: rgba(13,59,87,.18); } 10%, 80% { background: var(--kc-ink); border-color: var(--kc-ink); box-shadow: 0 0 0 4px rgba(31,106,168,.15); } 100% { background: #fff; } }
/* 9 honores */
.kv-hon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.kv-hon span { padding: 5px 14px; border-radius: 99px; background: #fff; border: 1.5px solid #cfe7da; font: 800 12.5px 'Nunito Sans', sans-serif; color: var(--ink); animation: kv-pop 4.5s infinite; }
.kv-hon span:nth-child(2) { animation-delay: .5s; } .kv-hon span:nth-child(3) { animation-delay: 1s; }
@keyframes kv-pop { 0%, 6% { transform: scale(1); } 10% { transform: scale(1.12); border-color: #2e9c66; } 16%, 100% { transform: scale(1); } }
.kv-hon i { position: absolute; bottom: 0; font-style: normal; color: #e25a7a; font-size: 14px; opacity: 0; animation: kv-heart 4.5s infinite; }
.kv-hon i:nth-of-type(1) { left: -22px; } .kv-hon i:nth-of-type(2) { right: -20px; animation-delay: 1.5s; } .kv-hon i:nth-of-type(3) { left: 50%; animation-delay: 3s; }
@keyframes kv-heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateY(-90px) scale(1.2); } }
/* 10 mapa */
.kv-map { position: absolute; inset: 0; }
.kv-map > img { width: 100%; height: 100%; object-fit: cover; }
.kv-map .aq-pin { position: absolute; transform: translate(-50%, -50%) scale(.85); }
/* 11 votaciones */
.kv-vote { display: flex; flex-direction: column; gap: 7px; width: 140px; }
.kv-vote div { display: flex; align-items: center; gap: 7px; }
.kv-vote b { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: #fff; font: 800 10px 'Manrope', sans-serif; color: var(--kc-ink); }
.kv-vote u { flex: 1; height: 8px; border-radius: 4px; background: rgba(13,59,87,.1); overflow: hidden; }
.kv-vote em { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--kc-ink); transform-origin: left; animation: kv-grow 5s cubic-bezier(.16,1,.3,1) infinite; }
.kv-vote small { width: 28px; font: 800 10.5px 'Manrope', sans-serif; color: var(--ink-soft); }
@keyframes kv-grow { 0% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* 12 momento sorpresa */
.kv-ev { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kv-ev img { width: 96px; height: 70px; object-fit: contain; animation: kv-roll 4s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes kv-roll { 0%, 60%, 100% { transform: none; } 10% { transform: rotate(-14deg) scale(1.08); } 20% { transform: rotate(12deg) scale(1.08); } 30% { transform: rotate(-6deg); } }
.kv-ev span { padding: 6px 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 800 12px 'Manrope', sans-serif; animation: kv-card 4s infinite; }
@keyframes kv-card { 0%, 32% { opacity: 0; transform: translateY(8px) scale(.9); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* franja de IA */
.aq-kit__ai {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; margin-top: 18px; padding: 22px 26px;
  border-radius: 22px; background: linear-gradient(120deg, #fffaf0, var(--tk-t-gold)); border: 1px solid #f3e3c2;
  --kc: #fff; --kc-ink: var(--tk-t-gold-ink);
}
.aq-kit__ai-copy { display: flex; align-items: center; gap: 18px; }
.aq-kit__ai-copy img { width: 78px; height: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(13,59,87,.18)); }
.aq-kit__ai-copy p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.aq-kit__prompt { padding: 11px 14px; border-radius: 12px; background: #fff; border: 1.5px solid #ecd9ae; font: 600 13.5px 'Nunito Sans', sans-serif; color: var(--ink); min-height: 44px; }
.aq-kit__out { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; min-height: 30px; }
.aq-kit__out span { padding: 5px 11px; border-radius: 99px; background: #fff; font: 800 12px 'Manrope', sans-serif; color: var(--tk-t-gold-ink); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.aq-kit__out span::before { content: "✦ "; }
.aq-kit__out span.is-on { opacity: 1; transform: none; }

@media (max-width: 1100px) { .aq-kit__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .aq-kit__ai { grid-template-columns: 1fr; } }
/* Celular: carrusel horizontal con snap (dos columnas quedaban apretadas). */
@media (max-width: 720px) {
  .aq-kit__grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none;
  }
  .aq-kit__grid::-webkit-scrollbar { display: none; }
  .aq-kit__c { flex: 0 0 76%; scroll-snap-align: center; }
  .aq-kit__legend { gap: 6px 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .aq-kit__v *, .aq-kit__v *::before, .aq-kit__v *::after { animation: none !important; } }

/* ── 3b · Kit "all in": escena fija + tipografía cinética (solo .is-pinned) ──
   El JS escribe por fotograma: opacidad/transform de cada tarjeta, --vk (los
   dibujos aparecen cuando se necesitan) y la letra a letra de cada palabra. */
.aq-kitx.is-pinned { height: 520vh; position: relative; }
.aq-kitx.is-pinned .aq-kitx__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding-top: 108px; }
.aq-kitx.is-pinned .aq-kitx__stage { width: 100%; max-width: 1180px; transform-origin: 50% 0; will-change: transform, opacity; }
.aq-kitx.is-pinned .aq-kit__c { transition: box-shadow .35s !important; will-change: transform, opacity; }
.aq-kitx.is-pinned .aq-kit__v { height: 124px; }
.aq-kitx.is-pinned .aq-kit__v > * { scale: calc(.35 + .65 * var(--vk, 1)); opacity: var(--vk, 1); }
.aq-kitx.is-pinned .aq-kit__legend span { opacity: .35; transition: opacity .4s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.aq-kitx.is-pinned .aq-kit__legend span.is-on { opacity: 1; transform: scale(1.12); color: var(--ink); }
.aq-kitx__type { display: none; }
.aq-kitx.is-pinned .aq-kitx__type { display: block; position: absolute; inset: 108px 0 0; pointer-events: none; }
.aq-kitx__w { position: absolute; left: 0; right: 0; top: 42%; text-align: center; opacity: 0; will-change: transform, opacity, filter; }
.aq-kitx__w b { display: block; font: 700 clamp(84px, 11vw, 168px)/.95 'Outfit', 'Manrope', sans-serif; letter-spacing: -.03em; color: var(--ink); }
.aq-kitx__w--end b { font-size: clamp(56px, 7vw, 108px); }
.aq-kitx__w--long b { font-size: clamp(56px, 6.6vw, 104px); }   /* 'Classroom management.' / 'Gestión del aula.' */
.aq-kitx__w b .l { display: inline-block; will-change: transform, opacity; }
.aq-kitx__w:nth-child(1) b { color: var(--tk-t-warm-ink); }
.aq-kitx__w:nth-child(2) b { color: var(--tk-t-navy-ink); }
.aq-kitx__w:nth-child(3) b { color: var(--tk-t-green-ink); }
.aq-kitx__w--end b span.l.acc { color: var(--tk-acc); }
.aq-kitx__w small { display: block; margin-top: 18px; font: 700 clamp(15px, 1.4vw, 20px) 'Nunito Sans', sans-serif; letter-spacing: .02em; color: var(--ink-soft); }

/* Solo computador: en ≤1024 px se muestra la versión con pestañas (.aq-kit-m). */
.aq-kit-m { display: none; }
@media (max-width: 1024px) { .aq-kit { display: none; } .aq-kit-m { display: block; } }

/* Intro con Alchie sorprendido (solo en la escena fija) */
.aq-kitx__intro { display: none; }
.aq-kitx.is-pinned .aq-kitx__intro {
  display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; top: 150px; z-index: 3;
  transform: translateX(-50%); pointer-events: none; will-change: transform, opacity;
}
.aq-kitx__intro img { width: auto; height: min(58vh, 520px); filter: drop-shadow(0 26px 34px rgba(13,59,87,.16)); opacity: 0; transform: translateY(40px) scale(.9); transition: opacity .7s ease, transform 1s cubic-bezier(.34,1.56,.64,1); }
.aq-kit.is-in .aq-kitx__intro img { opacity: 1; transform: none; }
.aq-kitx__hint { margin-top: 14px; font: 700 14px 'Nunito Sans', sans-serif; color: var(--ink-soft); opacity: 0; transition: opacity .6s ease .6s; }
.aq-kit.is-in .aq-kitx__hint { opacity: 1; }
.aq-kitx__hint i { display: inline-block; font-style: normal; animation: kv-hint 1.6s ease-in-out infinite; }
@keyframes kv-hint { 50% { transform: translateY(5px); } }

/* ══ Páginas legales y de límites con el diseño del sitio (2026-09-28) ══
   Envoltorio nuevo para el contenido de las páginas legales antiguas (sus
   clases internas: .section, .sec-num, .callout, .plan-card, .right-card,
   .data-table, .contact-card), restilado con la paleta toolkit. */
.aq-legal__date { margin-top: 14px; font: 700 13px var(--f-sans); color: var(--ink-soft); }
.aq-legal__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; max-width: 1120px; margin: 0 auto; align-items: start; }
.aq-legal__toc { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; }
.aq-legal__toc-title { font: 800 11px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tk-acc-deep); }
.aq-legal__toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.aq-legal__toc nav a { padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font: 600 13.5px/1.35 var(--f-sans); color: var(--ink-soft); text-decoration: none; transition: color .2s, border-color .2s; }
.aq-legal__toc nav a:hover { color: var(--ink); }
.aq-legal__toc nav a.is-on { color: var(--ink); border-left-color: var(--tk-acc); font-weight: 700; }
.aq-legal__toc-links { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.aq-legal__toc-links a { font: 700 13px var(--f-sans); color: var(--navy-mid); text-decoration: none; }
.aq-legal__toc-links a:hover { color: var(--tk-acc-deep); }
.aq-legal__body { min-width: 0; color: var(--ink); font-size: 16px; line-height: 1.75; }
.aq-legal__body--solo { max-width: 820px; margin: 0 auto; }
.aq-legal__body .section { scroll-margin-top: 110px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.aq-legal__body .section:first-child { padding-top: 0; }
.aq-legal__body .section:last-child { border-bottom: 0; }
.aq-legal__body h2 { display: flex; align-items: center; gap: 12px; font: 800 24px/1.25 var(--f-display); letter-spacing: -.02em; margin: 0 0 14px; }
.aq-legal__body .sec-num { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font: 800 14px var(--f-display); color: var(--tk-acc-deep); background: var(--tk-acc-soft); }
.aq-legal__body h3 { font: 800 17px/1.35 var(--f-display); margin: 22px 0 8px; }
.aq-legal__body p { margin: 0 0 14px; }
.aq-legal__body ul { margin: 0 0 16px; padding-left: 20px; }
.aq-legal__body li { margin: 4px 0; }
.aq-legal__body li::marker { color: var(--tk-acc); }
.aq-legal__body a:not(.aq-btn) { color: var(--navy-mid); font-weight: 700; }
.aq-legal__body strong { color: var(--ink); }
.aq-legal__fine { font-size: 14px; color: var(--ink-soft); }
.aq-legal__body .callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; margin: 18px 0; font-size: 15px; line-height: 1.6; }
.aq-legal__body .callout__icon { font-size: 20px; flex-shrink: 0; line-height: 1.3; }
.aq-legal__body .callout--navy  { background: var(--tk-t-navy);  }
.aq-legal__body .callout--teal  { background: var(--tk-t-teal);  }
.aq-legal__body .callout--coral { background: var(--tk-t-warm);  }
.aq-legal__body .plans-grid, .aq-legal__body .rights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.aq-legal__body .rights-grid { grid-template-columns: repeat(2, 1fr); }
.aq-legal__body .plan-card, .aq-legal__body .right-card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 14px; line-height: 1.55; }
.aq-legal__body .plan-card--paid { border-color: rgba(255,122,51,.35); }
.aq-legal__body .plan-card__badge { display: inline-block; font: 800 10px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tk-acc-deep); background: var(--tk-acc-soft); padding: 3px 8px; border-radius: 99px; margin-bottom: 6px; }
.aq-legal__body .plan-card__name, .aq-legal__body .right-card__title { font: 800 16px var(--f-display); margin-bottom: 4px; }
.aq-legal__body .right-card__desc { color: var(--ink-soft); }
.aq-legal__body .data-table, .aq-legal__table table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.aq-legal__table { overflow-x: auto; }
.aq-legal__body .data-table th { text-align: left; font: 800 11px var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: #f7f9fc; padding: 11px 14px; }
.aq-legal__body .data-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.aq-legal__body .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.aq-legal__body .contact-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 18px; background: var(--tk-t-navy); margin-top: 8px; }
.aq-legal__body .contact-card h3 { margin: 0 0 4px; }
.aq-legal__body .contact-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.aq-legal__body .contact-card > a { padding: 10px 18px; border-radius: 12px; background: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .aq-legal__grid { grid-template-columns: 1fr; gap: 20px; }
  .aq-legal__toc { position: static; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
  .aq-legal__body .plans-grid, .aq-legal__body .rights-grid { grid-template-columns: 1fr; }
  .aq-legal__body h2 { font-size: 21px; }
}

/* Alchie acostado sobre la tarjeta Pro+ mirando hacia el plan (2026-09-28).
   Centrado sobre el borde superior, con las patas asomando hacia adentro. La
   prueba de 14 días pasó a una etiqueta bajo el precio (.r-trial) para dejarle
   el borde libre. Ancho relativo a la tarjeta: se adapta a tablets. */
.r-card--featured .r-cat {
  position: absolute; z-index: 3; left: 50%; margin-left: calc(min(236px, 72%) / -2);
  bottom: calc(100% - 20px); width: min(236px, 72%); height: auto; rotate: 4deg;
  pointer-events: none; filter: drop-shadow(0 10px 14px rgba(13,59,87,.18));
  transform-origin: 50% 100%; animation: r-cat-breathe 4.5s ease-in-out infinite;
}
@keyframes r-cat-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
.r-trial--empty { visibility: hidden; }

/* Tarjetas de planes alineadas por filas (2026-09-28): cada tarjeta usa las
   filas de la grilla de la fila (subgrid), así nombre, descripción, precio,
   nota, prueba, cursos, botón, "incluye", lista y "Ver más" quedan a la misma
   altura en los tres planes. 11 filas = 11 hijos en flujo de cada tarjeta
   (el gato es absoluto; las tarjetas sin prueba o sin "Ver más" llevan un
   hueco). Solo con 3 columnas: en móvil los planes van en carrusel. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .r-row { grid-template-rows: repeat(11, auto); row-gap: 0; }
    .r-card { display: grid; grid-template-rows: subgrid; grid-row: span 11; row-gap: 0; align-content: start; }
    .r-card > .r-trial, .r-card > .r-more { justify-self: start; }
    .r-card > .r-list { align-self: start; }
  }
}
.r-trial {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px;
  padding: 5px 11px; border-radius: 999px; background: var(--tk-acc-soft); color: var(--tk-acc-deep);
  font: 800 11px var(--f-display); letter-spacing: .06em; text-transform: uppercase;
}
.r-trial .ic { font-size: 13px; }
/* Móvil: los planes van en carrusel con overflow; el gato quedaría recortado. */
@media (max-width: 640px) { .r-card--featured .r-cat { display: none; } }
@media (prefers-reduced-motion: reduce) { .r-card--featured .r-cat { animation: none; } }

/* ══ Planes incrementales + modal de funciones (2026-09-29) ══════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.r-feat {
  font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted rgba(13,59,87,.35); text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: color .15s, text-decoration-color .15s;
}
.r-feat:hover, .r-feat:focus-visible { color: var(--tk-acc-deep); text-decoration-color: var(--tk-acc); outline: none; }
.r-list li.is-off { color: var(--ink-mute); }
.r-list li.r-sep { display: block; margin-top: 8px; padding-top: 14px; border-top: 1px dashed #e3e8ee; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.r-list li.is-support .r-ico { background: var(--tk-t-navy); color: var(--tk-t-navy-ink); }
.r-list li.is-off .r-ico { background: #f1f3f7; color: #b3bfcb; }
.r-list li.is-off .r-feat { text-decoration-color: rgba(147,163,179,.45); }
.r-list li.is-off .r-ai-tag { opacity: .55; }
.r-off { font: 800 14px var(--f-display); line-height: 1; }
html.pf-lock { overflow: hidden; }
.pf-modal {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px;
  background: rgba(13,59,87,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
}
.pf-modal[hidden] { display: none !important; }
.pf-modal.is-open { opacity: 1; }
.pf-dialog {
  position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: #fff; border-radius: 24px; padding: 26px 26px 22px; box-shadow: 0 30px 80px rgba(13,59,87,.3);
  transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pf-modal.is-open .pf-dialog { transform: none; }
.pf-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f2f5f9; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.pf-close:hover { background: #e6ecf2; }
.pf-tag { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 800 10.5px var(--f-display); letter-spacing: .07em; text-transform: uppercase; background: var(--kc); color: var(--kc-ink); }
.pf-modal [data-c="warm"] { --kc: var(--tk-t-warm); --kc-ink: var(--tk-t-warm-ink); }
.pf-modal [data-c="navy"] { --kc: var(--tk-t-navy); --kc-ink: var(--tk-t-navy-ink); }
.pf-modal [data-c="gold"] { --kc: var(--tk-t-gold); --kc-ink: var(--tk-t-gold-ink); }
.pf-title { margin: 10px 0 14px; font: 800 22px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); padding-right: 36px; }
.pf-demo {
  position: relative; height: 200px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(151deg, #fff, var(--kc)); display: flex; align-items: center; justify-content: center; gap: 14px;
}
.pf-proj { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 11px; border-radius: 99px; background: var(--tk-t-teal); color: var(--tk-t-teal-ink); font: 800 11px var(--f-display); letter-spacing: .03em; }
.pf-proj::before { content: ""; width: 14px; height: 10px; border: 2px solid currentColor; border-radius: 2px; box-sizing: border-box; }
.pf-proj[hidden] { display: none; }
.pf-chat { position: relative; display: flex; flex-direction: column; gap: 8px; width: 280px; }
.pf-chat__q, .pf-chat__a { max-width: 88%; padding: 8px 12px; border-radius: 14px; font: 700 12.5px var(--f-sans); box-shadow: var(--shadow-sm); }
.pf-chat__q { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; animation: pf-chat-q 5s infinite; }
.pf-chat__a { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; animation: pf-chat-a 5s infinite; }
.pf-chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); animation: pf-chat-t 5s infinite; }
.pf-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); animation: kv-hint 1s infinite; }
.pf-chat__typing i:nth-child(2) { animation-delay: .15s; } .pf-chat__typing i:nth-child(3) { animation-delay: .3s; }
.pf-chat__badge { position: absolute; top: -26px; left: 0; padding: 3px 9px; border-radius: 99px; background: var(--tk-t-gold); color: var(--tk-t-gold-ink); font: 800 10px var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
@keyframes pf-chat-q { 0%, 5% { opacity: 0; transform: translateY(6px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pf-chat-t { 0%, 18% { opacity: 0; height: 0; padding: 0 12px; } 22%, 40% { opacity: 1; height: auto; padding: 10px 12px; } 44%, 100% { opacity: 0; height: 0; padding: 0 12px; } }
@keyframes pf-chat-a { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pf-boost { display: inline-flex; align-items: center; margin: 14px 8px 0 0; padding: 5px 11px; border-radius: 99px; background: var(--tk-acc-soft); color: var(--tk-acc-deep); font: 800 11px var(--f-display); letter-spacing: .03em; }
.pf-boost[hidden] { display: none; }

.pf-desc { margin: 12px 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.pf-cta { font: 700 14px var(--f-sans); color: var(--tk-acc-deep); text-decoration: none; }
.pf-cta:hover { text-decoration: underline; }
.pf-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pf-boardbox { position: relative; width: 190px; height: 150px; }
.pf-mapbox { position: relative; width: 220px; height: 150px; border-radius: 12px; overflow: hidden; }
.kv-timer circle.fg { stroke: var(--tk-acc); stroke-linecap: round; stroke-dasharray: 213.6; }
@keyframes pf-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 213.6; } }
/* puntos */
.pf-pts { position: relative; display: flex; align-items: center; gap: 22px; }
.pf-pts__card { position: relative; width: 132px; padding: 22px 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pf-pts__lvl { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px 0 4px; border-radius: 99px; background: var(--navy-soft); font: 800 10px var(--f-display); color: var(--ink); }
.pf-pts__lvl img { width: 18px; height: 18px; }
.pf-pts__lvl b { position: relative; display: inline-block; width: 36px; height: 12px; overflow: hidden; }
.pf-pts__lvl b i { position: absolute; left: 0; top: 0; font-style: normal; animation: pf-lvl 4s infinite; }
.pf-pts__lvl b i + i { animation-name: pf-lvl2; }
@keyframes pf-lvl  { 0%, 55% { transform: none; opacity: 1; } 62%, 95% { transform: translateY(-100%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pf-lvl2 { 0%, 55% { transform: translateY(100%); opacity: 0; } 62%, 95% { transform: none; opacity: 1; color: var(--tk-acc-deep); } 100% { transform: translateY(100%); opacity: 0; } }
.pf-pts__av { width: 70px; height: 80px; background: no-repeat center bottom / contain; }
.pf-pts__name { font: 800 13px var(--f-display); color: var(--ink); }
.pf-pts__xp { display: block; width: 100%; height: 6px; border-radius: 99px; background: #eef0f5; overflow: hidden; }
.pf-pts__xp i { display: block; height: 100%; width: 60%; border-radius: 99px; background: linear-gradient(90deg, #ff7a33, #f05e1c); transform-origin: left; animation: pf-xp 4s infinite; }
@keyframes pf-xp { 0%, 30% { transform: scaleX(1); } 52% { transform: scaleX(1.66); } 60% { transform: scaleX(.2); } 95% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
.pf-pts__plus { position: absolute; left: 118px; top: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-lg); font: 800 13px var(--f-display); color: var(--tk-acc-deep); animation: pf-plus 4s infinite; }
.pf-pts__plus img { width: 18px; height: 18px; }
@keyframes pf-plus { 0%, 8% { opacity: 0; transform: translate(40px, 20px) scale(.6); } 20% { opacity: 1; transform: none; } 42% { opacity: 1; transform: translate(-36px, 10px) scale(.9); } 50%, 100% { opacity: 0; transform: translate(-60px, 20px) scale(.5); } }
.pf-pts__why { padding: 5px 12px; border-radius: 99px; background: var(--tk-acc-soft); color: var(--tk-acc-deep); font: 700 12px var(--f-sans); box-shadow: inset 0 0 0 1.5px var(--tk-acc); }
/* clanes */
.pf-clan { width: 132px; background: #fff; box-shadow: var(--shadow-sm); }
.pf-clan .aq-clan__chip { padding: 4px 6px; }
.pf-pop { animation: pf-pop 4.5s infinite both; }
.aq-clan__list .pf-pop:nth-child(2) { animation-delay: .25s; } .aq-clan__list .pf-pop:nth-child(3) { animation-delay: .5s; }
@keyframes pf-pop { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pf-classes { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-classes img { width: 30px; height: 30px; animation: kv-float 3s ease-in-out infinite; }
.pf-classes img:nth-child(2) { animation-delay: .4s; } .pf-classes img:nth-child(3) { animation-delay: .8s; }
.pf-heart { font: 800 11px var(--f-sans); color: #d15668; background: #fff; padding: 3px 8px; border-radius: 99px; box-shadow: var(--shadow-sm); animation: kv-pop 3s infinite; }
/* ranking */
.pf-rank { display: flex; flex-direction: column; gap: 8px; width: 150px; }
.pf-rank div { display: flex; align-items: center; gap: 6px; font: 800 11.5px var(--f-display); color: var(--ink); }
.pf-rank b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--tk-acc); color: #fff; font-size: 10px; }
.pf-rank span { width: 52px; }
.pf-rank u { flex: 1; height: 7px; border-radius: 4px; background: rgba(13,59,87,.1); overflow: hidden; }
.pf-rank em { display: block; height: 100%; width: var(--w); background: var(--tk-acc); transform-origin: left; animation: kv-grow 5s cubic-bezier(.16,1,.3,1) infinite; }
/* laboratorio */
.pf-lab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-lab span { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); font: 800 12px var(--f-display); color: var(--ink); text-align: center; animation: pf-pick 4.4s infinite; }
@keyframes pf-pick { 0%, 20% { box-shadow: var(--shadow-sm); transform: none; } 6%, 16% { box-shadow: 0 0 0 2.5px var(--tk-t-navy-ink), var(--shadow-md); transform: scale(1.05); } }
/* clanes automáticos */
.pf-sortbox { position: relative; width: 390px; height: 110px; }
.pf-sort { position: absolute; left: 0; top: 0; width: 92px; background: #fff; animation: pf-sort 5s cubic-bezier(.65,0,.35,1) infinite; }
.pf-sort:nth-child(2) { animation-delay: .08s; } .pf-sort:nth-child(3) { animation-delay: .16s; } .pf-sort:nth-child(4) { animation-delay: .24s; } .pf-sort:nth-child(5) { animation-delay: .32s; } .pf-sort:nth-child(6) { animation-delay: .4s; }
@keyframes pf-sort { 0%, 18% { transform: translate(var(--x0), var(--y0)); } 42%, 86% { transform: translate(var(--x1), var(--y1)); } 100% { transform: translate(var(--x0), var(--y0)); } }
.pf-sort-lbl { position: absolute; top: -20px; font: 800 10px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--kc-ink); }
.pf-sort-lbl.p { left: 0; } .pf-sort-lbl.a { left: 170px; } .pf-sort-lbl.b { left: 280px; }
.pf-sortbox { margin-top: 14px; }
.pf-demo .pf-shared { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; font: 700 11.5px var(--f-sans); white-space: nowrap; animation: kv-card 5s infinite; }
/* IA */
.pf-ai { display: flex; flex-direction: column; align-items: center; gap: 12px; width: calc(100% - 36px); }
.pf-ai__in { width: 100%; min-height: 40px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #ecd9ae; font: 600 12.5px var(--f-sans); color: var(--ink); }
.pf-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: aq-caret 1s steps(1) infinite; }
.pf-ai__out { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.pf-ai__out.is-on { opacity: 1; transform: none; }
.pf-ai__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pf-ai__chips span { padding: 5px 11px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-sm); font: 800 12px var(--f-display); color: var(--tk-t-gold-ink); }
.pf-ai__saga { display: flex; align-items: center; gap: 10px; }
.pf-ai__saga img { width: 110px; height: 70px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-sm); }
.pf-ai__opts { display: flex; flex-direction: column; gap: 6px; }
.pf-ai__opts span { padding: 5px 10px; border-radius: 9px; background: #fff; box-shadow: var(--shadow-sm); font: 700 11.5px var(--f-sans); color: var(--ink); }
.pf-ai__card { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.pf-ai__card b { font: 800 13px var(--f-display); color: var(--ink); }
.pf-ai__card small { font: 600 11px var(--f-sans); color: var(--ink-soft); }
.pf-ai__card span { font: 700 11.5px var(--f-sans); color: var(--ink); }
@media (max-width: 520px) {
  .pf-dialog { padding: 22px 18px 18px; }
  .pf-demo { height: 180px; }
  .pf-demo > * { zoom: .8; }
}
@media (prefers-reduced-motion: reduce) { .pf-demo *, .pf-demo *::before { animation: none !important; transition: none !important; } .pf-ai__out { opacity: 1; transform: none; } }

/* ── Tarjeta Pro+ invertida (2026-09-29): degradado naranjo y texto blanco ──
   Para que se distinga de Free y Pro. El botón pasa a blanco con texto naranjo. */
.r-card.r-card--featured {
  background: linear-gradient(165deg, #f26b22 0%, #de5512 40%, #c2410c 100%);
  border-color: transparent; box-shadow: 0 24px 60px rgba(240,94,28,.32);
}
.r-card--featured .r-eb { color: rgba(255,255,255,.85); }
.r-card--featured .r-name, .r-card--featured .r-amount { color: #fff; }
.r-card--featured .r-tagline, .r-card--featured .r-period, .r-card--featured .r-note,
.r-card--featured .r-inherit { color: rgba(255,255,255,.86); }
.r-card--featured .r-trial { background: #fff; color: var(--tk-acc-deep); }
.r-card--featured .r-meta { border-color: rgba(255,255,255,.28); }
.r-card--featured .r-meta div { color: #fff; }
.r-card--featured .r-meta .ic { color: #fff; }
.r-card--featured .pr-btn { background: #fff; color: var(--tk-acc-deep); box-shadow: 0 10px 24px rgba(120,40,0,.22); }
.r-card--featured .pr-btn:hover { background: #fff6ef; color: var(--tk-acc-deep); }
.r-card--featured .r-list li { color: #fff; }
.r-card--featured .r-feat { text-decoration-color: rgba(255,255,255,.55); }
.r-card--featured .r-feat:hover, .r-card--featured .r-feat:focus-visible { color: #fff; text-decoration-color: #fff; }
.r-card--featured .r-ico { background: rgba(255,255,255,.22); color: #fff; }
.r-card--featured .r-list li.is-ai .r-ico { background: #fff; color: var(--tk-acc-deep); }
.r-card--featured .r-list li.is-support .r-ico { background: #dcecfb; color: #1f6aa8; }
.r-card--featured .r-ai-tag { background: #fff; color: var(--tk-acc-deep); }
.r-card--featured .r-cat { filter: drop-shadow(0 10px 14px rgba(120,40,0,.25)); }

@media (prefers-reduced-motion: reduce) {
  .hx-glint, .aq-hero--alchie .aq-hero__ctas .aq-btn--coral::after, .aq-hero--alchie .aq-hero__eyebrow-dot::after { display: none; }
}

/* ── Feedback 2026-09-29 · Bloque 2: el hilo de Alquie en tres pasos ── */
.aq-thread { list-style: none; counter-reset: aqt; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 26px auto 22px; padding: 0; text-align: left; }
.aq-thread li { counter-increment: aqt; position: relative; background: #fff; border: 1px solid #edf0f4; border-radius: 18px; padding: 18px 18px 16px 58px; box-shadow: 0 8px 22px rgba(13,59,87,.06); }
.aq-thread li::before { content: counter(aqt); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff1e8; color: #f05e1c; font: 800 14px 'Manrope', sans-serif; }
.aq-thread b { display: block; font: 800 15.5px/1.3 'Manrope', sans-serif; color: #0d3b57; letter-spacing: -.01em; }
.aq-thread span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #5f7284; }
@media (max-width: 820px) { .aq-thread { grid-template-columns: 1fr; max-width: 460px; } }

/* ── Feedback 2026-09-29 · Bloque 3: evaluación y avance (misma tarjeta que "El problema") ── */
.aq-eval__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 34px auto 0; }
.aq-eval__col ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aq-eval__col li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: #5f7284; }
.aq-eval__col li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral, #ff7a33); opacity: .8; }
@media (max-width: 900px) { .aq-eval__grid { grid-template-columns: 1fr; max-width: 520px; } }

/* ── 2026-09-29 · Fondos alternados: paneles blancos de borde a borde, con esquinas redondeadas ──
   "El problema" es un envoltorio propio (ya va a todo el ancho); las demás secciones
   pintan el panel con ::before, estirado al ancho de la ventana. */
.aq-band { isolation: isolate; }
.aq-band::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2);
  background: #fff; border-radius: var(--tk-r-xl); box-shadow: var(--shadow-sm);
}

/* ══ BOTÓN «INICIAR SESIÓN» CÓSMICO (2026-10-05) ═══════════════════════
   Los alumnos no encontraban dónde entrar: el login era un texto chico en la
   barra. Ahora es un botón con el cielo del hero (azul → violeta, estrellas y
   el dorado de las constelaciones), un halo que respira y un destello ✦.
   El registro sigue naranjo. `.aq-btn.aq-btn--cosmic` (dos clases) para ganarle
   a `.aq-navdd__btn` / `:hover` de site.css cuando es el desplegable de la barra.
   El halo va en ::before y anima solo opacity (barato en Chromebooks). */
.aq-btn.aq-btn--cosmic {
  position: relative; isolation: isolate;
  color: #fff; border-color: rgba(243,200,119,.55);
  background:
    radial-gradient(circle at 14% 32%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 80%, rgba(255,255,255,.7) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 64% 20%, rgba(255,243,209,.95) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 86% 72%, rgba(255,255,255,.85) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 94% 26%, rgba(255,255,255,.6) 0 .8px, transparent 1.4px),
    radial-gradient(120% 160% at 25% 120%, rgba(63,101,161,.95), rgba(63,101,161,0) 60%),
    linear-gradient(135deg, #203d7a 0%, #2d2f75 62%, #3f297a 100%);
  box-shadow: 0 8px 20px rgba(45,47,117,.32);
}
.aq-btn.aq-btn--cosmic::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px 2px rgba(130,160,255,.6), 0 0 3px 1px rgba(243,200,119,.7);
  opacity: .35; animation: aq-cosmic-glow 3.2s ease-in-out infinite;
}
.aq-btn.aq-btn--cosmic:hover, .aq-btn.aq-btn--cosmic:focus-visible, .aq-btn.aq-btn--cosmic.is-active {
  color: #fff; border-color: rgba(243,200,119,.85); filter: brightness(1.1);
}
.aq-cosmic__spark {
  display: inline-block; margin-right: 1px; color: #f3c877; font-size: 1.05em; line-height: 1;
  text-shadow: 0 0 8px rgba(243,200,119,.9);
  animation: aq-twinkle 2.4s ease-in-out infinite;
}
.aq-btn--cosmic .aq-navdd__caret { opacity: .75; }
@keyframes aq-cosmic-glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes aq-twinkle { 0%, 100% { opacity: .7; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
/* Barra en tablet y celular: el desplegable se oculta y queda la entrada directa. */
.aq-nav__login-m { display: none; }
@media (max-width: 900px) {
  .aq-nav__cta .aq-nav__login-m { display: inline-flex; }
}
/* Celular angosto (360 px): logo + Entrar + Regístrate + menú tienen que caber. */
@media (max-width: 420px) {
  .aq-nav__cta { gap: 8px; }
  .aq-nav__cta .aq-btn--md { padding: 9px 10px; font-size: 12px; }
  .aq-nav__login-m .aq-cosmic__spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-btn.aq-btn--cosmic::before { animation: none; opacity: .6; }
  .aq-cosmic__spark { animation: none; opacity: 1; }
}

/* ══ VIDEO EN VENTANA ([data-aq-video], lo abre site-enhance.js) ═══════ */
.aq-video {
  position: fixed; inset: 0; z-index: 2147483001; /* sobre el aviso de cookies */
  display: none; align-items: center; justify-content: center; padding: 56px 16px 16px;
  background: rgba(8,18,40,.8);
}
.aq-video.is-open { display: flex; }
.aq-video__panel { position: relative; width: min(1040px, 100%, calc((100vh - 96px) * 16 / 9)); width: min(1040px, 100%, calc((100dvh - 96px) * 16 / 9)); }
.aq-video__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(243,200,119,.35);
}
.aq-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aq-video__close {
  position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: #fff; color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
}
.aq-video__close:hover { color: var(--tk-acc-deep); }