/* ¿Qué Crees Puebla? — HH Media Group
   Cabecera y pie en negro; "Lo de hoy" sobre papel claro. */

:root{
  --negro:#0D0D0D;
  --negro-hondo:#070707;
  --carbon:#1A1A1A;
  --borde:#2A2A2A;
  --hueso:#F5F5F5;
  --gris:#C4C4C4;
  --gris-bajo:#9A9A9A;
  --oro:#F2B544;
  --oro-claro:#FFD27A;

  /* zona clara */
  --papel:#F6F3EC;
  --papel-hondo:#EDE8DC;
  --tarjeta:#FFFFFF;
  --borde-claro:#E2DCCD;
  --tinta:#141414;
  --tinta-media:#4A4A4A;
  --tinta-baja:#6B6B6B;
  --oro-hondo:#8A6100;

  --ancho:1160px;
  --titulo:'Poppins',system-ui,sans-serif;
  --texto:'Lora',Georgia,serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* gana sobre el display de los botones */
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--negro);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--oro);transition:color .18s ease}
a:hover{color:var(--oro-claro)}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ---------- barra de arriba ---------- */

.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.barra .contenedor{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-top:14px;padding-bottom:14px;
}
.marca{font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--hueso);text-decoration:none}
.marca span{color:var(--oro)}
.menu{display:flex;flex-wrap:wrap;gap:24px;font-family:var(--titulo);font-weight:500;font-size:16px}
.menu a{color:var(--hueso);text-decoration:none;padding:10px 0;position:relative}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}

/* ---------- portada ---------- */

