/* efectos.css — el humo, del bueno.
 *
 * Todo el movimiento del sitio vive aquí y en efectos.js. Cada efecto se apaga solo
 * con prefers-reduced-motion, y ninguno cambia el contenido: si el JS no carga, la
 * página se ve completa e inmóvil.
 *
 * Los colores salen de los tokens. Nada escrito a mano.
 */

/* ── Lenis ─────────────────────────────────────────────────────────────────── */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Portada cinematográfica ───────────────────────────────────────────────── */

.portada-cine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portada-cine > .envoltura {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;      /* sin esto el antetítulo se estira a todo el ancho */
  min-height: min(86vh, 820px);
}

.portada-cine .portada > p { width: 100%; }

/* Los textos se recortan sobre el chart con un halo del color del fondo:
   el chart sigue brillando a los lados y el párrafo se lee encima. */
.portada-cine h1,
.portada-cine .portada > p,
.portada-cine .prueba {
  text-shadow:
    0 0 6px var(--bg), 0 0 14px var(--bg), 0 0 28px var(--bg),
    0 2px 40px color-mix(in srgb, var(--bg) 85%, transparent);
}

/* background-COLOR, no el abreviado: el abreviado borra la imagen de fondo del
   círculo del Flow Button y el hover se queda a oscuras. */
.portada-cine .btn-contorno { background-color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* El lienzo: caos → sistema. Lo dibuja efectos.js. */
.lienzo-caos {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Aurora dorada muy lenta detrás del lienzo */
.aurora {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 30%, color-mix(in srgb, var(--oro) 14%, transparent), transparent 70%),
    radial-gradient(35% 45% at 75% 65%, color-mix(in srgb, var(--oro) 9%, transparent), transparent 70%);
  filter: blur(40px);
  animation: aurora 30s ease-in-out infinite alternate;
}

@keyframes aurora {
  from { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) rotate(2deg) scale(1.08); }
}

/* Viñeta para que el texto siempre gane */
.portada-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 45%, transparent 45%, var(--bg) 100%),
    linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
}

/* Grano cinematográfico, sutil */
.grano {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Titular: lo parte SplitText y lo anima GSAP ───────────────────────────── */

/* Oculto hasta que GSAP lo toma (evita el destello antes de animar). Si GSAP no
   llega, efectos.js lo hace visible; si tampoco llega efectos.js, el fallback de
   abajo lo muestra a los 1.5 s. */
.titulo-split { visibility: hidden; animation: titulo-red 0s 1.5s forwards; }
@keyframes titulo-red { to { visibility: visible; } }

.titulo-split .letra { display: inline-block; will-change: transform, opacity, filter; }
.palabra-h2 { display: inline-block; }

/* Con GSAP al mando, las animaciones CSS de entrada se apagan: manda el timeline. */
html.gsap .entra { animation: none; opacity: 1; transform: none; }
html.gsap [data-reveal] { transition: none; }

.entra {
  opacity: 0;
  transform: translateY(12px);
  animation: entra 0.8s var(--ease-out) forwards;
  animation-delay: var(--retraso, 700ms);
}

@keyframes entra { to { opacity: 1; transform: none; } }

/* ── Botón con brillo ──────────────────────────────────────────────────────── */

.btn-brillo {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 45%, transparent);
  animation: pulso 3.2s ease-out infinite;
}

.btn-brillo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: brillo 3.2s ease-in-out infinite;
}

@keyframes brillo {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 45%, transparent); }
  60%, 100% { box-shadow: 0 0 0 18px transparent; }
}

/* ── Aparece al hacer scroll ───────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}

[data-reveal].visible { opacity: 1; transform: none; }

/* ── Foco que sigue al ratón en las tarjetas ───────────────────────────────── */

.foco {
  position: relative;
  overflow: hidden;
}

.foco::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  background: radial-gradient(
    320px circle at var(--fx, 50%) var(--fy, 50%),
    color-mix(in srgb, var(--oro) 16%, transparent),
    transparent 60%
  );
}

.foco:hover::before { opacity: 1; }

/* Borde que se enciende con el foco */
.foco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 55%, transparent);
}

.foco:hover::after { opacity: 1; }

/* ── Cinta de mercado ──────────────────────────────────────────────────────── */

