/* Portadas de la casa: cada una con su propio gesto al bajar.
   portadas.js pone en cada portada --p, de 0 (asoma por abajo) a 1 (su centro llega al centro de la pantalla).
   Todo lo que se mueve es transform, opacity o clip-path. Sin .gesto (sin JS o con movimiento reducido)
   cada portada se queda en su estado final, entera. */

/* El acercamiento al pasar el cursor va en el marco del arte, no en las imágenes: así no pisa los gestos */
.portadas .p-arte{overflow:hidden;transition:transform 1.2s var(--ease)}
.portadas .portada a:is(:hover,:focus-visible) .p-arte img{transform:none}
.portadas .portada a:is(:hover,:focus-visible) .p-arte{transform:scale(1.035)}
.portadas.gesto .portada .p-arte img{transition:none}
.portadas.gesto .portada .p-arte>img.k-tajo,.portadas.gesto .portada .p-arte>img.d-dosis{position:absolute;inset:0}
/* En teléfonos bajos la entrada esconde lo que está «en preparación» para que todo quepa; aquí, en su casa, la cuarta portada se queda */
.portadas>.portada.aire-pronto{display:block}

/* ——— Dosis Informativa · lo que importa hoy: las dosis caen, una por una, en su blíster ———
   El blíster espera apagado; cada cápsula cae a su lugar (con un pequeño rebote) y al final se enciende entero. */
.portadas.gesto .portada.p-dosis .p-arte>img:not(.d-dosis){opacity:calc(.2 + .8 * clamp(0,(var(--p,1) - .84) / .13,1))}
.portadas.gesto .portada.p-dosis .p-arte>img.d-dosis{
 clip-path:var(--c);
 transform-origin:var(--o);
 --q:clamp(0,(var(--p,1) - var(--d,0)) / .24,1);
 opacity:clamp(0,var(--q) * 5,1);
 transform:translate3d(0,calc(34% * (var(--q) - 1) * (var(--q) - 1) * (2.4 * (var(--q) - 1) + 1.4)),0) scale(calc(1 + .34 * (1 - var(--q)) * (1 - var(--q))));
 will-change:transform,opacity}

/* ——— Rol en Contexto · la historia detrás de la noticia: el plano entra a su centro, como una lupa ——— */
.portadas.gesto .portada.p-rol .p-arte>img{
 --e:clamp(0,var(--p,1),1);
 transform-origin:48% 40%;
 transform:scale(calc(1 + 1.05 * var(--e) * var(--e) * (3 - 2 * var(--e))));
 will-change:transform}
/* Abajo, en la tinta: su nombre y la historia detrás de la Dosis de hoy (nunca sobre el nombre de arriba) */
.p-rol .p-arte::after{inset:26% 0 0 0;background:linear-gradient(transparent,rgb(11 10 12/.66) 30%,rgb(11 10 12/.93) 60%)}
.p-pie{position:absolute;left:10px;right:6px;bottom:19px;display:flex;flex-direction:column;gap:5px}
.p-rol .p-pie>.p-t{position:static;font-size:clamp(16px,4.4vw,19px);line-height:1.04}
.p-rol .p-pie>.p-t em{display:inline}
.p-detras{padding-left:5px;border-left:2px solid var(--rosa-hilo);font:400 9.5px/1.28 var(--sans);color:rgb(236 232 226/.92);text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.p-detras-l{display:none}
.portadas.gesto .portada.p-rol .p-detras{
 --r:clamp(0,(var(--p,1) - .5) / .32,1);
 opacity:var(--r);
 transform:translate3d(0,calc(6px * (1 - var(--r))),0)}

/* ——— Ktarsis · se vale romperse: llega rota en franjas y se junta ——— */
.portadas.gesto .portada.p-ktarsis .p-arte>img:not(.k-tajo){opacity:clamp(0,(var(--p,1) - .9) / .07,1)}
.portadas.gesto .portada.p-ktarsis .p-arte>img.k-tajo{
 clip-path:inset(var(--a) 0 var(--b) 0);
 --q:clamp(0,(var(--p,1) - var(--d,0)) / .48,1);
 transform:translate3d(calc(var(--dx) * (1 - var(--q)) * (1 - var(--q)) * (1 - var(--q))),0,0);
 will-change:transform}

/* ——— Su voz · pódcast: la onda sube a la altura de las luces de la ciudad, lejos de su figura ——— */
.p-onda{position:absolute;left:4%;width:48%;top:36%;height:16%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.p-onda i{display:block;width:1.5px;height:100%;border-radius:1px;background:var(--rosa-suave);transform:scaleY(var(--a));transform-origin:50% 50%}
.portadas.gesto .portada.p-voz .p-onda i{
 --q:clamp(0,(var(--p,1) - var(--d,0)) / .42,1);
 transform:scaleY(calc(.06 + (var(--a) - .06) * var(--q) * (2 - var(--q))));
 will-change:transform}

/* Teléfonos angostos (360): las etiquetas en un renglón, los títulos sin chocar con el arte y el crédito de la IA completo */
@media (max-width:380px){
 .portadas .p-k{font-size:8.5px;letter-spacing:.12em}
 .portadas .p-t{font-size:17px}
 .p-rol .p-pie>.p-t{font-size:15.5px}
 .p-pie{left:8px;right:3px}
 .p-detras{font-size:9px;padding-left:4px}
 .portadas .p-cred{left:8px;right:6px;font-size:8px;letter-spacing:-.01em}
}
@media (min-width:900px){
 .p-pie{left:14px;right:14px;bottom:24px;gap:8px}
 .p-rol .p-pie>.p-t{font-size:clamp(24px,2.1vw,32px)}
 .p-detras{padding-left:8px;font-size:12px;line-height:1.35;-webkit-line-clamp:3}
 .p-detras-c{display:none}
 .p-detras-l{display:inline}
 .p-onda i{width:2px}
}