/* ═══ site-base.css ═══ */
/* Alquie · Landing v2 — General Sans + Fraunces, navy hero + claro brillante */

/* ─── Tipografías de marca para la landing ───────────────────────────
   General Sans (Fontshare) — sans neutra moderna
   Fraunces italic (Google Fonts) — serif con personalidad
─────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --navy:        #003558;
  --navy-mid:    #004a79;
  --navy-soft:   #daeaf7;
  --teal:        #007a6c;
  --teal-soft:   #d6efec;
  --mint:        #4aa975;
  --coral:       #ffa8a6;
  --coral-soft:  #ffefee;
  --peach:       #ffc691;
  --peach-soft:  #fff3e6;
  --gold:        #d9a23a;

  /* Fondo y texto */
  --bg:          #fbfaf6;
  --bg-warm:     #f5f1e8;
  --ink:         #0d2033;
  --ink-soft:    #5a7a8c;
  --ink-mute:    #94a3b8;
  --line:        #e3ddcd;
  --line-soft:   #efeadb;

  /* Familia */
  --f-sans:    'General Sans', system-ui, sans-serif;
  --f-serif:   'Fraunces', Georgia, serif;

  /* Layout */
  --maxw: 1240px;
  --pad: 32px;

  --shadow-sm: 0 2px 8px rgba(0, 53, 88, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 53, 88, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 53, 88, 0.14);
  --shadow-xl: 0 32px 80px rgba(0, 53, 88, 0.20);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.aq-root { overflow-x: clip; position: relative; }

/* ─── Tipografía base ──────────────────────────────────────────────── */
.aq-h1 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.aq-h1 i, .aq-h2 i, .aq-h3 i {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 1.04em;
}
.aq-h2 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
.aq-h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.aq-h4 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.aq-lead {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.aq-body {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.aq-body-sm {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.aq-eyebrow {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.aq-eyebrow::before {
  content: '';
  width: 24px; height: 1.5px;
  background: currentColor;
  opacity: 0.5;
}
.aq-eyebrow--center::before { display: none; }
.aq-eyebrow--center::after { display: none; }

.aq-mw-md { max-width: 620px; }
.aq-mw-lg { max-width: 760px; }

/* italic accent run */
.aq-ital {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 1.04em;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.aq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
  white-space: nowrap;
}
.aq-btn--lg { padding: 15px 26px; font-size: 15.5px; border-radius: 14px; }
.aq-btn--md { padding: 11px 18px; font-size: 14px; border-radius: 11px; }
.aq-btn:hover { transform: translateY(-1px); }
.aq-btn:active { transform: translateY(0); }

.aq-btn--coral {
  background: var(--coral);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(255,168,166,0.4), inset 0 1px 0 rgba(255,255,255,0.55);
}
.aq-btn--coral:hover { background: #ffb8b6; box-shadow: 0 16px 40px rgba(255,168,166,0.5), inset 0 1px 0 rgba(255,255,255,0.55); }

.aq-btn--ghost-light {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-weight: 500;
}
.aq-btn--ghost-light:hover { background: rgba(255,255,255,0.12); }

.aq-btn--navy {
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,53,88,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
.aq-btn--navy:hover { background: var(--navy-mid); }

.aq-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.aq-btn--ghost:hover { background: rgba(0,53,88,0.04); border-color: var(--ink-soft); }

.aq-btn--white {
  background: #fff;
  color: var(--navy);
  font-weight: 500;
  border-color: var(--line);
}

.aq-btn-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

/* ─── Animation primitives ─────────────────────────────────────────── */
.aq-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(.2,.7,.3,1), transform 800ms cubic-bezier(.2,.7,.3,1);
}
.aq-reveal.is-in { opacity: 1; transform: translateY(0); }
.aq-reveal[data-delay="1"] { transition-delay: 80ms; }
.aq-reveal[data-delay="2"] { transition-delay: 160ms; }
.aq-reveal[data-delay="3"] { transition-delay: 240ms; }
.aq-reveal[data-delay="4"] { transition-delay: 320ms; }
.aq-reveal[data-delay="5"] { transition-delay: 400ms; }
.aq-reveal[data-delay="6"] { transition-delay: 480ms; }

/* ─── Alchemy text ─────────────────────────────────────────────────── */
.aq-alchemy { display: inline; }
.aq-alch-letter {
  display: inline;
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(8px) brightness(2.2);
  color: var(--peach);
  animation: aqAlch 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes aqAlch {
  0%   { opacity: 0; filter: blur(10px) brightness(2.4); color: var(--peach); }
  60%  { opacity: 1; filter: blur(0) brightness(1.2); color: var(--peach); }
  100% { opacity: 1; filter: blur(0) brightness(1); color: inherit; }
}

.aq-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.4s cubic-bezier(.5,.1,.3,1);
}
.aq-draw.is-in { stroke-dashoffset: 0; }

@keyframes aqFloat {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(0, -10px); }
}
@keyframes aqFloat2 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(8px,-12px) rotate(2deg); }
}
@keyframes aqOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-25px) scale(1.05); }
  66% { transform: translate(-15px,15px) scale(0.96); }
}
@keyframes aqSpin { to { transform: rotate(360deg); } }
@keyframes aqPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ─── NAV ──────────────────────────────────────────────────────────── */
.aq-nav-wrap {
  position: sticky; top: 14px; z-index: 60;
  padding: 0 16px;
}
.aq-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 14px 22px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,53,88,0.08);
  border-radius: 18px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.aq-nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-weight: 600; font-size: 19px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.aq-nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.aq-footer__logo-img {
  height: 56px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.aq-nav__links {
  display: flex; gap: 28px;
  list-style: none; padding: 0; margin: 0;
}
.aq-nav__links a {
  font-size: 14.5px; font-weight: 500;
  color: var(--ink);
}
.aq-nav__links a:hover { color: var(--navy); }
.aq-nav__cta { display: flex; gap: 14px; align-items: center; }

/* ─── HERO (navy) ──────────────────────────────────────────────────── */
.aq-hero {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.18), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.18), transparent 55%),
    radial-gradient(700px 400px at 65% 30%, rgba(74,169,117,0.10), transparent 60%),
    linear-gradient(170deg, #003558 0%, #002844 60%, #001f37 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 36px 36px;
  margin-top: -120px;
  padding-top: 120px;
}
.aq-hero__texture {
  position: absolute; inset: 0;
  background: url('assets/headers-bg.webp') center / cover no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: luminosity;
}
.aq-hero__aurora {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(48px);
}
.aq-hero__aurora::before,
.aq-hero__aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.aq-hero__aurora::before {
  width: 70%; height: 70%;
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(255,198,145,0.55), transparent 60%);
  animation: aqAurora1 18s ease-in-out infinite;
}
.aq-hero__aurora::after {
  width: 60%; height: 60%;
  bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(255,168,166,0.5), transparent 60%);
  animation: aqAurora2 22s ease-in-out infinite;
}
@keyframes aqAurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15%, 12%) scale(1.15); }
  66% { transform: translate(-8%, 20%) scale(0.95); }
}
@keyframes aqAurora2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-12%, -8%) scale(1.1); }
  66% { transform: translate(18%, -14%) scale(0.92); }
}
.aq-hero__noise {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.06), transparent 50%);
  background-size: 4px 4px;
  mix-blend-mode: screen;
}
.aq-hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--pad) 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  z-index: 2;
}
.aq-hero__copy { padding-right: 24px; max-width: 560px; }
.aq-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
}
.aq-hero__eyebrow-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--peach);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  font-size: 9px;
  font-style: normal;
}
.aq-hero__h1 {
  color: #fff;
  margin-bottom: 56px;
  font-size: clamp(30px, 3.2vw, 46px);
}
.aq-hero__h1 .accent i {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  letter-spacing: -0.005em;
}
.aq-hero__h1 .accent {
  color: var(--peach);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
}
.aq-hero__h1 .accent svg {
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  width: 100%;
  height: 14px;
  overflow: visible;
}
.aq-hero__lead {
  color: rgba(255,255,255,0.72);
  max-width: 540px;
  margin-top: 32px;
  margin-bottom: 36px;
}
.aq-hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.aq-hero__strip {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
  margin-top: -32px;
}
.aq-hero__strip-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.aq-hero__strip-cell:last-child { border-right: none; }
.aq-hero__strip-cell:first-child { padding-left: 0; }
.aq-hero__strip-cell strong {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.aq-hero__strip-cell strong .stat-mod {
  font-family: var(--f-sans);
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: 0.38em;
  letter-spacing: 0;
}
.aq-hero__strip-cell strong .frac {
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.72em;
  color: var(--peach);
  vertical-align: 0.12em;
}
.aq-hero__strip-cell span {
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}

/* Hero visual stage */
.aq-hero__stage {
  position: relative;
  aspect-ratio: 1 / 0.95;
  min-height: 460px;
}
.aq-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: aqOrb 10s ease-in-out infinite;
}
.aq-hero__orb--1 { width: 260px; height: 260px; background: var(--peach); top: 6%; right: 12%; opacity: 0.55; }
.aq-hero__orb--2 { width: 220px; height: 220px; background: var(--coral); bottom: 8%; left: 14%; opacity: 0.45; animation-delay: -4s; }
.aq-hero__orb--3 { width: 180px; height: 180px; background: var(--mint); top: 40%; right: 50%; opacity: 0.32; animation-delay: -7s; }

