/* Diseño: papel de cuaderno con cuadrícula, manchas de color de marca (rosa → lila → celeste)
   que se mueven despacio en el fondo, tarjetas redondeadas y resaltador amarillo para lo importante. */
:root {
  --fondo: #fbfaff;
  --superficie: #ffffff;
  --tinta: #1e1a2e;
  --tinta-marca: #2e2c6b;
  --suave: #5f5a78;
  --lila: #ab9dff;
  --lila-fuerte: #6b4fd8;
  --lila-suave: #f0ecff;
  --rosa: #ffb2f7;
  --magenta: #ec3f91;
  --celeste: #22b3f1;
  --resaltador: #fbf07a;
  --sobre-resaltador: #1e1a2e;
  --sobre-boton: #ffffff;
  --oscuro: #1a1846;
  --sobre-oscuro: #f4f2ff;
  --linea: #e6e0fb;
  --cuadricula: rgba(107, 79, 216, 0.07);
  --mancha: 0.55;
  --sombra: 0 18px 40px -22px rgba(60, 40, 140, 0.35);

  --letra-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --letra-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-mano: "Caveat", "Comic Sans MS", cursive;
  --letra-dato: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radio: 22px;
  --ancho: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #13111d;
    --superficie: #1d1a2b;
    --tinta: #f2effb;
    --tinta-marca: #e2ddff;
    --suave: #ada6c6;
    --lila: #8f86e8;
    --lila-fuerte: #ab9dff;
    --lila-suave: #231d37;
    --rosa: #e58fdc;
    --magenta: #ff6fb2;
    --celeste: #4cc4f5;
    --sobre-boton: #13111d;
    --oscuro: #0d0b18;
    --linea: #302a46;
    --cuadricula: rgba(171, 157, 255, 0.06);
    --mancha: 0.28;
    --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #13111d;
  --superficie: #1d1a2b;
  --tinta: #f2effb;
  --tinta-marca: #e2ddff;
  --suave: #ada6c6;
  --lila: #8f86e8;
  --lila-fuerte: #ab9dff;
  --lila-suave: #231d37;
  --rosa: #e58fdc;
  --magenta: #ff6fb2;
  --celeste: #4cc4f5;
  --sobre-boton: #13111d;
  --oscuro: #0d0b18;
  --linea: #302a46;
  --cuadricula: rgba(171, 157, 255, 0.06);
  --mancha: 0.28;
  --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; overflow-x: hidden;
  background: var(--fondo); color: var(--tinta);
  font-family: var(--letra-texto); font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lila-fuerte); }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; color: var(--tinta-marca); }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--lila-fuerte); outline-offset: 3px; border-radius: 8px; }

.envoltura {
  max-width: var(--ancho); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.etiqueta { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lila-fuerte); }
mark {
  background: linear-gradient(transparent 10%, var(--resaltador) 10%, var(--resaltador) 90%, transparent 90%);
  color: var(--sobre-resaltador); padding: 0 0.12em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.aviso-prototipo {
  justify-self: start; font-family: var(--letra-dato); font-size: 0.75rem;
  background: var(--lila-suave); color: var(--suave); padding: 3px 10px; border-radius: 6px;
}

/* Aparición al hacer scroll: solo se activa si JS marca el elemento; sin JS todo se ve */
.revelar { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.revelar.oculto { opacity: 0; transform: translateY(28px); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem var(--letra-texto); text-decoration: none; cursor: pointer;
  background: var(--lila-fuerte); color: var(--sobre-boton);
  border: 2px solid var(--lila-fuerte); border-radius: 999px; padding: 13px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -2px var(--rosa); }
.boton--claro { background: transparent; color: var(--lila-fuerte); }
.boton--claro:hover { background: var(--lila-suave); }
.boton--chico { padding: 9px 18px; font-size: 0.92rem; }
.boton--resaltador { background: var(--resaltador); border-color: var(--resaltador); color: var(--sobre-resaltador); }
.enlace-flecha { font-weight: 800; text-decoration: none; justify-self: start; }
.enlace-flecha:hover { text-decoration: underline; }

/* Barra superior */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.barra.con-borde { border-bottom-color: var(--linea); }
.barra__fila { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta-marca); font: 600 1.45rem var(--letra-titulo); }
.marca img { width: 34px; height: auto; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a, .enlace-plataforma { color: var(--suave); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.menu a:hover, .enlace-plataforma:hover { color: var(--lila-fuerte); }
.barra__acciones { display: flex; align-items: center; gap: 16px; }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__fondo {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: cuadricula 30s linear infinite;
}
@keyframes cuadricula { to { background-position: 28px 28px, 28px 28px; } }
.mancha {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(70px); opacity: var(--mancha);
}
.mancha--rosa { background: var(--rosa); top: -22vmax; left: -12vmax; animation: flotar-a 22s ease-in-out infinite alternate; }
.mancha--lila { background: var(--lila); top: 10%; right: -18vmax; animation: flotar-b 26s ease-in-out infinite alternate; }
.mancha--celeste { background: var(--celeste); bottom: -30vmax; left: 30%; opacity: calc(var(--mancha) * 0.6); animation: flotar-a 30s ease-in-out infinite alternate-reverse; }
@keyframes flotar-a { to { transform: translate(14vmax, 8vmax) scale(1.15); } }
@keyframes flotar-b { to { transform: translate(-12vmax, 10vmax) scale(0.9); } }
.simbolo {
  position: absolute; left: var(--x); top: var(--y);
  font: 600 clamp(1.4rem, 2.6vw, 2.2rem) var(--letra-titulo); color: var(--lila-fuerte); opacity: 0.18;
  animation: subir 12s ease-in-out var(--d) infinite;
}
@keyframes subir { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(6deg); } }

.hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding-block: 76px 88px; }
.hero__texto { display: grid; gap: 22px; min-width: 0; }
.rotador { display: inline-block; }
#rotador { display: inline; transition: opacity 0.35s ease; }
#rotador.cambiando { opacity: 0; }
.hero__bajada { font-size: 1.15rem; color: var(--suave); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__datos { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--suave); font-weight: 700; font-size: 0.92rem; }
.hero__datos li::before { content: "✓"; color: var(--lila-fuerte); margin-right: 6px; }

/* Maqueta de la plataforma */
.hero__visual { position: relative; margin: 0; min-width: 0; padding: 30px 10px 60px 0; }
.app {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 26px;
  box-shadow: var(--sombra); overflow: hidden; transform: rotate(-1.5deg);
}
.app__barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--lila-suave); border-bottom: 1px solid var(--linea); }
.app__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.app__barra i:first-child { background: var(--rosa); }
.app__barra span { margin-left: 10px; font-family: var(--letra-dato); font-size: 0.72rem; color: var(--suave); }
.app__cuerpo { padding: 22px 24px 24px; display: grid; gap: 6px; }
.app__ruta { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lila-fuerte); }
.app__titulo { font: 600 1.35rem var(--letra-titulo); color: var(--tinta-marca); margin-bottom: 10px; }
.app__pasos { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; counter-reset: paso; }
.app__pasos li {
  counter-increment: paso; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 14px; font-weight: 700; font-size: 0.95rem; color: var(--suave);
  border: 1px solid var(--linea); transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.app__pasos li::before {
  content: counter(paso); width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-size: 0.8rem; background: var(--lila-suave); color: var(--lila-fuerte); transition: background 0.4s ease;
}
.app__pasos li.hecho { color: var(--tinta); }
.app__pasos li.hecho::before { content: "✓"; background: var(--lila); color: var(--sobre-resaltador); }
.app__pasos li.activo { border-color: var(--lila-fuerte); background: var(--lila-suave); color: var(--tinta-marca); }
.app__pasos li.activo::before { background: var(--resaltador); color: var(--sobre-resaltador); }
.app__avance { height: 10px; border-radius: 999px; background: var(--lila-suave); overflow: hidden; }
.app__avance span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rosa), var(--lila), var(--celeste)); transition: width 0.6s ease; }

