/* ==========================================================================
   ANGELIA NOTICIAS — estilos compartidos
   Igual que en La Casa News: zonas repetibles marcadas con comentarios
   FEMA:LOOP para que la conversión a PHP con el panel sea directa.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy: #0d2a52;
  --navy-deep: #081b38;
  --ink: #1a1e2a;
  --text-body: #52586a;
  --text-muted: #8891a3;
  --bg-soft: #f4f6f9;
  --border: #e7eaf0;
  --white: #ffffff;
  --radius: 6px;
  --container: 1500px;
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(14px, 4vw, 20px); }

/* ---------- Header ---------- */
.site-header{ border-bottom:1px solid var(--border); padding:16px 0; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo img{ height:110px; width:auto; display:block; }

/* IMPORTANTE: este botón solo se ve si existe en el HTML del header, ej:
   <button class="nav-toggle" aria-label="Abrir menú" onclick="document.querySelector('.main-nav').classList.toggle('is-open')">
     <span></span>
   </button>
   Si el header no tiene ese <button>, no hay nada que mostrar. */
.nav-toggle{
  display:none; background:var(--bg-soft); border:1px solid var(--border); border-radius:4px;
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block; width:22px; height:3px; background:var(--ink); position:relative; border-radius:2px;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0; width:22px; height:3px; background:var(--ink); border-radius:2px;
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.main-nav ul{ display:flex; flex-wrap:wrap; gap:21px; }
.main-nav a{
  font-weight:700; font-size:18px; color:var(--ink);
  transition:color .15s ease;
}
.main-nav a:hover, .main-nav a.is-active{ color:var(--navy); text-decoration:underline; text-underline-offset:4px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:.82rem; color:var(--text-muted); padding:14px 0 0; }
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb .sep{ margin:0 6px; }

/* ---------- Hero (portada e inicio de categoría) ---------- */
.hero{ padding:20px 0 8px; }
.hero-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:16px;
}
.hero-grid .card--main{ aspect-ratio:16/11; }
.hero-side{ display:grid; grid-template-rows:1fr auto; gap:16px; }
.hero-side .card--wide{ aspect-ratio:16/8; }
.hero-side-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-side-pair .card{ aspect-ratio:1/1; }

/* ---------- Card genérica (imagen + título superpuesto) ---------- */
.card{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  background:#eee; color:var(--white);
}
.card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__body{
  position:absolute; inset:auto 0 0 0; padding:16px 18px;
  background:linear-gradient(180deg, rgba(8,16,32,0) 0%, rgba(8,16,32,.5) 45%, rgba(8,16,32,.9) 100%);
}
.card__title{ font-weight:800; font-size:clamp(17px, 2.6vw, 22px); line-height:1.3; margin:0; color:var(--white); }
.card:hover .card__title{ text-decoration:underline; }
.hero-grid .card--main .card__title{ font-size:clamp(24px, 4.2vw, 36px); }

/* ---------- Banners ---------- */
.ad-row{ padding:22px 0; }
.ad-row .wrap-banners{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px;
}
.ad-row img{ display:block; border-radius:4px; max-width:100%; height:auto; }
/* Bloque 2 y 3 del home: mismo alto entre sí, para que queden simétricos */
.ad-row .wrap-banners--parejo img{ height:clamp(120px, 22vw, 220px); width:auto; max-width:100%; object-fit:contain; }
.ad-row .etiqueta{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); margin-bottom:10px; text-align:center;
}

/* ---------- Secciones de dos columnas (Legislativo / Municipios en el home) ---------- */
.section{ padding:30px 0; }
.section__title{
  font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--navy); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--navy);
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.list-card{ display:block; margin-bottom:16px; }
.list-card__img{ aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; margin-bottom:12px; }
.list-card__img img{ width:100%; height:100%; object-fit:cover; }
.list-card__title{ font-weight:800; font-size:clamp(19px, 3vw, 26px); line-height:1.2; color:var(--ink); margin:0 0 8px; }
.list-card:hover .list-card__title{ text-decoration:underline; }
.list-card__excerpt{ font-size:.92rem; line-height:1.55; color:var(--text-body); margin:0; }

.mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:22px; }
.mini-card__title{ font-weight:700; font-size:clamp(16px, 2.2vw, 19px); line-height:1.2; color:var(--ink); margin:10px 0 6px; }
.mini-card:hover .mini-card__title{ text-decoration:underline; }
.mini-card__excerpt{ font-size:.8rem; color:var(--text-body); line-height:1.5; margin:0; }

/* ---------- Card destacada ancha (full width, imagen + overlay) ---------- */
.card--feature{ aspect-ratio:20/8; margin:6px 0; }
.card--feature .card__title{ font-size:clamp(20px, 4vw, 34px); max-width:65%; }

/* ---------- Listado de categoría (con sidebar Lo Más Leído) ---------- */
.cat-layout{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; padding:24px 0 40px; }
.cat-list-item{ display:grid; grid-template-columns:230px 1fr; gap:20px; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--border); }
.cat-list-item__img{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; }
.cat-list-item__img img{ width:100%; height:100%; object-fit:cover; }
.cat-list-item__title{ font-weight:800; font-size:1.2rem; line-height:1.35; color:var(--ink); margin:0 0 8px; }
.cat-list-item:hover .cat-list-item__title{ text-decoration:underline; }
.cat-list-item__excerpt{ font-size:.92rem; line-height:1.6; color:var(--text-body); margin:0; }

