/* ═══ 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;
  align-items: start;
}
.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: 1fr 280px; gap: 56px; align-items: center; }
.tk-why .aq-section__head { margin-bottom: 0; }
.tk-why__mascot { position: relative; display: grid; place-items: center; }
.tk-why__mascot::before {
  content: ''; position: absolute; inset: 6% 0 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--tk-t-warm) 0%, rgba(255,241,232,.55) 45%, transparent 70%);
}
.tk-why__mascot img { position: relative; width: 100%; max-width: 250px; height: auto; filter: drop-shadow(0 18px 30px rgba(13,59,87,.16)); }
@media (max-width: 940px) {
  .tk-why { grid-template-columns: 1fr; gap: 24px; }
  .tk-why__mascot { order: -1; }
  .tk-why__mascot img { max-width: 170px; }
}

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

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

/* En las páginas Astro el héroe se extiende BAJO la barra (margen negativo),
   así que el lavado se ve a través de ella. El blog no hace eso: su <main>
   empieza bajo la nav y detrás quedaba el blanco plano del body. Se pinta el
   lavado con un pseudo-elemento que sube por detrás de la barra. */
/* El pseudo-elemento no servía: el propio héroe del blog tiene fondo opaco
   y lo tapaba. El lavado va al body, que es lo único visible tras la barra.
   En las páginas Astro queda oculto bajo sus héroes (que traen su propio
   lavado sobre color sólido), así que no interfiere. */
body {
  background-image: var(--tk-wash);
  background-repeat: no-repeat;
  /* Anclado al viewport, no al documento: con altura fija (680px) el lavado
     se cortaba en seco a media página en formularios largos como el registro.
     Con `fixed` el área de referencia es la pantalla y no hay costura. */
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: top center;
}
.aqb-hero-mag, .aqa-hero { background-color: transparent; }
/* blog.css pinta `.aq-root { background: var(--bg) }` — un contenedor que
   cubre TODA la página y tapaba el lavado del body, dejando una banda blanca
   a todo el ancho justo bajo la barra. En las páginas Astro ese elemento no
   lleva fondo, así que hacerlo transparente solo afecta al blog. */
.aq-root { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS DE AUTENTICACIÓN (legado)
   signup, reset-password, email-check, email-confirmed, auth-confirm y
   registro-exitoso cargan auth.css + colors_and_type.css, que usan la
   familia de tokens --brand-* con la paleta anterior (navy #003558, coral
   rosado #ffa8a6, teal). Se remapean a los del toolkit y se les da el
   mismo lavado de fondo que el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --brand-navy:        #17506f;
  --brand-navy-dark:   #0d3b57;
  --brand-navy-light:  #daeaf7;
  --brand-teal:        #0e8c80;
  --brand-teal-light:  #d6efec;
  --brand-teal-dark:   #0b6b60;
  --brand-mint:        #1fbf71;
  --brand-mint-light:  #e4f5ec;
  --brand-coral:       #ff7a33;
  --brand-coral-light: #fff1e8;
  --brand-peach:       #ff9a54;
  --brand-peach-light: #fff1e8;
  --brand-gold:        #b5791c;
  --ach-page:          #fbfcfe;
}
/* El botón principal usaba navy sólido: pasa al gradiente naranjo del kit */
.auth-btn--primary {
  background: var(--tk-grad) !important;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(240,94,28,.28);
  border-radius: 999px;
}
.auth-btn--primary:hover { filter: brightness(1.04); transform: translateY(-2px); }
/* El lavado, igual que en el blog y las páginas Astro */
body.auth-page, body:has(.auth-card), body:has(.auth-shell) {
  background-image: var(--tk-wash);
  background-repeat: no-repeat;
  /* Anclado al viewport, no al documento: con altura fija (680px) el lavado
     se cortaba en seco a media página en formularios largos como el registro.
     Con `fixed` el área de referencia es la pantalla y no hay costura. */
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: top center;
}

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