.flashcard {
  position: absolute; right: -14px; bottom: 0; width: 230px; height: 128px; perspective: 900px;
  animation: balanceo 6s ease-in-out infinite;
}
.flashcard__cara {
  position: absolute; inset: 0; border-radius: 20px; padding: 14px 16px; display: grid; align-content: start; gap: 4px;
  background: var(--resaltador); color: var(--sobre-resaltador); box-shadow: var(--sombra);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  animation: voltear-frente 8s ease-in-out infinite;
}
.flashcard__cara small { font-weight: 800; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.flashcard__cara p { font: 600 1.05rem/1.25 var(--letra-titulo); }
.flashcard__cara--atras { background: var(--superficie); color: var(--tinta); border: 2px solid var(--lila); animation-name: voltear-atras; }
.flashcard__cara--atras p { font: 700 0.9rem/1.35 var(--letra-texto); }
@keyframes voltear-frente { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes voltear-atras { 0%, 40% { transform: rotateY(-180deg); } 50%, 90% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }
@keyframes balanceo { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.ficha {
  position: absolute; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 0.88rem;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra); color: var(--tinta-marca);
  animation: subir 7s ease-in-out infinite;
}
.ficha--quiz { top: 0; right: 24px; }
.ficha--quiz strong { color: var(--lila-fuerte); }
.ficha--puntos { left: -22px; bottom: 34px; background: var(--magenta); border-color: var(--magenta); color: #ffffff; animation-delay: -3s; }

/* Cinta en movimiento */
.cinta { overflow: hidden; background: var(--oscuro); color: var(--sobre-oscuro); padding-block: 16px; transform: rotate(-1deg); margin-block: -6px; position: relative; z-index: 1; }
.cinta__pista { display: flex; width: max-content; animation: cinta 40s linear infinite; }
.cinta__pista span { font: 600 1.15rem var(--letra-titulo); padding-inline: 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.cinta__pista span::after { content: "✦"; color: var(--rosa); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Secciones */
.seccion { padding-block: 96px; }
.seccion__cabeza { display: grid; gap: 12px; max-width: 660px; margin-bottom: 44px; }
.seccion__cabeza p:not(.etiqueta):not(.aviso-prototipo) { color: var(--suave); font-size: 1.08rem; }
.seccion--lila { background: var(--lila-suave); }
.seccion--cuaderno {
  background-color: var(--superficie);
  background-image: linear-gradient(var(--cuadricula) 1px, transparent 1px);
  background-size: 100% 32px; border-block: 1px solid var(--linea);
}

/* Problema */
.problemas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.problema { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); }
.problema__dato { font: 600 1.5rem var(--letra-mano); font-size: 1.9rem; color: var(--magenta); line-height: 1; }
.problema p:last-child { color: var(--suave); }
.problemas .problema:nth-child(2) { transition-delay: 0.1s; }
.problemas .problema:nth-child(3) { transition-delay: 0.2s; }

/* Carrusel de funciones: una tarjeta grande por función, con su imagen y flechas */
.funciones { min-width: 0; }
.funciones__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  border-radius: 30px;
}
.funciones__pista::-webkit-scrollbar { display: none; }
.funcion {
  scroll-snap-align: start; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 0;
  border-radius: 30px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); min-width: 0;
}
.funcion__visual {
  min-height: 340px; display: grid; place-items: center; padding: 32px; position: relative; overflow: hidden;
  background:
    linear-gradient(var(--cuadricula) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--lila-suave);
}
.funcion:nth-child(3n+2) .funcion__visual { background-color: color-mix(in srgb, var(--rosa) 22%, var(--superficie)); }
.funcion:nth-child(3n) .funcion__visual { background-color: color-mix(in srgb, var(--celeste) 16%, var(--superficie)); }
.funcion__texto { display: grid; gap: 12px; padding: 40px; min-width: 0; }
.funcion__texto h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.funcion__texto p { color: var(--suave); font-size: 1.08rem; max-width: 40ch; }
.funciones__controles { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.funciones__cuenta { font: 600 1.05rem var(--letra-titulo); color: var(--suave); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.control--lleno { background: var(--lila-fuerte); border-color: var(--lila-fuerte); color: var(--sobre-boton); }
.funcion .funcion__visual > * { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.funcion.activa .funcion__visual > * { animation: aparecer 0.6s cubic-bezier(.2,.7,.2,1); }
@keyframes aparecer { from { transform: translateY(16px) scale(0.96); opacity: 0.4; } }

/* Bolitas del quiz (las mismas de la plataforma) */
.bolitas { display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: 84px; }
.bolita { position: relative; flex: none; animation: bolita-flota 3.8s ease-in-out infinite; }
.bolita__cuerpo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--luz) 0%, var(--base) 45%, var(--osc) 100%); box-shadow: 0 12px 18px -8px var(--osc), inset 0 -6px 10px -4px rgba(0, 0, 0, 0.14); }
.bolita__cuerpo::after { content: ""; position: absolute; left: 20%; top: 12%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transform: rotate(-28deg); }
.bolita svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.bolita.pensando .bolita__cuerpo { animation: bolita-piensa 4.6s ease-in-out infinite; }
.bolita.feliz .bolita__cuerpo { animation: bolita-salta 0.7s cubic-bezier(.3,.7,.4,1) 3; }
.bolita.triste .bolita__cuerpo { animation: bolita-triste 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.bolitas--chicas .bolita.feliz .bolita__cuerpo { animation-iteration-count: infinite; animation-duration: 1.4s; }
@keyframes bolita-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bolita-piensa { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.03); } }
@keyframes bolita-salta { 0% { transform: none; } 25% { transform: translateY(4px) scale(1.1, 0.88); } 60% { transform: translateY(-22px) scale(0.94, 1.08); } 100% { transform: none; } }
@keyframes bolita-triste { 0%, 100% { transform: scale(1, 0.94); } 50% { transform: scale(1, 0.9) rotate(-2deg); } }

/* Demo interactiva de la plataforma */
.seccion--demo { background: linear-gradient(180deg, var(--fondo), var(--lila-suave)); }
.demo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 28px; box-shadow: var(--sombra); overflow: hidden; }
.demo__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 14px 24px; border-bottom: 1px solid var(--linea); }
.demo__volver { font-weight: 800; font-size: 0.9rem; color: var(--suave); }
.demo__avance { display: flex; align-items: center; gap: 10px; }
.demo__avance small { font-family: var(--letra-dato); font-size: 0.75rem; color: var(--suave); }
.demo__track { width: 120px; height: 6px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.demo__track i { display: block; width: 37.5%; height: 100%; background: linear-gradient(90deg, var(--lila-fuerte), var(--rosa)); }
.demo__cuerpo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 28px; align-items: start; }
.demo__izq, .demo__der { display: grid; gap: 10px; min-width: 0; }
.demo__titulo { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.demo__meta { font-family: var(--letra-dato); font-size: 0.8rem; color: var(--suave); margin-bottom: 6px; }
.demo__vista { justify-self: start; margin-top: 6px; font: 700 0.92rem var(--letra-texto); padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--suave); cursor: pointer; transition: 0.2s; }
.demo__vista.on { background: var(--lila-suave); border-color: var(--lila); color: var(--lila-fuerte); }
.demo__pie { text-align: center; margin-top: 22px; font-weight: 700; color: var(--suave); }
.demo__pie a { font-weight: 800; }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #1d1a3a; color: #ffffff; }
.video__pizarra {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; padding: 20px 20px 54px;
  background: radial-gradient(circle at 20% 10%, rgba(171, 157, 255, 0.35), transparent 50%), radial-gradient(circle at 90% 90%, rgba(255, 178, 247, 0.25), transparent 50%);
}
.video__expr { font: 600 clamp(1.8rem, 5vw, 2.8rem) var(--letra-titulo); transition: opacity 0.3s ease, transform 0.3s ease; }
.video__expr mark { color: #1e1a2e; }
.video__expr .ok { color: #8ee6a8; }
.video__expr.cambia { opacity: 0; transform: translateY(8px); }
.video__sub { font-weight: 700; font-size: 0.95rem; background: rgba(0, 0, 0, 0.45); padding: 6px 12px; border-radius: 10px; justify-self: center; max-width: 36ch; }
.video__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255, 255, 255, 0.95); color: #6b4fd8; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, opacity 0.2s ease; }
.video__play:hover { transform: scale(1.08); }
.video.reproduciendo .video__play { opacity: 0; pointer-events: none; }
.video__play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: pulso 2.2s ease-out infinite; }
.video__controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
.video__mini { background: none; border: 0; color: #ffffff; cursor: pointer; font-size: 0.95rem; width: 22px; }
.video__linea { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.video__linea i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb2f7, #ab9dff); }
.video__controles small { font: 0.75rem var(--letra-dato); font-variant-numeric: tabular-nums; }

.pestanas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pestana { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; white-space: nowrap; cursor: pointer; font: 700 0.92rem var(--letra-texto); color: var(--suave); background: var(--superficie); border: 1.5px solid var(--linea); }
.pestana span { font-family: var(--letra-dato); font-size: 0.75rem; opacity: 0.8; }
.pestana[aria-selected="true"] { color: #ffffff; background: linear-gradient(115deg, #6b4fd8, #9b6be8); border-color: transparent; }
.panel-tab { min-height: 420px; padding-top: 10px; }

.materiales { display: grid; gap: 10px; }
.material { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--linea); }
.material__icono { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 700 0.7rem var(--letra-dato); background: var(--lila-suave); color: var(--lila-fuerte); }
.material--sol .material__icono { background: color-mix(in srgb, #8ee6a8 35%, var(--superficie)); color: #1f7a3d; }
.material__nombre { flex: 1; font-weight: 700; font-size: 0.92rem; min-width: 0; }
.material button { font: 700 0.85rem var(--letra-texto); padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--lila-fuerte); cursor: pointer; }
.hoja-vista { padding: 18px; border-radius: 16px; background: #ffffff; color: #1e1a2e; border: 1px solid #e6e0fb; display: grid; gap: 8px; animation: entrar 0.35s ease; }
.hoja-vista b { font-family: var(--letra-titulo); font-weight: 600; color: #2e2c6b; }
.hoja-vista ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-weight: 600; }
.hoja-vista .verde { background: #c9f5d6; padding: 0 4px; border-radius: 4px; }

.fc-zona { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fc-barra { display: flex; gap: 4px; width: 100%; max-width: 440px; }
.fc-tick { flex: 1; height: 4px; border-radius: 99px; background: var(--linea); transition: 0.3s; }
.fc-tick.pasada { background: var(--lila); }
.fc-tick.actual { background: linear-gradient(90deg, #6b4fd8, #ffb2f7); }
.fc-mazo { position: relative; width: 100%; max-width: 440px; height: 260px; }
.fc-sombra { position: absolute; inset: 0; border-radius: 24px; background: #ffffff; border: 1px solid #e6e0fb; }
.fc-sombra.dos { transform: translateY(9px) scale(0.965); }
.fc-sombra.tres { transform: translateY(18px) scale(0.93); opacity: 0.7; }
.fc { position: absolute; inset: 0; perspective: 1400px; cursor: pointer; transition: transform 0.34s ease, opacity 0.34s ease; }
.fc.sale-si { transform: translate(90px, -30px) rotate(11deg); opacity: 0; }
.fc.sale-no { transform: translate(-90px, -30px) rotate(-11deg); opacity: 0; }
.fc-in { position: relative; width: 100%; height: 100%; transition: transform 0.62s cubic-bezier(.34,1.4,.4,1); transform-style: preserve-3d; }
.fc.volteada .fc-in { transform: rotateY(180deg); }
.fc-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; overflow: hidden; color: #1e1a2e; }
.fc-cara.frente { background: linear-gradient(155deg, #ffffff 0%, #f0ecff 100%); border: 1.5px solid #ab9dff; box-shadow: 0 26px 50px -26px rgba(107, 79, 216, 0.6); }
.fc-cara.reverso { transform: rotateY(180deg); background: linear-gradient(155deg, #ffffff 0%, #fcf1f8 100%); border: 1.5px solid #ffb2f7; box-shadow: 0 26px 50px -26px rgba(196, 69, 158, 0.5); }
.fc-cara p { font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.fc-cara small { font-size: 0.78rem; color: #6b6880; }
.fc-et { font: 700 0.65rem var(--letra-dato); letter-spacing: 0.16em; text-transform: uppercase; color: #6b4fd8; background: rgba(255, 255, 255, 0.85); padding: 4px 11px; border-radius: 99px; }
.fc-cara.reverso .fc-et { color: #c4459e; }
.fc-btns { display: flex; gap: 10px; width: 100%; max-width: 440px; margin-top: 8px; }
.fc-btn { flex: 1; padding: 13px; border-radius: 14px; font: 700 0.95rem var(--letra-texto); cursor: pointer; transition: 0.18s; }
.fc-btn.no { color: var(--suave); background: var(--superficie); border: 1.5px solid var(--linea); }
.fc-btn.si { color: #ffffff; border: 0; background: linear-gradient(115deg, #6b4fd8, #ffb2f7); box-shadow: 0 10px 22px -12px rgba(107, 79, 216, 0.8); }
.fc-btn.si:hover { transform: translateY(-1px); }
.fc-cuenta { font: 0.78rem var(--letra-dato); color: var(--suave); }
.fin { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 20px 10px; }
.fin__num { font: 700 2.8rem/1 var(--letra-titulo); color: var(--lila-fuerte); }
.fin p { color: var(--suave); max-width: 36ch; }
.fin__pts { color: var(--magenta) !important; font-weight: 800; }
.boton-fantasma { font: 700 0.92rem var(--letra-texto); padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--lila-fuerte); cursor: pointer; margin-top: 6px; }

.quiz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.quiz-top small { font: 0.75rem var(--letra-dato); color: var(--suave); white-space: nowrap; }
.quiz-track { flex: 1; height: 5px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.quiz-track i { display: block; height: 100%; background: linear-gradient(90deg, #6b4fd8, #ffb2f7); transition: width 0.4s ease; }
.quiz-preg { font-size: 1.1rem; font-weight: 800; line-height: 1.4; margin-bottom: 12px; color: var(--tinta); }
.quiz-ops { display: grid; gap: 9px; }
.quiz-op { text-align: left; padding: 13px 16px; border-radius: 14px; font: 700 0.98rem var(--letra-texto); background: var(--superficie); color: var(--tinta); border: 1.5px solid var(--linea); cursor: pointer; transition: 0.15s; }
.quiz-op:hover:not(:disabled) { border-color: var(--lila); background: var(--lila-suave); }
.quiz-op:disabled { cursor: default; }
.quiz-op.bien { border-color: #22b3f1; background: color-mix(in srgb, #22b3f1 14%, var(--superficie)); }
.quiz-op.mal { border-color: #ffb2f7; background: color-mix(in srgb, #ffb2f7 22%, var(--superficie)); }
.quiz-op.apagada { opacity: 0.45; }
.quiz-retro { margin-top: 14px; padding: 16px; border-radius: 16px; display: grid; gap: 10px; justify-items: start; background: color-mix(in srgb, #ffb2f7 18%, var(--superficie)); border: 1px solid #ffb2f7; animation: entrar 0.35s ease; }
.quiz-retro.bien { background: color-mix(in srgb, #22b3f1 12%, var(--superficie)); border-color: #22b3f1; }
.quiz-retro strong { font-size: 0.95rem; }
.quiz-retro p { font-size: 0.95rem; color: var(--tinta); }

/* Preuniversitario: pastel, con el degradado oficial rosa → lila → celeste */
.seccion--preu {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, color-mix(in srgb, var(--rosa) 30%, var(--fondo)), color-mix(in srgb, var(--lila) 32%, var(--fondo)) 50%, color-mix(in srgb, var(--celeste) 24%, var(--fondo)));
  background-size: 200% 200%; animation: degradado 18s ease-in-out infinite alternate;
}
@keyframes degradado { to { background-position: 100% 100%; } }
.preu { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.preu__texto { display: grid; gap: 18px; min-width: 0; }
.preu__texto > p:not(.etiqueta) { color: var(--tinta); font-size: 1.12rem; max-width: 56ch; }
.preu__para { font-size: 0.95rem !important; color: var(--suave) !important; }
.preu__lado {
  display: grid; gap: 20px; min-width: 0; padding: clamp(22px, 4vw, 32px); border-radius: 30px;
  background: color-mix(in srgb, var(--superficie) 72%, transparent); border: 1px solid color-mix(in srgb, var(--superficie) 60%, var(--lila));
  box-shadow: 0 30px 60px -34px rgba(107, 79, 216, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.preu__horas { display: grid; gap: 6px; }
.preu__cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.preu__num {
  font: 700 clamp(3.6rem, 8vw, 5.6rem)/0.95 var(--letra-titulo); font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--magenta), var(--lila-fuerte) 55%, var(--celeste));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.preu__unidad { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--letra-titulo); color: var(--tinta-marca); }
.preu__horas small { font: 800 1rem var(--letra-texto); color: var(--suave); }
.materias-preu { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.materias-preu li {
  position: relative; overflow: hidden; display: grid; gap: 6px; padding: 18px; border-radius: 22px;
  background: var(--superficie); border: 1.5px solid color-mix(in srgb, var(--c) 55%, var(--superficie));
  box-shadow: 0 14px 30px -22px rgba(107, 79, 216, 0.5); transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.materias-preu li::before { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--c); opacity: 0.35; }
.materias-preu li:hover { transform: translateY(-5px) rotate(-1.5deg) scale(1.03); }
.materias-preu code { position: relative; justify-self: start; font-family: var(--letra-dato); font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, var(--superficie)); color: var(--tinta-marca); }
.materias-preu span { font: 600 1.15rem var(--letra-titulo); color: var(--tinta-marca); }
.materias-preu small { font-weight: 800; font-size: 0.85rem; color: var(--suave); }
/* Al desplegar: el texto entra suave y las materias aparecen como pop up, una por una */
.desplegable:not([hidden]) .preu__texto { animation: entrar 0.6s cubic-bezier(.2,.7,.2,1) both; }
.desplegable:not([hidden]) .preu__lado { animation: entrar 0.6s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.desplegable:not([hidden]) .materias-preu li { animation: pop 0.6s cubic-bezier(.34,1.56,.64,1) calc(0.45s + var(--i) * 0.14s) backwards; }
@keyframes pop { from { opacity: 0; transform: scale(0.4) translateY(24px) rotate(-6deg); } }

/* Testimonios */
.nota-ejemplo { font-size: 0.82rem; color: var(--suave); opacity: 0.8; }
.testimonio blockquote strong { font-weight: 700; color: var(--lila-fuerte); }
.testimonio blockquote mark { font-weight: 600; }
.testimonios {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px;
  scrollbar-width: none;
}
.testimonios::-webkit-scrollbar { display: none; }
.testimonio {
  scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 18px; justify-content: space-between;
  padding: 28px; border-radius: 26px; background: var(--lila-suave); min-width: 0;
}
.testimonio:nth-child(2n) { background: var(--superficie); border: 1px solid var(--linea); }
.testimonio blockquote { margin: 0; font: 500 1.15rem/1.45 var(--letra-titulo); color: var(--tinta-marca); }
.testimonio figcaption { display: flex; gap: 12px; align-items: center; font-size: 0.88rem; color: var(--suave); line-height: 1.35; }
.testimonio strong { color: var(--tinta); }
.avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 1.1rem var(--letra-titulo); background: linear-gradient(135deg, var(--rosa), var(--lila), var(--celeste)); color: var(--sobre-resaltador); }
.testimonios__controles { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.control { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea); background: var(--superficie); color: var(--tinta-marca); font-size: 1.2rem; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.control:hover { border-color: var(--lila-fuerte); transform: scale(1.06); }

/* Colegio Aliado: claro, llamativo y con movimiento */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.seccion--aliado {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--celeste) 14%, var(--fondo)), color-mix(in srgb, var(--rosa) 18%, var(--fondo)));
}
.aliado__fondo { position: absolute; inset: 0; z-index: -1; }
.aliado__fondo .mancha { opacity: calc(var(--mancha) * 0.8); }
.aliado__fondo i {
  position: absolute; left: var(--x); top: var(--y); font-style: normal; font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: var(--lila-fuerte); animation: titilar 3.6s ease-in-out var(--d) infinite;
}
@keyframes titilar { 0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0); } 50% { opacity: 0.8; transform: scale(1.15) rotate(45deg); } }
.aliado {
  position: relative; display: grid; gap: 28px; justify-items: center; text-align: center;
  padding: clamp(32px, 6vw, 60px) clamp(18px, 5vw, 60px); border-radius: 34px;
  /* Borde de colores que gira: un fondo dentro del borde y el degradado en el borde, sin capas extra */
  border: 3px solid transparent;
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    conic-gradient(from var(--giro), var(--rosa), var(--lila), var(--celeste), var(--resaltador), var(--rosa)) border-box;
  box-shadow: 0 40px 80px -40px rgba(107, 79, 216, 0.55);
  animation: borde-gira 6s linear infinite;
}
@keyframes borde-gira { to { --giro: 360deg; } }
.aliado__sello {
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.28em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px;
  color: var(--lila-fuerte); background: linear-gradient(110deg, var(--lila-suave) 40%, #ffffff 50%, var(--lila-suave) 60%);
  background-size: 250% 100%; animation: brillo 3s linear infinite;
}
@keyframes brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.aliado h2 { max-width: 760px; }
.aliado__brillo {
  background: linear-gradient(100deg, var(--magenta), var(--lila-fuerte), var(--celeste), var(--magenta));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 6s linear infinite;
}
.aliado__texto { color: var(--suave); font-size: 1.1rem; max-width: 56ch; }
.aliado__texto strong { color: var(--tinta-marca); }
.aliado__beneficios { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aliado__beneficios li {
  display: grid; gap: 6px; align-content: start; justify-items: start; text-align: left; padding: 22px 20px; border-radius: 24px;
  background: color-mix(in srgb, var(--c) 22%, var(--superficie)); color: var(--suave); font-size: 0.95rem;
  animation: flotar-tarjeta 5s ease-in-out calc(var(--i) * -1.25s) infinite; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.aliado__beneficios li:hover { box-shadow: 0 20px 40px -24px rgba(107, 79, 216, 0.6); animation-play-state: paused; transform: translateY(-8px) rotate(-1deg); }
@keyframes flotar-tarjeta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.aliado__beneficios b { display: block; font: 600 1.12rem var(--letra-titulo); color: var(--tinta-marca); }
.aliado__icono {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 6px;
  background: var(--superficie); box-shadow: 0 8px 18px -10px rgba(46, 44, 107, 0.4);
}
.aliado__extras { display: grid; gap: 12px; justify-items: center; }
.aliado__extras p { font-weight: 800; color: var(--tinta-marca); }
.aliado__extras ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.aliado__extras li { padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 0.92rem; color: var(--tinta-marca); background: var(--lila-suave); border: 1.5px dashed var(--lila); }
.boton--aliado {
  position: relative; overflow: hidden; padding: 16px 36px; font-size: 1.05rem; border: 0;
  background: linear-gradient(115deg, var(--magenta), var(--lila-fuerte), #22b3f1); color: #ffffff;
  box-shadow: 0 16px 34px -16px rgba(107, 79, 216, 0.9);
}
.boton--aliado::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: destello 3.2s ease-in-out infinite;
}
@keyframes destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: baseline; }
.lista-check li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 800;
  background: var(--lila); color: var(--sobre-resaltador); transform: translateY(3px);
}

/* Preguntas */
.seccion--preguntas { background: linear-gradient(180deg, var(--fondo), color-mix(in srgb, var(--lila) 12%, var(--fondo))); }
.preguntas { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.preguntas__lado { display: grid; gap: 14px; justify-items: start; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); }
.preguntas__lado > p:not(.etiqueta) { color: var(--suave); font-size: 1.05rem; }
.acordeon { display: grid; gap: 12px; min-width: 0; }
.acordeon details {
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 22px; padding: 4px 20px;
  box-shadow: 0 12px 28px -24px rgba(107, 79, 216, 0.6); transition: border-color 0.2s ease, background 0.25s ease, transform 0.2s ease;
}
.acordeon details:hover { transform: translateX(4px); border-color: var(--lila); }
.acordeon details[open] { border-color: var(--lila); background: linear-gradient(135deg, var(--superficie), color-mix(in srgb, var(--lila) 14%, var(--superficie))); }
.acordeon summary { cursor: pointer; list-style: none; padding-block: 14px; font-weight: 800; font-size: 1.02rem; color: var(--tinta-marca); display: flex; align-items: center; gap: 14px; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+"; margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 600 1.3rem/1 var(--letra-titulo); color: var(--sobre-boton); background: var(--lila-fuerte); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.acordeon details[open] summary::after { transform: rotate(135deg); background: var(--magenta); }
.acordeon__icono { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; background: color-mix(in srgb, var(--c) 35%, var(--superficie)); }
.acordeon details p { color: var(--suave); padding: 0 0 18px 56px; max-width: 62ch; }
.acordeon details[open] p { animation: entrar 0.35s ease; }

/* Inscripción / diagnóstico: pastel y llamativo */
.seccion--contacto {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lila) 40%, var(--fondo)), color-mix(in srgb, var(--rosa) 40%, var(--fondo)) 55%, color-mix(in srgb, var(--celeste) 30%, var(--fondo)));
  background-size: 200% 200%; animation: degradado 16s ease-in-out infinite alternate;
}
.contacto__fondo { position: absolute; inset: 0; z-index: -1; }
.contacto__fondo .simbolo {
  top: auto; opacity: 0; font-size: clamp(2rem, 4vw, 3.2rem);
  animation: subir-bucle 16s linear var(--d) infinite;
}
/* Suben desde abajo y se desvanecen antes de llegar al borde, sin salirse de la sección */
@keyframes subir-bucle {
  0% { top: 100%; opacity: 0; transform: rotate(-10deg); }
  15% { opacity: 0.22; }
  75% { opacity: 0.22; }
  92%, 100% { top: 4%; opacity: 0; transform: rotate(10deg); }
}
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.contacto__texto { display: grid; gap: 16px; min-width: 0; }
.contacto__texto h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.contacto__texto > p:not(.etiqueta) { color: var(--tinta); font-size: 1.1rem; max-width: 46ch; }
.contacto__texto .etiqueta { justify-self: start; background: var(--resaltador); color: var(--sobre-resaltador); padding: 6px 14px; border-radius: 999px; }
.contacto__ventajas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.contacto__ventajas li { padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--superficie) 75%, transparent); font-weight: 800; font-size: 0.9rem; color: var(--tinta-marca); }
.contacto__ventajas li::before { content: "✓ "; color: var(--lila-fuerte); }
.contacto__wa {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: #25d366; color: #ffffff; text-decoration: none; font-weight: 800; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; box-shadow: 0 12px 26px -14px rgba(37, 211, 102, 0.9); transition: transform 0.2s ease;
}
.contacto__wa:hover { transform: translateY(-2px); }
.formulario { position: relative; display: grid; gap: 16px; background: var(--superficie); border-radius: 30px; padding: 34px 30px 30px; box-shadow: 0 30px 60px -30px rgba(107, 79, 216, 0.55); min-width: 0; border: 2px solid color-mix(in srgb, var(--lila) 50%, var(--superficie)); }
.formulario__titulo { font: 600 1.4rem var(--letra-titulo); color: var(--tinta-marca); }
.formulario__sticker {
  position: absolute; top: -26px; right: -14px; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font: 700 0.95rem/1.05 var(--letra-titulo); background: color-mix(in srgb, var(--resaltador) 45%, var(--superficie)); color: var(--tinta-marca);
  border: 2px solid var(--superficie); box-shadow: 0 10px 22px -12px rgba(46, 44, 107, 0.35); animation: sello 6s ease-in-out infinite;
}
@keyframes sello { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.06); } }
.formulario .boton { background: linear-gradient(115deg, var(--lila-fuerte), var(--magenta)); border-color: transparent; padding-block: 15px; font-size: 1.05rem; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo label { font-weight: 800; font-size: 0.9rem; color: var(--tinta-marca); }
.campo input, .campo select {
  font: 600 1rem var(--letra-texto); color: var(--tinta); background: var(--fondo);
  border: 2px solid var(--linea); border-radius: 14px; padding: 12px 14px; width: 100%;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--lila-fuerte); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--magenta); }
.formulario__estado { font-weight: 700; font-size: 0.92rem; color: var(--lila-fuerte); min-height: 1.4em; }

/* Pie */
.pie { padding-block: 32px; border-top: 1px solid var(--linea); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--suave); font-size: 0.9rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 18px; }
.pie__enlaces a { color: var(--suave); font-weight: 700; text-decoration: none; }
.pie__enlaces a:hover { color: var(--lila-fuerte); }
.pie .marca { font-size: 1.2rem; }
.pie .marca img { width: 28px; }

/* Botones flotantes */
.wa-flotante {
  position: fixed; z-index: 30; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: #25d366; color: #ffffff; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.wa-flotante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: pulso 2.4s ease-out infinite; }
.wa-flotante:hover { transform: scale(1.08); }
@keyframes pulso { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.7); opacity: 0; } }
.arriba {
  position: fixed; z-index: 30; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie); color: var(--tinta-marca); border: 1px solid var(--linea); text-decoration: none; font-weight: 800;
  box-shadow: var(--sombra); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.arriba.visible { opacity: 1; pointer-events: auto; transform: none; }

/* "premio" con emojis que saltan */
.premio {
  position: relative; display: inline-block; padding-inline: 4px;
  background: linear-gradient(100deg, var(--magenta), var(--lila-fuerte) 55%, var(--celeste));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: premio-brinca 2.5s ease-in-out infinite;
}
.premio__emojis { position: absolute; inset: 0; pointer-events: none; }
.premio__emojis i {
  position: absolute; left: var(--x); bottom: 30%; font-style: normal; font-size: 0.55em; opacity: 0;
  color: #000; -webkit-text-fill-color: initial; animation: emoji-salta 2.5s cubic-bezier(.2,.8,.3,1) var(--d) infinite;
}
@keyframes premio-brinca { 0%, 100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-6px) rotate(-3deg); } 30% { transform: translateY(0) rotate(2deg); } }
@keyframes emoji-salta {
  0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0); }
  15% { opacity: 1; }
  60% { opacity: 1; transform: translateY(-1.6em) scale(1.1) rotate(-15deg); }
  100% { opacity: 0; transform: translateY(-2.2em) scale(0.8) rotate(10deg); }
}

/* Problema destacado: el precio de una clase particular */
.problema--destacado {
  transform: scale(1.06); z-index: 1; padding: 34px 30px; border: 0;
  background: linear-gradient(150deg, color-mix(in srgb, var(--rosa) 45%, var(--superficie)), color-mix(in srgb, var(--lila) 45%, var(--superficie)));
  box-shadow: 0 30px 60px -30px rgba(196, 69, 158, 0.55);
}
.problema--destacado h3 { font-size: 1.45rem; }
.problema--destacado p:last-child { color: var(--tinta) !important; }
.problema__hora { font: 800 1.15rem var(--letra-texto); vertical-align: middle; }
.problema__oferta { font: 700 1.25rem var(--letra-titulo); color: var(--magenta); white-space: nowrap; }
.problema__sello { justify-self: start; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sobre-resaltador); background: var(--resaltador); padding: 4px 12px; border-radius: 999px; }
.problema__precio { font: 700 clamp(2.6rem, 5vw, 3.4rem)/1 var(--letra-titulo); color: var(--tinta-marca); font-variant-numeric: tabular-nums; }
.problema__precio span { font: 800 1rem var(--letra-texto); color: var(--suave); }

/* Tarjetas de grados */
.grados { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.grado {
  display: grid; gap: 4px; align-content: start; padding: 22px 18px; border-radius: 24px; text-decoration: none;
  background: var(--superficie); border: 2px solid var(--linea); color: var(--tinta);
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), border-color 0.2s ease, box-shadow 0.25s ease;
}
.grado:hover, .grado:focus-visible { transform: translateY(-6px) rotate(-1deg); border-color: var(--lila); box-shadow: var(--sombra); }
.grado:nth-child(3n+1) { background: color-mix(in srgb, var(--lila) 16%, var(--superficie)); }
.grado:nth-child(3n+2) { background: color-mix(in srgb, var(--rosa) 20%, var(--superficie)); }
.grado:nth-child(3n) { background: color-mix(in srgb, var(--celeste) 14%, var(--superficie)); }
.grado__num { font: 700 2.6rem/1 var(--letra-titulo); color: var(--tinta-marca); margin-bottom: 6px; }
.grado__clases { font-weight: 800; font-size: 0.9rem; color: var(--lila-fuerte); }
.grado__precio { font: 600 1.1rem var(--letra-titulo); color: var(--tinta-marca); font-variant-numeric: tabular-nums; }
.grado__mas { margin-top: 12px; font-weight: 800; font-size: 0.85rem; color: var(--magenta); }
.grado--preu { background: linear-gradient(150deg, color-mix(in srgb, var(--rosa) 35%, var(--superficie)), color-mix(in srgb, var(--celeste) 30%, var(--superficie))) !important; }
.grado--preu .grado__num { font-size: 2.2rem; }
.matriculas { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; font: 600 1.6rem var(--letra-mano); color: var(--magenta); }
.punto-vivo { width: 10px; height: 10px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: vivo 1.8s ease-out infinite; }
@keyframes vivo { to { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } }

/* Método: subrayado y carrusel con ejemplos reales */
.subrayado { background: linear-gradient(transparent 62%, var(--resaltador) 62%, var(--resaltador) 92%, transparent 92%); color: var(--sobre-resaltador); padding-inline: 4px; border-radius: 4px; }
.funcion--real .funcion__texto h3 {
  justify-self: start; padding-inline: 6px; border-radius: 6px; color: var(--sobre-resaltador);
  background: linear-gradient(transparent 8%, var(--resaltador) 8%, var(--resaltador) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.funcion__texto p strong { color: var(--tinta-marca); font-weight: 800; }
.funcion__paso { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); }
.funcion--real .funcion__visual { min-height: 400px; padding: 28px; }
.funcion--real .funcion__visual img { max-height: 360px; width: auto; max-width: 100%; border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(46, 44, 107, 0.55); }

/* Botón desplegable de la demo */
.desplegar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; cursor: pointer;
  padding: 30px 36px; border-radius: 30px; border: 2px solid color-mix(in srgb, var(--lila) 60%, var(--superficie));
  background: linear-gradient(120deg, color-mix(in srgb, var(--lila) 22%, var(--superficie)), color-mix(in srgb, var(--rosa) 24%, var(--superficie)));
  color: var(--tinta); font: inherit; box-shadow: var(--sombra); transition: transform 0.2s ease;
}
.desplegar:hover { transform: translateY(-3px); }
.desplegar__texto { display: grid; gap: 6px; }
.desplegar__titulo { font: 600 clamp(1.5rem, 3.2vw, 2.2rem)/1.1 var(--letra-titulo); color: var(--tinta-marca); }
.desplegar__sub { color: var(--suave); font-weight: 600; }
.desplegar__icono {
  flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800;
  background: var(--lila-fuerte); color: var(--sobre-boton); transition: transform 0.35s ease; animation: rebote 2.4s ease-in-out infinite;
}
.desplegar[aria-expanded="true"] .desplegar__icono { transform: rotate(180deg); animation: none; }
@keyframes rebote { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.demo-contenido { margin-top: 20px; animation: entrar 0.5s cubic-bezier(.2,.7,.2,1); }

[hidden] { display: none !important; }
.desplegar--preu { background: color-mix(in srgb, var(--superficie) 80%, transparent); border-color: color-mix(in srgb, var(--superficie) 50%, var(--lila)); }
.desplegable { margin-top: 36px; animation: entrar 0.5s cubic-bezier(.2,.7,.2,1); }

/* ── Página de curso ── */
.curso-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 40px 72px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--rosa) 26%, var(--fondo)), color-mix(in srgb, var(--lila) 28%, var(--fondo)) 50%, color-mix(in srgb, var(--celeste) 20%, var(--fondo)));
  background-size: 200% 200%; animation: degradado 18s ease-in-out infinite alternate; }
.volver { display: inline-block; font-weight: 800; text-decoration: none; margin-bottom: 18px; }
.selector-grados { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.selector-grados a { padding: 8px 16px; border-radius: 999px; font-weight: 800; text-decoration: none; color: var(--tinta-marca); background: color-mix(in srgb, var(--superficie) 70%, transparent); border: 2px solid transparent; }
.selector-grados a:hover { border-color: var(--lila); }
.selector-grados a[aria-current="page"] { background: var(--lila-fuerte); color: var(--sobre-boton); }
.curso-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.curso-hero__texto { display: grid; gap: 16px; min-width: 0; }
.curso-hero__texto > p:not(.etiqueta) { font-size: 1.12rem; color: var(--tinta); max-width: 56ch; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--superficie) 80%, transparent); font-weight: 800; font-size: 0.9rem; color: var(--tinta-marca); }
.precio-card { display: grid; gap: 12px; padding: 30px; border-radius: 28px; background: var(--superficie); box-shadow: 0 30px 60px -30px rgba(107, 79, 216, 0.55); min-width: 0; }
.precio-card__monto { font: 700 3rem/1 var(--letra-titulo); color: var(--tinta-marca); font-variant-numeric: tabular-nums; }
.precio-card__nota { color: var(--suave); font-weight: 700; }
.incluye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.incluye__item { display: grid; gap: 4px; padding: 22px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--linea); }
.incluye__item b { font: 700 1.9rem/1.1 var(--letra-titulo); color: var(--lila-fuerte); }
.incluye__item span { color: var(--suave); font-weight: 700; font-size: 0.95rem; }
.modulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.modulo { padding: 26px; border-radius: 24px; background: var(--superficie); border: 1px solid var(--linea); display: grid; gap: 12px; align-content: start; }
.modulo:nth-child(4n+1) { border-top: 6px solid var(--lila); }
.modulo:nth-child(4n+2) { border-top: 6px solid var(--rosa); }
.modulo:nth-child(4n+3) { border-top: 6px solid var(--celeste); }
.modulo:nth-child(4n) { border-top: 6px solid var(--resaltador); }
.modulo h3 { font-size: 1.3rem; }
.modulo__num { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); }
.modulo__dba { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--lila-suave); }
.modulo__dba > p { font-weight: 800; font-size: 0.92rem; color: var(--lila-fuerte); }
.modulo ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--tinta); font-weight: 600; }
.materias-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.materias-tabs button { padding: 10px 18px; border-radius: 999px; font: 800 0.95rem var(--letra-texto); cursor: pointer; color: var(--suave); background: var(--superficie); border: 1.5px solid var(--linea); }
.materias-tabs button[aria-selected="true"] { color: #ffffff; background: linear-gradient(115deg, #6b4fd8, #9b6be8); border-color: transparent; }
.materias-tabs small { font-family: var(--letra-dato); opacity: 0.8; }
.clases-lista { display: grid; gap: 10px; }
.clases-lista details { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 2px 20px; }
.clases-lista details[open] { border-color: var(--lila); }
.clases-lista summary { cursor: pointer; list-style: none; padding-block: 14px; display: flex; gap: 14px; align-items: baseline; font-weight: 800; color: var(--tinta-marca); }
.clases-lista summary::-webkit-details-marker { display: none; }
.clases-lista summary span { font: 0.78rem var(--letra-dato); color: var(--lila-fuerte); white-space: nowrap; }
.clases-lista ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 4px; color: var(--suave); }
.cta-final { display: grid; gap: 16px; justify-items: center; text-align: center; padding: clamp(32px, 6vw, 56px) 24px; border-radius: 32px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lila) 38%, var(--superficie)), color-mix(in srgb, var(--rosa) 38%, var(--superficie))); }
.cta-final p { color: var(--tinta); max-width: 48ch; }

