/* --- Reset mínimo y tokens --- */
:where(*, *::before, *::after){box-sizing:border-box}
:where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;line-height:1.5;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0b0b0c;background:#0a0a0a}
:where(img, svg, video){max-width:100%;height:auto;display:block}
:where(a){color:inherit;text-decoration:none}
:where(ul,ol){margin:0;padding:0;list-style:none}

/* --- Layout base --- */
.container{
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(6px);
  background: rgba(15,15,16,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar{
  display:flex; align-items:center; gap: clamp(8px,2vw,20px);
  padding-block: 12px;
}
.brand{font-weight:700; font-size: clamp(18px,2.2vw,22px); letter-spacing:.2px}
.nav-links{margin-left:auto; display:flex; flex-wrap:wrap; gap:10px}
.nav-links a{
  padding:8px 12px; border-radius:10px;
  background: rgba(255,255,255,.06);
  transition: transform .12s ease, background .2s ease;
}
.nav-links a:hover{transform: translateY(-1px); background: rgba(255,255,255,.1)}

/* Hero / “nota destacada” */
.hero{
  display:grid; gap:14px; padding-block: clamp(16px,3vw,28px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero h1{font-size: clamp(22px,3.2vw,34px); line-height:1.2; margin:0}
.hero .meta{opacity:.7; font-size:.95rem}

/* Secciones (Trending / Picks) */
.section{
  padding-block: clamp(18px,3.2vw,30px);
}
.section h3{
  margin:0 0 12px; font-size: clamp(16px,2.2vw,20px);
  opacity:.9; letter-spacing:.3px
}

/* Grid de tarjetas */
.cards{
  display:grid; gap: clamp(12px,2vw,18px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; min-height: 180px;
  transition: transform .12s ease, box-shadow .2s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.25)}
.card .body{padding:14px}
.card h4{margin:0 0 8px; font-size: clamp(15px,2vw,18px); line-height:1.25}
.card .excerpt{opacity:.8; font-size:.98rem}

/* Filtros (categoría/idioma) */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-block: 6px 14px;
}
.filters select, .filters button{
  background: rgba(255,255,255,.06); color:inherit;
  border:1px solid rgba(255,255,255,.1);
  padding:8px 10px; border-radius:10px;
}

/* Footer */
.site-footer{
  margin-top: clamp(24px,5vw,48px);
  padding-block: 24px;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
}
.footer-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-grid a{opacity:.9}
.footer-grid a:hover{opacity:1}

/* Helpers para bloques sueltos del index */
main > *:not(.container){ /* fuerza a que cada bloque use contenedor */
  width:100%;
}
main .container > .full-bleed{
  margin-inline: calc(50% - 50vw); width: 100vw;
}

/* Fix de desalineos típicos */
:where(h1,h2,h3,h4,p){max-width: 70ch}
section > .container > :first-child { margin-top: 0 }