/* ============================================================
   Inglés en Chile — hoja de estilos del SITIO (landing).

   Los paneles (alumno, profesor, admin) siguen usando estilos.css.
   Esta hoja es solo para la portada: oscura, con luz en movimiento
   y las mismas tres tipografías y colores de la marca.
   ============================================================ */

:root {
  /* ---- marca ---- */
  --azul:     #2D5BFF;
  --azul-2:   #6C8CFF;
  --cian:     #4FD1FF;
  --hondo:    #1B3ACC;
  --wash:     #E7EDFF;
  --acento:   #FF5A5F;
  --acento-2: #FF8A5B;
  --acento-w: #FFE9EA;

  /* ---- base ---- */
  --fondo:    #070A16;   /* el negro azulado del sitio */
  --tinta:    #0B1020;
  --tinta-2:  #121A33;
  --nube:     #F6F7FB;
  --nieve:    #F6F7FB;
  --blanco:   #FFFFFF;
  --rule:     #DFE3EE;
  --gris:     #5A6478;
  --gris-c:   #8A93A6;
  --texto-suave: #AEB9D3;   /* texto secundario sobre oscuro */

  /* ---- estados ---- */
  --verde:    #0B7D57;
  --verde-w:  #E3F5ED;
  --verde-n:  #35E0A1;      /* verde que brilla sobre oscuro */
  --ocre:     #D9922F;
  --coral:    #D93A44;

  /* ---- vidrio ---- */
  --vidrio:   rgba(255,255,255,.045);
  --vidrio-2: rgba(255,255,255,.08);
  --borde:    rgba(255,255,255,.10);
  --borde-2:  rgba(255,255,255,.18);

  --display: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sh-sm: 0 1px 2px rgba(11,16,32,.05), 0 2px 8px rgba(11,16,32,.05);
  --sh-md: 0 2px 6px rgba(11,16,32,.06), 0 14px 36px rgba(11,16,32,.09);
  --sh-lg: 0 30px 70px rgba(0,0,0,.45);
  --glow-azul: 0 0 0 1px rgba(45,91,255,.35), 0 20px 60px rgba(45,91,255,.28);
  --glow-coral: 0 0 0 1px rgba(255,90,95,.35), 0 20px 60px rgba(255,90,95,.28);

  --r: 18px;
}

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo); color: #fff;
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--acento); color: var(--tinta); }

/* ---------- primitivas ---------- */
.shell { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }

.eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--azul-2); margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
}
.clara .eyebrow { color: var(--azul); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.9rem, 7.4vw, 6rem); line-height: .96; letter-spacing: -.04em; }
h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em; }
h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0; }

.lede { font-size: 1.15rem; line-height: 1.55; color: var(--texto-suave); }
.clara .lede { color: var(--gris); }
.small { font-size: .88rem; color: var(--gris); line-height: 1.55; }
.tiny { font-size: .78rem; color: var(--gris-c); }
.mono { font-family: var(--mono); }

.grad {
  background: linear-gradient(92deg, var(--acento) 0%, var(--acento-2) 60%, #FFC46B 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-azul {
  background: linear-gradient(92deg, var(--azul) 0%, #4F7BFF 55%, var(--cian) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- botones ---------- */
.btn {
  position: relative; isolation: isolate;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  text-decoration: none; min-height: 46px; white-space: nowrap;
  transition: transform 220ms var(--out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 260ms ease;
  will-change: transform;
}
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.02rem; min-height: 54px; }
.btn-sm { padding: .55rem 1rem; font-size: .86rem; min-height: 38px; }

.btn-primary { background: var(--azul); color: #fff; box-shadow: 0 8px 24px rgba(45,91,255,.28); }
.btn-acento { background: var(--acento); color: var(--tinta); box-shadow: 0 8px 28px rgba(255,90,95,.32); }
.btn-ghost { background: var(--vidrio-2); color: #fff; border-color: var(--borde-2); }
.btn-line { background: transparent; color: #fff; border-color: var(--borde-2); }
.clara .btn-ghost { background: var(--blanco); color: var(--azul); border-color: var(--rule); }

/* brillo que cruza el botón coral */
.btn-acento::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0;
  transition: background-position 700ms var(--out);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--hondo); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(45,91,255,.4); }
  .btn-acento:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,90,95,.45); }
  .btn-acento:hover::after { background-position: -20% 0; }
  .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); }
  .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
  .clara .btn-ghost:hover { border-color: var(--azul); }
}

.icon { width: 1.15rem; height: 1.15rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .icon { transition: transform 220ms var(--out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon { transform: translateX(4px); } }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .55em; font-family: var(--display); line-height: 1; text-decoration: none; font-size: 1.85rem; }
.logo .words { display: flex; flex-direction: column; gap: .16em; }
.logo .l1 { font-weight: 700; font-size: 1em; letter-spacing: -.035em; color: #fff; }
.logo .l2 { font-family: var(--sans); font-weight: 600; font-size: .3em; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }

/* ============================================================
   CAPAS GLOBALES: cursor, progreso de lectura
   ============================================================ */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 44rem; height: 44rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,91,255,.16) 0%, rgba(45,91,255,.05) 35%, transparent 65%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 600ms ease;
}
body.con-cursor .cursor-glow { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--azul), var(--cian) 50%, var(--acento));
  transform-origin: left; transform: scaleX(0);
}

