/* ═══════════════════════════════════════════
   TEACHERS UNITED — estilos globales
   ═══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --violet-950: #1C041F;
  --violet-900: #2D0730;
  --violet-800: #4D0050;
  --violet-700: #6B006B;
  --violet:     #8C008C;   /* violeta oficial de marca */
  --violet-400: #B84DB8;
  --violet-200: #EDCCED;
  --violet-100: #F8E8F8;
  --violet-50:  #FCF6FC;
  --yellow:     #FADC14;   /* amarillo oficial de marca */
  --yellow-600: #E3C400;
  --yellow-100: #FEF7CC;
  --ink:        #1C1024;
  --text:       #4A3D55;
  --muted:      #7B6E86;
  --line:       #EEDFEE;
  --white:      #FFFFFF;

  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 32px;
  --shadow-sm: 0 1px 2px rgba(45,7,48,.06), 0 2px 8px rgba(45,7,48,.05);
  --shadow:    0 10px 30px -10px rgba(45,7,48,.18), 0 2px 6px rgba(45,7,48,.05);
  --shadow-lg: 0 30px 60px -20px rgba(45,7,48,.35);

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 76px;
  --ease: cubic-bezier(.22,.8,.26,1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.65; color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.i { width: 1.25em; height: 1.25em; flex-shrink: 0; display: inline-block; vertical-align: middle; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section--tint { background: var(--violet-50); }
.section--dark { background: var(--violet-900); color: rgba(255,255,255,.78); }
.section--dark h2, .section--dark h3 { color: var(--white); }

/* ── Tipografía ── */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text); max-width: 60ch; }
.hl { color: var(--violet); }
.hl-y {
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
  padding: 0 .08em;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--yellow-600); border-radius: 2px; }
.section--dark .eyebrow { color: var(--yellow); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 + p { margin-top: 18px; }

/* ── Logo ── */
.logo {
  font-weight: 800; font-size: 1.75rem; letter-spacing: -.04em; line-height: 1;
  color: var(--violet-900); display: inline-flex; align-items: baseline;
}
.logo b { color: var(--yellow-600); font-weight: 800; }
.logo--light { color: var(--white); }
.logo--light b { color: var(--yellow); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  padding: 14px 26px; border-radius: 999px; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
}
.btn .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--yellow); color: var(--violet-950); box-shadow: 0 8px 20px -8px rgba(227,196,0,.7); }
.btn-primary:hover { background: var(--yellow-600); transform: translateY(-2px); }
.btn-violet { background: var(--violet); color: var(--white); box-shadow: 0 8px 20px -8px rgba(140,0,140,.6); }
.btn-violet:hover { background: var(--violet-700); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--violet-900); background: var(--white); }
.btn-ghost:hover { border-color: var(--violet-400); color: var(--violet); }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,.35); color: var(--white); }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--violet); }
.link-arrow .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover .i { transform: translateX(4px); }

/* ═══ HEADER ═══ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  transition: background .35s, box-shadow .35s, color .35s;
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 32px; }
.site-header.is-solid, .site-header.is-open, .site-header.on-light { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .logo { color: var(--white); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .logo b { color: var(--yellow); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .nav a { color: rgba(255,255,255,.88); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .nav a:hover { color: var(--white); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .nav-toggle { color: var(--white); }

.nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nav a {
  font-size: .92rem; font-weight: 500; color: var(--text);
  padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s;
}
.nav a:hover { color: var(--violet); }
.nav a[aria-current="page"] { color: var(--violet); background: var(--violet-100); }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: var(--white); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; color: var(--violet-900); }
.nav-toggle .i { width: 26px; height: 26px; }
.nav-toggle .i-x { display: none; }
.is-open .nav-toggle .i-menu { display: none; }
.is-open .nav-toggle .i-x { display: block; }
.mobile-only { display: none; }

@media (max-width: 1040px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-cta { order: 2; }
  .site-header .container { gap: 12px; }
  .site-header.is-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    /* absolute: el backdrop-filter del header es el contenedor de los fixed */
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    background: var(--white); padding: 24px var(--gutter) 40px; overflow-y: auto; border-top: 1px solid var(--line);
  }
  .site-header.is-open .nav a { font-size: 1.15rem; padding: 14px 16px; border-radius: var(--radius-sm); }
  .site-header.is-open .nav .mobile-only { display: flex; margin-top: 16px; }
  .site-header.is-open .nav .mobile-only.btn { justify-content: center; }
}
@media (max-width: 480px) {
  .header-cta .btn-primary { padding: 9px 14px; font-size: .82rem; }
  .logo { font-size: 1.5rem; }
}

/* ═══ HERO SCROLL ═══ */
#hero-wrap { position: relative; }
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: #FFFFFF;
}
.hs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hs-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(28,4,31,.45) 0%, rgba(28,4,31,.1) 14%, rgba(28,4,31,0) 24%);
}
.hs-loader { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: var(--yellow); z-index: 20; transition: opacity .6s, width .2s; }
.hs-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--white); font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  padding: 12px 18px 10px; border-radius: 999px;
  background: rgba(45,7,48,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s;
}

/* Notas a los costados de la protagonista. --np (0 → 1) lo maneja hero-scroll.js
   Grilla de 3 columnas (notas · niña · notas); las notas se alternan en filas escalonadas */