.cinta {
  overflow: hidden;
  border-top: 0.5px solid var(--separator);
  border-bottom: 0.5px solid var(--separator);
  background: var(--bg-secondary);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.cinta-pista {
  display: flex;
  width: max-content;
  animation: cinta 42s linear infinite;
}

.cinta:hover .cinta-pista { animation-play-state: paused; }

.cinta-pista span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-footnote);
  font-weight: var(--weight-footnote-emphasized);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--label-secondary);
}

.cinta-pista span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oro);
  opacity: 0.8;
}

@keyframes cinta { to { transform: translateX(-50%); } }

/* ── Números que suben ─────────────────────────────────────────────────────── */

[data-ticker] { font-variant-numeric: tabular-nums; }

/* ── Movimiento reducido: todo quieto, todo visible ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .titulo-split, .entra, [data-reveal] {
    visibility: visible;
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
  }
  .aurora, .btn-brillo, .btn-brillo::after, .cinta-pista { animation: none; }
  .btn-brillo { box-shadow: none; }
  .lienzo-caos { display: none; }
}

/* ── Glow dorado en el retrato ─────────────────────────────────────────────── */

.retrato-glow {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--oro) 18%, transparent),
    0 24px 60px -20px color-mix(in srgb, var(--oro) 40%, transparent),
    0 0 80px -30px color-mix(in srgb, var(--oro) 35%, transparent);
}

/* ── Nota de pago bajo los botones ─────────────────────────────────────────── */

.nota-pago {
  margin: calc(var(--space-6) * -1) 0 var(--space-6);
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
  color: var(--label-tertiary);
  text-align: center;
}

/* ── Área de estudiantes: progreso ─────────────────────────────────────────── */

.progreso {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-grouped-secondary);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.progreso-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-subhead);
  color: var(--label-secondary);
}

.progreso-cabeza strong {
  font-size: var(--text-title-3);
  font-weight: var(--weight-title-3-emphasized);
  font-variant-numeric: tabular-nums;
  color: var(--label);
}

.progreso-cabeza strong span { color: var(--accent); }

.progreso-barra {
  height: 8px;
  border-radius: var(--radius-capsule);
  background: var(--fill-tertiary);
  overflow: hidden;
}

.progreso-relleno {
  width: 0;
  height: 100%;
  border-radius: var(--radius-capsule);
  background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 70%, var(--bg)), var(--oro));
  transition: width 0.9s var(--ease-out);
}

/* La casilla «Vista» de cada clase */
.vista {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-capsule);
  font-size: var(--text-subhead);
  color: var(--label-secondary);
  cursor: pointer;
  user-select: none;
}

.vista input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--oro);
  cursor: pointer;
}

.vista:has(input:checked) { color: var(--accent); }
.fila:has(.vista-check:checked) .clase-num { background: var(--oro); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  .progreso-relleno { transition: none; }
}

/* ── Liquid Glass en las tarjetas ────────────────────────────────────────────
 * Portado del componente de 21st.dev a CSS puro y adaptado al tema oscuro:
 * el original es cristal blanco al 25% sobre fondo claro; aquí es cristal
 * oscuro con filo dorado. Cuatro capas, como el original:
 *   1. fondo semitransparente + backdrop-filter (el cristal)
 *   2. tinte (color-mix con el fondo)
 *   3. filos con luz especular (inset shadows, en dorado)
 *   4. brillo líquido que se desplaza al pasar el ratón (::before)
 * La distorsión SVG (#glass-distortion) solo en escritorio y solo en hover:
 * es cara, y Safari en móvil no la aguanta en treinta tarjetas.
 *
 * Nota: el HIG de Apple reserva el cristal a la capa funcional (barras, no
 * tarjetas). Esto va por decisión de Kelvis, 11 sep 2026. */

/* Fondo ambiente: lo que el cristal difumina. Sin esto el cristal sobre negro
   liso no se distingue de una tarjeta opaca. Un solo elemento fijo. */
.ambiente {
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb, var(--oro) 11%, transparent), transparent 70%),
    radial-gradient(30% 36% at 82% 68%, color-mix(in srgb, var(--oro) 8%, transparent), transparent 70%),
    radial-gradient(26% 26% at 55% 92%, color-mix(in srgb, var(--oro) 6%, transparent), transparent 70%);
  filter: blur(60px);
  animation: ambiente 40s ease-in-out infinite alternate;
}