/* Tablet */
@media (max-width: 960px) {
  .menu { display: none; }
  .barra__acciones { margin-left: auto; }
  .hero__grid, .contacto, .preguntas, .preu, .funcion, .demo__cuerpo, .curso-hero__grid { grid-template-columns: 1fr; }
  .funcion__visual { min-height: 280px; }
  .funcion__texto { padding: 28px; }
  .panel-tab { min-height: 0; }
  .hero__grid { padding-block: 48px 72px; gap: 40px; }
  .hero__visual { max-width: 500px; width: 100%; justify-self: center; }
  .problemas { grid-template-columns: 1fr; }
  .preguntas__lado { position: static; }
  .problema--destacado { transform: none; }
  .grados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aliado__beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulos { grid-template-columns: 1fr; }
  .testimonios { grid-auto-columns: calc((100% - 20px) / 2); }
}
/* Celular */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .enlace-plataforma { display: none; }
  .seccion { padding-block: 64px; }
  .campo-fila, .materias-preu { grid-template-columns: 1fr; }
  .acordeon details p { padding-left: 0; }
  .acordeon details { padding-inline: 14px; }
  .grados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grado { padding: 18px 16px; }
  .grado__num { font-size: 2.2rem; }
  .flashcard { width: 200px; height: 120px; right: -4px; }
  .ficha--puntos { left: -4px; }
  .testimonios { grid-auto-columns: 86%; }
  .formulario { padding: 30px 20px 22px; }
  .formulario__sticker { width: 74px; height: 74px; font-size: 0.82rem; right: -6px; top: -30px; }
  .hero__grid { padding-block: 36px 64px; }
  .hero__ctas .boton { flex: 1 1 100%; }
  .cinta__pista span { font-size: 1rem; gap: 32px; padding-inline: 16px; }
  .funcion__visual { min-height: 240px; padding: 20px 14px; }
  .funcion--real .funcion__visual img { max-height: 300px; }
  .funcion__texto { padding: 22px; }
  .desplegar { padding: 22px 20px; gap: 14px; }
  .desplegar__icono { width: 48px; height: 48px; }
  .demo__cuerpo { padding: 18px 14px; gap: 22px; }
  .demo__top { padding: 12px 14px; }
  .demo__track { width: 80px; }
  .fc-mazo { height: 240px; }
  .video__sub { font-size: 0.8rem; }
  .video__play { width: 64px; height: 64px; }
  .preu__horas { font-size: 2.6rem; }
  .aliado__beneficios { grid-template-columns: 1fr; }
  .aliado .boton { width: 100%; }
  .incluye { grid-template-columns: 1fr 1fr; gap: 10px; }
  .precio-card .boton { width: 100%; }
  .pie__fila { justify-content: center; text-align: center; }
  .wa-flotante { width: 54px; height: 54px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .arriba { right: calc(19px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar.oculto { opacity: 1; transform: none; }
}

/* Video de la demo: el subtítulo aparece al darle play, para no tapar el botón */
.video__sub { transition: opacity 0.3s ease; }
.video:not(.reproduciendo) .video__sub { opacity: 0; }
@media (max-width: 600px) {
  .pestana { padding: 8px 12px; font-size: 0.85rem; }
  .pestanas { gap: 6px; }
}