.hero-notes {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: 1fr 38vw 1fr; grid-template-rows: repeat(7, 1fr);
  column-gap: 8px; padding: calc(var(--header-h) + 16px) var(--gutter) 24px;
}
.hnote {
  --np: 0; --rot: -2deg; --dx: 40px;
  width: clamp(220px, 21vw, 310px); align-self: center;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 20px;
  background: rgba(255,255,255,.97); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -18px rgba(45,7,48,.35), 0 2px 6px rgba(45,7,48,.06);
  opacity: var(--np);
  transform: translateX(calc((1 - var(--np)) * var(--dx))) rotate(var(--rot)) scale(calc(.86 + .14 * var(--np)));
  will-change: transform, opacity;
}
.hnote--l { grid-column: 1; justify-self: end; --rot: -2deg; --dx: 48px; }
.hnote--r { grid-column: 3; justify-self: start; --rot: 2deg; --dx: -48px; }
.hnote--1 { grid-row: 1 / 3; }
.hnote--2 { grid-row: 2 / 4; }
.hnote--3 { grid-row: 3 / 5; --rot: 1.5deg; }
.hnote--4 { grid-row: 4 / 6; --rot: -1.5deg; }
.hnote--5 { grid-row: 5 / 7; }
.hnote--6 { grid-row: 6 / 8; }
.hnote p { font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.4; color: var(--text); }
.hnote strong { color: var(--ink); font-weight: 600; }
.hnote-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--violet-100); color: var(--violet);
}
.hnote-ic .i { width: 21px; height: 21px; }
.hnote-ic--y { background: var(--yellow-100); color: #8A6D00; }
.hnote--title { width: clamp(240px, 23vw, 340px); flex-direction: column; gap: 10px; padding: 20px; }
.hnote--title h1 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.hnote--cta { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
.hnote--cta .btn { width: 100%; }

/* Pantallas bajas: notas más compactas */
@media (min-width: 900px) and (max-height: 760px) {
  .hnote { padding: 12px 14px; gap: 10px; }
  .hnote-ic { width: 32px; height: 32px; border-radius: 10px; }
  .hnote-ic .i { width: 18px; height: 18px; }
  .hnote--title { padding: 14px 16px; gap: 6px; }
  .hnote--title h1 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
  .hnote--cta .btn { padding: 10px 16px; font-size: .86rem; }
}

/* Pantallas angostas: las notas se apilan arriba de la imagen */
@media (max-width: 899px) {
  .hero-notes {
    display: flex; flex-direction: column; gap: 8px;
    padding: calc(var(--header-h) + 8px) var(--gutter) 0;
  }
  .hnote, .hnote--title {
    width: auto; max-width: 88%; padding: 10px 14px; gap: 10px; align-items: center; border-radius: 16px;
  }
  .hnote--l { align-self: flex-start; --dx: -30px; }
  .hnote--r { align-self: flex-end; --dx: 30px; }
  .hnote--title { flex-direction: row; }
  .hnote--title h1 { font-size: 1.3rem; }
  .hnote p { font-size: .88rem; }
  .hnote-ic { width: 32px; height: 32px; border-radius: 10px; }
  .hnote-ic .i { width: 18px; height: 18px; }
  .hnote--cta { flex-direction: row; padding: 8px; max-width: 100%; align-self: stretch; }
  .hnote--cta .btn { padding: 10px 12px; font-size: .82rem; flex: 1; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .hero-notes { gap: 5px; padding-top: calc(var(--header-h) + 4px); }
  .hnote, .hnote--title { padding: 7px 12px; }
  .hnote p { font-size: .78rem; line-height: 1.3; }
  .hnote--title h1 { font-size: 1.05rem; }
  .hnote-ic { width: 26px; height: 26px; border-radius: 8px; }
  .hnote-ic .i { width: 15px; height: 15px; }
  .hnote--cta { padding: 6px; }
  .hnote--cta .btn { padding: 8px 10px; }
}
@media (max-width: 899px) { .hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hnote { --np: 1; }
}

/* Fila de botones (heroes internos y bandas de CTA) */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
@media (max-width: 767px) { .hero-cta .btn { flex: 1 1 100%; } }

/* ═══ PAGE HERO (páginas internas) ═══ */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 110px)) 0 clamp(64px, 8vw, 110px);
  background: radial-gradient(1200px 500px at 85% -10%, rgba(184,77,184,.55), transparent 60%),
              radial-gradient(700px 400px at 0% 110%, rgba(250,220,20,.18), transparent 60%),
              var(--violet-900);
  color: rgba(255,255,255,.82);
}
.page-hero h1 { color: var(--white); max-width: 18ch; margin-bottom: 20px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.page-hero h1 .y { color: var(--yellow); }
.page-hero .lead { color: rgba(255,255,255,.82); }
.page-hero .eyebrow { color: var(--yellow); }
.page-hero .eyebrow::before { background: var(--yellow); }
.page-hero .hero-cta { margin: 32px 0 0; }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero-grid .ph { aspect-ratio: 4/3.2; }
.page-hero .dots {
  position: absolute; right: -40px; bottom: -40px; width: 280px; height: 280px; opacity: .25;
  background-image: radial-gradient(var(--yellow) 2.2px, transparent 2.6px); background-size: 22px 22px;
  pointer-events: none;
}
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } }

/* ═══ PLACEHOLDER DE IMAGEN ═══ */
.ph {
  position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(250,220,20,.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(184,77,184,.45), transparent 50%),
    linear-gradient(135deg, var(--violet-100), var(--violet-200));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--violet-700); text-align: center; padding: 24px;
  border: 1.5px dashed rgba(140,0,140,.28);
}
.ph .i { width: 40px; height: 40px; opacity: .7; }
.ph span { font-size: .8rem; font-weight: 600; letter-spacing: .04em; max-width: 26ch; opacity: .85; }
.ph--dark {
  background: radial-gradient(circle at 20% 15%, rgba(250,220,20,.18), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.75);
}

/* ═══ TRUST BAR ═══ */
.trust { background: var(--violet-950); color: rgba(255,255,255,.85); padding: 22px 0; position: relative; z-index: 3; }
.trust ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; }
.trust .i { color: var(--yellow); width: 20px; height: 20px; }
@media (max-width: 767px) { .trust ul { display: grid; grid-template-columns: 1fr 1fr; } .trust li { font-size: .8rem; align-items: flex-start; } }