/* Photo placeholder — main hero image */
.aq-hero__photo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0.02) 12px 24px),
    linear-gradient(160deg, rgba(255,198,145,0.5), rgba(255,168,166,0.6));
  border: 1.5px dashed rgba(255,255,255,0.35);
  box-shadow: var(--shadow-xl);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  z-index: 2;
}
.aq-hero__photo small {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.7);
  max-width: 230px;
}
.aq-hero__photo--filled {
  background: transparent;
  border: none;
  padding: 0;
  overflow: hidden;
}
.aq-hero__photo--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

/* Floating UI cards — glass */
.aq-glass-card {
  position: absolute;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  color: #fff;
  z-index: 4;
}
.aq-glass-card--quiz {
  top: 8%; left: -3%;
  width: clamp(160px, 20vw, 240px);
  animation: aqFloat 6s ease-in-out infinite;
}
.aq-glass-card--xp {
  bottom: 10%; right: -2%;
  width: clamp(140px, 17vw, 210px);
  animation: aqFloat2 7s ease-in-out infinite;
  animation-delay: -2s;
}
.aq-glass-card__eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.aq-glass-card__eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 0 3px rgba(255,198,145,0.25);
}
.aq-glass-card__title {
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 12px;
}
.aq-glass-card__bar {
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.aq-glass-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--peach), var(--coral));
  border-radius: 999px;
  width: 0%;
  transition: width 1.6s cubic-bezier(.5,.1,.2,1) 0.4s;
}
.aq-glass-card.is-in .aq-glass-card__bar-fill { width: 72%; }
.aq-glass-card__meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
  font-weight: 500;
}
.aq-glass-card__pill {
  background: rgba(255,198,145,0.2);
  color: var(--peach);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10.5px;
}
.aq-glass-card__big {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.aq-glass-card__big i {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--peach);
  font-size: 0.6em;
  margin-right: 4px;
}
.aq-glass-card__sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
  font-weight: 500;
}

/* drawn squiggle inside hero stage */
.aq-hero__doodle {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.aq-hero__doodle--1 { top: -10px; right: 18%; width: 90px; }
.aq-hero__doodle--2 { bottom: 16%; left: 8%; width: 130px; }
.aq-hero__sparkle {
  position: absolute;
  z-index: 3;
  animation: aqPulse 3s ease-in-out infinite;
}
.aq-hero__sparkle--1 { top: 22%; right: 8%; }
.aq-hero__sparkle--2 { bottom: 28%; left: 22%; animation-delay: -1.5s; }

/* ─── Section base (light) ────────────────────────────────────────── */
.aq-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--pad);
  position: relative;
}
.aq-nodevice__art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,53,88,0.045) 0 14px, rgba(0,53,88,0.02) 14px 28px),
    linear-gradient(160deg, rgba(255,168,166,0.20), rgba(255,198,145,0.12));
  border: 1px solid var(--line);
}
.aq-nodevice__art::before {
  content: '';
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 68%);
  z-index: 0;
}
.aq-nodevice__art img {
  position: relative;
  z-index: 1;
  max-width: 250px;
  width: 58%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(0,53,88,0.16));
}
.aq-learn {
  position: relative;
  z-index: 1;
  width: 56%;
  max-width: 210px;
  height: auto;
  margin-top: -2px;
  overflow: visible;
}
.aq-learn__line {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 68px;
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0;
  animation: aq-word-cycle 12s ease-in-out infinite;
}
/* Cuatro palabras comparten el mismo punto: cada una se dibuja en su cuarto del
   ciclo (3s de 12s) y queda oculta el resto. El stagger sale del animation-delay
   inline (0s / 3s / 6s / 9s) en cada <text>. Ventana activa 0–25% → encaja sin
   solaparse con la siguiente. */
@keyframes aq-word-cycle {
  0%   { stroke-dashoffset: 900; opacity: 0; }
  1.5% { opacity: 1; }
  11%  { stroke-dashoffset: 0;    opacity: 1; }  /* dibujada */
  18%  { stroke-dashoffset: 0;    opacity: 1; }  /* sostiene */
  23%  { stroke-dashoffset: -900; opacity: 1; }  /* se borra */
  25%  { stroke-dashoffset: -900; opacity: 0; }  /* oculta hasta su próximo turno */
  100% { stroke-dashoffset: -900; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-learn__line { animation: none; stroke-dashoffset: 0; opacity: 0; }
  .aq-learn__line:first-of-type { opacity: 1; }
}
.aq-section__head { max-width: 760px; margin-bottom: 56px; }
.aq-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.aq-section__head .aq-eyebrow { margin-bottom: 18px; }
.aq-section__head .aq-h2 { margin-bottom: 18px; }
.aq-section__head--center .aq-eyebrow { justify-content: center; }
.aq-section__head--center .aq-lead,
.aq-section__head--center p {
  margin-left: auto;
  margin-right: auto;
}

.aq-section__head--center .aq-eyebrow::after {
  content: '';
  width: 24px; height: 1.5px;
  background: currentColor;
  opacity: 0.5;
}

/* placeholder asset — shows description inline */
.aq-asset {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(0,53,88,0.04) 0 10px, rgba(0,53,88,0.02) 10px 20px),
    var(--bg-warm);
  border: 1.5px dashed rgba(0,53,88,0.22);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 8px;
  color: var(--ink-soft);
}
.aq-asset__tag {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.aq-asset__desc {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 360px;
}

/* ─── Real screenshot wrapper ──────────────────────────────────────── */
.aq-shot {
  position: relative;
  background: var(--bg-warm);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.aq-shot img { border-radius: inherit; }

/* ─── Solution carousel ────────────────────────────────────────────── */
.aq-carousel {
  position: relative;
  margin: 0 auto 56px;
  max-width: 760px;
}
.aq-carousel__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,198,145,0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255,168,166,0.14), transparent 60%),
    var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.aq-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 700ms cubic-bezier(.4,.1,.2,1), transform 1100ms cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.aq-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.aq-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.aq-carousel__caption {
  position: absolute;
  left: 28px;
  bottom: 24px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(0,53,88,0.08);
  border-radius: 16px;
  padding: 16px 20px;
  max-width: 380px;
  box-shadow: var(--shadow-md);
  animation: aqCaptionIn 600ms cubic-bezier(.2,.7,.3,1);
}
@keyframes aqCaptionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aq-carousel__dots {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,53,88,0.08);
  border-radius: 999px;
  padding: 8px 10px;
}
.aq-carousel__dot {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aq-carousel__dot span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  opacity: 0.4;
  transition: opacity 200ms ease, background 200ms ease, width 220ms ease;
}
.aq-carousel__dot.is-active span {
  background: var(--coral);
  opacity: 1;
  width: 22px;
  border-radius: 999px;
}

/* ─── Tabs (Profesores / Escuelas / Estudiantes) ───────────────────── */
.aq-tabs {
  display: inline-flex;
  margin: 0 auto 56px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  gap: 4px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.aq-tab {
  background: transparent;
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
  letter-spacing: -0.005em;
}
.aq-tab:hover { color: var(--ink); }
.aq-tab.is-active {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}

/* ─── Problem (4 issue cards on warm bg) ───────────────────────────── */
.aq-problem { background: var(--bg-warm); }
.aq-problem-wrap {
  position: relative;
  background: var(--bg-warm);
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
}
.aq-problem-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/photos/amanecer.webp') center / cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.aq-problem-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg-warm) 0%, transparent 18%, transparent 82%, var(--bg-warm) 100%);
  pointer-events: none;
  z-index: 1;
}
.aq-problem-wrap > * { position: relative; z-index: 2; }
.aq-problem-wrap .aq-section { padding-top: 0; padding-bottom: 0; }
.aq-problem__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.aq-problem__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  box-shadow: var(--shadow-sm);
}
.aq-problem__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--peach);
}
.aq-problem__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--coral);
  margin-bottom: 18px;
}
.aq-problem__card h3 { margin-bottom: 8px; }

