/*
 * Portada y acceso (marketing/home.html, accounts/login.html): paleta
 * «Océano» y los efectos que no caben en utilidades de Tailwind. Solo se
 * carga en esas dos páginas (base.html, `portada`), así que no toca el campus.
 */

/* Los colores salen del tema (styles/input.css) y de cada ámbito. */


/* ── Piezas comunes ──────────────────────────────────────────────────── */
/* Grano fino sobre los degradados: les quita el aspecto de plástico. */


/* Inclinación 3D al pasar el ratón (portada.js pone --rx y --ry). */
.v-inclinar { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }

/* Barra de lectura arriba. */
.v-progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent)); }

/* Botón que se deja atraer por el puntero. */
[data-iman] { transition: translate .25s cubic-bezier(.2,.8,.3,1.2); }

/* ── Mar de la portada ───────────────────────────────────────────────── */

.vd-ola { position: absolute; left: 0; width: 200%; height: 100%; animation: vd-ola 14s linear infinite; }
.vd-ola.lenta { animation-duration: 22s; opacity: .5; }
@keyframes vd-ola { to { translate: -50% 0; } }
.vd-orbita { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed oklch(100% 0 0 / .18); animation: vd-orbita var(--t, 40s) linear infinite; }
.vd-orbita > * { position: absolute; animation: vd-orbita var(--t, 40s) linear infinite reverse; }
@keyframes vd-orbita { to { rotate: 360deg; } }
.vd-ficha { background: oklch(100% 0 0 / .12); border: 1px solid oklch(100% 0 0 / .2); backdrop-filter: blur(12px); color: oklch(98% .01 230); }
.vd-borde { border: 1.5px solid transparent; transition: box-shadow .3s, transform .25s ease-out;
  background: linear-gradient(var(--color-base-100), var(--color-base-100)) padding-box,
              linear-gradient(135deg, var(--color-base-300), var(--color-base-300)) border-box; }
.vd-borde:hover { background: linear-gradient(var(--color-base-100), var(--color-base-100)) padding-box,
              linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent)) border-box; }
.vd-paso::before { content: ""; position: absolute; left: 1.375rem; top: 3rem; bottom: -1.5rem; width: 2px; background: linear-gradient(var(--color-primary), var(--color-secondary)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.vd-paso:last-child::before { display: none; }
.vd-texto-mar { background: linear-gradient(90deg, var(--color-secondary), oklch(88% .1 200), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }


/* ── El carnet que se abre en capas (pasos para la plaza) ────────────── */
.ve-escena { position: relative; height: 560vh; }
.ve-fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.ve-mundo { perspective: 2200px; perspective-origin: 50% 30%; }
/* --giro (0→1) tumba el carnet; --abre (0→1) separa las capas. Los pone portada.js. */
.ve-carnet {
  --ax: calc(var(--giro, 0) * 58deg);
  --az: calc(var(--giro, 0) * -38deg);
  position: relative; width: min(78vw, 25rem); aspect-ratio: 85.6 / 54;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--abre, 0) * 6vh)) rotateX(var(--ax)) rotateZ(var(--az));
}
.ve-capa {
  position: absolute; inset: 0; border-radius: 1.1rem; transform-style: preserve-3d;
  transform: translateZ(calc((var(--i) - var(--centro, 2.5)) * var(--abre, 0) * 4.2rem));
}
/* El material va en un hijo: opacidad, filtro u overflow en la propia capa
   aplanarían el 3D y el rótulo dejaría de mirar al lector. */
.ve-mat { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  transition: opacity .4s, filter .4s, box-shadow .4s;
  box-shadow: 0 1px 0 oklch(100% 0 0 / .6) inset, 0 0 0 1px oklch(0% 0 0 / .06); }
.ve-escena.desglosado .ve-capa:not(.activa) .ve-mat { opacity: .45; filter: saturate(.3); }
.ve-capa.activa .ve-mat { box-shadow: 0 0 0 1.5px var(--color-primary), 0 30px 60px -25px oklch(30% .08 258 / .55); }

/* Rótulo: hijo de la capa, girado al revés para mirar al lector. */
.ve-rotulo {
  position: absolute; left: 100%; top: 50%; width: 15rem; padding-left: 4.5rem;
  transform: translateY(-50%) rotateZ(calc(var(--az) * -1)) rotateX(calc(var(--ax) * -1));
  transform-origin: 0 50%; opacity: calc(var(--abre, 0) * 1.4 - .4); pointer-events: none;
}
.ve-rotulo::before { content: ""; position: absolute; left: .4rem; top: .7rem; width: 3.6rem; height: 1px; background: currentColor; opacity: .35; }
.ve-rotulo::after { content: ""; position: absolute; left: .1rem; top: calc(.7rem - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-base-content); }
.ve-capa.activa .ve-rotulo::after { background: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary) 20%, transparent); }
.ve-rotulo small { font: 500 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; opacity: .55; }
.ve-rotulo b { display: block; margin-top: .3rem; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.ve-rotulo span { display: block; margin-top: .2rem; font-size: .78rem; line-height: 1.4; opacity: 0; max-height: 0; transition: opacity .35s, max-height .35s; }
.ve-capa.activa .ve-rotulo span { opacity: .65; max-height: 4rem; }
@media (max-width: 900px) { .ve-rotulo { display: none; } }

/* Materiales de cada capa. */
.ve-m-base { background: oklch(99% 0 0); border: 1.5px dashed oklch(70% .01 255); }
.ve-m-temario { background: repeating-linear-gradient(180deg, transparent 0 13px, oklch(36% .09 258 / .16) 13px 15px) 12% 22% / 70% 62% no-repeat, oklch(94% .02 250 / .92); }
.ve-m-videos { background: oklch(24% .03 258 / .9);
  background-image: radial-gradient(circle at 50% 50%, oklch(100% 0 0 / .14) 0 9px, transparent 10px); background-size: 46px 46px; }
.ve-m-tests { background: oklch(97% .01 85 / .92);
  background-image: radial-gradient(circle, transparent 0 5px, oklch(36% .09 258 / .35) 5px 6.5px, transparent 7px); background-size: 26px 22px; background-position: 10px 8px; }
.ve-m-directos { background: repeating-radial-gradient(circle at 78% 40%, transparent 0 7px, oklch(78% .11 82 / .5) 7px 8px), oklch(96% .015 85 / .9); }

/* La cara: blanca, como un carnet de verdad. Las medidas en cqw escalan con él. */
.ve-cara {
  container-type: inline-size; color: oklch(25% .02 255);
  background: linear-gradient(160deg, #fff, oklch(98.5% .004 250));
  box-shadow: 0 0 0 1px oklch(0% 0 0 / .08), 0 18px 40px -22px oklch(25% .05 255 / .45);
  display: flex; flex-direction: column;
}
.ve-cara::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, oklch(100% 0 0 / .55) 48%, transparent 56%);
  translate: calc(-40% + var(--brillo, 0) * 80%) 0;
}
.ve-guilloche { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 115% 125%, transparent 0 1.6cqw, color-mix(in oklch, var(--carnet) 14%, transparent) 1.6cqw 1.8cqw);
  mask-image: linear-gradient(115deg, transparent 35%, #000 85%); }
.vc-cabecera { position: relative; display: flex; align-items: center; gap: 1.8cqw; padding: 2.4cqw 4.5cqw; background: var(--carnet); color: #fff; }
.vc-bandera { width: 6.2cqw; height: 4.2cqw; border-radius: .5cqw; flex-shrink: 0; box-shadow: 0 0 0 .25cqw oklch(100% 0 0 / .7); }
.vc-organismo { font-size: 2.3cqw; font-weight: 600; letter-spacing: .08em; line-height: 1.15; flex: 1; min-width: 0; }
.vc-tipo { font-size: 1.9cqw; letter-spacing: .14em; opacity: .85; white-space: nowrap; }
.vc-cuerpo { position: relative; flex: 1; display: grid; grid-template-columns: 24cqw 1fr; gap: 4cqw; padding: 3.6cqw 4.5cqw 2.6cqw; align-items: start; }
/* Hueco de la foto: retrato de carnet con fondo claro y sello holográfico. */
.vc-foto { position: relative; aspect-ratio: 3 / 4; border-radius: 1.4cqw; overflow: hidden;
  background: linear-gradient(180deg, oklch(95% .008 250), oklch(89% .012 250));
  box-shadow: inset 0 0 0 .3cqw #fff, 0 0 0 .25cqw oklch(85% .01 250); }
.vc-foto svg { position: absolute; inset: 12% 8% 0; width: 84%; height: 88%; fill: oklch(78% .015 250); }
.vc-holo { position: absolute; right: -2.5cqw; bottom: -2.5cqw; width: 11cqw; aspect-ratio: 1; border-radius: 50%; opacity: .55; mix-blend-mode: multiply;
  background: conic-gradient(from calc(var(--brillo, 0) * 360deg), #ffd1e8, #c8f0ff, #d9ffd1, #fff2c2, #ffd1e8); }
.vc-datos { display: grid; gap: 1.9cqw; min-width: 0; }
.vc-datos dt { font-size: 1.75cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.vc-datos dd { font-size: 2.9cqw; font-weight: 600; line-height: 1.2; margin-top: .3cqw; }
.vc-datos .vc-nombre { font-size: 3.4cqw; letter-spacing: .04em; color: var(--carnet); }
.vc-fila { display: flex; gap: 4.5cqw; }
.vc-franja { height: 1.6cqw; flex-shrink: 0; }

.ve-sombra { position: absolute; left: 50%; top: 62%; width: min(70vw, 24rem); height: 5rem; translate: -50% 0; border-radius: 50%;
  background: oklch(25% .02 255 / .22); filter: blur(28px); opacity: calc(1 - var(--abre, 0) * .5); }
.ve-pista { transition: opacity .4s; opacity: calc(1 - var(--giro, 0) * 3); }

/* En móvil, el rótulo activo va debajo del carnet. */
.ve-pie > * { position: absolute; inset: 0; opacity: 0; translate: 0 .5rem; transition: opacity .35s, translate .35s; }
.ve-pie > .activa { opacity: 1; translate: 0 0; }


/* Sin rótulos al lado, el texto va a la izquierda. */
.ve-sin-rotulos .ve-rotulo { display: none; }
.ve-sin-rotulos .ve-pie > * { inset: 0 auto auto 0; }
.ve-sin-rotulos .ve-carnet { width: min(80vw, 24rem); }


/* La pregunta de prueba: la opción elegida tiembla si falla. */
.vd-opcion { transition: background .2s, border-color .2s, opacity .2s; }

/* Sin movimiento si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
  html[data-portada] *, html[data-portada] *::before, html[data-portada] *::after { animation: none !important; transition: none !important; }
}