/* ═══ CARDS / GRIDS ═══ */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px); position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--violet-200); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .95rem; }
.icon-badge {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 20px;
  display: grid; place-items: center;
  background: var(--violet-100); color: var(--violet);
}
.icon-badge .i { width: 26px; height: 26px; }
.icon-badge--y { background: var(--yellow-100); color: #9A6B00; }
.icon-badge--dark { background: rgba(255,255,255,.08); color: var(--yellow); }
.section--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section--dark .card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); box-shadow: none; }
.section--dark .card p { color: rgba(255,255,255,.7); }

/* Beneficios: tarjeta destacada */
.benefits { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: 1fr; gap: clamp(16px, 2vw, 24px); }
.benefit-feature {
  grid-row: span 2; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  background: var(--violet); color: rgba(255,255,255,.85);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
}
.benefit-feature::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250,220,20,.35), transparent 70%);
}
.benefit-feature .big { font-size: clamp(4rem, 9vw, 6.5rem); font-weight: 800; color: var(--yellow); line-height: .9; letter-spacing: -.05em; }
.benefit-feature h3 { color: var(--white); font-size: 1.5rem; margin: 12px 0 10px; }
@media (max-width: 1024px) { .benefits { grid-template-columns: 1fr 1fr; } .benefit-feature { grid-column: span 2; grid-row: auto; } }
@media (max-width: 640px) { .benefits { grid-template-columns: 1fr; } .benefit-feature { grid-column: auto; } }

