/* INESIA 2026 — variante "3D": hero nocturno con el cerebro WebGL, movimiento al hacer scroll y profundidad.
   Se carga después de main.css y solo cuando la variante está activa. */

/* ---------------------------------------------------------------- Cabecera sobre el hero oscuro */
body.home.v-3d .site-header { position: fixed; left: 0; right: 0; transition: background-color .35s var(--ease-out), border-color .35s, box-shadow .35s; }
.site-header.is-dark { background: transparent; border-bottom-color: transparent; box-shadow: none; }
/* Al hacer scroll sobre el hero, la cabecera se vuelve opaca (mismo azul noche) para que el texto no pase por debajo del logo */
.site-header.is-dark.is-scrolled { background: #0A1B29; border-bottom-color: rgba(234, 240, 244, .08); }
.site-header.is-dark .brand { color: var(--on-night); --mark-node: #C9D7E2; --mark-line: #6F8FA6; --mark-gold: var(--gold-bright); }
.site-header.is-dark .brand__sub { color: var(--on-night-soft); }
.site-header.is-dark .site-nav__list a { color: var(--on-night-soft); }
.site-header.is-dark .site-nav__list a:hover { color: var(--on-night); background: rgba(234, 240, 244, .08); }
.site-header.is-dark .site-nav__list .current-menu-item > a { color: var(--gold-bright); background: rgba(233, 211, 161, .14); }
.site-header.is-dark .site-nav__list .menu-item--lang:first-of-type { border-left-color: rgba(234, 240, 244, .25); }
.site-header.is-dark .site-nav__user { color: var(--on-night-soft); }
.site-header.is-dark .btn--primary { background: var(--gold-bright); color: var(--night); box-shadow: 0 0 24px rgba(233, 211, 161, .25); }
.site-header.is-dark .nav-toggle { background: rgba(234, 240, 244, .08); border-color: rgba(234, 240, 244, .25); color: var(--on-night); }
@media (max-width: 960px) {
  .site-header.is-dark .site-nav { background: var(--night); border-bottom-color: rgba(234, 240, 244, .12); }
  .site-header.is-dark .site-nav__list a { color: var(--on-night); }
}

/* ---------------------------------------------------------------- Hero 3D */
.hero--3d { position: relative; height: 220vh; padding: 0; overflow: visible; background: color-mix(in srgb, var(--ground) calc(var(--light, 0) * 100%), #0A1B29); color: var(--on-night); --p: 0; }
.hero--3d .hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center;
  /* Color plano igual al fondo de la escena 3D: si el lienzo no cubre algo, no se nota */
  background: color-mix(in srgb, var(--ground) calc(var(--light, 0) * 100%), #0A1B29);
}
.brain3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero--3d .hero__grid {
  position: relative; z-index: 1; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  padding-top: var(--header-h);
  opacity: calc(1 - var(--p) * 2.4);
  translate: 0 calc(var(--p) * -90px);
  will-change: opacity, translate;
}
.hero--3d .hero__copy { max-width: 640px; }
.hero--3d .hero__title { color: var(--on-night); font-size: clamp(2.75rem, 4.4vw + .5rem, 4.9rem); max-width: 13ch; }
.hero--3d .hero__lead { color: var(--on-night-soft); }
.hero--3d .hero__note { color: #8EA3B4; }
.hero--3d .btn--primary { background: var(--gold-bright); color: var(--night); box-shadow: 0 0 0 1px rgba(233, 211, 161, .4), 0 10px 40px -10px rgba(233, 211, 161, .55); }
.hero--3d .btn--primary:hover { background: #F4E4BE; color: var(--night); box-shadow: 0 0 0 6px rgba(233, 211, 161, .18), 0 10px 40px -10px rgba(233, 211, 161, .7); }
.hero--3d .link-quiet { color: var(--on-night); text-decoration-color: rgba(234, 240, 244, .35); }
.hero--3d .link-quiet:hover { text-decoration-color: var(--gold-bright); }
.hero--3d .chooser__legend { color: var(--on-night); }
.hero--3d .chooser { margin-top: 32px; }
.hero--3d .chooser__option { background: rgba(234, 240, 244, .05); border-color: rgba(234, 240, 244, .22); color: var(--on-night); backdrop-filter: blur(6px); }
.hero--3d .chooser__option:hover { border-color: var(--gold); background: rgba(233, 211, 161, .08); }
.hero--3d .chooser__option[aria-pressed="true"] { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--night); box-shadow: 0 0 32px rgba(233, 211, 161, .45); }
.hero--3d .chooser__option .level__node { border-color: rgba(234, 240, 244, .45); }
.hero--3d .chooser__option .level__node + .level__node::before { background: rgba(234, 240, 244, .45); }
.hero--3d .chooser__option[aria-pressed="true"] .level__node:not(.is-on) { border-color: rgba(13, 34, 50, .45); }
.hero--3d .chooser__option[aria-pressed="true"] .level__node.is-on { border-color: var(--gold-ink); background: var(--gold-ink); box-shadow: none; }
.hero--3d .chooser__option[aria-pressed="true"] .level__node + .level__node::before { background: rgba(13, 34, 50, .45); }
.hero--3d .chooser__result { color: var(--on-night-soft); }
.hero--3d .chooser__result a { color: var(--gold-bright); }
.hero--3d :focus-visible { outline-color: var(--gold-bright); }

/* Indicación de scroll */
.hero__hint {
  position: absolute; left: 50%; bottom: 28px; z-index: 1; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--on-night-soft);
  opacity: calc(1 - var(--p) * 6);
}
.hero__hint span { width: 1.5px; height: 38px; background: linear-gradient(var(--gold-bright), transparent); transform-origin: top; animation: hint 2.2s var(--ease-out) infinite; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* El paso de la noche al claro lo hace la propia escena 3D (fondo, niebla y red cambian de color) */

/* Titular: palabras que suben al cargar */
.hero--3d .hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero--3d .hero__title .word > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 75ms + 120ms); }
.hero--3d .hero__title.is-in .word > span { transform: none; }

/* Móvil: el cerebro arriba, el texto abajo sobre un velo para que se lea */
@media (max-width: 860px) {
  .hero--3d { height: 185vh; }
  .hero--3d .hero__grid { grid-template-columns: 1fr; align-self: end; padding-bottom: 64px; }
  .hero--3d .hero__stage::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(13, 34, 50, 0), rgba(13, 34, 50, .92) 45%); pointer-events: none; opacity: calc(1 - var(--light, 0)); }
  .hero--3d .hero__title { font-size: clamp(2.5rem, 10vw, 3.25rem); }
  .hero--3d .chooser { margin-top: 28px; }
  .hero__hint { display: none; }
}

/* Sin WebGL o con movimiento reducido: hero fijo de una pantalla con el cerebro estático */
.hero--3d.no-webgl .hero__stage { background: var(--night) url("../img/mark-inesia-night.svg") no-repeat right 6% center / min(40vw, 560px); }
@media (prefers-reduced-motion: reduce) {
  .hero--3d { height: auto; }
  .hero--3d .hero__stage { position: relative; }
  .hero--3d .hero__grid { opacity: 1; translate: none; }
  .hero__hint { display: none; }
}

/* ---------------------------------------------------------------- Revelado al hacer scroll */
.v-3d .reveal { opacity: 0; translate: 0 32px; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.v-3d .reveal.is-in { opacity: 1; translate: none; }

/* ---------------------------------------------------------------- Filas de curso con profundidad */
.v-3d .course-list { perspective: 1200px; }
.v-3d .course-row {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), border-color .25s, box-shadow .35s, opacity .8s var(--ease-out), translate 1s var(--ease-out);
}
.v-3d .course-row::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(233, 211, 161, .22), transparent 60%);
}
.v-3d .course-row:hover::before { opacity: 1; }
.v-3d .course-row:hover { box-shadow: 0 30px 60px -30px rgba(17, 48, 69, .45); }
.v-3d .course-row__cover { transform: translateZ(36px); box-shadow: 0 18px 30px -18px rgba(13, 34, 50, .6); }
.v-3d .course-row__body { transform: translateZ(18px); }
.v-3d .course-row__side { transform: translateZ(28px); }