/* ─── Solution ─────────────────────────────────────────────────────── */
.aq-solution__feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.aq-solution__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.aq-solution__pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.aq-solution__shot {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  overflow: hidden;
}

.aq-solution__more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.aq-mech-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aq-mech-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--coral);
}
.aq-mech-card__hover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
.aq-mech-card__hover img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 520ms cubic-bezier(.6,.05,.25,1);
}
.aq-mech-card--raid .aq-mech-card__hover img {
  object-position: 85% center;
}
.aq-mech-card:hover .aq-mech-card__hover img {
  clip-path: inset(0 0 0 0);
}
.aq-mech-card__hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,33,55,0) 50%, rgba(0,33,55,0.55) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}
.aq-mech-card:hover .aq-mech-card__hover::after { opacity: 1; }
.aq-mech-card:hover .aq-mech-card__hover { opacity: 1; }
.aq-mech-card__icon {
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}
.aq-mech-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.aq-mech-card__icon--coral,
.aq-mech-card__icon--teal,
.aq-mech-card__icon--mint,
.aq-mech-card__icon--peach { background: transparent; }
.aq-mech-card__visual--coral { background: linear-gradient(160deg, var(--peach-soft), var(--coral-soft)); }
.aq-mech-card__visual--teal { background: linear-gradient(160deg, var(--teal-soft), #eef9f5); }
.aq-mech-card__visual--mint { background: linear-gradient(160deg, #eaf6ee, #d8eedf); }
.aq-mech-card__visual--peach { background: linear-gradient(160deg, var(--peach-soft), #ffe4cc); }
.aq-mech-card h4 { margin: 0; }

/* ─── How it works (sticky scroll storytelling) ─────────────────────── */
.aq-how-sticky {
  position: relative;
  /* 1 viewport for pin + N viewports for step transitions = (N+1) total. We use 3 steps → 3.5 viewports */
  height: 320vh;
}
.aq-how-sticky__inner {
  height: 100%;
}
.aq-how-sticky__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.aq-how-sticky__copy { padding: 80px 0; }
.aq-how-sticky__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.aq-how-sticky__steps::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.aq-how-sticky__step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 18px 14px 0;
  border-radius: 14px;
  transition: background 320ms ease, opacity 320ms ease;
  opacity: 0.45;
  position: relative;
}
.aq-how-sticky__step.is-past { opacity: 0.7; }
.aq-how-sticky__step.is-active {
  opacity: 1;
  background: rgba(255,168,166,0.08);
}
.aq-how-sticky__num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.aq-how-sticky__step.is-past .aq-how-sticky__num {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.aq-how-sticky__step.is-active .aq-how-sticky__num {
  background: var(--coral);
  color: var(--navy);
  border-color: var(--coral);
  box-shadow: 0 8px 24px rgba(255,168,166,0.45);
  transform: scale(1.06);
}
.aq-how-sticky__step-eyebrow {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.aq-how-sticky__step.is-active .aq-how-sticky__step-eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.aq-how-sticky__step h3 { margin: 0 0 6px; }
.aq-how-sticky__step .aq-body {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  opacity: 0;
  transition: max-height 480ms cubic-bezier(.2,.7,.3,1), opacity 320ms ease, margin-top 320ms ease;
}
.aq-how-sticky__step.is-active .aq-body {
  max-height: 220px;
  opacity: 1;
  margin-top: 4px;
}

.aq-how-sticky__stage {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 24px;
}
.aq-how-sticky__shot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.04) translateY(12px);
  filter: blur(10px);
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 900ms cubic-bezier(.2,.7,.3,1), filter 700ms ease;
  pointer-events: none;
}
.aq-how-sticky__shot.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
.aq-how-sticky__shot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,198,145,0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255,168,166,0.14), transparent 60%),
    var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
}
.aq-how-sticky__shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.aq-how-sticky__shot-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0,53,88,0.08);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.aq-how-sticky__shot-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(255,168,166,0.25);
  animation: aqPulse 2s ease-in-out infinite;
}