/* ============================================================
   NAV: empieza transparente y de ancho completo; al bajar se
   convierte en una píldora de vidrio flotante.
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: .9rem 1.5rem;
  transition: padding 400ms var(--out);
}
.nav {
  max-width: 76rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 4.25rem; padding: 0 .25rem 0 .5rem;
  border-radius: 999px; border: 1px solid transparent;
  transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, height 400ms var(--out), padding 400ms var(--out), max-width 500ms var(--out);
}
.navbar.compacta .nav {
  max-width: 64rem; height: 3.6rem;
  background: rgba(11,16,32,.62); border-color: var(--borde);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 0 .4rem 0 .9rem;
}
.navbar.compacta .logo { font-size: 1.5rem; }
.navbar.compacta .logo svg { width: 32px; height: 32px; }
.navbar .logo { transition: font-size 400ms var(--out); }
.navbar .logo svg { transition: width 400ms var(--out), height 400ms var(--out); }

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links a {
  position: relative; font-size: .92rem; font-weight: 500; color: #C3D2DF; text-decoration: none;
  padding: .5rem .85rem; border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease;
}
.nav-links a.activo { color: #fff; background: rgba(255,255,255,.08); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); } }
.nav-actions { display: flex; align-items: center; gap: .5rem; }

.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; }
.burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 300ms var(--out), opacity 200ms ease; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 45; padding: 7rem 2rem 2rem;
  background: rgba(7,10,22,.97);
  display: flex; flex-direction: column; gap: .25rem;
}
.menu-movil a {
  font-family: var(--display); font-weight: 700; font-size: 2.2rem; letter-spacing: -.03em;
  color: #fff; text-decoration: none; padding: .55rem 0;
  border-bottom: 1px solid var(--borde);
  opacity: 0; translate: 0 14px;
  animation: subir 500ms var(--out) forwards;
}
.menu-movil a:nth-child(2) { animation-delay: 60ms; }
.menu-movil a:nth-child(3) { animation-delay: 120ms; }
.menu-movil a:nth-child(4) { animation-delay: 180ms; }
.menu-movil a:nth-child(5) { animation-delay: 240ms; }
.menu-movil .menu-entrar { color: var(--acento); border: 0; margin-top: 1rem; font-size: 1.3rem; }
@keyframes subir { to { opacity: 1; translate: 0 0; } }

@media (max-width: 62rem) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-actions #entrar { display: none; }
}
@media (max-width: 34rem) {
  .navbar { padding: .6rem .75rem; }
  .navbar .logo .words { display: none; }
  .navbar .logo { gap: 0; }
  .nav { height: 3.6rem; }
}

/* ============================================================
   FONDOS DE LUZ: aurora + malla
   ============================================================ */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; border-radius: 50%; opacity: .55;
  will-change: transform;
}
.aurora .a1 { width: 48rem; height: 48rem; left: -14rem; top: -18rem; background: radial-gradient(circle, #2D5BFF 0%, rgba(45,91,255,0) 65%); animation: flotar1 18s ease-in-out infinite; }
.aurora .a2 { width: 40rem; height: 40rem; right: -10rem; top: 10%; background: radial-gradient(circle, #FF5A5F 0%, rgba(255,90,95,0) 65%); opacity: .38; animation: flotar2 22s ease-in-out infinite; }
.aurora .a3 { width: 34rem; height: 34rem; left: 35%; bottom: -16rem; background: radial-gradient(circle, #7B5CFF 0%, rgba(123,92,255,0) 65%); opacity: .35; animation: flotar3 26s ease-in-out infinite; }
.aurora.chica span { opacity: .28; }
.aurora.chica .a2 { opacity: .2; }

@keyframes flotar1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(8rem, 6rem) scale(1.15); } 66% { transform: translate(-3rem, 10rem) scale(.95); } }
@keyframes flotar2 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-10rem, -4rem) scale(1.2); } 70% { transform: translate(-4rem, 8rem) scale(.9); } }
@keyframes flotar3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12rem, -8rem) scale(1.1); } }

.malla {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 6.5rem; padding-bottom: 4rem;
}
.hero-mark { position: absolute; top: -8%; right: -10%; width: min(52rem, 66%); opacity: .06; pointer-events: none; z-index: 0; animation: girar 90s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 4rem; align-items: center;
}
.hero-inner > * { min-width: 0; }
@media (max-width: 62rem) { .hero-inner { grid-template-columns: 1fr; gap: 3rem; } }

.hero-copy { display: flex; flex-direction: column; gap: 1.7rem; }

.pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #DCE4F5; padding: .5rem .95rem .5rem .7rem; border-radius: 999px;
  border: 1px solid var(--borde-2); background: var(--vidrio);
}
.pulse { width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde-n); box-shadow: 0 0 0 0 rgba(53,224,161,.6); animation: latir 2s ease-out infinite; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(53,224,161,.6); } 100% { box-shadow: 0 0 0 12px rgba(53,224,161,0); } }

/* lo del hero entra solo al cargar, sin esperar al scroll */
.entra { opacity: 0; translate: 0 22px; animation: subir 900ms var(--out) forwards; animation-delay: calc(150ms + var(--i, 0) * 80ms); }

/* titular cinético: cada palabra sube desde abajo de su línea */
.kinetic { display: flex; flex-direction: column; }
.kinetic .linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.kinetic .w {
  display: inline-block; transform: translateY(110%) rotate(3deg);
  animation: palabra 900ms var(--out) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes palabra { to { transform: none; } }

.rotor { height: 1.05em; position: relative; color: var(--acento); }
.rotor-track { display: flex; flex-direction: column; animation: rotar 9s var(--out) infinite; animation-delay: 1.2s; }
.rotor-track span { display: block; height: 1.05em; line-height: 1.05; }
.rotor-track span:nth-child(2) { color: var(--acento-2); }
.rotor-track span:nth-child(3) { color: var(--cian); }
@keyframes rotar {
  0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(-25%); }
  66%, 92% { transform: translateY(-50%); }
  100% { transform: translateY(-75%); }
}

.hero .lede { max-width: 32rem; font-size: 1.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.fact { display: flex; align-items: center; gap: .5rem; font-size: .87rem; color: var(--texto-suave); }
.fact .icon { width: 1rem; height: 1rem; color: var(--verde-n); }

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border: 1.5px solid var(--borde-2); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 7px;
}
.scroll-hint span { width: 3px; height: 8px; border-radius: 3px; background: #fff; animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 62rem) { .scroll-hint { display: none; } }

/* ---------- test de nivel (tarjeta con inclinación 3D) ---------- */
.tilt-zone { position: relative; perspective: 1400px; }
.quiz {
  position: relative; background: rgba(255,255,255,.98); color: var(--tinta);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 80px rgba(45,91,255,.18);
  transform-style: preserve-3d;
  transition: transform 500ms var(--out), box-shadow 500ms ease;
  opacity: 0; animation: aparecer 900ms var(--out) 500ms forwards;
}
/* Se anima con translate/scale y no con transform: la inclinación 3D
   escribe transform en línea, y una animación con fill-mode se lo pisaría. */
@keyframes aparecer { from { opacity: 0; translate: 0 40px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.quiz.activa { transition: transform 120ms linear; }
.quiz-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), rgba(45,91,255,.12), transparent 45%);
  opacity: 0; transition: opacity 300ms ease;
}
.quiz.activa .quiz-glow { opacity: 1; }