/* ---------------------------------------------------------------- Noche: la ruta se dibuja al entrar */
.v-3d .route::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .2s; }
.v-3d .route:has(.route__step.is-in)::before { transform: scaleX(1); }
.v-3d .route__node { animation: node-pulse 3.2s ease-in-out infinite; }
.v-3d .route__step:nth-child(2) .route__node { animation-delay: .6s; }
.v-3d .route__step:nth-child(3) .route__node { animation-delay: 1.2s; }
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(201, 169, 107, .12), 0 0 22px rgba(233, 211, 161, .45); }
  50% { box-shadow: 0 0 0 12px rgba(201, 169, 107, .06), 0 0 38px rgba(233, 211, 161, .75); }
}
@media (max-width: 760px) {
  .v-3d .route::before { transform: scaleY(0); transform-origin: top; }
  .v-3d .route:has(.route__step.is-in)::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .v-3d .reveal { opacity: 1; translate: none; }
  .v-3d .course-row { transform: none; }
  .v-3d .route::before { transform: none; }
}

/* Los cursos suben por encima del final de la transición: aparecen en cuanto entra la luz, sin scroll en vacío */
.hero--3d + .section.courses { position: relative; z-index: 3; margin-top: -52vh; background: var(--ground); }
@media (max-width: 860px) { .hero--3d + .section.courses { margin-top: -34vh; } }
@media (prefers-reduced-motion: reduce) { .hero--3d + .section.courses { margin-top: 0; } }