/* ─── Pedagogy (light, not dark) ───────────────────────────────────── */
.aq-pedagogy__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.aq-pedagogy__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1024px) {
  .aq-pedagogy__grid { grid-template-columns: repeat(2, 1fr); }
}
.aq-pedagogy__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aq-pedagogy__eyebrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--coral);
}
.aq-pedagogy__ref {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ─── For schools ──────────────────────────────────────────────────── */
.aq-schools__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.aq-schools__shot {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.aq-schools__shot img {
  animation: aqShotMorph 700ms cubic-bezier(.2,.7,.3,1);
}
@keyframes aqShotMorph {
  from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
.aq-schools__split > div:first-child {
  animation: aqTabIn 600ms cubic-bezier(.2,.7,.3,1);
}
@keyframes aqTabIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Familias: panel del apoderado (principal) + tarjeta de reconocimientos flotante */
.aq-families__visual {
  position: relative;
  margin-bottom: 28px; /* deja aire para la tarjeta que sobresale abajo */
  animation: aqTabIn 600ms cubic-bezier(.2,.7,.3,1);
}
.aq-families__main {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--bg-warm);
}
.aq-families__main img { width: 100%; height: auto; display: block; }
.aq-families__card {
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 56%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.aq-families__card img { width: 100%; height: auto; display: block; }
.aq-schools__points { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.aq-schools__point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.aq-schools__check {
  width: 30px; height: 30px;
  background: var(--teal-soft);
  color: var(--teal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.aq-schools__point h4 { margin-bottom: 4px; }

/* ─── Social proof ─────────────────────────────────────────────────── */
.aq-social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.aq-quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.aq-quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aq-quote__mark {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 0.4;
  color: var(--coral);
}
.aq-quote__q {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.aq-quote__by {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.aq-quote__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--mint));
  color: #fff;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.aq-quote__name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.aq-quote__role { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

.aq-social__logos {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.aq-social__logos-label {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.aq-social__logos-row {
  display: flex;
  gap: 0;
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.aq-social__logos-track {
  display: flex;
  gap: 64px;
  animation: aqMarquee 38s linear infinite;
  flex-shrink: 0;
  padding-right: 64px;
}
.aq-social__logos-row:hover .aq-social__logos-track {
  animation-play-state: paused;
}
@keyframes aqMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.aq-social__logo {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-soft);
  opacity: 0.65;
}

/* ─── Pricing ──────────────────────────────────────────────────────── */
.aq-pricing__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.aq-pricing__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.aq-pricing__card--featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,168,166,0.18), transparent 50%),
    #fff;
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}
.aq-pricing__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 6px;
}
.aq-pricing__name {
  font-family: var(--f-sans); font-weight: 600; font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.aq-pricing__price { text-align: right; }
.aq-pricing__amount {
  font-family: var(--f-sans); font-weight: 600; font-size: 30px;
  letter-spacing: -0.02em; color: var(--navy);
  display: block; line-height: 1;
}
.aq-pricing__amount i {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--teal);
  font-size: 0.7em;
}
.aq-pricing__suffix { font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-weight: 500; }
.aq-pricing__sub { font-size: 13px; color: var(--ink-soft); margin: 4px 0 18px; }
.aq-pricing__list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.aq-pricing__list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--ink);
}
.aq-pricing__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.aq-pricing__card .aq-btn { margin-top: auto; width: 100%; }

.aq-pricing__schools {
  max-width: 960px; margin: 28px auto 0;
  display: grid; grid-template-columns: 1fr auto;
  gap: 28px; align-items: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  backdrop-filter: blur(10px);
}

/* ─── Final CTA ────────────────────────────────────────────────────── */
.aq-finalcta {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--pad);
}
.aq-finalcta__inner {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,198,145,0.28), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(255,168,166,0.24), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, #002844 100%);
  color: #fff;
  border-radius: 36px;
  padding: 88px 64px;
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.aq-finalcta__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/photos/nocturno.webp') center / cover no-repeat;
  opacity: 0.38;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.aq-finalcta__inner > * { position: relative; z-index: 1; }
.aq-finalcta h2 { color: #fff; max-width: 760px; margin: 0 auto 16px; }
.aq-finalcta p {
  color: rgba(255,255,255,0.72);
  max-width: 540px; margin: 0 auto 32px;
}
.aq-finalcta__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.aq-finalcta__note {
  margin-top: 24px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.62);
}
.aq-finalcta__sparkle {
  position: absolute;
  animation: aqPulse 3s ease-in-out infinite;
}
.aq-finalcta__sparkle--1 { top: 18%; left: 14%; }
.aq-finalcta__sparkle--2 { bottom: 22%; right: 18%; animation-delay: -1.5s; }

/* ─── Contact Modal ─────────────────────────────────────────────────── */
.aq-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,20,40,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.aq-modal {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%; max-width: 520px;
  position: relative;
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  overflow-y: auto;
}
.aq-modal__close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--ink-soft);
  line-height: 1; padding: 4px 8px;
  border-radius: 8px;
  transition: background 150ms;
}
.aq-modal__close:hover { background: var(--bg-warm); }
.aq-modal__title {
  font-family: var(--f-sans); font-weight: 700;
  font-size: 22px; color: var(--ink);
  margin: 0 0 24px;
}
.aq-modal__field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.aq-modal__field label {
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.02em;
}
.aq-modal__field input,
.aq-modal__field select,
.aq-modal__field textarea {
  font-family: var(--f-sans); font-size: 15px;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--bg);
  outline: none;
  transition: border-color 160ms;
  resize: vertical;
}
.aq-modal__field input:focus,
.aq-modal__field select:focus,
.aq-modal__field textarea:focus { border-color: var(--navy-mid); }
.aq-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aq-modal__error {
  font-size: 13.5px; color: #c0392b;
  margin: 0 0 12px;
}
.aq-modal__success {
  text-align: center; padding: 32px 0;
}
.aq-modal__success-icon {
  width: 56px; height: 56px;
  background: var(--teal-soft);
  color: var(--teal);
  border-radius: 50%;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.aq-modal__success p {
  font-size: 16px; color: var(--ink); font-weight: 500;
}
@media (max-width: 540px) {
  .aq-modal { padding: 28px 20px; }
  .aq-modal__row { grid-template-columns: 1fr; }
}

/* ─── Pedagogy: callout card (4ta card, para familias) ───────────────── */
.aq-pedagogy__card--callout {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  position: relative;
  overflow: hidden;
}
.aq-pedagogy__card--callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://ntuzvjmqdlehsjhgidzg.supabase.co/storage/v1/object/public/assets/Brand%20Identity/Sidebars%20and%20Topbars%20Background/Sidebars%20%28Vertical%20background%29.webp') center / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.aq-pedagogy__card--callout > * { position: relative; z-index: 1; }
.aq-pedagogy__card--callout:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  background: var(--navy-mid, #0c4570);
}
.aq-pedagogy__card--callout .aq-pedagogy__eyebrow { color: var(--peach, #ffc691); }
.aq-pedagogy__card--callout .aq-h3 { color: #fff; }
.aq-pedagogy__card--callout .aq-body { color: rgba(255,255,255,0.86); }
.aq-pedagogy__cta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
  letter-spacing: 0.01em;
}

/* ─── Concerns Modal (postura sobre pantallas, contenido extenso) ───── */
.aq-modal--scroll { max-width: 640px; padding: 40px 36px; }
.aq-concerns__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
}
.aq-concerns__h4 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin: 28px 0 12px;
  letter-spacing: -0.005em;
}
.aq-concerns__bullets,
.aq-concerns__evidence {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.aq-concerns__bullets li,
.aq-concerns__evidence li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.aq-concerns__bullets li::before,
.aq-concerns__evidence li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.aq-concerns__bullets li strong {
  color: var(--navy);
  font-weight: 600;
  margin-right: 4px;
}
.aq-concerns__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
}
.aq-concerns__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.aq-concerns__table th,
.aq-concerns__table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.aq-concerns__table th {
  background: var(--bg-warm, #f5f1e8);
  font-weight: 600;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.aq-concerns__table tr:last-child td { border-bottom: 0; }
.aq-concerns__table td:last-child { color: var(--ink-soft); }
.aq-concerns__ref {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 8px 0 4px;
  font-weight: 500;
}
.aq-concerns__disclaimer {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 10px 0 0;
}
.aq-concerns__closing {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
  margin: 28px 0 20px;
  padding: 16px 18px;
  background: var(--bg-warm, #f5f1e8);
  border-radius: 12px;
  border-left: 3px solid var(--coral);
}
.aq-concerns__cta {
  width: 100%;
  margin-top: 12px;
}
@media (max-width: 540px) {
  .aq-modal--scroll { padding: 28px 20px; }
  .aq-concerns__table th,
  .aq-concerns__table td { padding: 8px 10px; font-size: 13px; }
}

/* ─── Footer (navy) ─────────────────────────────────────────────────── */
.aq-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.78);
  padding: 72px var(--pad) 36px;
  position: relative;
  overflow: hidden;
}
.aq-footer__texture {
  position: absolute; inset: 0;
  background: url('assets/headers-bg.webp') center / cover no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: luminosity;
}
.aq-footer__inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }
.aq-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}
.aq-footer__brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.aq-footer__col h4 {
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  margin: 0 0 18px;
}
.aq-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.aq-footer__col a {
  font-size: 14.5px;
  color: rgba(255,255,255,0.7);
}
.aq-footer__col a:hover { color: #fff; }
.aq-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* ─── Language switcher ─────────────────────────────────────────────── */
.aq-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.aq-lang__current {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid rgba(0,53,88,0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.aq-lang:hover .aq-lang__current {
  background: rgba(0,53,88,0.04);
  border-color: rgba(0,53,88,0.22);
}
.aq-lang::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 8px;
}
.aq-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  flex-direction: column;
  z-index: 50;
}
.aq-lang:hover .aq-lang__menu,
.aq-lang:focus-within .aq-lang__menu { display: flex; }
.aq-lang__menu a {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.aq-lang__menu a:hover { background: rgba(0,53,88,0.06); }
.aq-lang__menu a.is-active { background: var(--navy); color: #fff; }
@media (max-width: 1180px) {
  .aq-hero__h1 { font-size: clamp(32px, 4.4vw, 46px); }
  .aq-h2 { font-size: clamp(30px, 4vw, 44px); }
}
@media (max-width: 1080px) {
  .aq-hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .aq-hero__copy { max-width: 640px; padding-right: 0; margin: 0 auto; text-align: left; }
  .aq-hero__stage { max-width: 540px; margin: 0 auto; }
  .aq-hero__strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .aq-hero__strip-cell { border-right: none; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .aq-problem__grid { grid-template-columns: repeat(2, 1fr); }
  .aq-solution__feature { grid-template-columns: 1fr; gap: 32px; }
  .aq-solution__more { grid-template-columns: repeat(2, 1fr); }
  .aq-how-sticky { height: auto; }
  .aq-how-sticky__pin {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px var(--pad);
  }
  .aq-how-sticky__copy { padding: 0; }
  .aq-how-sticky__step { opacity: 1; }
  .aq-how-sticky__step .aq-body { max-height: none; opacity: 1; margin-top: 4px; }
  .aq-how-sticky__step-eyebrow { opacity: 1; transform: none; }
  .aq-how-sticky__stage { aspect-ratio: 16 / 10; }
  .aq-how-sticky__shot { position: relative; opacity: 1; transform: none; filter: none; display: none; }
  .aq-how-sticky__shot.is-active { display: flex; }
  .aq-pedagogy__grid { grid-template-columns: 1fr; }
  .aq-schools__split { grid-template-columns: 1fr; gap: 32px; }
  .aq-schools__shot { max-width: 720px; margin: 0 auto; }
  .aq-families__visual { max-width: 560px; margin: 0 auto 24px; }
  .aq-families__card { right: 6px; bottom: -16px; width: 50%; }
  .aq-social__grid { grid-template-columns: 1fr; }
  .aq-pricing__row { grid-template-columns: 1fr; }
  .aq-pricing__schools { grid-template-columns: 1fr; }
  .aq-footer__top { grid-template-columns: 1fr 1fr; }
  .aq-finalcta__inner { padding: 56px 28px; }
  .aq-carousel { max-width: 600px; }
}
@media (max-width: 720px) {
  .aq-section { padding: 72px 22px; }
  .aq-hero__inner { padding: 48px var(--pad) 64px; }
  .aq-hero__stage { min-height: 320px; }
  .aq-hero__h1 { font-size: clamp(28px, 6.4vw, 40px); }
  .aq-h2 { font-size: clamp(26px, 6vw, 36px); }
  .aq-h3 { font-size: clamp(20px, 4.6vw, 26px); }
  .aq-lead { font-size: 16px; }
  .aq-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .aq-hero__cta .aq-btn { width: 100%; justify-content: center; }
  .aq-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .aq-hero__ctas .aq-btn {
    text-align: center;
    justify-content: center;
  }
  .aq-finalcta__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .aq-finalcta__cta .aq-btn { width: 100%; justify-content: center; }
  .aq-problem__grid { grid-template-columns: 1fr; }
  .aq-solution__more { grid-template-columns: 1fr; }
  .aq-tabs { flex-direction: column; gap: 8px; }
  .aq-tab { width: 100%; justify-content: center; }
  .aq-carousel { max-width: 100%; }
  .aq-carousel__caption { left: 16px; right: 16px; bottom: 16px; padding: 12px 14px; }
  .aq-carousel__dots { top: 12px; right: 12px; }
  .aq-pricing__card { padding: 28px 22px; }
  .aq-mech-card { padding: 22px; }
  .aq-mech-card__visual { aspect-ratio: 16 / 10; }
}
/* Pista de scroll horizontal del carrusel de planes (solo móvil, ver @640) */
.r-scroll-cue { display: none; }
/* Al llegar al último plan, JS pone .is-hidden y la flecha desaparece. */
.r-scroll-cue.is-hidden { animation: none; opacity: 0; visibility: hidden; }
@keyframes r-cue-nudge {
  0%, 100% { opacity: 0.3; transform: translate(0, -50%); }
  50%      { opacity: 1;   transform: translate(5px, -50%); }
}

@media (max-width: 640px) {
  .aq-nav { padding: 16px 18px; }
  .aq-nav__links { display: none; }
  /* Oculta el "Log in" del nav en móvil. Usar ">" (hijo directo): sin él,
     el selector capturaba el primer <a> del menú de idioma (Español) y lo
     ocultaba, dejando el toggle sin opción de volver a español en móvil. */
  .aq-nav__cta > a:first-child { display: none; }
  .aq-nav__logo-img { height: 36px; }
  .aq-section { padding: 56px 18px; }
  .aq-hero__inner { padding: 40px 18px 56px; }
  .aq-glass-card { display: none; }
  .aq-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .aq-finalcta__inner { padding: 44px 22px; border-radius: 24px; }
  .aq-how-sticky__pin { padding: 40px 18px; }
  .aq-how-sticky__steps::before { left: 18px; }
  .aq-how-sticky__step { grid-template-columns: 38px 1fr; gap: 12px; padding: 10px 12px 10px 0; }
  .aq-how-sticky__num { width: 38px; height: 38px; font-size: 18px; }

  /* Planes en móvil: carrusel deslizable, UNA tarjeta a ancho completo por
     pantalla + flecha parpadeante que sugiere deslizar a la derecha. */
  .r-rail { position: relative; }
  /* .pr-stage para ganar especificidad al .r-row de escritorio (grid 3-col)
     que está MÁS ABAJO en el archivo: las media queries no suman especificidad,
     así que sin esto el grid de escritorio pisaba el carrusel móvil. */
  .pr-stage .r-row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin-inline: -18px;
    /* padding-top holgado: el badge "Powered by Alquie IA" de la Pro+ sobresale
       13px (top:-13px) y overflow-x:auto también recorta en vertical. */
    padding: 20px 18px 14px;
  }
  .pr-stage .r-row::-webkit-scrollbar { display: none; }
  .pr-stage .r-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .r-scroll-cue {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 2px;
    width: 38px; height: 38px; border-radius: 50%;
    transform: translateY(-50%);
    background: var(--navy); color: #fff;
    font-size: 19px; font-weight: 700; line-height: 1;
    box-shadow: 0 6px 16px rgba(0,53,88,0.30);
    pointer-events: none; z-index: 4;
    animation: r-cue-nudge 1.4s ease-in-out infinite;
  }

  /* Gato Alchie + palabra animada: la caja 4/3 con overflow:hidden recortaba el
     conjunto en pantallas chicas. En móvil la caja crece a su contenido. */
  .aq-nodevice__art { aspect-ratio: auto; padding: 26px 10px 34px; }
  .aq-nodevice__art img { width: 64%; max-width: 188px; }
  .aq-learn { width: 66%; max-width: 172px; }
  .aq-learn__line { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .r-scroll-cue { animation: none; opacity: 0.85; }
}

/* ============================================================
   Alquie · Planes — base compartida (tokens + fuentes + utils)
   Tokens calcados de landing-v2.css para fidelidad de marca.
   ============================================================ */

:root {
  --navy:#003558; --navy-mid:#004a79; --navy-soft:#daeaf7;
  --teal:#007a6c; --teal-soft:#d6efec; --mint:#4aa975;
  --coral:#ffa8a6; --coral-soft:#ffefee; --peach:#ffc691; --peach-soft:#fff3e6;
  --gold:#d9a23a;
  --bg:#fbfaf6; --bg-warm:#f5f1e8;
  --ink:#0d2033; --ink-soft:#5a7a8c; --ink-mute:#94a3b8;
  --line:#e3ddcd; --line-soft:#efeadb;
  --f-sans:'General Sans', system-ui, sans-serif;
  --f-serif:'Fraunces', Georgia, serif;
  --shadow-sm:0 2px 8px rgba(0,53,88,.06);
  --shadow-md:0 8px 24px rgba(0,53,88,.08);
  --shadow-lg:0 16px 48px rgba(0,53,88,.14);
  --shadow-xl:0 32px 80px rgba(0,53,88,.20);
}

/* ─── Lienzo de cada propuesta (simula la sección live) ─── */
.pr-stage {
  width: 1240px;
  background: var(--bg);
  font-family: var(--f-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 64px 40px 56px;
  position: relative;
  overflow: hidden;
}
.pr-stage * { box-sizing: border-box; }
.pr-stage button { font: inherit; cursor: pointer; }

/* ─── Encabezado de sección (compartido) ─── */
.pr-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.pr-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal);
}
.pr-eyebrow .ic { font-size: 15px; }
.pr-h2 {
  font-family: var(--f-sans); font-weight: 600;
  font-size: 40px; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin: 14px 0 0;
}
.pr-h2 i { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--teal); }
.pr-lead { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 14px auto 0; max-width: 560px; }

/* ─── Utilidad de ícono Iconoir (SVG inline, recoloreable) ─── */
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em;
  color: inherit;
}
.ic svg { width: 100%; height: 100%; display: block; }

/* ─── Toggle mensual / anual (segmentado, compartido) ─── */
.pr-toggle {
  display: inline-flex; align-items: stretch;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm);
  position: relative;
}
.pr-toggle__btn {
  position: relative; z-index: 1;
  border: 0; background: transparent;
  padding: 9px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: .01em; transition: color .25s ease;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap; flex: 1 1 0;
}
.pr-toggle__btn.is-on { color: #fff; }
.pr-toggle__thumb {
  position: absolute; top: 4px; bottom: 4px; z-index: 0;
  left: 4px; right: calc(50% + 1px);
  border-radius: 999px; background: var(--navy);
  transition: left .34s cubic-bezier(.22,.8,.28,1), right .34s cubic-bezier(.22,.8,.28,1);
  box-shadow: 0 4px 14px rgba(0,53,88,.28);
}
.pr-toggle.is-annual .pr-toggle__thumb { left: calc(50% + 1px); right: 4px; }
.pr-save {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--teal); background: var(--teal-soft);
  padding: 3px 8px; border-radius: 999px; margin-left: 2px;
}