.portada{
  position:relative;overflow:hidden;padding:40px 0 56px;
  background:
    url("/img/talavera-oscura.svg") 0 0/140px 140px repeat,
    radial-gradient(120% 90% at 50% 0%,#1A1A1A 0%,var(--negro) 62%);
}
.silueta-fondo{
  position:absolute;left:50%;bottom:0;width:min(1240px,112%);
  transform:translateX(-50%);opacity:.14;pointer-events:none;z-index:0;
  will-change:transform;
}
.silueta-fondo img{width:100%;height:auto}
.portada .contenedor{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.portada img.logo{width:100%;max-width:900px;height:auto}
.entrada{margin:0;max-width:700px;font-size:clamp(19px,2.4vw,24px);line-height:1.45;color:var(--gris)}
.botones{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

.boton,.boton-linea{
  display:inline-block;font-family:var(--titulo);font-size:17px;text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.boton{padding:16px 28px;background:var(--oro);color:var(--negro);font-weight:700}
.boton:hover{background:var(--oro-claro);color:var(--negro);transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,181,68,.22)}
.boton-linea{padding:14px 26px;border:2px solid var(--hueso);color:var(--hueso);font-weight:600}
.boton-linea:hover{background:var(--hueso);color:var(--negro);transform:translateY(-2px)}

/* ---------- títulos de sección ---------- */

.titulo-fila{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.titulo-fila h2{
  margin:0;font-family:var(--titulo);font-weight:700;
  font-size:clamp(26px,3.4vw,32px);text-transform:uppercase;
}
.regla{flex:1;height:4px;background:var(--oro)}

/* ---------- LO DE HOY (zona clara) ---------- */

.hoy{
  padding:56px 0 64px;color:var(--tinta);
  background:
    url("/img/talavera-clara.svg") 0 0/140px 140px repeat,
    linear-gradient(180deg,var(--papel) 0%,var(--papel-hondo) 100%);
  border-top:4px solid var(--oro);
}
.hoy .titulo-fila h2{color:var(--tinta)}
.hoy .regla{background:var(--oro-hondo);opacity:.85}
.fecha-hoy{
  font-family:var(--titulo);font-weight:600;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro-hondo);margin:0 0 10px;
}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}

.nota{
  display:flex;flex-direction:column;background:var(--tarjeta);
  border:1px solid var(--borde-claro);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,20,.05);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.nota:hover{transform:translateY(-4px);border-color:var(--oro-hondo);box-shadow:0 16px 34px rgba(20,20,20,.14)}
.nota-foto{
  height:200px;background:var(--papel-hondo);display:flex;align-items:center;justify-content:center;
  font-family:var(--titulo);font-size:14px;letter-spacing:.08em;color:var(--tinta-baja);overflow:hidden;
}
.nota-foto.sin-foto{
  background:
    url("/img/talavera-clara.svg") center/110px 110px repeat,
    linear-gradient(135deg,#EFEADC 0%,#E3DCCB 100%);
  border-bottom:1px solid var(--borde-claro);
  color:var(--oro-hondo);font-size:20px;letter-spacing:.3em;font-weight:700;
}
.nota-foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.nota:hover .nota-foto img{transform:scale(1.05)}
.credito-foto{
  margin:0;padding:8px 20px 0;
  font-family:var(--titulo);font-size:12px;letter-spacing:.04em;color:var(--tinta-baja);
}
.nota-cuerpo{padding:14px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.etiqueta{font-family:var(--titulo);font-weight:700;font-size:13px;letter-spacing:.25em;color:var(--oro-hondo);margin:0}
.nota h3{margin:0;font-family:var(--titulo);font-weight:700;font-size:22px;line-height:1.2}
.nota h3 a{color:var(--tinta);text-decoration:none}
.nota h3 a:hover{color:var(--oro-hondo);text-decoration:underline}
.nota p{margin:0;font-size:16px;line-height:1.5;color:var(--tinta-media)}
.pie-nota{margin:auto 0 0;font-style:italic;font-size:14px;color:var(--tinta-baja)}

.aviso{
  grid-column:1/-1;padding:38px 24px;text-align:center;
  border:1px dashed var(--borde-claro);color:var(--tinta-baja);font-size:17px;background:rgba(255,255,255,.6);
}

/* ---------- cinta corredera ---------- */

.cinta{background:var(--oro);color:var(--negro);overflow:hidden;border-top:3px solid var(--negro);border-bottom:3px solid var(--negro)}
.cinta-pista{display:flex;width:max-content;animation:correr 26s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta span{
  font-family:var(--titulo);font-weight:700;font-size:15px;letter-spacing:.3em;
  text-transform:uppercase;padding:14px 26px;white-space:nowrap;
}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */

.secciones{background:var(--carbon);padding:60px 0}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tarjetas div{
  padding:22px;border:2px solid var(--oro);color:var(--oro);
  font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.08em;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.tarjetas div:hover{background:var(--oro);color:var(--negro);transform:translateY(-3px)}

/* ---------- instagram ---------- */

.instagram{padding:60px 0}
.instagram .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.instagram div{flex:1 1 420px}
.instagram h2{margin:0 0 10px;font-family:var(--titulo);font-weight:700;font-size:clamp(26px,3.4vw,32px);text-transform:uppercase}
.instagram p{margin:0;font-size:21px;line-height:1.45;color:var(--gris)}

/* ---------- anuncia ---------- */

.anuncia{
  position:relative;overflow:hidden;border-top:4px solid var(--oro);padding:64px 0;
  background:url("/img/talavera-oscura.svg") 0 0/140px 140px repeat,var(--carbon);
}
.anuncia .silueta-pie{
  position:absolute;right:-60px;bottom:-30px;width:min(620px,80%);
  opacity:.12;pointer-events:none;z-index:0;
}
.ante-titulo{font-family:var(--titulo);font-weight:700;font-size:15px;letter-spacing:.3em;color:var(--oro);margin:0 0 16px}
.anuncia h2{margin:0 0 16px;max-width:800px;font-family:var(--titulo);font-weight:700;font-size:clamp(30px,5vw,40px);line-height:1.12;text-transform:uppercase}
.anuncia p{margin:0 0 24px;max-width:680px;font-size:clamp(19px,2.2vw,22px);line-height:1.45;color:var(--gris)}

/* ---------- pie ---------- */

.pie{background:var(--negro-hondo);color:#B5B5B5;font-size:15px}
.pie .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:28px}
.pie strong{font-family:var(--titulo);font-weight:600;letter-spacing:.05em;color:#B5B5B5}
.pie em{font-style:italic}

/* ---------- aparición al hacer scroll ---------- */

.js .aparece{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .aparece.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .aparece{opacity:1;transform:none}
  .silueta-fondo{transform:translateX(-50%)!important}
}

@media (max-width:640px){
  .barra .contenedor{padding-top:10px;padding-bottom:10px}
  .menu{gap:16px;font-size:15px}
  .hoy{padding:40px 0 48px}
  .nota-foto{height:180px}
  .silueta-fondo{width:170%;opacity:.12}
  /* la talavera, más chica en celular para que no domine */
  .portada,.anuncia{background-size:90px 90px,auto}
  .hoy{background-size:90px 90px,auto}
  .nota-foto.sin-foto{background-size:80px 80px,auto}
}