/* ---------------------------------------------------------------- "Todo noche" (body.hero-night)
   Sin paso a claro: el cerebro se queda azul y la sección de cursos continúa en noche,
   enlazando con la sección "Del primer clic…" (.night). */




/* Cabecera sobre los cursos oscuros: velo nocturno para que el menú no se pise con las filas */

/* Filtro inteligente sobre los cursos en noche */

/* ---------------------------------------------------------------- Escritorio: hero de una pantalla, sin "desliza" */
@media (min-width: 861px) {
  .hero--3d { height: 100vh; height: 100svh; min-height: 640px; }
  .hero--3d .hero__stage { position: relative; height: 100%; }
  .hero--3d .hero__grid { opacity: 1; translate: none; }
  .hero__hint { display: none; }
  .hero--3d + .section.courses { margin-top: 0; }
  }

/* Portada: los cursos van en claro justo después del hero, sin solaparse ni fundirse con él */
.hero-night .hero--3d + .section.courses { margin-top: 0; }

/* "Empieza gratis" sin halo (prevalece sobre los estilos de la variante 3D) */
.hero.hero--3d .btn--primary, .hero.hero--3d .btn--primary:hover, .hero.hero--3d .btn--primary:focus-visible { box-shadow: none; filter: none; }

/* Escritorio: el hero mide lo que su contenido (con aire), no toda la pantalla */
@media (min-width: 861px) {
  .hero--3d { height: auto; min-height: 0; }
  .hero--3d .hero__stage { height: auto; min-height: 0; padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) 0 clamp(36px, 4vw, 56px); }
  .hero--3d .hero__grid { padding-top: 0; }
}

/* Escritorio: textos del hero alineados abajo (el hero tiene una altura mínima para que el cerebro respire arriba) */
@media (min-width: 861px) {
  .hero--3d .hero__stage { display: grid; align-items: end; min-height: clamp(600px, 80vh, 880px); padding-bottom: clamp(48px, 5vw, 80px); }
  .hero--3d .hero__grid { align-items: end; align-self: end; }
}

/* Móvil al día con escritorio: sin recorrido con scroll; el cerebro arriba, bajo la cabecera, y el texto debajo */
@media (max-width: 860px) {
  .hero--3d { height: auto; min-height: 0; }
  .hero--3d .hero__stage { position: relative; height: auto; min-height: 0; display: grid; align-items: end; padding: calc(var(--header-h) + 72vw) 0 48px; }
  .hero--3d .hero__stage::after { display: none; }
  .hero--3d .hero__grid { opacity: 1; translate: none; padding-top: 0; padding-bottom: 0; }
  .hero--3d + .section.courses { margin-top: 0; }
}

/* Tarjetas de curso: la portada y el texto no se adelantan en Z (se salían de la tarjeta y tapaban lo de alrededor).
   La inclinación al pasar el ratón se queda solo en dispositivos con puntero fino. */
.v-3d .course-row__cover, .v-3d .course-row__body, .v-3d .course-row__side { transform: none; }
.v-3d .course-row__cover { box-shadow: none; }
@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .v-3d .course-row { transform: none; }
}

/* ---------------------------------------------------------------- Reserva sin 3D: cerebro estático (captura de la escena) */
.hero--3d.no-webgl .brain3d { display: none; }
.hero--3d.no-webgl .hero__stage {
  background: #0A1B29 url("../img/brain-static.webp?v=4") no-repeat right max(3vw, calc(var(--edge, 24px) - 2vw)) top calc(50% + var(--header-h, 72px) / 2) / auto min(64vh, 40vw);
}
@media (max-width: 860px) {
  .hero--3d.no-webgl .hero__stage { background-position: center calc(var(--header-h, 72px) + 4vw); background-size: 88vw auto; }
}