/* ===== Acabado del portal: capa común a la portada y a las páginas interiores =====
   Transiciones entre páginas, aparición al desplazarse, luz que sigue al puntero, progreso de lectura, imágenes que
   entran con un fundido y una textura fina de película. Nada de esto es necesario para usar el portal: sin JavaScript o
   con «reducir movimiento», el contenido se ve completo y quieto. */

/* --- Transición entre páginas (navegadores que la admiten); la cabecera y la barra inferior se quedan quietas --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .cabecera { view-transition-name: cabecera; }
  .nav-inferior { view-transition-name: nav-inferior; }
  .escucha-continua { view-transition-name: escucha-continua; }
  ::view-transition-old(root) { animation: pulido-sale .22s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: pulido-entra .42s cubic-bezier(.22, .8, .2, 1) both; }
  ::view-transition-group(cabecera), ::view-transition-group(nav-inferior), ::view-transition-group(escucha-continua) { animation: none; }
}
@keyframes pulido-sale { to { opacity: 0; } }
@keyframes pulido-entra { from { opacity: 0; transform: translateY(10px); } }

/* --- Aparición al desplazarse (solo lo que empieza fuera de la pantalla; lo visible al cargar no espera) --- */
.pulido-oculto { opacity: 0; transform: translateY(22px); }
.pulido-visible { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, .8, .2, 1), transform .8s cubic-bezier(.22, .8, .2, 1);
  transition-delay: calc(var(--pulido-i, 0) * 60ms); }

/* --- Luz que sigue al puntero en las tarjetas que aún no la tenían --- */
.mencion, .instalar-plataforma, .tema-tarjeta { isolation: isolate; }
.mencion::after, .instalar-plataforma::after, .tema-tarjeta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #a8f1fb1c, transparent 60%); }
.instalar-plataforma, .tema-tarjeta { position: relative; }
.mencion:hover::after, .instalar-plataforma:hover::after, .tema-tarjeta:hover::after { opacity: 1; }
.mencion, .instalar-plataforma { transition: transform .4s cubic-bezier(.22, .8, .2, 1), border-color .4s, box-shadow .4s; }
@media (hover: hover) and (pointer: fine) {
  .mencion:hover, .instalar-plataforma:hover { transform: translateY(-3px); border-color: #ffffff38; box-shadow: 0 22px 44px -26px #000; }
}

/* --- Cabecera interior: se separa del contenido al desplazarse --- */
.cabecera--interior { transition: box-shadow .35s, border-color .35s; }
.cabecera--interior.pulido-desplazada { box-shadow: 0 10px 30px -18px #000d; border-bottom: 1px solid #ffffff14; }

/* --- Progreso de lectura en fichas, ponentes y textos (animación ligada al desplazamiento, sin JavaScript) --- */
.pulido-progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--cian, #a8f1fb), var(--acrecion-claro, #f3c49f)); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pulido-progreso { animation: pulido-progreso linear both; animation-timeline: scroll(root); }
  }
}
@keyframes pulido-progreso { to { transform: scaleX(1); } }

/* --- Imágenes que entran con un fundido cuando terminan de cargar --- */
.pulido-img { opacity: 0; transition: opacity .7s ease; }
.pulido-img.pulido-img--lista { opacity: 1; }

/* --- Textura fina de película (fija, sin coste al desplazarse) --- */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .035; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- Selección de texto y desplazamiento suave a las anclas --- */
::selection { background: #f3c49f55; color: #fff; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* --- Movimiento reducido (sistema o conmutador del portal): todo quieto y visible --- */
@media (prefers-reduced-motion: reduce) {
  .pulido-oculto { opacity: 1; transform: none; }
  .pulido-img { opacity: 1; transition: none; }
}
.movimiento-reducido .pulido-oculto { opacity: 1; transform: none; }
.movimiento-reducido .pulido-img { opacity: 1; transition: none; }
.movimiento-reducido .pulido-progreso { animation: none; }
@media print { .pulido-progreso, body::after { display: none; } .pulido-oculto, .pulido-img { opacity: 1; transform: none; } }