.sidebar{ position:sticky; top:24px; display:flex; flex-direction:column; align-items:center; gap:26px; }
.sidebar > div{ width:100%; align-self:stretch; }
.sidebar > img, .sidebar > a{ max-width:260px; width:100%; }
.sidebar img{ border-radius:var(--radius); }
.sidebar__title{
  font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.4px;
  color:#d1462f; margin:0 0 4px; padding-bottom:10px; border-bottom:2px solid #d1462f;
}
.most-read{ display:flex; flex-direction:column; }
.most-read__item{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--border); }
.most-read__num{
  font-weight:800; font-size:.85rem; color:var(--white); background:var(--ink);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.most-read__thumb{ display:none; }
.most-read__title{ font-weight:700; font-size:.92rem; line-height:1.4; color:var(--ink); margin:0; }
.most-read__item:hover .most-read__title{ text-decoration:underline; }

.pagination{ display:flex; justify-content:center; gap:8px; padding:10px 0 40px; }
.pagination a{
  display:flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  border-radius:4px; border:1px solid var(--border); font-weight:700; font-size:.85rem; color:var(--ink);
  padding:0 12px;
}
.pagination a.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pagination a:hover:not(.is-active){ border-color:var(--navy); color:var(--navy); }

/* ---------- Noticia individual ---------- */
.article-layout{ max-width:var(--container); margin:0 auto; padding:30px 20px 60px; display:grid; grid-template-columns:2fr 1fr; gap:44px; align-items:start; }
.article__cover{ aspect-ratio:16/8; border-radius:var(--radius); overflow:hidden; margin-bottom:26px; }
.article__cover img{ width:100%; height:100%; object-fit:cover; }
.article__title{ font-weight:800; font-size:clamp(1.4rem, 3.2vw, 2rem); line-height:1.28; color:var(--ink); margin:0 0 10px; }
.article__meta{ font-size:.85rem; color:var(--text-muted); margin:0 0 26px; }
.article__body p{ font-size:clamp(.95rem, 1.4vw, 1.02rem); line-height:1.85; color:var(--text-body); margin:0 0 22px; }
.article__closing{ font-weight:700; font-size:1rem; color:var(--ink); padding-top:20px; border-top:2px solid var(--navy); }

/* escuchar noticia (texto a voz) */
.escuchar-noticia{ display:flex; align-items:center; gap:8px; margin:4px 0 22px; }
.btn-escuchar{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px;
  border:1.5px solid var(--navy); background:#fff; color:var(--navy);
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn-escuchar:hover{ background:var(--navy); color:#fff; }
.btn-escuchar[aria-pressed="true"]{ background:var(--navy); color:#fff; }
.btn-detener-escucha{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; border:1.5px solid var(--border); background:#fff; color:var(--text-muted);
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-detener-escucha:hover{ background:#d1462f; border-color:#d1462f; color:#fff; }

.article-sidebar{ display:flex; flex-direction:column; align-items:center; gap:28px; position:sticky; top:24px; }
.article-sidebar:empty{ display:none; }
.article-sidebar > div{ width:100%; align-self:stretch; }
.article-sidebar > img, .article-sidebar > a{ max-width:260px; width:100%; }
.article-sidebar img{ border-radius:var(--radius); display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); padding:22px 0; margin-top:20px; display:flex; align-items:center; justify-content:center; }
.site-footer img{ height:42px; width:auto; }
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* ---------- Responsive ---------- */

/* Tablet grande */
@media (max-width:1100px){
  .cat-layout{ grid-template-columns:1.6fr 1fr; gap:28px; }
  .article-layout{ gap:30px; }
}

/* Tablet: colapsa la mayoría de las grillas a 1 o 2 columnas */
@media (max-width:960px){
  .logo img{ height:80px; }

  .nav-toggle{ display:flex; }
  .main-nav{
    display:none; width:100%; order:3;
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; padding-top:12px; border-top:1px solid var(--border); margin-top:12px; }
  .main-nav a{ display:block; padding:10px 0; font-size:16px; }
  .site-header .container{ flex-wrap:wrap; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-side-pair{ grid-template-columns:1fr 1fr; }

  .two-col{ grid-template-columns:1fr; gap:20px; }
  .mini-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }

  .cat-layout{ grid-template-columns:1fr; gap:32px; }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .sidebar > div, .sidebar > img, .sidebar > a{ max-width:320px; }

  .article-layout{ grid-template-columns:1fr; padding:24px 16px 48px; }
  .article-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; margin-top:10px; }
  .article-sidebar > img, .article-sidebar > a{ max-width:280px; }

  /* Fuentes un poco más chicas ya en tablet */
  .hero-grid .card--main .card__title{ font-size:28px; }
  .card__title{ font-size:19px; }
  .card--feature .card__title{ font-size:26px; }
  .list-card__title{ font-size:22px; }
  .article__title{ font-size:1.6rem; }
}

/* Móvil grande */
@media (max-width:640px){
  .logo img{ height:60px; }

  .hero-side-pair{ grid-template-columns:1fr; }
  .hero-grid .card--main{ aspect-ratio:16/12; }
  .hero-side .card--wide{ aspect-ratio:16/10; }

  .mini-grid{ grid-template-columns:1fr; }
  .cat-list-item{ grid-template-columns:1fr; gap:14px; }
  .cat-list-item__img{ aspect-ratio:16/10; }

  .ad-row .wrap-banners{ gap:14px; }

  .card--feature{ aspect-ratio:auto; height:200px; }
  .card--feature .card__title{ max-width:100%; }

  .article__cover{ aspect-ratio:16/10; }

  .pagination{ flex-wrap:wrap; }

  .back-to-top{ width:38px; height:38px; right:14px; bottom:14px; font-size:1rem; }
  .site-footer img{ height:34px; }

  /* Fuentes más chicas en móvil */
  .section__title{ font-size:.9rem; }
  .hero-grid .card--main .card__title{ font-size:22px; }
  .card__title{ font-size:16px; }
  .card--feature .card__title{ font-size:20px; }
  .list-card__title{ font-size:19px; }
  .list-card__excerpt{ font-size:.85rem; }
  .mini-card__title{ font-size:16px; }
  .mini-card__excerpt{ font-size:.78rem; }
  .cat-list-item__title{ font-size:1.05rem; }
  .cat-list-item__excerpt{ font-size:.85rem; }
  .article__title{ font-size:1.35rem; }
  .article__body p{ font-size:.94rem; line-height:1.7; }
  .article__closing{ font-size:.92rem; }
  .most-read__title{ font-size:.85rem; }
}

/* Móvil chico */
@media (max-width:400px){
  .container{ padding:0 12px; }
  .most-read__item{ grid-template-columns:1fr; gap:6px; }
  .most-read__num{ display:none; }
  .sidebar > div, .sidebar > img, .sidebar > a,
  .article-sidebar > img, .article-sidebar > a{ max-width:100%; }

  /* Un ajuste final para pantallas muy chicas */
  .hero-grid .card--main .card__title{ font-size:19px; }
  .card__title{ font-size:15px; }
  .list-card__title{ font-size:17px; }
  .cat-list-item__title{ font-size:1rem; }
  .article__title{ font-size:1.2rem; }
  .article__body p{ font-size:.9rem; }
}