/* ─── Botones (calcados de la landing) ─── */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 13px;
  padding: 13px 22px; font-size: 14.5px; font-weight: 600;
  font-family: var(--f-sans); letter-spacing: .01em;
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer; text-decoration: none;
}
.pr-btn:hover { transform: translateY(-1px); }
.pr-btn:active { transform: translateY(0); }
.pr-btn--navy  { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.pr-btn--navy:hover { background: var(--navy-mid); }
.pr-btn--coral { background: var(--coral); color: var(--navy); box-shadow: 0 10px 30px rgba(255,168,166,.4); }
.pr-btn--coral:hover { background: #ffb8b6; box-shadow: 0 16px 40px rgba(255,168,166,.5); }
.pr-btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.pr-btn--ghost:hover { background: rgba(0,53,88,.04); border-color: var(--ink-soft); }
.pr-btn--block { width: 100%; }

/* ─── Bloque "Plan Escuela" (compartido, opcional) ─── */
.pr-schools {
  max-width: 1000px; margin: 32px auto 0;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 26px; backdrop-filter: blur(10px);
}
.pr-schools h4 { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* ─── Estado de entrada ───────────────────────────────────────────
   El estado VISIBLE es el default (no depende de animaciones, que el
   design-canvas puede congelar). El reveal se aplica solo como mejora
   vía transición + clase .pr-in añadida tras montar (ver pricing-shared). */
.pr-rise { opacity: 1; transform: none; }
.pr-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.8,.28,1), transform .6s cubic-bezier(.22,.8,.28,1); }
.pr-reveal.pr-in { opacity: 1; transform: none; }


/* ─── Propuesta 1 · Refinado editorial ─── */
.r-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1140px; margin: 36px auto 0;
  /* stretch (antes start): las tres tarjetas miden lo mismo y el borde
     inferior queda alineado (pedido de Rai, 2026-09-28). */
  align-items: stretch;
}
.r-card {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.22,.8,.28,1), box-shadow .28s ease, border-color .28s ease;
}
.r-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.r-card--featured {
  border-color: var(--navy);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,168,166,.20), transparent 52%),
    radial-gradient(100% 70% at 0% 100%, rgba(255,198,145,.16), transparent 55%),
    #fff;
  box-shadow: var(--shadow-lg);
}