.quiz-head { padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quiz-head .eyebrow { color: var(--azul); }
.live { width: .45rem; height: .45rem; border-radius: 50%; background: var(--acento); animation: latirCoral 1.6s ease-in-out infinite; }
@keyframes latirCoral { 50% { opacity: .35; transform: scale(.8); } }
.progress { display: flex; gap: .3rem; }
.progress span { width: 1.7rem; height: .32rem; border-radius: 3px; background: var(--rule); overflow: hidden; position: relative; }
.progress span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--azul), var(--cian)); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--out); }
.progress span.on::after { transform: scaleX(1); }

.quiz-body { padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; min-height: 20rem; }
.quiz-q { font-family: var(--display); font-weight: 600; font-size: 1.36rem; line-height: 1.25; letter-spacing: -.015em; animation: entrarQ 380ms var(--out); }
@keyframes entrarQ { from { opacity: 0; transform: translateX(14px); } }
.quiz-opts { display: flex; flex-direction: column; gap: .55rem; }
.quiz-opts .opt:nth-child(1) { animation-delay: 40ms; }
.quiz-opts .opt:nth-child(2) { animation-delay: 100ms; }
.quiz-opts .opt:nth-child(3) { animation-delay: 160ms; }
.opt {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--nieve); border: 1px solid var(--rule); border-radius: 12px;
  padding: .85rem 1rem; font-size: .94rem; line-height: 1.4; min-height: 46px;
  display: flex; align-items: center; gap: .7rem;
  transition: border-color 160ms ease, background-color 160ms ease, transform 200ms var(--spring), box-shadow 200ms ease;
  opacity: 0; translate: 0 8px; animation: subir 400ms var(--out) forwards;
}
.opt::before { content: ""; width: .9rem; height: .9rem; flex: none; border-radius: 50%; border: 1.5px solid var(--gris-c); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.opt:active { transform: scale(.985); }
.opt:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: var(--azul); background: var(--wash); transform: translateX(4px); box-shadow: 0 6px 20px rgba(45,91,255,.14); }
  .opt:hover::before { border-color: var(--azul); background: var(--azul); box-shadow: inset 0 0 0 3px var(--wash); }
}

.quiz-result { display: flex; flex-direction: column; gap: .9rem; animation: entrarQ 420ms var(--out); }
.level-badge {
  align-self: flex-start; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--verde-w), #DDF6FF); color: var(--verde); padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid rgba(11,125,87,.2);
}
.level-title { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.12; letter-spacing: -.02em; }
.quiz-foot { background: var(--nieve); border-top: 1px solid var(--rule); padding: .9rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.link-quiet { background: none; border: 0; font: inherit; font-size: .85rem; color: var(--gris); cursor: pointer; padding: .4rem 0; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* etiquetas de nivel que orbitan la tarjeta */
.orbita {
  position: absolute; z-index: 3; pointer-events: none;
  padding: .45rem .7rem; border-radius: 10px;
  background: rgba(11,16,32,.7); border: 1px solid var(--borde-2);
  color: #fff; font-size: .78rem; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: orbitar 7s ease-in-out infinite;
  opacity: 0; animation-fill-mode: forwards;
}
.orbita .mono { letter-spacing: .1em; }
.o1 { top: -1.1rem; left: -1.4rem; animation-delay: 1.2s; border-color: rgba(53,224,161,.5); }
.o2 { bottom: 2.4rem; right: -1.6rem; animation-delay: 1.6s; border-color: rgba(45,91,255,.6); }
.o3 { top: 38%; right: -2.2rem; animation-delay: 2s; border-color: rgba(255,90,95,.55); }
@keyframes orbitar {
  0% { opacity: 0; transform: translateY(6px); }
  10%, 100% { opacity: 1; }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(6px); }
}
@media (max-width: 62rem) { .orbita { display: none; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.goals {
  position: relative; z-index: 2; overflow: hidden;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  background: rgba(255,255,255,.025);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.goals-track { display: flex; width: max-content; animation: slide 48s linear infinite; }
.goals-set { display: flex; align-items: center; gap: 3rem; padding: 1rem 1.5rem; }
.goals-set span { font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; color: #E6ECF8; }
.goals-set b { font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-2); margin-left: .5rem; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (hover: hover) { .goals:hover .goals-track { animation-play-state: paused; } }

/* ============================================================
   CIFRAS
   ============================================================ */
.stats { padding: 4.5rem 0 1rem; position: relative; z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--fondo); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--azul), var(--cian)); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--out) 200ms; }
.stat.in::after { transform: scaleX(1); }
.stat .n { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .n span { background: linear-gradient(180deg, #fff, #AEB9D3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: .9rem; color: var(--texto-suave); line-height: 1.5; }
@media (max-width: 62rem) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .stats-grid { grid-template-columns: 1fr; } .stats { padding-top: 3rem; } }

/* ============================================================
   BANDAS
   ============================================================ */
.band { position: relative; padding: 7rem 0; }
.band.oscura { background: var(--fondo); color: #fff; }
.band.clara { background: var(--nube); color: var(--tinta); }
.band.clara::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,16,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,16,32,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 70%);
}
.band > .shell { position: relative; z-index: 1; }

.sec-head { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; margin-bottom: 3rem; }
.sec-head a { color: var(--azul); text-decoration: none; border-bottom: 1px solid currentColor; }

/* revelado al hacer scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--out), transform 800ms var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; }

/* vidrio + luz que sigue al cursor */
.glass {
  position: relative; background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color 300ms ease, transform 400ms var(--out), box-shadow 400ms ease;
}
.spot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(22rem circle at var(--mx, -100px) var(--my, -100px), rgba(45,91,255,.22), transparent 45%);
  opacity: 0; transition: opacity 300ms ease;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .glass:hover { border-color: var(--borde-2); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
}

/* ============================================================
   PASOS
   ============================================================ */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.steps-linea { position: absolute; top: 2.55rem; left: 2rem; right: 2rem; height: 2px; background: var(--borde); z-index: 0; overflow: hidden; border-radius: 2px; }
.steps-linea span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--azul), var(--cian) 60%, var(--acento)); transform: scaleX(0); transform-origin: left; transition: transform 300ms linear; }
.step { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .8rem; z-index: 1; }
.step .num {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--azul-2);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--fondo); border: 1px solid rgba(45,91,255,.5); box-shadow: 0 0 20px rgba(45,91,255,.25);
}
.step .ico { width: 2rem; height: 2rem; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: .4rem; }
.step h3 { font-size: 1.25rem; }
.step p { font-size: .93rem; color: var(--texto-suave); line-height: 1.55; }
@media (max-width: 62rem) { .steps { grid-template-columns: repeat(2, 1fr); } .steps-linea { display: none; } }
@media (max-width: 34rem) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   BENTO
   ============================================================ */