/* Niveles */
.level {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.level:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.level-top { padding: 26px 26px 22px; background: var(--violet-100); position: relative; }
.level:nth-child(2) .level-top { background: #FDF3C4; }
.level:nth-child(3) .level-top { background: #F1DDF1; }
.level:nth-child(4) .level-top { background: var(--violet); color: var(--white); }
.level:nth-child(4) .level-top h3 { color: var(--white); }
.level:nth-child(4) .level-top .level-age { color: rgba(255,255,255,.8); }
.level-top .i { width: 34px; height: 34px; color: var(--violet); margin-bottom: 18px; }
.level:nth-child(4) .level-top .i { color: var(--yellow); }
.level-top h3 { font-size: 1.45rem; }
.level-age { font-size: .88rem; font-weight: 500; color: var(--muted); margin-top: 4px; }
.level-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.level-body ul { list-style: none; display: grid; gap: 8px; font-size: .92rem; }
.level-body li { display: flex; gap: 10px; align-items: flex-start; }
.level-body li .i { width: 18px; height: 18px; color: var(--violet); margin-top: 3px; }
.level-body .link-arrow { margin-top: auto; font-size: .92rem; }

/* Split (texto + media) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split .ph { aspect-ratio: 5/4.4; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

.checklist { list-style: none; display: grid; gap: 14px; margin: 28px 0 32px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--violet-950); display: grid; place-items: center; flex-shrink: 0; }
.checklist .tick .i { width: 16px; height: 16px; stroke-width: 2.5; }
.checklist strong { color: var(--ink); font-weight: 600; display: block; }
.section--dark .checklist strong { color: var(--white); }

/* Modalidades */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.mode { border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; }
.mode--featured { background: var(--violet-900); border-color: var(--violet-900); color: rgba(255,255,255,.8); }
.mode--featured h3 { color: var(--white); }
.mode .tag { align-self: flex-start; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--violet-100); color: var(--violet); margin-bottom: 20px; }
.mode--featured .tag { background: var(--yellow); color: var(--violet-950); }
.mode h3 { font-size: 1.7rem; margin-bottom: 10px; }
.mode .from { margin: 22px 0 6px; font-size: .9rem; }
.mode .from strong { font-size: 2.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.mode--featured .from strong { color: var(--yellow); }
.mode .checklist { margin: 20px 0 30px; }
.mode .checklist .tick { width: 24px; height: 24px; }
.mode--featured .checklist .tick { background: rgba(250,220,20,.18); color: var(--yellow); }
.mode .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 800px) { .modes { grid-template-columns: 1fr; } }

/* Partners */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.partner {
  display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
}
.partner img { width: 84px; height: 84px; object-fit: contain; border-radius: 14px; flex-shrink: 0; }
.partner strong { color: var(--ink); display: block; font-size: 1.02rem; line-height: 1.3; }
.partner span { font-size: .88rem; color: var(--muted); }
@media (max-width: 560px) { .partners { grid-template-columns: 1fr; } }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
.step { position: relative; padding-top: 64px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--violet-200);
}
.section--dark .step::before { color: rgba(250,220,20,.35); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .94rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Founder */
.founder { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.founder .ph { aspect-ratio: 4/5; }
.founder blockquote { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 500; line-height: 1.45; color: var(--ink); letter-spacing: -.015em; margin: 8px 0 24px; }
.founder .who strong { color: var(--ink); display: block; font-size: 1.05rem; }
.founder .who span { color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder .ph { max-width: 380px; } }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: var(--violet-200); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--violet); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq .answer { padding: 0 26px 24px; font-size: .98rem; max-width: 70ch; }

/* CTA / Agenda */
.cta-band {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: radial-gradient(800px 400px at 100% 0%, rgba(184,77,184,.6), transparent 60%), var(--violet-900);
  color: rgba(255,255,255,.82);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 64px);
}
.cta-band h2 { color: var(--white); margin-bottom: 16px; }
.cta-band .contact-list { list-style: none; display: grid; gap: 12px; margin: 28px 0; }
.cta-band .contact-list a { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-weight: 500; }
.cta-band .contact-list .i { color: var(--yellow); }
.calendly-box { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.calendly-inline-widget { min-width: 280px; height: 820px; }
@media (max-width: 960px) { .cta-band { grid-template-columns: 1fr; } }

/* ═══ PROGRAMA ═══ */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--violet-100); border-radius: 999px; margin-bottom: 36px; }
.tabs button { padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--violet-700); transition: background .25s, color .25s, box-shadow .25s; }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--violet); box-shadow: var(--shadow-sm); }
/* Regular = violeta, Flexible = amarillo */
.tabs button[data-tone="violet"][aria-selected="true"] { background: var(--violet); color: var(--white); }
.tabs button[data-tone="yellow"][aria-selected="true"] { background: var(--yellow); color: var(--violet-950); }
.tab-panel[hidden] { display: none; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.grade { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--white); }
.grade header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.grade h3 { font-size: 1.12rem; }
.grade .hours { font-size: .78rem; font-weight: 600; color: var(--violet); background: var(--violet-100); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips li { font-size: .82rem; padding: 5px 11px; border-radius: 999px; background: var(--violet-50); border: 1px solid var(--line); color: var(--text); }
.note { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--yellow-100); color: #5C4300; margin-top: 24px; }
.note .i { color: #9A6B00; margin-top: 2px; }

/* Precios */
.price-toggle { display: flex; justify-content: center; margin-bottom: 40px; }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.price-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); max-width: 940px; margin: 0 auto; }
.price {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price.is-featured { border: 2px solid var(--violet); }
.price h3 { font-size: 1.15rem; }
.price .sub { font-size: .85rem; color: var(--muted); min-height: 1.4em; }
.price .amount { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.price .amount strong { font-size: 2.8rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.price .amount span { font-size: .85rem; color: var(--muted); font-weight: 500; }
.price .enroll { font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.price ul { list-style: none; display: grid; gap: 10px; font-size: .9rem; margin-bottom: 26px; }
.price li { display: flex; gap: 10px; align-items: flex-start; }
.price li .i { width: 17px; height: 17px; color: var(--violet); margin-top: 3px; stroke-width: 2.25; }
.price li.plus { color: var(--violet-700); font-weight: 600; }
.price .btn { margin-top: auto; }
.price-foot { text-align: center; font-size: .88rem; color: var(--muted); margin-top: 28px; }
@media (max-width: 1024px) { .price-grid, .price-grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid, .price-grid[data-count="3"] { grid-template-columns: 1fr; } }

/* Stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.stat strong { display: block; font-size: 2.2rem; font-weight: 800; color: var(--yellow); letter-spacing: -.04em; line-height: 1.1; }
.stat span { font-size: .9rem; }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ═══ FOOTER ═══ */
.site-footer { background: var(--violet-950); color: rgba(255,255,255,.7); padding: 72px 0 32px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-grid h4 { color: var(--white); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a:hover { color: var(--yellow); }
.footer-grid .contact a { display: inline-flex; align-items: center; gap: 10px; }
.footer-grid .contact .i { width: 18px; height: 18px; color: var(--yellow); }
.footer-about p { margin: 18px 0 22px; max-width: 34ch; }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--white); transition: background .25s, color .25s; }
.socials a:hover { background: var(--yellow); color: var(--violet-950); }
.socials .i { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: span 2; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-about { grid-column: auto; } }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: var(--white); box-shadow: 0 12px 28px -8px rgba(37,211,102,.7);
  transition: transform .3s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float .i { width: 30px; height: 30px; }

/* ═══ Animación de entrada ═══ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.cta-band--row { grid-template-columns: 1fr auto; align-items: center; }
.cta-band--row h2 { margin-bottom: 8px; }
@media (max-width: 960px) { .cta-band--row { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; border-radius: 16px; }
  .tabs button { padding: 10px 8px; font-size: .84rem; border-radius: 12px; }
}

/* ═══ BENEFICIOS: scroll horizontal ═══ */
.hscroll { overflow: hidden; }
.hscroll-head { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.hscroll-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.hscroll-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll-viewport::-webkit-scrollbar { display: none; }
.hscroll-track {
  display: flex; gap: clamp(16px, 2vw, 24px); width: max-content;
  /* alinea la primera card con el contenedor */
  padding: 8px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 16px;
  will-change: transform;
}
.hscroll-track > * { scroll-snap-align: start; flex-shrink: 0; width: clamp(270px, 26vw, 360px); min-height: clamp(360px, 44vh, 440px); }
.hscroll-track > .benefit-feature { width: clamp(290px, 32vw, 440px); grid-row: auto; }
.hscroll-track .card { display: flex; flex-direction: column; }
.hscroll-track .card .icon-badge { margin-bottom: auto; }
.hscroll-track .card h3 { margin-top: 40px; font-size: 1.35rem; }
.hscroll-progress { height: 3px; background: var(--line); border-radius: 3px; margin-top: 28px; overflow: hidden; }
.hscroll-progress span { display: block; height: 100%; width: 100%; background: var(--violet); transform-origin: left; transform: scaleX(0); }

/* cuando GSAP toma el control: se fija la sección y las cards se mueven con el scroll */
.hscroll.is-pinned { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 24px) 0 40px; }
.hscroll.is-pinned .hscroll-viewport { overflow: visible; scroll-snap-type: none; }

@media (max-width: 860px) { .hscroll-head { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hscroll-track > *, .hscroll-track > .benefit-feature { width: 80vw; min-height: 340px; }
  .hscroll-head .lead { font-size: .98rem; }
}
/* pantallas bajas (notebooks): más compacto para que entre todo mientras está fijado */
@media (max-height: 820px) {
  .hscroll.is-pinned { padding-top: calc(var(--header-h) + 8px); padding-bottom: 20px; }
  .hscroll.is-pinned .hscroll-head { margin-bottom: 20px; }
  .hscroll.is-pinned .hscroll-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .hscroll.is-pinned .hscroll-head .lead { font-size: .95rem; }
  .hscroll.is-pinned .hscroll-track > * { min-height: 0; }
  .hscroll.is-pinned .hscroll-track .card h3 { margin-top: 28px; }
  .hscroll.is-pinned .benefit-feature .big { font-size: clamp(3.4rem, 7vw, 5rem); }
  .hscroll.is-pinned .hscroll-progress { margin-top: 16px; }
}
@media (max-height: 700px) and (min-width: 861px) {
  .hscroll.is-pinned .hscroll-head .lead { display: none; }
}

/* ═══ REDES SOCIALES ═══ */
.social-card {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.social-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.social-top {
  position: relative; overflow: hidden; height: 132px; padding: 24px 26px;
  display: flex; align-items: flex-end; justify-content: space-between; color: var(--white);
}
.social-top .i { width: 44px; height: 44px; position: relative; z-index: 1; }
.social-top span { position: relative; z-index: 1; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
/* ícono grande de fondo, decorativo */
.social-top::after {
  content: ''; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.14); transition: transform .5s var(--ease);
}
.social-card:hover .social-top::after { transform: scale(1.25); }
/* portadas en amarillo de marca con íconos violeta */
.social-top { background: var(--yellow); color: var(--violet); }
.social-top span { color: var(--violet); opacity: 1; }
.social-top::after { background: rgba(255,255,255,.28); }
.social-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.social-body h3 { font-size: 1.25rem; }
.social-body p { font-size: .95rem; }
.social-handle { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: auto; padding-top: 8px; }
.social-body .link-arrow { font-size: .95rem; }
.social-card:hover .link-arrow .i { transform: translateX(4px); }

/* ═══ FOTOS ═══ */
.photo { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow); }
.split .photo--grad { aspect-ratio: 1 / 1; object-position: center top; }
.founder .photo--portrait { aspect-ratio: 4 / 5; object-position: center 30%; }
@media (max-width: 860px) { .founder .photo--portrait { max-width: 380px; } }
/* en columnas angostas (junto a una foto) los logos van uno debajo del otro */
.split .partners { grid-template-columns: 1fr; max-width: 440px; gap: 12px; }
.split .partner { padding: 14px 18px; }
.split .partner img { width: 64px; height: 64px; }
.page-hero-grid .photo--hero { aspect-ratio: 5 / 4; object-position: center 20%; box-shadow: var(--shadow-lg); }
.split .photo--square { aspect-ratio: 1 / 1; }

/* Cards de instituciones con link al sitio */
.partner--link { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.partner--link > div { flex: 1; }
.partner--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--violet-200); }
.partner-go { width: 20px; height: 20px; color: var(--violet); flex-shrink: 0; transform: rotate(-45deg); transition: transform .3s var(--ease); }
.partner--link:hover .partner-go { transform: rotate(-45deg) translateX(3px); }
.page-hero-grid .photo--center { object-position: center 45%; }

/* títulos chicos sobre tarjetas violeta oscuro: texto blanco, la rayita sigue amarilla */
.cta-band .eyebrow, .mode--featured .eyebrow, .benefit-feature .eyebrow { color: var(--white); }
.cta-band .eyebrow::before, .mode--featured .eyebrow::before, .benefit-feature .eyebrow::before { background: var(--yellow); }

/* Isólogo: positivo (negro) sobre fondos claros, negativo (blanco) sobre fondos oscuros */
.logo img { height: 30px; width: auto; display: block; }
.logo .logo-neg { display: none; }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .logo .logo-pos { display: none; }
.site-header--over:not(.is-solid):not(.is-open):not(.on-light) .logo .logo-neg { display: block; }
.logo--light img { height: 36px; }
@media (max-width: 480px) { .logo img { height: 26px; } }

/* Celular: el contenido que sigue al hero se superpone mientras el hero crece (lo mueve hero-scroll.js) */
#after-hero-wrap { position: relative; z-index: 3; background: var(--white); }

/* ═══ HERO FAMILIA (portada del brochure) ═══ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero--family {
  /* la familia entra completa (con el portalápices) y alineada al borde del contenido */
  --fam-h: min(70vh, 640px, calc(50vw / 1.1145));
  --fam-right: max(calc((50vw - var(--fam-w)) / 2 + var(--gutter)), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --fam-w: calc(var(--fam-h) * 1.1145);   /* proporción de la foto 1324x1188 */
  background: var(--violet);
}
.hf-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 70% 40%, #A3149F 0%, #8C008C 45%, #5E0063 100%);
}
/* resplandor cálido detrás de la familia, con rayos suaves */
.hf-glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: calc(var(--fam-w) * 1.25); aspect-ratio: 1;
  right: calc(var(--fam-right) - var(--fam-w) * 0.12); bottom: calc(var(--fam-h) * -0.35);
  background:
    radial-gradient(circle, rgba(250,220,20,.55) 0%, rgba(255,150,60,.35) 28%, rgba(255,120,80,0) 62%),
    repeating-conic-gradient(from 0deg, rgba(255,230,120,.16) 0deg 6deg, rgba(255,230,120,0) 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 66%); mask: radial-gradient(circle, #000 25%, transparent 66%);
  border-radius: 50%;
}
.hf-family {
  position: absolute; z-index: 2; bottom: 0; right: var(--fam-right);
  height: var(--fam-h); width: auto; max-width: none;
  filter: drop-shadow(0 30px 40px rgba(28,4,31,.35));
}
/* isólogo grande en piezas: arranca centrado y viaja hasta el logo del menú */
.hf-logo {
  /* centrado con left/top calculados (sin transform: la animación usa el transform) */
  --w: min(56vw, 720px); --cy: 46%;
  position: absolute; z-index: 101;
  width: var(--w); height: calc(var(--w) / 1.893); aspect-ratio: 4971 / 2626;
  left: calc(50% - var(--w) / 2); top: calc(var(--cy) - var(--w) / 1.893 / 2);
}
.hf-logo > * { position: absolute; display: block; }
.hf-t   { left: 0;      top: 0;      width: 41.52%; height: 96.65%; }
.hf-u   { left: 45.18%; top: 24.98%; width: 41.16%; height: 75.02%; }
.hf-uml { left: 45.18%; top: 0;      width: 41.16%; height: 16.30%; }
.hf-dot { left: 89.30%; top: 76.96%; width: 10.70%; height: 19.69%; background: var(--yellow); }

.hf-content { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding-top: var(--header-h); pointer-events: none; }
.hf-content a, .hf-content button { pointer-events: auto; }
.hf-copy { max-width: 560px; }
.hf-pill {
  display: inline-block; padding: 8px 18px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(45,7,48,.7); color: var(--white);
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}
.hf-title { color: var(--white); font-size: clamp(2.4rem, min(5vw, 7.4vh), 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; margin-bottom: 28px; }
.hf-title-a { display: block; }
.hf-badge {
  display: inline-block; margin-top: 10px; padding: .08em .38em .12em;
  background: var(--yellow); color: var(--violet-900); border-radius: .32em;
  text-transform: uppercase; letter-spacing: -.01em; transform: rotate(-3deg);   /* GSAP lo anima hasta -3° */
  box-shadow: 0 14px 30px -12px rgba(28,4,31,.55);
}
.hf-levels {
  list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  padding: 9px 18px; border-radius: 999px; background: var(--white); margin-bottom: 16px;
  box-shadow: 0 10px 24px -14px rgba(28,4,31,.6);
}
.hf-levels li { color: var(--violet); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .02em; }
.hf-levels li + li::before { content: '•'; color: var(--yellow-600); margin: 0 .5em; }
/* frase destacada: caja oscura translúcida para que se lea sobre cualquier fondo */
.hf-statement {
  position: relative; max-width: 470px; padding: 14px 18px 14px 22px; margin-bottom: 26px;
  border-radius: 14px; background: rgba(28,4,31,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white); font-weight: 600; font-size: 1.02rem; line-height: 1.45;
}
.hf-statement::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--yellow); }
.hf-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hf-community {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  right: calc(var(--fam-w) * 0.74 - 60px); bottom: calc(var(--fam-h) * 0.66);
  padding: 12px 16px; border-radius: 16px; background: rgba(45,7,48,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white);
}
.hf-community .i { width: 34px; height: 34px; color: var(--yellow); }
.hf-community strong { display: block; color: var(--yellow); text-transform: uppercase; font-size: .86rem; letter-spacing: .03em; line-height: 1.15; }
.hf-community span { display: block; font-size: .82rem; line-height: 1.3; }

/* Celular: composición vertical como el brochure */
@media (max-width: 767px) {
  .hero--family { --fam-w: 112vw; --fam-h: calc(var(--fam-w) / 1.1145); }
  .hf-family { right: auto; left: calc(50% - var(--fam-w) / 2); width: var(--fam-w); height: auto; }
  .hf-glow { right: auto; left: 50%; margin-left: calc(var(--fam-w) * -0.62); bottom: calc(var(--fam-h) * -0.3); }
  .hf-logo { --w: 74vw; --cy: 42%; }
  .hf-content { align-items: flex-start; padding-top: calc(var(--header-h) + 6px); }
  .hf-grid { height: 100%; }
  .hf-copy { max-width: none; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; }
  .hf-pill { font-size: .66rem; padding: 6px 12px; margin-bottom: 14px; }
  .hf-title { font-size: clamp(2.1rem, 10vw, 2.8rem); margin-bottom: 0; }
  .hf-bottom { margin-top: auto; padding-bottom: 18px; display: flex; flex-direction: column; align-items: center; }
  .hf-levels { padding: 6px 12px; margin-bottom: 10px; justify-content: center; }
  .hf-levels li { font-size: .62rem; }
  .hf-statement { font-size: .8rem; text-align: left; margin-bottom: 0; padding: 10px 14px 10px 18px; margin-right: 62px; }   /* deja lugar al botón de WhatsApp */
  .hf-cta { display: none; }
  .hf-community { right: auto; left: 12px; bottom: calc(var(--fam-h) * 0.72); padding: 8px 10px; gap: 8px; }
  .hf-community .i { width: 24px; height: 24px; }
  .hf-community strong { font-size: .68rem; }
  .hf-community span { font-size: .66rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero--family { --fam-w: 96vw; }
  .hf-title { font-size: 2rem; }
}

/* Palabra completa "Teachers Ünited." (proporciones del logo 5189×511) */
.hf-word {
  --w: min(84vw, 1100px); --cy: 46%;
  position: absolute; z-index: 4;
  width: var(--w); height: calc(var(--w) / 10.155); aspect-ratio: 5189 / 511;
  left: calc(50% - var(--w) / 2); top: calc(var(--cy) - var(--w) / 10.155 / 2);
}
.hf-word > * { position: absolute; top: 0; height: 100%; display: block; }
.hf-w-t       { left: 0;       width: 13.355%; }
.hf-w-eachers { left: 14.01%;  width: 39.488%; }
.hf-w-u       { left: 57.795%; width: 7.574%; }
.hf-w-nited   { left: 66.313%; width: 30.738%; }
.hf-w-dot     { left: 98.015%; width: 1.985%; top: 77.1%; height: 19.57%; background: var(--yellow); }
.hf-word-slot { width: clamp(230px, 24vw, 360px); aspect-ratio: 5189 / 511; margin-bottom: 20px; }
.hf-word-slot img { width: 100%; height: 100%; visibility: hidden; }   /* solo se ve si no hay animación */
@media (max-width: 767px) {
  .hf-word { --w: 88vw; --cy: 42%; }
  .hf-word-slot { width: 210px; margin: 0 auto 12px; }
}
/* Programa: etiqueta de materias Flexible PRO y aclaraciones */
.pro-label { margin: 14px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.note--info { background: var(--violet-100); color: var(--violet-800); margin-top: 0; }
.note--info .i { color: var(--violet); }

/* Hero en pantallas de escritorio bajas (ventanas chicas, notebooks): todo más compacto */
@media (min-width: 768px) and (max-height: 720px) {
  .hf-word-slot { width: clamp(200px, 20vw, 300px); margin-bottom: 12px; }
  .hf-pill { margin-bottom: 12px; padding: 6px 14px; font-size: .74rem; }
  .hf-title { margin-bottom: 16px; }
  .hf-badge { margin-top: 6px; }
  .hf-levels { margin-bottom: 10px; padding: 7px 14px; }
  .hf-levels li { font-size: .78rem; }
  .hf-statement { margin-bottom: 14px; padding: 10px 14px 10px 18px; font-size: .9rem; }
  .hf-cta .btn { padding: 11px 20px; font-size: .88rem; }
}
@media (min-width: 768px) and (max-height: 540px) {
  .hf-content { padding-top: calc(var(--header-h) - 8px); }
  .hf-word-slot { width: 180px; margin-bottom: 8px; }
  .hf-pill { margin-bottom: 8px; font-size: .66rem; }
  .hf-title { font-size: 2rem; margin-bottom: 10px; }
  .hf-levels { margin-bottom: 8px; padding: 5px 12px; }
  .hf-levels li { font-size: .68rem; }
  .hf-statement { font-size: .8rem; margin-bottom: 10px; padding: 8px 12px 8px 16px; max-width: 400px; }
  .hf-cta .btn { padding: 8px 16px; font-size: .8rem; }
}

/* Franja debajo del hero: contadores de Comunidad global + sellos */
.trust-inner { display: flex; align-items: center; gap: 20px 40px; }
.trust-inner ul { flex: 1; }
.trust-stats { display: flex; align-items: center; gap: 22px; padding-right: 36px; border-right: 1px solid rgba(255,255,255,.14); flex-shrink: 0; }
.trust-stats-head { display: flex; align-items: center; gap: 10px; }
.trust-stats-head .i { width: 30px; height: 30px; color: var(--yellow); }
.trust-stats-head strong { color: var(--yellow); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; line-height: 1.15; }
.trust-stat { display: flex; flex-direction: column; line-height: 1.05; }
.trust-stat b { color: var(--white); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.trust-stat span { font-size: .78rem; color: rgba(255,255,255,.7); }
@media (max-width: 1100px) {
  .trust-inner { flex-direction: column; align-items: stretch; }
  .trust-stats { justify-content: center; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
}
.trust-inner ul { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-evenly; gap: 10px 32px; }
@media (max-width: 767px) { .trust-inner ul { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 14px; } }
.grade header { flex-wrap: wrap; row-gap: 8px; } .grade h3 { white-space: nowrap; }

/* Menú oculto mientras el isólogo hace su animación (lo maneja hero-family.js) */
.site-header { transition: background .35s, box-shadow .35s, color .35s, opacity .45s ease, transform .45s ease; }
.site-header.hf-nav-hidden:not(.is-open) { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* Indicación "Deslizá" con flecha hacia abajo */
.hs-hint--arrow { flex-direction: row; gap: 8px; padding: 10px 16px; font-size: .72rem; }
.hint-arrow { animation: hint-bounce 1.6s ease-in-out infinite; }
@keyframes hint-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hint-arrow { animation: none; } }
.price-foot p + p { margin-top: 6px; }

/* ═══ PROGRAMA: carrusel de materias por nivel ═══ */
/* el fondo de la sección cambia según el nivel que se está viendo */
.section--levels { background: #F1DDF1; transition: background-color .6s ease; }
.section--levels[data-level="middle"] { background: var(--violet); }
.section--levels[data-level="high"]   { background: #4F0055; }
.section--levels .section-head h2, .section--levels .section-head .eyebrow { transition: color .6s ease; }
.section--levels:not([data-level="primary"]) .section-head h2 { color: var(--white); }
.section--levels:not([data-level="primary"]) .section-head .eyebrow { color: var(--yellow); }
.section--levels:not([data-level="primary"]) .pro-note { background: rgba(255,255,255,.12); color: var(--white); }

.lvl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 20px; flex-wrap: wrap; }
.lvl-nav { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.lvl-btn { padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--violet-800); transition: background .3s, color .3s, box-shadow .3s; }
.lvl-btn:hover { background: rgba(255,255,255,.6); }
.lvl-btn.is-active { background: var(--white); color: var(--violet); box-shadow: var(--shadow-sm); }
.section--levels:not([data-level="primary"]) .lvl-nav { background: rgba(255,255,255,.14); }
.section--levels:not([data-level="primary"]) .lvl-btn { color: var(--white); }
.section--levels:not([data-level="primary"]) .lvl-btn:hover { background: rgba(255,255,255,.12); }
.section--levels:not([data-level="primary"]) .lvl-btn.is-active { background: var(--yellow); color: var(--violet-950); }

.car-arrows { display: flex; gap: 8px; }
.car-arrows button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--violet); box-shadow: var(--shadow-sm); transition: transform .2s, opacity .2s;
}
.car-arrows button:hover { transform: scale(1.06); }
.car-arrows button:disabled { opacity: .35; cursor: default; transform: none; }

/* la fila ocupa todo el ancho de la pantalla, alineada con el contenido */
.carousel { margin: 0 calc(50% - 50vw); }
.car-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 24px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.car-card { flex: 0 0 clamp(270px, 25vw, 320px); scroll-snap-align: start; box-shadow: var(--shadow-sm); border-color: transparent; }
@media (max-width: 560px) {
  .car-card { flex-basis: 80vw; }
  .lvl-nav { width: 100%; justify-content: space-between; }
  .lvl-btn { padding: 9px 12px; font-size: .82rem; }
  .car-arrows { display: none; }
}
.car-track { align-items: flex-start; }

/* ═══ CALENDARIOS: 3 trimestres · 2 calendarios ═══ */
.calendars { --cal-bg: #520057; position: relative; background: var(--cal-bg); color: var(--white); padding: clamp(110px, 12vw, 150px) 0; }
.cal-wave { position: absolute; left: 0; width: 100%; height: clamp(40px, 6vw, 90px); fill: var(--white); }
.cal-wave--top { top: -1px; transform: scaleY(-1); }
.cal-wave--bottom { bottom: -1px; transform: scaleY(-1); }
.cal-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: center; }

.cal-title { color: var(--white); text-transform: uppercase; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-bottom: 40px; }
.cal-t1 { display: block; font-size: clamp(2.4rem, 5vw, 3.8rem); transform: rotate(-2deg); transform-origin: left; }
.cal-t2 { display: block; margin: 10px 0 14px calc(-1 * var(--gutter)); transform: rotate(-2deg); transform-origin: left; }
.cal-t2 span {
  display: inline-block; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--violet);
  background: #E7C3EC; padding: .08em .3em .08em var(--gutter); border-radius: 0 10px 10px 0;
}
.cal-t3 { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); transform: rotate(-2deg); transform-origin: left; }

.cal-list { list-style: none; display: grid; gap: 22px; }
.cal-list h3 { color: var(--yellow); font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-transform: uppercase; font-weight: 800; margin-bottom: 6px; }
.cal-list p { display: flex; align-items: center; gap: 10px; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.35; }
.cal-list p + p { margin-top: 4px; }

/* insignias A / B */
.cal-badge {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center;
  font-size: .78rem; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.cal-badge--a { background: var(--white); color: var(--violet); }
.cal-badge--b { background: #E7C3EC; color: var(--violet-800); }
.cal-badge--ghost { visibility: hidden; }

/* diagrama del año */
.cal-chart { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); }
.cal-row { display: flex; align-items: center; gap: 12px; }
.cal-row + .cal-row { margin-top: 10px; }
.cal-months { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.cal-heads span { text-align: center; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.6); }
.cal-m { height: 40px; border-radius: 8px; transform-origin: left; }
.cal-m.t1 { background: var(--yellow); }
.cal-m.t2 { background: #F08CF2; }
.cal-m.t3 { background: var(--white); }
.cal-m.t0 { background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px); }
/* los meses se "pintan" uno tras otro al aparecer la sección */
.cal-chart.reveal .cal-m { transform: scaleX(0); transition: transform .5s var(--ease); transition-delay: calc(.15s + var(--i) * .05s); }
.cal-chart.reveal.is-in .cal-m { transform: none; }
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 18px; font-size: .82rem; color: rgba(255,255,255,.8); }
.cal-legend li { display: flex; align-items: center; gap: 7px; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; }
.cal-legend .t1 { background: var(--yellow); } .cal-legend .t2 { background: #F08CF2; } .cal-legend .t3 { background: var(--white); }
.cal-legend .t0 { background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 6px); border: 1px solid rgba(255,255,255,.3); }
.cal-notes { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.cal-notes p { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: rgba(255,255,255,.82); }
.cal-notes strong { color: var(--white); }

@media (max-width: 900px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-m { height: 30px; border-radius: 6px; }
  .cal-heads span { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .cal-chart.reveal .cal-m { transform: none; transition: none; } }
.cal-wave--top { fill: var(--violet-50); }   /* la sección de Niveles de arriba tiene fondo lila muy claro */

/* ═══ PÁGINAS LEGALES ═══ */
.legal { padding: calc(var(--header-h) + 56px) 0 96px; background: var(--violet-50); }
.legal-doc { max-width: 820px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 60px); }
.legal-doc .eyebrow { margin-bottom: 10px; }
.legal-doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
.legal-meta { color: var(--muted); font-size: .9rem; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal-doc h2 { font-size: 1.2rem; margin: 34px 0 12px; color: var(--violet-800); }
.legal-doc p, .legal-doc li { font-size: .98rem; line-height: 1.7; }
.legal-doc p + p { margin-top: 10px; }
.legal-doc ol, .legal-doc ul { padding-left: 1.4em; display: grid; gap: 8px; margin: 10px 0; }
.legal-doc ol[type="a"] { list-style-type: lower-alpha; }
.legal-doc a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc .legal-btn { margin-top: 12px; }

/* links legales en el pie */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-legal a, .footer-legal button { color: rgba(255,255,255,.65); font-size: .82rem; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--yellow); }
.footer-legal button { text-decoration: underline; text-underline-offset: 2px; }

/* ═══ AVISO Y PANEL DE COOKIES ═══ */
.ck-banner {
  position: fixed; z-index: 200; left: 50%; bottom: 20px; transform: translate(-50%, 140%);
  width: min(960px, calc(100% - 32px)); padding: 20px 24px; border-radius: 20px;
  background: var(--violet-950); color: rgba(255,255,255,.85); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  transition: transform .5s var(--ease);
}
.ck-banner.is-open { transform: translate(-50%, 0); }
.ck-banner p { flex: 1 1 380px; font-size: .9rem; line-height: 1.55; }
.ck-banner strong { color: var(--white); display: block; margin-bottom: 4px; font-size: 1rem; }
.ck-banner a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-actions .btn { padding: 11px 20px; font-size: .88rem; }
.ck-link { color: var(--white); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; padding: 11px 6px; }

.ck-modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(28,4,31,.6); backdrop-filter: blur(4px); }
.ck-modal.is-open { display: flex; }
.ck-panel { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--white); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-lg); }
.ck-panel h2 { font-size: 1.4rem; margin-bottom: 8px; }
.ck-panel > p { font-size: .92rem; margin-bottom: 18px; }
.ck-cat { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); }
.ck-cat h3 { font-size: 1rem; margin-bottom: 4px; }
.ck-cat p { font-size: .86rem; color: var(--muted); }
.ck-always { font-size: .78rem; font-weight: 600; color: var(--violet); white-space: nowrap; padding-top: 2px; }
/* interruptor */
.ck-switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; }
.ck-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ck-switch span { position: absolute; inset: 0; border-radius: 999px; background: #D9CDE0; transition: background .25s; }
.ck-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.ck-switch input:checked + span { background: var(--violet); }
.ck-switch input:checked + span::after { transform: translateX(20px); }
.ck-switch input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ck-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .ck-banner { bottom: 12px; padding: 16px; }
  .ck-actions { width: 100%; }
  .ck-actions .btn { flex: 1; }
}
.link-inline { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ck-panel a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }