/* ═══════════════════════════════════════════════════════════════════════
   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: 1fr 280px; gap: 56px; align-items: center; }
.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: 250px; height: auto; 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. */
body {
  background-image: var(--tk-wash);
  background-repeat: no-repeat;
  /* Anclado al viewport, no al documento: con altura fija (680px) el lavado
     se cortaba en seco a media página en formularios largos como el registro.
     Con `fixed` el área de referencia es la pantalla y no hay costura. */
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: top center;
}
.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 */
body.auth-page, body:has(.auth-card), body:has(.auth-shell) {
  background-image: var(--tk-wash);
  background-repeat: no-repeat;
  /* Anclado al viewport, no al documento: con altura fija (680px) el lavado
     se cortaba en seco a media página en formularios largos como el registro.
     Con `fixed` el área de referencia es la pantalla y no hay costura. */
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: top center;
}

/* .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%;
}