.r-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.r-badge .ic { font-size: 14px; color: var(--peach); }

.r-eb { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.r-card--featured .r-eb { color: var(--coral); }
.r-name { font-family: var(--f-sans); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: var(--ink); margin: 8px 0 2px; }
.r-tagline { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); min-height: 40px; margin-bottom: 16px; }

.r-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 44px; }
.r-amount { font-family: var(--f-sans); font-weight: 600; font-size: 44px; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.r-amount--free { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--teal); font-size: 38px; }
.r-period { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.r-note { font-size: 12px; color: var(--ink-mute); margin-top: 6px; min-height: 16px; transition: color .2s; }

.r-meta {
  display: flex; gap: 16px; margin: 16px 0 18px; padding: 14px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.r-meta div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.r-meta .ic { font-size: 17px; color: var(--navy-mid); }

.r-card .pr-btn { width: 100%; margin-bottom: 22px; }

.r-inherit { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; min-height: 34px; }
.r-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; min-height: 210px; }
.r-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.r-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal);
  transition: transform .2s ease, background .2s ease;
}
.r-ico .ic { font-size: 15px; }
.r-card:hover .r-ico { transform: scale(1.06); }
.r-list li.is-ai .r-ico { background: linear-gradient(135deg, var(--peach-soft), var(--coral-soft)); color: var(--gold); }
.r-ai-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--gold);
  background: var(--peach-soft); border-radius: 5px; padding: 1px 6px;
  margin-left: 6px; vertical-align: 1px; white-space: nowrap;
}

/* Ver más / Ver menos */
.r-more {
  margin-top: 16px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0;
  color: var(--navy-mid); font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: gap .2s ease, color .2s ease;
}
.r-more:hover { gap: 9px; color: var(--navy); }
.r-more .ic { font-size: 16px; transition: transform .3s ease; }
.r-more.is-open .ic { transform: rotate(180deg); }
.r-extra { overflow: hidden; }

/* ────────────────────────────────────────────────────────────────────
   Marquee de mecánicas (carrusel auto-scroll con pausa al hover)
   Reemplaza la grid estática del bloque #solution.
   ──────────────────────────────────────────────────────────────────── */
.aq-mech-marquee {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: 28px 0 0;
  /* máscara lateral para fade-out en los bordes */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.aq-mech-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: aq-mech-scroll 60s linear infinite;
}
.aq-mech-marquee:hover .aq-mech-marquee__track {
  animation-play-state: paused;
}
.aq-mech-marquee .aq-mech-card {
  /* override del aq-mech-card original que asume grid */
  flex: 0 0 280px;
  min-width: 280px;
  max-width: 280px;
  margin: 0;
}
@keyframes aq-mech-scroll {
  /* duplicamos las cards: el track avanza -50% para loop sin saltos */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin auto-scroll: en vez de quedar congelado (perdiendo las tarjetas que
     no caben), el carrusel se vuelve deslizable a mano. Se oculta el set
     duplicado (existe solo para el loop infinito) para no mostrar cada
     mecánica dos veces. */
  .aq-mech-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aq-mech-marquee__track { animation: none; }
  .aq-mech-marquee .aq-mech-card[aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
  .aq-mech-marquee .aq-mech-card { flex-basis: 240px; min-width: 240px; max-width: 240px; }
  .aq-mech-marquee__track { animation-duration: 48s; }
}

/* ─── Content rework: hero seal, palancas, mech notes, pedagogy seal ── */
.aq-hero__seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color 180ms ease;
}
.aq-hero__seal:hover { color: #fff; }
.aq-hero__seal-icon { color: var(--peach, #ffc691); font-size: 12px; }

.aq-levers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.aq-lever {
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
.aq-lever strong {
  color: var(--ink);
  font-weight: 600;
}

.aq-mech-card__note {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aq-mech-card__note-text {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.aq-mech-card__note-ref {
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
}

.aq-pedagogy__seal {
  margin: 36px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.aq-pedagogy__seal i { color: var(--coral); font-style: italic; }


/* ═══ site.css ═══ */
/* Alquie · Sitio completo — extensiones sobre landing-v2.css
   Reutiliza todos los componentes aq-* de la landing y añade:
   sub-hero de página, footer 4 columnas, menú móvil, bloque "Qué es",
   feature blocks, pricing 3-tier, FAQ acordeón, contacto, legal prose. */

/* ─── Reveal robusto ─────────────────────────────────────────────────
   Estado base = VISIBLE. La animación de entrada sólo se activa cuando
   <html class="aq-anim"> (lo pone el HTML; JS la quita si detecta que el
   entorno estrangula las transiciones). Garantiza que el contenido nunca
   quede oculto (sin JS, reduced-motion, o iframes offscreen). */
.aq-reveal { opacity: 1; transform: none; }
html.aq-anim .aq-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(.2,.7,.3,1), transform 800ms cubic-bezier(.2,.7,.3,1);
}
html.aq-anim .aq-reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.aq-anim .aq-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Nav: menú móvil + activo ──────────────────────────────────────── */
.aq-nav__links a.is-active { color: var(--navy); font-weight: 600; }
.aq-nav__burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid rgba(0,53,88,0.12);
  border-radius: 12px;
  background: #fff;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.aq-nav__burger span {
  display: block; width: 18px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform 240ms ease, opacity 200ms ease;
}
.aq-nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.aq-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.aq-nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.aq-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #012a48;
  display: flex;
  flex-direction: column;
  padding: 80px 28px 28px;
  gap: 0;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.26s ease, transform 0.42s cubic-bezier(.16,.84,.3,1), visibility 0s linear 0.42s;
}
.aq-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.26s ease, transform 0.5s cubic-bezier(.16,.84,.3,1), visibility 0s;
}
.aq-mobile-menu > * { position: relative; z-index: 1; }
.aq-mobile-menu > a {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 20px;
  color: #fff;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  letter-spacing: -0.01em;
}
.aq-mobile-menu > a i { font-family: var(--f-serif); font-style: italic; color: var(--peach); }

/* Aparición escalonada del contenido al abrir */
.aq-mobile-menu > a,
.aq-mobile-menu__lang,
.aq-mobile-menu__cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.16,.84,.3,1);
}
.aq-mobile-menu.is-open > a,
.aq-mobile-menu.is-open .aq-mobile-menu__lang,
.aq-mobile-menu.is-open .aq-mobile-menu__cta {
  opacity: 1; transform: translateY(0);
}
.aq-mobile-menu.is-open > a:nth-of-type(1)  { transition-delay: 0.05s; }
.aq-mobile-menu.is-open > a:nth-of-type(2)  { transition-delay: 0.09s; }
.aq-mobile-menu.is-open > a:nth-of-type(3)  { transition-delay: 0.13s; }
.aq-mobile-menu.is-open > a:nth-of-type(4)  { transition-delay: 0.17s; }
.aq-mobile-menu.is-open > a:nth-of-type(5)  { transition-delay: 0.21s; }
.aq-mobile-menu.is-open > a:nth-of-type(6)  { transition-delay: 0.25s; }
.aq-mobile-menu.is-open > a:nth-of-type(7)  { transition-delay: 0.29s; }
.aq-mobile-menu.is-open > a:nth-of-type(8)  { transition-delay: 0.33s; }
.aq-mobile-menu.is-open > a:nth-of-type(9)  { transition-delay: 0.37s; }
.aq-mobile-menu.is-open > a:nth-of-type(10) { transition-delay: 0.41s; }
.aq-mobile-menu.is-open .aq-mobile-menu__lang { transition-delay: 0.46s; }
.aq-mobile-menu.is-open .aq-mobile-menu__cta  { transition-delay: 0.52s; }

/* Toggle de idioma en el menú móvil */
.aq-mobile-menu__lang { display: flex; gap: 10px; margin-top: 16px; }
.aq-mobile-menu__lang a {
  flex: 1; text-align: center; font-size: 15px; font-weight: 500;
  padding: 12px 0; border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px; color: rgba(255,255,255,0.82);
}
.aq-mobile-menu__lang a.is-active { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; }

.aq-mobile-menu__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.aq-mobile-menu__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff; font-size: 22px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, transform 0.18s;
}
.aq-mobile-menu__close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .aq-mobile-menu, .aq-mobile-menu > a, .aq-mobile-menu__lang, .aq-mobile-menu__cta { transition: opacity 0.2s ease; transform: none; }
}