.bento-band { padding-top: 2rem; }
.bento {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "panel aviso prof"
    "panel pago  obj";
}
.tile { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.4rem; overflow: hidden; min-height: 15rem; }
.tile-txt { display: flex; flex-direction: column; gap: .45rem; }
.tile h3 { font-size: 1.25rem; }
.tile p { font-size: .92rem; color: var(--texto-suave); line-height: 1.55; }
.t-panel { grid-area: panel; }
.t-aviso { grid-area: aviso; }
.t-prof  { grid-area: prof; }
.t-pago  { grid-area: pago; }
.t-obj   { grid-area: obj; }
@media (max-width: 62rem) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "panel panel" "aviso prof" "pago obj"; }
}
@media (max-width: 34rem) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "panel" "aviso" "prof" "pago" "obj"; }
}

/* mini panel */
.mock-panel {
  margin-top: auto; background: rgba(7,10,22,.75); border: 1px solid var(--borde-2); border-radius: 14px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem;
  transform: perspective(900px) rotateX(6deg) rotateY(-6deg); transform-origin: bottom left;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  transition: transform 600ms var(--out);
}
.tile:hover .mock-panel { transform: perspective(900px) rotateX(0) rotateY(0); }
.mp-top { display: flex; gap: .35rem; margin-bottom: .2rem; }
.mp-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--borde-2); }
.mp-dot:first-child { background: var(--acento); }
.mp-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .85rem; padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.mp-lbl { color: var(--texto-suave); }
.mp-val { font-family: var(--mono); font-size: .8rem; color: #fff; }
.mp-row:nth-child(3) .mp-val { color: var(--verde-n); }
.mp-btn { margin-top: .3rem; background: var(--azul); color: #fff; text-align: center; font-weight: 600; font-size: .88rem; padding: .65rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(45,91,255,.35); }
.mp-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin: .2rem 0 .4rem; }
.mp-semana span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-family: var(--mono); font-size: .72rem; color: var(--texto-suave); background: rgba(255,255,255,.04); border: 1px solid var(--borde); }
.mp-semana span.clase { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: 0 6px 16px rgba(45,91,255,.4); }
.mp-semana span.punto { position: relative; }
.mp-semana span.punto::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--verde-n); }
.t-panel .mock-panel { padding: 1.2rem 1.25rem; gap: .85rem; }
.t-panel .mp-row { font-size: .9rem; padding: .5rem 0; }

/* toasts */
.toasts { display: flex; flex-direction: column; gap: .6rem; margin-top: auto; }
.toast {
  display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem;
  background: rgba(7,10,22,.75); border: 1px solid var(--borde-2); border-radius: 12px;
  opacity: 0; transform: translateX(30px);
  animation: toastEntrar 6s ease-in-out infinite;
}
.toast:nth-child(2) { animation-delay: 3s; }
.toast b { display: block; font-size: .86rem; font-weight: 600; }
.toast small { font-size: .76rem; color: var(--texto-suave); }
.tk { width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--azul), var(--cian)); position: relative; }
.tk::after { content: ""; position: absolute; inset: 0; margin: auto; width: .55rem; height: .3rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
@keyframes toastEntrar { 0% { opacity: 0; transform: translateX(30px); } 10%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateX(-20px); } }

/* avatares */
.avatares { display: flex; margin-top: auto; }
.avatares span {
  width: 3rem; height: 3rem; border-radius: 50%; margin-left: -.7rem;
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: .85rem;
  border: 2px solid var(--fondo); color: #fff;
  background: linear-gradient(135deg, var(--azul), #7B5CFF);
  transition: transform 300ms var(--spring);
}
.avatares span:first-child { margin-left: 0; }
.avatares span:nth-child(2) { background: linear-gradient(135deg, var(--acento), var(--acento-2)); }
.avatares span:nth-child(3) { background: linear-gradient(135deg, #35E0A1, #1F7A5C); }
.avatares span:nth-child(4) { background: linear-gradient(135deg, var(--cian), var(--azul)); }
.avatares span:last-child { background: var(--vidrio-2); border-color: var(--borde-2); }
.tile:hover .avatares span { transform: translateY(-4px); }
.tile:hover .avatares span:nth-child(2) { transition-delay: 40ms; }
.tile:hover .avatares span:nth-child(3) { transition-delay: 80ms; }
.tile:hover .avatares span:nth-child(4) { transition-delay: 120ms; }
.tile:hover .avatares span:nth-child(5) { transition-delay: 160ms; }

/* tarjeta de pago */
.tarjeta {
  margin-top: auto; aspect-ratio: 1.7; max-width: 15rem; border-radius: 14px; padding: 1rem;
  background: linear-gradient(135deg, #1B3ACC 0%, #2D5BFF 45%, #4FD1FF 130%);
  display: grid; grid-template-rows: 1fr auto; gap: .5rem; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(45,91,255,.35);
  transform: rotate(-3deg); transition: transform 500ms var(--out);
}
.tile:hover .tarjeta { transform: rotate(0) translateY(-4px); }
.tarjeta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 250% 100%; animation: brillo 4s ease-in-out infinite; }
@keyframes brillo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
.chip-t { width: 2rem; height: 1.4rem; border-radius: 5px; background: linear-gradient(135deg, #FFD37A, #D9922F); }
.tarjeta .mono { font-size: .9rem; letter-spacing: .12em; color: #fff; }
.tarjeta .ok { position: absolute; right: .9rem; bottom: .9rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; background: rgba(53,224,161,.25); color: #D8FFF0; border: 1px solid rgba(53,224,161,.5); }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; }
.tags span {
  font-size: .82rem; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde-2); background: var(--vidrio);
  transition: background-color 200ms ease, border-color 200ms ease, transform 300ms var(--spring);
}
.tile:hover .tags span:nth-child(3n) { border-color: var(--acento); background: rgba(255,90,95,.14); transform: translateY(-3px); }
.tile:hover .tags span:nth-child(3n+1) { border-color: var(--azul); background: rgba(45,91,255,.18); transform: translateY(-3px); transition-delay: 60ms; }
.tile:hover .tags span:nth-child(3n+2) { border-color: var(--verde-n); background: rgba(53,224,161,.14); transform: translateY(-3px); transition-delay: 120ms; }

/* ============================================================
   RESERVA (banda clara)
   ============================================================ */
.filters { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.filter-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-c); margin-right: .35rem; }
.chip {
  font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; min-height: 40px;
  background: var(--blanco); border: 1px solid var(--rule); color: var(--tinta);
  padding: .45rem .95rem; border-radius: 999px;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 200ms var(--spring), box-shadow 200ms ease;
}
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); } }
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 8px 22px rgba(45,91,255,.3); }

.agenda {
  background: var(--blanco); border: 1px solid var(--rule); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(11,16,32,.10), 0 2px 6px rgba(11,16,32,.04);
}
@media (min-width: 62rem) {
  .agenda { display: grid; grid-template-columns: 23rem minmax(0, 1fr); }
  .agenda .dias { border-bottom: 0; border-right: 1px solid var(--rule); }
  .agenda .horas { padding-top: 1.1rem; }
  .agenda .agenda-pie { grid-column: 1 / -1; }
}
.dias { display: block; border-bottom: 1px solid var(--rule); }
.horas { padding: 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 1.35rem; }
.bloque { display: flex; flex-direction: column; gap: .65rem; }
.bloque-nombre { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris-c); }
.horas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .55rem; }
.hora {
  font: inherit; cursor: pointer; min-height: 58px;
  background: var(--blanco); border: 1px solid var(--rule); border-radius: 12px;
  padding: .55rem .75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; color: var(--tinta);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 200ms var(--spring), box-shadow 200ms ease;
}
.hora:active { transform: scale(.975); }
.hora:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hora:not([aria-pressed="true"]):not([disabled]):hover { border-color: var(--azul); background: var(--wash); transform: translateY(-2px); } }
.hora .h { font-family: var(--mono); font-size: 1rem; font-weight: 500; }
.hora .q { font-size: .74rem; color: var(--verde); }
.hora[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 10px 26px rgba(45,91,255,.32); }
.hora[aria-pressed="true"] .q { color: rgba(255,255,255,.8); }
.hora[disabled] { background: var(--nieve); color: #B7BDC4; cursor: not-allowed; }
.hora[disabled] .q { color: #C3C8CE; }
.agenda-pie { border-top: 1px solid var(--rule); padding: .8rem 1.4rem; background: var(--nieve); font-family: var(--mono); margin: 0; }

.resultado { margin-top: 1.5rem; display: flex; flex-direction: column; }
.prompt { display: flex; align-items: center; gap: .75rem; border: 1px dashed var(--rule); border-radius: 14px; padding: 1.4rem 1.5rem; background: var(--blanco); color: var(--gris); }
.prompt .icon { color: var(--ocre); width: 1.4rem; height: 1.4rem; }
.prompt p { font-size: .96rem; }
.empty { border: 1px dashed var(--rule); border-radius: 14px; padding: 2.2rem 1.5rem; text-align: center; color: var(--gris); background: var(--blanco); line-height: 1.6; }
.count-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; }
.count-bar .n { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.reserva-caja {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  background: var(--blanco); border: 1px solid var(--rule); border-radius: 16px; padding: 1.4rem 1.5rem;
  box-shadow: 0 20px 50px rgba(45,91,255,.12);
}
.reserva-nota { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--gris); max-width: 34rem; }

/* calendario (lo pinta agenda.js) */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); background: var(--nieve); }
.cal-mes { font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; text-transform: capitalize; }
.cal-flecha { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--rule); border-radius: 50%; color: var(--azul); cursor: pointer; transition: border-color 160ms ease, transform 200ms var(--spring); }
.cal-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-flecha:active { transform: scale(.94); }
.cal-flecha:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.cal-flecha:disabled { color: #C3C8CE; cursor: not-allowed; background: var(--nieve); }
@media (hover: hover) and (pointer: fine) { .cal-flecha:not(:disabled):hover { border-color: var(--azul); transform: scale(1.08); } }
.cal-semana, .cal-grilla { max-width: 24rem; margin-left: auto; margin-right: auto; }
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); padding: .7rem 1rem .35rem; gap: .15rem; border-bottom: 1px solid var(--rule); }
.cal-semana span { text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--gris-c); }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; padding: .6rem 1rem 1rem; }
.cal-hueco { aspect-ratio: 1; }
.cal-dia {
  aspect-ratio: 1; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  background: var(--nieve); border: 1px solid transparent; border-radius: 12px; font: inherit; color: var(--tinta); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 200ms var(--spring), box-shadow 200ms ease;
}
.cal-dia .n { font-family: var(--mono); font-size: .84rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-dia .p { width: .3rem; height: .3rem; border-radius: 50%; background: var(--verde); }
.cal-dia:active { transform: scale(.94); }
.cal-dia:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .cal-dia:not(:disabled):not(.activo):hover { background: var(--wash); border-color: var(--azul); transform: scale(1.06); } }
.cal-dia:disabled { color: #C3C8CE; cursor: not-allowed; background: transparent; }
.cal-dia:disabled .n { font-weight: 400; }
.cal-dia.hoy:not(.activo) { box-shadow: inset 0 0 0 1.5px var(--ocre); }
.cal-dia.activo { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: 0 8px 20px rgba(45,91,255,.35); }
.cal-dia.activo .p { background: rgba(255,255,255,.75); }
.clara .btn-primary { background: var(--azul); color: #fff; }

/* ============================================================
   PRECIOS
   ============================================================ */
.precios-band { overflow: hidden; }
/* Cuatro planes. A pantalla ancha van en fila; cuando dejan de caber
   se parten en dos y dos, que es mejor que cuatro columnas
   estrujadas donde el precio se corta. */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
@media (max-width: 78rem) { .planes { grid-template-columns: repeat(2, 1fr); } }
.plan { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.plan h3 { font-family: var(--sans); font-size: .98rem; font-weight: 500; color: #fff; }
.plan-etiqueta { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); align-self: flex-start; padding: .3rem .6rem; border-radius: 999px; border: 1px solid rgba(255,90,95,.4); background: rgba(255,90,95,.1); margin-bottom: .3rem; }
.plan-precio { margin: .4rem 0 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.plan-precio .monto { font-family: var(--display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.plan-precio .unidad { font-size: .85rem; color: var(--texto-suave); }
.plan-porclase { font-family: var(--mono); font-size: .76rem; color: var(--cian); margin: 0; }
.plan-nota { font-size: .88rem; color: var(--texto-suave); line-height: 1.5; margin: .5rem 0 1.2rem; }
.plan-btn { margin-top: auto; align-self: stretch; }

/* el plan destacado tiene un borde de luz que gira */
.plan.destacado { position: relative; padding: 0; border: 0; background: transparent; transform: translateY(-.6rem); }
.plan-borde {
  position: absolute; inset: 0; border-radius: var(--r); padding: 1.5px;
  background: conic-gradient(from var(--ang), var(--acento), var(--azul), var(--cian), var(--acento));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giroBorde 6s linear infinite;
}
@keyframes giroBorde { to { --ang: 360deg; } }
.plan.destacado::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r); z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,90,95,.35), transparent 70%);
  filter: blur(30px);
}
.plan-cuerpo {
  position: relative; height: 100%; border-radius: var(--r); padding: 1.7rem 1.6rem;
  background: linear-gradient(180deg, rgba(255,90,95,.14), rgba(11,16,32,.85) 60%);
  display: flex; flex-direction: column; gap: .5rem;
}
.plan-cuerpo h3 { font-family: var(--sans); font-size: .98rem; font-weight: 500; }
.plan-cuerpo .plan-btn { margin-top: auto; }
@media (max-width: 62rem) { .planes { grid-template-columns: 1fr; } .plan.destacado { transform: none; } }

.planes-examenes {
  margin-top: 1.1rem; padding: 1.7rem 1.6rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
}
.examenes-titulo { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: #fff; margin: .6rem 0 .5rem; letter-spacing: -.02em; }
.examenes-bajada { font-size: .92rem; color: var(--texto-suave); margin: 0; max-width: 34rem; }
.examenes-precio { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.examenes-precio .plan-btn { margin-top: .8rem; align-self: flex-start; }
@media (max-width: 62rem) { .planes-examenes { grid-template-columns: 1fr; gap: 1.2rem; } }

.planes-pie { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2rem; align-items: center; }
.planes-pie p { font-size: .93rem; color: var(--texto-suave); line-height: 1.6; margin: 0; max-width: 44rem; }
.planes-pie strong { color: #fff; font-weight: 600; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.quotes-band { padding-bottom: 5rem; overflow: hidden; }
.quotes-band .sec-head { margin-bottom: 2.5rem; }
.quotes-track {
  display: flex; width: max-content; gap: 1.1rem; padding: .5rem 0;
  animation: slide 60s linear infinite;
}
@media (hover: hover) { .quotes-track:hover { animation-play-state: paused; } }
.quotes-set { display: flex; gap: 1.1rem; padding-right: 1.1rem; }
.quote { width: 22rem; padding: 1.7rem; display: flex; flex-direction: column; gap: 1.2rem; margin: 0; }
.quote .comilla { width: 1.6rem; }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.18rem; line-height: 1.45; letter-spacing: -.005em; color: #F1F4FB; }
.quote figcaption { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.q-ini { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, var(--azul), #7B5CFF); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: .82rem; font-weight: 600; }
.quote:nth-child(2) .q-ini { background: linear-gradient(135deg, var(--acento), var(--acento-2)); }
.quote:nth-child(3) .q-ini { background: linear-gradient(135deg, #35E0A1, #1F7A5C); }
.quote:nth-child(4) .q-ini { background: linear-gradient(135deg, var(--cian), var(--azul)); }
.q-who { font-size: .88rem; font-weight: 600; display: block; }
.q-role { font-size: .78rem; color: var(--texto-suave); }
@media (max-width: 34rem) { .quote { width: 18rem; padding: 1.4rem; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
.sec-head.pegada { position: sticky; top: 6rem; margin-bottom: 0; }
@media (max-width: 62rem) { .faq-grid { grid-template-columns: 1fr; gap: 2rem; } .sec-head.pegada { position: static; } }

.faq { display: flex; flex-direction: column; gap: .6rem; }
.faq details { background: var(--blanco); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; transition: border-color 200ms ease, box-shadow 300ms ease; }
.faq details[open] { border-color: rgba(45,91,255,.45); box-shadow: 0 16px 40px rgba(45,91,255,.10); }
.faq summary { cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
.mas { position: relative; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; background: var(--wash); transition: transform 300ms var(--out), background-color 200ms ease; }
.mas::before, .mas::after { content: ""; position: absolute; background: var(--azul); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; }
.mas::before { width: .7rem; height: 2px; }
.mas::after { width: 2px; height: .7rem; transition: transform 300ms var(--out); }
.faq details[open] .mas { background: var(--azul); transform: rotate(180deg); }
.faq details[open] .mas::before, .faq details[open] .mas::after { background: #fff; }
.faq details[open] .mas::after { transform: translate(-50%, -50%) scaleY(0); }
.faq .ans { padding: 0 1.25rem 1.2rem; animation: subir 400ms var(--out); }
.faq .ans p { font-size: .95rem; color: var(--gris); line-height: 1.65; }

/* ============================================================
   CIERRE + PIE
   ============================================================ */
.cierre { position: relative; overflow: hidden; padding: 9rem 0; background: var(--fondo); text-align: center; }
.cierre-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 44rem; }
.cierre h2 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.cierre .lede { max-width: 36rem; }

.pie { background: #04060F; color: var(--texto-suave); padding: 4rem 0 2.5rem; border-top: 1px solid var(--borde); }
.pie-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 2rem; }
.pie-desc { margin-top: 1rem; font-size: .9rem; max-width: 19rem; line-height: 1.6; }
@media (max-width: 62rem) { .pie-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .pie-grid { grid-template-columns: 1fr; } }
.pie h4 { font-size: .7rem; font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--azul-2); font-weight: 500; margin-bottom: .9rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pie a { color: var(--texto-suave); text-decoration: none; font-size: .92rem; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: #fff; } }
.pie-bottom { border-top: 1px solid var(--borde); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-family: var(--mono); font-size: .72rem; color: #6C7899; }

/* ============================================================
   DIÁLOGOS (los abre dialogo.js)
   ============================================================ */
.dlg-fondo {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(60% 60% at 50% 40%, rgba(45,91,255,.18), transparent 70%), rgba(4,6,15,.86);
  display: grid; place-items: center; padding: 1.25rem; opacity: 0; transition: opacity 220ms ease;
}
.dlg-fondo.visible { opacity: 1; }
.dlg {
  position: relative; width: min(27rem, 100%);
  background: #0E1428; color: #fff;
  border: 1px solid var(--borde-2); border-radius: 22px; padding: 1.8rem 1.7rem 1.5rem;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1), 0 0 80px rgba(45,91,255,.18);
  display: flex; flex-direction: column; gap: .75rem;
  transform: scale(.94) translateY(14px); opacity: 0;
  transition: transform 320ms var(--spring), opacity 220ms var(--out);
}
.dlg::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 40%, transparent 60%, rgba(45,91,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.dlg.visible { transform: none; opacity: 1; }
.dlg h2 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.dlg p { font-size: .95rem; line-height: 1.6; color: var(--texto-suave); margin: 0; }
.dlg .btn-ghost { background: var(--vidrio-2); color: #fff; border-color: var(--borde-2); }
.dlg .btn-primary { background: var(--azul); color: #fff; }
.dlg-campo { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.dlg-campo span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-2); }
.dlg-campo textarea { font: inherit; font-size: .95rem; color: #fff; resize: vertical; background: rgba(255,255,255,.06); border: 1px solid var(--borde-2); border-radius: 12px; padding: .65rem .8rem; min-height: 4.5rem; }
.dlg-campo textarea:focus { outline: 0; border-color: var(--azul-2); box-shadow: 0 0 0 4px rgba(45,91,255,.18); }
.dlg-campo textarea.malo { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,90,95,.18); }
.dlg-caminos { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.dlg-camino {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem .9rem;
  text-align: left; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-radius: 16px;
  padding: 1rem 1.1rem; min-height: 60px; overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease, transform 250ms var(--spring), box-shadow 250ms ease;
}
.dlg-camino::after { content: ""; position: absolute; inset: 0; background: radial-gradient(20rem circle at 0% 50%, rgba(45,91,255,.25), transparent 50%); opacity: 0; transition: opacity 250ms ease; }
.dlg-camino .t { font-family: var(--display); font-weight: 700; font-size: 1.05rem; grid-column: 1; position: relative; }
.dlg-camino .s { font-size: .84rem; color: var(--texto-suave); grid-column: 1; line-height: 1.45; position: relative; }
.dlg-camino .ir { grid-column: 2; grid-row: 1 / -1; width: 22px; height: 22px; fill: none; stroke: var(--texto-suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; position: relative; transition: stroke 160ms ease, transform 250ms var(--spring); }
.dlg-camino:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.dlg-camino:active { transform: scale(.98); }
.dlg-caminos .dlg-camino:nth-child(2)::after { background: radial-gradient(20rem circle at 0% 50%, rgba(255,90,95,.22), transparent 50%); }
@media (hover: hover) and (pointer: fine) {
  .dlg-camino:hover { border-color: var(--borde-2); background: rgba(255,255,255,.08); transform: translateX(4px); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
  .dlg-camino:hover::after { opacity: 1; }
  .dlg-camino:hover .ir { stroke: #fff; transform: translateX(4px); }
}
.detalle-fallo { font-family: var(--mono); font-size: .74rem; color: #7E8AA8; margin-top: .5rem; word-break: break-word; }
.dlg-botones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.dlg-botones .btn { min-height: 44px; }
.dlg.peligro::before { background: linear-gradient(135deg, rgba(255,90,95,.8), transparent 45%, transparent 60%, rgba(255,90,95,.4)); }
.btn-peligro { background: var(--coral); color: #fff; box-shadow: 0 8px 24px rgba(217,58,68,.35); }

/* ============================================================
   TELÉFONO
   ============================================================ */
@media (max-width: 34rem) {
  .hero { padding-top: 5.5rem; padding-bottom: 3rem; min-height: auto; }
  .hero .lede { font-size: 1.05rem; }
  .hero-cta .btn { width: 100%; }
  .band { padding: 4rem 0; }
  .sec-head { margin-bottom: 2rem; }
  .cierre { padding: 6rem 0; }
  .chip { min-height: 44px; }
  .quiz-body { min-height: 17rem; padding: 1.2rem; }
  .cal-nav { padding: .7rem .6rem; }
  .cal-semana, .cal-grilla { padding-left: .35rem; padding-right: .35rem; }
  .cal-dia { min-height: 42px; }
  .horas { padding: 1rem .75rem; }
  .horas-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .4rem; }
  .planes-pie .btn { width: 100%; }
}

/* ============================================================
   MENOS MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .kinetic .w { transform: none; }
  .quiz { opacity: 1; }
  .orbita, .toast { opacity: 1; transform: none; }
  [data-reveal], .entra { opacity: 1; transform: none; translate: none; }
  .goals-track, .quotes-track { animation: none; }
  .cursor-glow { display: none; }
}

/* Un día sin clases (feriado o cierre) no es un día lleno: se tacha y
   lleva un borde coral, y el motivo aparece al pasar el mouse. */
.cal-dia.bloqueado { color: #D98A8D; box-shadow: inset 0 0 0 1px rgba(255,90,95,.35); cursor: help; }
.cal-dia.bloqueado .n { text-decoration: line-through; text-decoration-color: rgba(255,90,95,.8); font-weight: 400; }

/* La X del diálogo. Arriba a la derecha, discreta pero siempre visible:
   cerrar tiene que ser evidente también en el teléfono, donde no hay
   Escape y tocar fuera no se ve. */
.dlg { position: relative; }
.dlg-x {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--gris-c, #8A93A6); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.dlg-x svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dlg-x:hover { background: rgba(127,127,127,.14); color: inherit; }
.dlg-x:focus-visible { outline: 2px solid var(--azul, #2D5BFF); outline-offset: 2px; }
.dlg h2 { padding-right: 2.4rem; }

/* ============================================================
   EDITOR DEL LIBRO

   La anotación de una clase, en una ventana propia. La usan el panel
   del profesor y el de administración, que cargan esta misma hoja.
   El alumno no entra acá: el libro no se le muestra en ninguna parte.
   ============================================================ */

.lib-fondo {
  position: fixed; inset: 0; z-index: 120;
  background: radial-gradient(60% 60% at 50% 40%, rgba(45,91,255,.16), transparent 70%), rgba(4,6,15,.86);
  display: grid; place-items: center; padding: 1.5rem;
  opacity: 0; transition: opacity 200ms ease;
}
.lib-fondo.visible { opacity: 1; }

.lib-caja {
  width: min(44rem, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: #0E1428; color: #fff; border: 1px solid var(--borde-2); border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  transform: scale(.96) translateY(10px); transition: transform 260ms var(--spring);
}
.lib-fondo.visible .lib-caja { transform: none; }

.lib-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 1.1rem; border-bottom: 1px solid var(--borde); }
.lib-cab h2 { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; margin: .25rem 0 .2rem; text-transform: capitalize; }
.lib-cab .tiny { color: var(--texto-suave); }
.lib-cerrar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--borde); border-radius: 50%; color: var(--texto-suave); cursor: pointer; transition: transform 200ms var(--spring), color 160ms ease, background-color 160ms ease; }
.lib-cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lib-cerrar:hover { background: rgba(255,255,255,.08); color: #fff; transform: rotate(90deg); }

.lib-cuerpo { padding: 1.3rem 1.5rem; overflow-y: auto; }
.lib-form { display: flex; flex-direction: column; gap: 1rem; }
.lib-form .campo span { display: block; font-size: .82rem; font-weight: 600; color: #DCE4F5; margin-bottom: .4rem; }
.lib-form textarea, .lib-form input[type="text"], .lib-form select {
  font: inherit; font-size: .95rem; color: #fff; width: 100%; resize: vertical;
  background: rgba(255,255,255,.06); border: 1px solid var(--borde-2); border-radius: 12px;
  padding: .7rem .85rem; min-height: 46px; color-scheme: dark;
}
.lib-form textarea::placeholder, .lib-form input::placeholder { color: #6B7A99; }
.lib-form textarea:focus, .lib-form input:focus, .lib-form select:focus {
  outline: 0; border-color: var(--azul-2); box-shadow: 0 0 0 4px rgba(45,91,255,.18);
}
.lib-form select option { background: #0E1428; color: #fff; }
.lib-form .campo-corto { max-width: 16rem; }
.lib-error { font-size: .88rem; color: #FFB4B6; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); border-radius: 10px; padding: .6rem .8rem; }

.lib-solo-lectura { display: flex; flex-direction: column; gap: .7rem; line-height: 1.6; color: var(--texto-suave); }
.lib-solo-lectura b { color: #fff; }
.lib-palabras { font-family: var(--mono); font-size: .85rem; color: var(--verde-n); }

.lib-historial { padding: 0 1.5rem 1.1rem; }
.lib-ver { background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .85rem; color: var(--cian); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lib-versiones { display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.lib-version { background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 14px; padding: .9rem 1rem; line-height: 1.55; color: var(--texto-suave); font-size: .9rem; }
.lib-version header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.lib-version header span:first-child { font-weight: 600; color: #fff; }
.lib-version b { color: #fff; }

.lib-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--borde); background: rgba(0,0,0,.25); border-radius: 0 0 22px 22px; }
.lib-firma { color: var(--texto-suave); }
.lib-botones { display: flex; gap: .6rem; }

/* la columna del botón, en las dos tablas del libro */
.libro-accion { white-space: nowrap; vertical-align: middle; }
.libro-extra { display: block; margin-top: .4rem; font-size: .84rem; }

@media (max-width: 40rem) {
  .lib-caja { max-height: 94vh; }
  .lib-cab, .lib-cuerpo, .lib-pie { padding-left: 1.1rem; padding-right: 1.1rem; }
}


/* Las tarjetas de alumnos van acá y no en panel.css porque las usan dos
   paneles que no cargan la misma hoja: el del profesor carga panel.css y
   el de administración carga admin.css. Puestas en una sola de las dos,
   en el otro panel salían como una lista de enlaces azules pegados. */
/* ---------------- los alumnos del libro ----------------
   Una rejilla de tarjetas en vez de un campo con autocompletar: con
   cien alumnos hay que poder ver quiénes hay, no adivinar cómo se
   escribe el apellido. Van ordenados por última clase, así que arriba
   queda con quien se está trabajando ahora. */

.alu-rejilla {
  display: grid; gap: .6rem; margin-top: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.alu-tarjeta {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--borde);
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.alu-tarjeta:hover { border-color: var(--azul-2); background: rgba(45,91,255,.1); transform: translateY(-1px); }
.alu-tarjeta:focus-visible { outline: 2px solid var(--azul-2); outline-offset: 2px; }
.alu-tarjeta .av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(45,91,255,.22); border: 1px solid rgba(45,91,255,.35);
  font-size: .78rem; font-weight: 700; color: #fff;
}
.alu-quien { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .1rem; }
.alu-quien .nm { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alu-n {
  flex: 0 0 auto; font-family: var(--mono); font-size: .8rem;
  color: var(--texto-suave); padding-left: .4rem;
}

/* ---------------- la clase de diagnóstico ----------------
   La ventana donde se elige hora para la media hora gratis con la
   directora. Usa el mismo cuadro que los demás diálogos; lo propio es
   la lista de días y sus horas. */

.dlg.diag { max-width: 34rem; }
.diag-dias {
  display: flex; flex-direction: column; gap: .9rem;
  margin-top: 1.2rem; max-height: 22rem; overflow-y: auto;
  padding-right: .3rem;
}
.diag-dia { display: flex; flex-direction: column; gap: .45rem; }
.diag-fecha {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave);
}
.diag-horas { display: flex; flex-wrap: wrap; gap: .4rem; }
.diag-hora {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .5rem .85rem; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid var(--borde);
  transition: border-color .15s, background .15s, transform .15s;
}
.diag-hora:hover { border-color: var(--azul-2); background: rgba(45,91,255,.16); transform: translateY(-1px); }
.diag-hora:focus-visible { outline: 2px solid var(--azul-2); outline-offset: 2px; }