/* =============================================================================================
   portada-viva.css — el movimiento de la portada (A «cinemática», elegida el 28-oct-2026).

   La orden: «necesitamos páginas animadas, modernas, necesitamos avanzar». Se probaron dos (A y B,
   PR #85) y se eligió la A. Va DESPUÉS de base.css, tokens.css y vitrina.css, y sólo la carga
   index.html.

   LAS REGLAS DEL MOVIMIENTO (skills emil-design-eng y diseno-360):
     · sólo transform y opacity (y un clip-path de entrada, una vez); nada que mueva el diseño;
     · lo que el visitante toca responde en < 300 ms, con curva de salida; lo decorativo puede durar
       más, porque no hace esperar a nadie;
     · el hover sólo con ratón de verdad (`hover: hover`), y el botón se hunde al pulsarlo;
     · `prefers-reduced-motion`: la página se ve entera y quieta, sin perder nada.
   Ningún color nuevo: todo sale de tokens.css y del :root de vitrina.css.
   ============================================================================================= */

:root {
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mov: cubic-bezier(0.77, 0, 0.175, 1);
  --t-toque: 160ms;
  --t-entrada: 560ms;
}

/* ── Microinteracciones comunes ───────────────────────────────────────────────────────────── */
.viva .btn, .viva .rutas button {
  transition: transform var(--t-toque) var(--ease-salida), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.viva .btn:active, .viva .rutas button:active { transform: scale(0.97); }

.viva .lista li a { position: relative; isolation: isolate; overflow: hidden; }
.viva .lista .ir { display: inline-block; transition: transform 220ms var(--ease-salida); }
/* El foco de luz que sigue al ratón: un pseudo-elemento que sólo cambia de opacidad; la posición
   la escribe portada-a.js en --x/--y de ESA fila (no en el padre: no recalcula la lista entera). */
.viva .lista li a::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 240ms ease;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--cian) 12%, transparent), transparent 60%); }
@media (hover: hover) and (pointer: fine) {
  .viva .lista li a:hover::before { opacity: 1; }
  .viva .lista li a:hover .ir { transform: translateX(4px); }
  .viva .rutas button:hover { transform: translateY(-1px); }
}

/* ── Entradas al hacer scroll (portada-entra.js pone .a-la-vista una sola vez) ───── */
.viva-js [data-entra] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-entrada) var(--ease-salida), transform var(--t-entrada) var(--ease-salida); transition-delay: calc(var(--i, 0) * 60ms); }
.viva-js [data-entra].a-la-vista { opacity: 1; transform: none; }

/* =============================================================================================
   A · CINEMÁTICA
   ============================================================================================= */

/* La red viva va encima del planeta y debajo del texto. Sin JS, o con movimiento reducido y sin
   dibujar, el lienzo está vacío y se ve la portada de siempre. */
.panorama .red { position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1200ms ease; }
.panorama .red.lista { opacity: 1; }
/* El planeta gira, lentísimo: parte del mismo rotate(-38deg) que le da vitrina.css (si no, la
   animación lo pisaría y la Tierra saldría de lado). Sólo transform. */
.a-cine .planeta { animation: deriva 60s var(--ease-mov) infinite alternate; will-change: transform; }
@keyframes deriva { from { transform: rotate(-38deg) scale(1); } to { transform: rotate(-44deg) scale(1.04); } }
/* El amanecer late, como la luz de la imagen corporativa. */
.a-cine.panorama::after { animation: amanecer 7s ease-in-out infinite alternate; }
@keyframes amanecer { from { opacity: .75; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* El titular entra palabra a palabra. Mientras portada-a.js no lo ha partido, no se ve; si el JS
   no llega, `muestra-igual` lo enseña a los 1,2 s (nunca se queda un titular en blanco). */
.viva-js .a-cine h1[data-palabras] { opacity: 0; animation: muestra-igual 0s 1.2s forwards; }
.viva-js .a-cine h1[data-palabras].partido { opacity: 1; animation: none; }
@keyframes muestra-igual { to { opacity: 1; } }
.a-cine h1 .pal { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
  animation: palabra 620ms var(--ease-salida) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes palabra { to { opacity: 1; transform: none; filter: blur(0); } }

/* Lo demás del primer viewport, en cascada corta. */
.viva-js .a-cine .lema, .viva-js .a-cine .lede, .viva-js .a-cine .pilares li, .viva-js .a-cine .ciclo li, .viva-js .a-cine .grande, .viva-js .a-cine .raya {
  opacity: 0; animation: sube 640ms var(--ease-salida) forwards; animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.a-cine .pilares .aro { transition: transform 220ms var(--ease-salida), box-shadow 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .a-cine .pilares li:hover .aro { transform: scale(1.08); box-shadow: 0 0 28px color-mix(in srgb, var(--cian) 45%, transparent); }
}

/* Los contadores: una franja fina entre el panorama y las fotos. El número final ya está en el
   HTML (sin JS se lee bien y no salta nada); el JS sólo lo hace contar. */
.contadores { padding: 0; background: var(--medianoche); border-top: 1px solid var(--linea-oscura); color: var(--sobre-oscuro); }
.contadores ul { list-style: none; margin: 0 auto; padding: 22px 32px; max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contadores li { display: flex; align-items: baseline; gap: 14px; }
.contadores .n { font-family: var(--titulo); font-size: clamp(34px, 4vw, 48px); font-weight: 700; color: var(--cian); line-height: 1; font-variant-numeric: tabular-nums; min-width: 1ch; }
.contadores span { font-size: 14px; letter-spacing: .04em; color: var(--sobre-oscuro-suave); }
@media (max-width: 760px) { .contadores ul { grid-template-columns: 1fr; gap: 12px; padding: 18px; } .contadores .n { font-size: 34px; min-width: 1.2ch; } }

/* La franja de fotos se descubre de abajo arriba, una vez. */
.viva-js .a-cine-fotos li { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-mov); transition-delay: calc(var(--i, 0) * 80ms); }
.viva-js .a-cine-fotos.a-la-vista li { clip-path: inset(0 0 0 0); }

/* Respaldo: si portada-entra.js no llega (bloqueado, red, CDN), nadie pone .a-la-vista ni .entra-js
   y lo de debajo del pliegue se quedaría en blanco; a los 2,5 s se enseña igual, sin animar. */
.viva-js:not(.entra-js) [data-entra] { animation: entra-igual 0s 2.5s forwards; }
.viva-js:not(.entra-js) .a-cine-fotos li { animation: destapa-igual 0s 2.5s forwards; }
@keyframes entra-igual { to { opacity: 1; transform: none; } }
@keyframes destapa-igual { to { clip-path: inset(0 0 0 0); } }

/* Profundidad en la lista de productos: el logo va un poco más lento que la fila al hacer scroll.
   Es CSS con línea de tiempo de scroll (fuera del hilo principal). El navegador que no la tiene,
   no la ve: no hay JS que la imite. */
@supports (animation-timeline: view()) {
  .a-cine-prod .lista img { animation: profundidad linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes profundidad { from { transform: translateY(14px); } to { transform: translateY(-14px); } }
}

/* =============================================================================================
   MOVIMIENTO REDUCIDO: todo en su sitio final, sin bucles ni desplazamientos.
   ============================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .a-cine .planeta, .a-cine.panorama::after { animation: none; }
  .viva-js .a-cine h1[data-palabras], .a-cine h1 .pal,
  .viva-js .a-cine .lema, .viva-js .a-cine .lede, .viva-js .a-cine .pilares li, .viva-js .a-cine .ciclo li, .viva-js .a-cine .grande, .viva-js .a-cine .raya {
    opacity: 1; transform: none; filter: none; animation: none;
  }
  .viva-js [data-entra] { opacity: 1; transform: none; transition: none; }
  .viva-js .a-cine-fotos li { clip-path: none; transition: none; }
  .a-cine-prod .lista img { animation: none !important; }
  .viva .lista .ir, .viva .btn, .viva .rutas button { transition: none; }
}