/* ─── Sub-hero de página (navy compacto) ────────────────────────────── */
.aq-pagehero {
  /* Mismo fondo que el hero del home (.aq-hero): degradado + textura + aurora */
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.18), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.18), transparent 55%),
    radial-gradient(700px 400px at 65% 30%, rgba(74,169,117,0.10), transparent 60%),
    linear-gradient(170deg, #003558 0%, #002844 60%, #001f37 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 36px 36px;
  margin-top: -120px;
  padding-top: 120px;
}
/* Capa de textura (igual que .aq-hero__texture del home) */
.aq-pagehero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/headers-bg.webp') center / cover no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: luminosity;
}
/* Aurora animada (igual que .aq-hero__aurora del home) */
.aq-pagehero__aurora {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(48px);
}
.aq-pagehero__aurora::before,
.aq-pagehero__aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.aq-pagehero__aurora::before {
  width: 70%; height: 70%;
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(255,198,145,0.55), transparent 60%);
  animation: aqAurora1 18s ease-in-out infinite;
}
.aq-pagehero__aurora::after {
  width: 60%; height: 60%;
  bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(255,168,166,0.5), transparent 60%);
  animation: aqAurora2 22s ease-in-out infinite;
}
/* Variantes de color del header por página (base oscura para texto blanco). */
.aq-pagehero--teal {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(74,169,117,0.22), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,198,145,0.14), transparent 55%),
    linear-gradient(170deg, #014a43 0%, #013029 60%, #01231d 100%);
}
.aq-pagehero--mint {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(74,169,117,0.28), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(0,122,108,0.20), transparent 55%),
    linear-gradient(170deg, #155a4e 0%, #0c3a31 60%, #082a23 100%);
}
.aq-pagehero--coral {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(255,168,166,0.26), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,198,145,0.18), transparent 55%),
    linear-gradient(170deg, #5e2630 0%, #3e1922 60%, #2a1019 100%);
}
.aq-pagehero--peach {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.28), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.16), transparent 55%),
    linear-gradient(170deg, #5b3a1c 0%, #3f2713 60%, #2a1a0d 100%);
}
.aq-pagehero--navy {
  background:
    radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.18), transparent 55%),
    radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.18), transparent 55%),
    radial-gradient(700px 400px at 65% 30%, rgba(74,169,117,0.10), transparent 60%),
    linear-gradient(170deg, #003558 0%, #002844 60%, #001f37 100%);
}
.aq-pagehero__inner {
  position: relative; z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 76px var(--pad) 84px;
  /* Altura consistente entre páginas + contenido centrado */
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.aq-pagehero__inner--narrow { max-width: 820px; }
.aq-pagehero__h1 { margin-left: auto; margin-right: auto; }
.aq-pagehero__lead { margin-left: auto; margin-right: auto; }
.aq-pagehero__ctas { justify-content: center; }
.aq-pagehero .aq-crumb { justify-content: center; }
.aq-pagehero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  font-family: var(--f-sans);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--peach);
}
.aq-pagehero__eyebrow-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--peach); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-style: normal;
}
.aq-pagehero__h1 {
  color: #fff;
  font-size: clamp(34px, 4.4vw, 58px);
  max-width: 16ch;
}
.aq-pagehero__h1 i { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--peach); font-size: 1.05em; }
.aq-pagehero__lead {
  color: rgba(255,255,255,0.72);
  max-width: 580px;
  margin-top: 22px;
  font-size: 19px; line-height: 1.55;
}
.aq-pagehero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.aq-pagehero__aurora { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0.5; filter: blur(48px); }
.aq-pagehero__aurora::before, .aq-pagehero__aurora::after { content: ''; position: absolute; border-radius: 50%; }
.aq-pagehero__aurora::before { width: 60%; height: 70%; top: -10%; left: -8%; background: radial-gradient(circle, rgba(255,198,145,0.5), transparent 60%); animation: aqAurora1 18s ease-in-out infinite; }
.aq-pagehero__aurora::after { width: 55%; height: 60%; bottom: -15%; right: -8%; background: radial-gradient(circle, rgba(255,168,166,0.45), transparent 60%); animation: aqAurora2 22s ease-in-out infinite; }

