/* =========================================================
   NOTICIAS – listado y páginas de artículo
   ========================================================= */

:root{ --article-max: 1100px; }

/* ===========================
   LISTADO (tarjetas)
   =========================== */
.news-block{ padding:56px 0 70px; background:#000; color:#fff; }
.news-block .container{ width:min(1200px, 92%); margin:0 auto; }

.news-title{
  font:800 clamp(1.8rem, 2.4vw + 1rem, 3rem)/1.1 var(--ff-ui,"Montserrat",system-ui);
  margin:0 0 10px;
}
.news-sep{
  border:0; height:1px; margin:18px 0 24px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

.news-grid{
  --cols:4; display:grid; gap:28px;
  grid-template-columns:repeat(var(--cols), 1fr);
}
@media (max-width:1100px){ .news-grid{ --cols:3; } }
@media (max-width: 900px){ .news-grid{ --cols:2; } }
@media (max-width: 560px){ .news-grid{ --cols:1; gap:22px; } }

.news-item{ list-style:none; }

.news-card{
  display:block; text-decoration:none; color:inherit;
  border-radius:14px; overflow:hidden; background:#0b0f12;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.news-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.news-thumb{ margin:0; aspect-ratio:16/10; overflow:hidden; background:#111; }
.news-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.001); transition:transform .25s ease;
}
.news-card:hover .news-thumb img{ transform:scale(1.05); }

.news-h3{
  font:800 1.05rem/1.25 var(--ff-ui,"Montserrat",system-ui);
  margin:12px 14px 8px;
}
.news-meta{
  margin:0 14px 16px; opacity:.8; font:500 .9rem/1.3 var(--ff-ui,"Inter",system-ui);
}

/* ===========================
   PÁGINA DE ARTÍCULO
   =========================== */
.article{
  background:#0b0f12; color:#e9eef3;
  /* el empuje por nav fijo se hace global en body::before */
  padding: clamp(16px, 3vw, 32px) 0 84px;
}

/* Contenedor estándar de texto */
.container-narrow{
  width:min(var(--article-max), 92%);
  margin:0 auto;
}

/* Migas (MEJORA: centradas y con el mismo ancho del contenido) */
.article .breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font:500 .92rem/1.2 var(--ff-ui,"Inter",system-ui);
  color:#cdd6df;
  width:min(var(--article-max), 92%);
  margin:6px auto 12px;
  padding-inline:4px;
}
.breadcrumb a{ color:var(--accent,#ffc600); text-decoration:none; }
.breadcrumb .sep{ opacity:.55; }

/* Hero recortado */
.article-hero{
  border-radius:16px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  margin: 8px 0 18px;
}
.article-hero img{
  width:100%;
  height: clamp(220px, 38vw, 420px);
  object-fit:cover; object-position:center 35%;
  display:block;
}
/* EXTRA SEGURO: si el hero cuelga directo de .article, céntralo y limita ancho */
.article > .article-hero{
  width:min(var(--article-max), 92%);
  margin:8px auto 18px;
}

/* Anclas respetan el nav fijo */
.article-hero,
.article-header,
.breadcrumb{
  scroll-margin-top: calc(var(--nav-h, 64px) + 12px);
}

/* Encabezado */
.article-header{ margin: 8px 0 8px; }
.article-title{
  margin:0 0 6px; letter-spacing:.01em;
  font:800 clamp(1.6rem, 2.2vw + 1rem, 2.8rem)/1.15 var(--ff-ui,"Montserrat",system-ui);
  color:#fff;
}
.article-meta{
  margin:0 0 18px;
  font:500 .95rem/1.4 var(--ff-ui,"Inter",system-ui);
  color:#cdd6df; opacity:.9;
}
.article-meta .sep{ margin:0 .5rem; opacity:.6; }

/* Cuerpo */
.article-body{ font:400 1.05rem/1.75 var(--ff-text,"Inter",system-ui); }
.article-body p{ margin:0 0 1rem; }
.article-body .lead p{
  font-size: clamp(1.05rem, .5vw + 1rem, 1.2rem);
  color:#f0f4f8; opacity:.95;
}
.article-body h2{
  margin:22px 0 8px;
  font:800 clamp(1.2rem, .9vw + 1rem, 1.6rem)/1.25 var(--ff-ui,"Montserrat",system-ui);
  color:#fff;
}
.article-body h3{
  margin:18px 0 6px;
  font:700 clamp(1.05rem, .6vw + .9rem, 1.2rem)/1.25 var(--ff-ui,"Montserrat",system-ui);
  color:#fff;
}
.article-body ul{ padding-left:1.1rem; }

/* Lista con checks (SVG inline, sin dependencias) */
.article-body ul.check{ list-style:none; padding-left:0; }
.article-body ul.check li{
  position:relative; padding-left:1.6rem; margin:.42rem 0;
}
.article-body ul.check li::before{
  content:""; position:absolute; left:0; top:.18rem;
  width:1.05rem; height:1.05rem; background-repeat:no-repeat;
  background-position:center; background-size:100% 100%;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="%23ffc600" d="M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z"/>\
</svg>');
}

/* CTA dentro del artículo */
.cta-panel{
  margin:22px 0; padding:16px 18px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,198,0,.09), rgba(255,198,0,.03));
  border:1px solid rgba(255,198,0,.22);
  box-shadow:0 14px 32px rgba(0,0,0,.25);
}
.cta-panel h3{
  margin:0 0 6px; color:#fff;
  font:800 1.15rem/1.2 var(--ff-ui,"Montserrat",system-ui);
}
.cta-panel p{ margin:0 0 10px; }

.article .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 18px; border-radius:10px;
  background:linear-gradient(180deg,#ffc81a 0%, var(--accent,#feb000) 100%);
  color:#111; font:800 .95rem/1 var(--ff-ui,"Montserrat");
  box-shadow:0 10px 24px rgba(254,176,0,.25), inset 0 -2px 0 rgba(0,0,0,.18);
  text-decoration:none; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.article .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }

.closing{ margin-top:12px; opacity:.95; }

/* Relacionados */
.related{ margin-top:28px; }
.related-title{
  font:800 1.05rem/1 var(--ff-ui,"Montserrat",system-ui);
  margin:0 0 12px; color:#fff;
}
.related-grid{
  --cols:3; display:grid; gap:18px;
  grid-template-columns:repeat(var(--cols), 1fr);
}
@media (max-width:1000px){ .related-grid{ --cols:2; } }
@media (max-width:640px){  .related-grid{ --cols:1; } }

.related-card{
  display:block; border-radius:12px; overflow:hidden;
  background:#0f1418; color:#e9eef3; text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.related-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.related-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.related-card .rel-body{ padding:12px 14px; }
.related-card h3{ margin:0; font:700 1rem/1.25 var(--ff-ui,"Montserrat",system-ui); }

/* Responsive menor */
@media (max-width:640px){
  .article{ padding-bottom:64px; }
}