/* =====================================================================
   PRESS.CSS — la página de prensa
   =====================================================================
   Carlos (2026-07-28): "Press debe ser una sección aparte, no un ancla".
   Replica la del sitio publicado: cabecera, claim y rejilla de tarjetas
   blancas con los logos, sobre la textura de periódicos viejos.
   ===================================================================== */

/* ── CABECERA ─────────────────────────────────────────────────────── */
.pr-cab{background:var(--azul);color:#fff;text-align:center;position:relative;
  overflow:hidden;padding:clamp(96px,14vh,150px) 0 clamp(28px,4.5vh,50px)}
.pr-cab::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/620px auto repeat;opacity:.05}
.pr-cab__in{position:relative;z-index:1}
.pr-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:4px;font-size:13px;color:var(--amarillo);margin:0 0 10px}
.pr-titulo{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;font-size:clamp(44px,8vw,100px);line-height:1;letter-spacing:1px}
.pr-claim{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:2px;color:var(--amarillo);margin:14px 0 0;
  font-size:clamp(15px,1.9vw,23px)}
.pr-sub{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.86);margin:14px auto 0;max-width:54ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.55}

/* ── LOS MEDIOS ───────────────────────────────────────────────────────
   Fondo de periódicos viejos, muy apagado, como en el sitio publicado. */
.pr-medios{position:relative;background:var(--crema);
  padding:clamp(40px,6vh,74px) 0 clamp(46px,7vh,86px)}
.pr-medios::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/press/vista-superior-de-viejos-periodicos-franceses.jpg") center/cover no-repeat;
  opacity:.13;filter:grayscale(1)}
.pr-medios .wrap{position:relative;z-index:1}

/* 2026-08-02 · Carlos: "la forma de card de los logos" como la web
   publicada — tarjeta blanca sin borde y sombra difusa suave.
   ⛔ El corrimiento de filas alternas de la original se probó y FUERA:
   con nuestros logos (proporciones muy dispares) "se ve descuadrado"
   (Carlos, captura). Rejilla recta. */
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px)}
/* ⚠️ Los logos llegan en proporciones muy distintas (SVG anchos, PNG
   cuadrados): la tarjeta tiene ALTO FIJO y el logo va con
   object-fit:contain, así ninguno se deforma ni descuadra la fila. */
.pr-card{display:flex;align-items:center;justify-content:center;margin:0;
  background:#fff;border-radius:12px;height:clamp(96px,10vw,120px);
  padding:clamp(16px,2vw,26px);
  box-shadow:0 10px 30px rgba(3,35,71,.07);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
/* la ENTRADA (cascada al asomar, como la publicada): press.js añade
   .pr-anim al arrancar y .pr-visto al entrar cada tarjeta al viewport;
   sin JS la rejilla se ve completa desde el primer pintado */
.pr-anim .pr-card{opacity:0}
.pr-anim .pr-card.pr-visto{animation:prEntra .55s cubic-bezier(.22,.9,.3,1) var(--d,0ms) both}
.pr-anim .pr-card.pr-fin{animation:none;opacity:1}   /* el fill pisaría el hover */
@keyframes prEntra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.pr-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  /* los logos vienen en colores distintos: se unifican en gris tinta y
     recuperan su color al pasar por encima (ley del sistema para logos
     sobre fondo claro: grayscale + multiply, nunca brightness(0)) */
  filter:grayscale(1) contrast(1.05) opacity(.72);mix-blend-mode:multiply;
  transition:filter .3s}
.pr-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(3,35,71,.14)}
.pr-card:hover img{filter:none}
/* sólo cuando el medio tiene enlace */
.pr-card--link{cursor:pointer;text-decoration:none}
.pr-card--link:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ── CIERRE · MORADO entre la crema y el pie rojo ─────────────────── */
.pr-cta{background:#0a0620;color:#fff;text-align:center;padding:clamp(50px,8vh,88px) 0}
.pr-cta h2{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;color:var(--amarillo);font-size:clamp(28px,5vw,58px);line-height:1}
.pr-cta p{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.9);margin:12px auto 22px;max-width:48ch;line-height:1.55}

@media (max-width:900px){
  .pr-cab{padding:clamp(88px,13vh,120px) 0 24px}
  .pr-claim{font-size:15px;letter-spacing:1.4px}
  .pr-sub{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .pr-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pr-card{height:92px;padding:14px}
  .pr-cta p{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .pr-cta .btn{font-size:13px}
}