/* breadcrumb */
.aq-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.6);
  margin-bottom: 22px; font-weight: 500;
}
.aq-crumb a { color: rgba(255,255,255,0.6); }
.aq-crumb a:hover { color: #fff; }
.aq-crumb span { opacity: 0.45; }

/* ─── Bloque "Qué es Alquie" (texto descriptivo, requisito Google) ──── */
.aq-about { background: var(--bg-warm); }
.aq-about__wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 88px var(--pad);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px; align-items: center;
}
.aq-about__copy h2 { margin-bottom: 22px; }
.aq-about__copy p { margin-bottom: 16px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.aq-about__copy p.aq-lead { color: var(--ink-soft); }
.aq-about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aq-about__fact {
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.aq-about__fact-k {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: 30px; color: var(--navy); line-height: 1; letter-spacing: -0.01em;
}
.aq-about__fact-l { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; font-weight: 500; }

/* ─── Feature blocks (página Funciones) ─────────────────────────────── */
.aq-featgroup__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 22px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.aq-featgroup__num {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: 20px; color: var(--coral); flex-shrink: 0;
}
.aq-featgroup__head h2 { font-size: clamp(26px, 3vw, 38px); }
.aq-featgroup__head p { color: var(--ink-soft); margin-left: auto; max-width: 360px; text-align: right; font-size: 14.5px; }

.aq-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.aq-feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.aq-feat-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  position: relative; overflow: hidden;
}
.aq-feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--coral); }
.aq-feat-card__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.aq-feat-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.aq-feat-card__icon--glyph {
  border-radius: 14px;
  background: linear-gradient(160deg, var(--peach-soft), var(--coral-soft));
  font-family: var(--f-serif); font-style: italic; font-weight: 600;
  font-size: 22px; color: var(--coral);
}
.aq-feat-card__plan {
  align-self: flex-start;
  font-family: var(--f-sans); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  margin-top: auto;
}
.aq-feat-card__plan--free { background: var(--teal-soft); color: var(--teal-dark, #005a51); }
.aq-feat-card__plan--pro { background: var(--navy-soft); color: var(--navy); }
.aq-feat-card__plan--proplus { background: var(--peach-soft); color: #b06a1e; }
.aq-feat-card h3 { font-size: 19px; }

/* big feature (with screenshot) */
.aq-feat-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; margin-bottom: 28px;
}
.aq-feat-hero--flip { direction: rtl; }
.aq-feat-hero--flip > * { direction: ltr; }
.aq-feat-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ─── Pricing 3-tier ────────────────────────────────────────────────── */
.aq-pricing3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1080px; margin: 0 auto;
  align-items: stretch;
}
.aq-price-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 30px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.aq-price-card--featured {
  background: radial-gradient(circle at 100% 0%, rgba(255,168,166,0.16), transparent 52%), #fff;
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}
.aq-price-card__badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--coral); color: var(--navy);
  font-family: var(--f-sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.04em; padding: 5px 13px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255,168,166,0.5);
}
.aq-price-card__name { font-family: var(--f-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 4px; }
.aq-price-card__tagline { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; min-height: 38px; }
.aq-price-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.aq-price-card__amount { font-family: var(--f-sans); font-weight: 600; font-size: 42px; letter-spacing: -0.025em; color: var(--navy); line-height: 1; }
.aq-price-card__per { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.aq-price-card__note { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 22px; min-height: 18px; }
.aq-price-card__list { list-style: none; margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; flex-grow: 1; }
.aq-price-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.aq-price-card__list li.is-head { font-weight: 600; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; gap: 0; margin-top: 4px; }
.aq-price-card__check {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--teal-soft); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.aq-price-card .aq-btn { width: 100%; margin-top: auto; }

/* billing toggle */
.aq-billing {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 auto 44px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  position: relative; left: 50%; transform: translateX(-50%);
  box-shadow: var(--shadow-sm);
}
.aq-billing button {
  border: none; background: transparent;
  font-family: var(--f-sans); font-weight: 500; font-size: 14px;
  color: var(--ink-soft); padding: 9px 20px; border-radius: 999px; cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.aq-billing button.is-active { background: var(--navy); color: #fff; font-weight: 600; }
.aq-billing__save { color: var(--teal); font-weight: 600; font-size: 12px; margin-left: 4px; }

/* comparison table */
.aq-compare { max-width: 1080px; margin: 64px auto 0; overflow-x: auto; }
.aq-compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.aq-compare th, .aq-compare td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.aq-compare thead th { font-family: var(--f-sans); font-weight: 600; color: var(--navy); font-size: 15px; }
.aq-compare thead th:not(:first-child), .aq-compare td:not(:first-child) { text-align: center; }
.aq-compare tbody td:first-child { color: var(--ink); font-weight: 500; }
.aq-compare .aq-compare__yes { color: var(--teal); font-weight: 700; }
.aq-compare .aq-compare__no { color: var(--ink-mute); }
.aq-compare tr.aq-compare__group td { background: var(--bg-warm); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

/* ─── FAQ acordeón ──────────────────────────────────────────────────── */
.aq-faq { max-width: 820px; margin: 0 auto; }
.aq-faq__cat { margin-bottom: 44px; }
.aq-faq__cat-title {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: 16px; color: var(--coral); margin-bottom: 16px;
}
.aq-faq__item {
  border-bottom: 1px solid var(--line);
}
.aq-faq__q {
  width: 100%; text-align: left; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-family: var(--f-sans); font-weight: 600; font-size: 17px; color: var(--ink);
  letter-spacing: -0.01em;
}
.aq-faq__q:hover { color: var(--navy); }
.aq-faq__icon {
  flex-shrink: 0; width: 26px; height: 26px; position: relative;
  border-radius: 50%; border: 1.5px solid var(--line);
  transition: background 200ms ease, border-color 200ms ease;
}
.aq-faq__icon::before, .aq-faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--ink-soft); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform 240ms ease, background 200ms ease;
}
.aq-faq__icon::before { width: 11px; height: 1.5px; }
.aq-faq__icon::after { width: 1.5px; height: 11px; }
.aq-faq__item.is-open .aq-faq__icon { background: var(--coral); border-color: var(--coral); }
.aq-faq__item.is-open .aq-faq__icon::before,
.aq-faq__item.is-open .aq-faq__icon::after { background: var(--navy); }
.aq-faq__item.is-open .aq-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.aq-faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height 360ms cubic-bezier(.2,.7,.3,1), opacity 280ms ease, padding 280ms ease;
  opacity: 0;
}
.aq-faq__item.is-open .aq-faq__a { max-height: 400px; opacity: 1; padding-bottom: 22px; }
.aq-faq__a p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; margin: 0; }
.aq-faq__a a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Trust / privacy cards ─────────────────────────────────────────── */
.aq-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.aq-trust-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 30px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease;
}
.aq-trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aq-trust-card__badge {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--teal-soft); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 20px;
}
.aq-trust-card h3 { font-size: 19px; }
.aq-compliance {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.aq-compliance__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.aq-compliance__chip::before { content: '✓'; color: var(--teal); font-weight: 800; }

/* ─── Contact ───────────────────────────────────────────────────────── */
.aq-contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.aq-form { display: flex; flex-direction: column; gap: 18px; }
.aq-field { display: flex; flex-direction: column; gap: 7px; }
.aq-field label { font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.aq-field input, .aq-field textarea, .aq-field select {
  font-family: var(--f-sans); font-size: 15px; color: var(--ink);
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.aq-field input:focus, .aq-field textarea:focus, .aq-field select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,53,88,0.08);
}
.aq-field textarea { resize: vertical; min-height: 130px; }
.aq-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aq-contact-side { display: flex; flex-direction: column; gap: 20px; }
.aq-contact-card {
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
}
.aq-contact-card h4 { margin-bottom: 6px; }
.aq-contact-card a { color: var(--navy); font-weight: 600; }
.aq-contact-card__row { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.aq-contact-card__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.aq-contact-card__ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* ─── Legal / prose (reembolsos, etc.) ──────────────────────────────── */
.aq-prose { max-width: 760px; margin: 0 auto; }
.aq-prose h2 { font-size: 26px; margin: 44px 0 14px; }
.aq-prose h2:first-child { margin-top: 0; }
.aq-prose h3 { font-size: 19px; margin: 28px 0 10px; }
.aq-prose p { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.aq-prose ul { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 0 0 16px; padding-left: 22px; }
.aq-prose li { margin-bottom: 8px; }
.aq-prose strong { font-weight: 700; color: var(--navy); }
.aq-prose__updated { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 32px; font-weight: 500; }
.aq-prose__callout {
  background: var(--bg-warm); border: 1px solid var(--line); border-left: 3px solid var(--coral);
  border-radius: 14px; padding: 20px 24px; margin: 24px 0;
}
.aq-prose__callout p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ─── Steps row (cómo funciona compacto) ────────────────────────────── */
.aq-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aq-step3 {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 26px; position: relative; box-shadow: var(--shadow-sm);
}
.aq-step3__num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 19px;
  margin-bottom: 18px;
}
.aq-step3 h3 { font-size: 19px; margin-bottom: 8px; }

/* ─── Footer 4-col ──────────────────────────────────────────────────── */
.aq-footer__top--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.aq-footer__lang {
  display: inline-flex; gap: 6px; margin-top: 18px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 4px;
}
.aq-footer__lang a {
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  color: rgba(255,255,255,0.7);
}
.aq-footer__lang a.is-active { background: rgba(255,255,255,0.14); color: #fff; }
.aq-footer__company { font-size: 13px; color: rgba(255,255,255,0.5); }

/* ─── CTA band reuse (in-page) ──────────────────────────────────────── */
.aq-ctaband { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--pad) 80px; }

@media (max-width: 1080px) {
  .aq-about__wrap { grid-template-columns: 1fr; gap: 36px; }
  .aq-feat-grid, .aq-feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .aq-feat-hero, .aq-feat-hero--flip { grid-template-columns: 1fr; gap: 32px; direction: ltr; }
  .aq-pricing3 { grid-template-columns: 1fr; max-width: 460px; }
  .aq-trust-grid { grid-template-columns: 1fr; }
  .aq-contact-split { grid-template-columns: 1fr; gap: 36px; }
  .aq-steps3 { grid-template-columns: 1fr; }
  .aq-featgroup__head { flex-direction: column; gap: 8px; }
  .aq-featgroup__head p { margin-left: 0; text-align: left; }
  .aq-footer__top--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .aq-nav__links { display: none; }
  .aq-nav__cta .aq-lang, .aq-nav__cta a:not(.aq-btn), .aq-nav__cta .aq-navdd--login { display: none; }
  .aq-nav__burger { display: flex; }
}
@media (max-width: 720px) {
  .aq-feat-grid, .aq-feat-grid--2 { grid-template-columns: 1fr; }
  .aq-about__facts { grid-template-columns: 1fr 1fr; }
  .aq-field--row { grid-template-columns: 1fr; }
  .aq-footer__top--4 { grid-template-columns: 1fr; }
  .aq-pagehero__inner { padding: 56px 20px 64px; }
}

/* ── Desplegables de navegación (Cómo funciona / Para quién) ── */
.aq-navdd { position: relative; display: flex; align-items: center; }
.aq-navdd__btn {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--ink); display: inline-flex; align-items: center; gap: 5px; padding: 0;
}
.aq-navdd__btn:hover, .aq-navdd__btn.is-active { color: var(--navy); }
.aq-navdd__caret { font-size: 14px; line-height: 1; opacity: 0.85; transition: transform 0.18s; }
.aq-navdd:hover .aq-navdd__caret, .aq-navdd.is-open .aq-navdd__caret { transform: rotate(180deg); }
.aq-navdd__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 230px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,53,88,0.14));
  padding: 8px; z-index: 200;
  opacity: 0; visibility: hidden; transition: opacity 0.16s, transform 0.16s, visibility 0s linear 0.16s;
}
/* Puente invisible para no perder el hover al bajar del botón al menú */
.aq-navdd__menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.aq-navdd:hover .aq-navdd__menu,
.aq-navdd:focus-within .aq-navdd__menu,
.aq-navdd.is-open .aq-navdd__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0s;
}
.aq-navdd__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.aq-navdd__menu a:hover { background: var(--bg-warm); color: var(--navy); }

/* Íconos de línea (Iconoir) dentro de badges de tarjetas de confianza */
.aq-trust-card__badge .ic { display: inline-flex; align-items: center; justify-content: center; }
.aq-trust-card__badge .ic svg { width: 26px; height: 26px; display: block; }


/* ═══ site-toolkit.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   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); }