/* ============================================================
   TRANSICIÓN ENTRE PÁGINAS (versión «zoom out», 8-oct-2026)
   View Transitions entre documentos (Chrome/Edge/Safari 18.2+; Firefox navega normal).
   Al navegar, SOLO la página que se va hace zoom out: se encoge como un tablero (esquinas redondeadas y sombra), se retira hacia un lado
   (siempre opaca, sin transparencias: nunca se mezclan los textos de las dos páginas). La página nueva ya está completa DEBAJO desde el primer instante y queda al descubierto: no tiene
   animación propia (nada de tarjeta en blanco que distraiga).
   Dirección: enlace normal → la que se va se desplaza a la izquierda; atrás del navegador / cambio a español → a la derecha.
   data-vt (lo pone assets/js/cambio-idioma.js): fwd · back · to-en · to-es. El cambio de idioma es algo más lento.
   Versiones anteriores (deslizar, giro 3D, Figma de 3 fases): ~/respaldos-cpa/transiciones_20261007/
   Para quitarlo: borrar este <link> y el <script> en partials/header.php, portadas y comunidadstm/_estilos.php.
   ============================================================ */
@view-transition{ navigation:auto; }

/* ⚠️ CAUSA de que solo funcionara al ir a la portada (8-oct-2026): styles.css (lo cargan todas las páginas MENOS la portada) trae un sistema
   de transición ANTIGUO que captura aparte el <main> (page-main), el header/footer viejos y .hero-bg, con su propio deslizamiento de 0,42 s.
   Así el contenido de la página nueva quedaba fuera de la «foto» de la página y aparecía al final. Se anula aquí (este archivo se carga después). */
main, .site-header, .site-footer, .hero-bg, .lang-switch--floating{ view-transition-name:none !important; }

/* El fondo fijo es un elemento REAL con nombre propio (cpa-fondo): .mesh en la portada, .vt-fondo (lo imprime partials/header.php) en las demás. */
html:has(body.tema-calido), html:has(.mesh){ background:transparent !important; }
html body.tema-calido{ background:transparent !important; }
html body:has(.mesh){ background:transparent !important; }
.vt-fondo{ display:none; }
body.tema-calido .vt-fondo{
  display:block; position:fixed; inset:0; z-index:-1; pointer-events:none; view-transition-name:cpa-fondo;
  background:
    radial-gradient(60% 50% at 8% 4%, rgba(238,190,180,.55), transparent 65%),
    radial-gradient(55% 45% at 96% 22%, rgba(200,186,232,.5), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(190,214,236,.5), transparent 65%),
    linear-gradient(180deg,#FDFBF7,#F7F4EE);
}
body.tema-calido .hero-bg{ display:none !important; }
.mesh{ view-transition-name:cpa-fondo; }

/* Fondo: el de la página que se va desaparece al instante (la que se va lleva el suyo en su tablero); el de la nueva está quieto desde el principio. */
::view-transition-group(cpa-fondo){ z-index:0; }
::view-transition-old(cpa-fondo), ::view-transition-new(cpa-fondo){ display:none; }

/* Página nueva: completa y quieta, debajo. */
::view-transition-group(root){ z-index:2; }
/* Página nueva: una página COMPLETA y opaca (lleva su propio fondo) que se queda quieta y visible durante toda la transición, debajo de la que se va. */
::view-transition-new(root){
  z-index:1; mix-blend-mode:normal; opacity:1; transform:none;
  background:
    radial-gradient(60% 50% at 8% 4%, rgba(238,190,180,.55), transparent 65%),
    radial-gradient(55% 45% at 96% 22%, rgba(200,186,232,.5), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(190,214,236,.5), transparent 65%),
    linear-gradient(180deg,#FDFBF7,#F7F4EE);
  animation:cpaNuevaQuieta 1.5s linear both;
}
:root[data-vt=to-en]::view-transition-new(root), :root[data-vt=to-es]::view-transition-new(root){ animation-duration:1.9s; }
@keyframes cpaNuevaQuieta{ from,to{ opacity:1; transform:none } }

/* Página que se va: tablero opaco (lleva su propio fondo) encima, que hace zoom out. */
::view-transition-old(root){
  z-index:2; mix-blend-mode:normal; overflow:hidden;
  background:
    radial-gradient(60% 50% at 8% 4%, rgba(238,190,180,.55), transparent 65%),
    radial-gradient(55% 45% at 96% 22%, rgba(200,186,232,.5), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(190,214,236,.5), transparent 65%),
    linear-gradient(180deg,#FDFBF7,#F7F4EE);
  animation:cpaZoomOutIzq 1.5s linear both;
}
:root[data-vt=back]::view-transition-old(root), :root[data-vt=to-es]::view-transition-old(root){ animation-name:cpaZoomOutDer; }
:root[data-vt=to-en]::view-transition-old(root), :root[data-vt=to-es]::view-transition-old(root){ animation-duration:1.9s; }

@keyframes cpaZoomOutIzq{
  0%{transform:translate3d(0,0,0) scale(1); border-radius:0; box-shadow:0 0 0 0 rgba(94,60,30,0); animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38%{transform:translate3d(0,0,0) scale(.66); border-radius:28px; box-shadow:0 34px 80px -24px rgba(94,60,30,.5); animation-timing-function:cubic-bezier(.5,0,.15,1)}
  100%{transform:translate3d(-135%,0,0) scale(.66); border-radius:28px; box-shadow:0 34px 80px -24px rgba(94,60,30,.5)}
}
@keyframes cpaZoomOutDer{
  0%{transform:translate3d(0,0,0) scale(1); border-radius:0; box-shadow:0 0 0 0 rgba(94,60,30,0); animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38%{transform:translate3d(0,0,0) scale(.66); border-radius:28px; box-shadow:0 34px 80px -24px rgba(94,60,30,.5); animation-timing-function:cubic-bezier(.5,0,.15,1)}
  100%{transform:translate3d(135%,0,0) scale(.66); border-radius:28px; box-shadow:0 34px 80px -24px rgba(94,60,30,.5)}
}

/* Mientras dura la transición, las animaciones de entrada de la página nueva (riseIn, revelados) quedan en su estado final desde el primer pintado
   (data-vt-lock lo pone cambio-idioma.js), para que la página que queda al descubierto ya tenga su contenido. */
html[data-vt-lock] body *,
html[data-vt-lock] body *::before,
html[data-vt-lock] body *::after{
  animation-duration:0s !important; animation-delay:0s !important;
  transition-duration:0s !important; transition-delay:0s !important;
}

/* El selector de idioma fijo se queda en su sitio durante la transición. */
::view-transition-group(cpa-idioma){ z-index:3; animation-duration:.4s; }