@keyframes ambiente {
  from { transform: translate3d(-4%, -3%, 0) rotate(-3deg); }
  to   { transform: translate3d(4%, 4%, 0) rotate(3deg); }
}

body { background: transparent; }
html { background: var(--bg); }

.vidrio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-grouped-secondary) 58%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 1px 1px 0 0 color-mix(in srgb, var(--oro) 22%, transparent),
    inset -1px -1px 0 0 color-mix(in srgb, var(--oro) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--oro) 6%, var(--separator)),
    0 4px 10px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4),
    box-shadow 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}

/* El ::before de la tarjeta es de la linterna (.foco): el brillo que sigue al
   ratón. Antes había aquí un barrido diagonal que la pisaba; se quitó. */

.vidrio > * { position: relative; z-index: 1; }

@media (hover: hover) {
  .vidrio:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 1px 1px 0 0 color-mix(in srgb, var(--oro) 40%, transparent),
      inset -1px -1px 0 0 color-mix(in srgb, var(--oro) 14%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--oro) 22%, var(--separator)),
      0 14px 30px -16px color-mix(in srgb, var(--oro) 22%, rgba(0, 0, 0, 0.6));
  }
}

/* La distorsión SVG del original (#glass-distortion) NO se usa en las tarjetas.
   Probado el 11-sep-2026: en tarjetas con borde y texto, o muerde el filo dorado
   (parece roto) o, metida hacia dentro, deja el rectángulo de su propia capa
   visible. En el componente original funciona porque va sobre un dock sin borde
   encima de una foto. El cristal aquí es desenfoque + filo dorado + linterna. */

/* La linterna va por debajo del contenido y por encima del cristal */
.vidrio.foco::before { z-index: 0; }

/* Sin backdrop-filter (navegadores viejos), o con transparencia reducida:
   tarjeta opaca, y a otra cosa. */
@supports not (backdrop-filter: blur(1px)) {
  .vidrio { background: var(--bg-grouped-secondary); }
}

@media (prefers-reduced-transparency: reduce) {
  .vidrio { background: var(--bg-grouped-secondary); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ambiente { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambiente { animation: none; }
  .vidrio { transition: none; }
  .vidrio:hover { transform: none; }
}

/* ── Flow Button en los botones de contorno ──────────────────────────────────
 * Portado del "Flow Button" de 21st.dev a CSS puro, sin markup extra:
 *   - las flechas son ::before / ::after con una máscara SVG (lucide arrow-right)
 *     pintadas con currentColor, así siguen al color del texto;
 *   - el círculo que se expande es un gradiente radial que crece por
 *     background-size, no un elemento;
 *   - el texto se desplaza cambiando el padding, no con un span.
 * Original: borde gris → relleno negro. Aquí: filo dorado → relleno dorado con
 * etiqueta oscura. Solo con puntero: en móvil el botón queda como está. */

@media (hover: hover) {
  .btn-contorno {
    --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-left: var(--space-5);
    padding-right: calc(var(--space-5) + 22px);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oro) 40%, transparent);
    background-image: radial-gradient(circle, var(--oro) 49.5%, transparent 50.5%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0 0;
    transition:
      padding 0.8s cubic-bezier(0.19, 1, 0.22, 1),
      color 0.5s ease,
      border-radius 0.6s cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 0.6s ease,
      background-size 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .btn-contorno::before,
  .btn-contorno::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-color: currentColor;
    -webkit-mask: var(--flecha) center / contain no-repeat;
    mask: var(--flecha) center / contain no-repeat;
    transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .btn-contorno::before { left: -28px; }                    /* la flecha que entra */
  .btn-contorno::after  { right: var(--space-4); }          /* la flecha que sale */

  .btn-contorno:hover {
    color: var(--on-accent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1.5px transparent;
    background-size: 320px 320px;
    padding-left: calc(var(--space-5) + 22px);
    padding-right: var(--space-5);
  }

  .btn-contorno:hover::before { left: var(--space-4); }
  .btn-contorno:hover::after  { right: -28px; }
  .btn-contorno:active { transform: scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-contorno, .btn-contorno::before, .btn-contorno::after { transition: none; }
}