/* ==========================================================================
   ALERTA OESTE — estilos base
   ========================================================================== */

:root{
  --azul-oscuro: #0e1d3f;
  --azul-oscuro-2: #101c2e;
  --negro-ticker: #12141c;
  --rojo: #e31c3d;
  --amarillo: #b7a808;
  --purpura: #6f3fa0;
  --verde: #1f8a3b;
  --azulceleste: #1f5fd8;
  --gris-osc: #33363e;
  --texto: #1b2230;
  --texto-gris: #6b7280;
  --borde: #e7eaee;
  --fondo-body: #eef2f6;
  --sombra: 0 2px 18px rgba(16, 24, 40, .08);
  --radio: 8px;
  --maxw: 1600px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: "Encode Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo-body);
  -webkit-font-smoothing: antialiased;
}

/* Todos los títulos del sitio usan la misma tipografía (la de los bloques La Matanza, Hurlingham, etc.) */
h1, h2, h3, h4, h5, h6, .section-title{ font-family: "Encode Sans Condensed", "Helvetica Neue", Arial, sans-serif; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------- */
/* 1) Banner de cabecera (arriba de todo, encima del menú y el logo)       */
/* ---------------------------------------------------------------------- */
.top-ad-banner{
  position: relative;
  background: var(--azul-oscuro);
  height: 130px;
  overflow:hidden;
}
.top-ad-banner .slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .6s ease;
}
.top-ad-banner .slide.activo{ opacity:1; }
.top-ad-banner a{ display:block; width:100%; height:100%; }
.top-ad-banner img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 640px){
  .top-ad-banner{ height: 84px; }
}

/* ---------------------------------------------------------------------- */
/* 2) Barra "Lo Ultimo" + fecha + redes                                    */
/* ---------------------------------------------------------------------- */
.ticker-bar{
  background: var(--negro-ticker);
  color:#fff;
}
.ticker-inner{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 10px 24px;
  display:flex;
  align-items:center;
  gap: 18px;
  font-size: 13.5px;
}
.ticker-fecha{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  color: var(--texto);
  font-weight:700;
  padding: 5px 12px;
  border-radius: 4px;
  flex-shrink:0;
}
.ticker-lo-ultimo{
  display:flex;
  align-items:center;
  gap:6px;
  color: #f5b400;
  font-weight:800;
  text-transform:uppercase;
  flex-shrink:0;
  letter-spacing:.02em;
}
.ticker-titular{
  position:relative;
  flex:1;
  height: 18px;
  overflow:hidden;
}
.ticker-titular a{
  position:absolute; inset:0;
  display:flex; align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#dfe3ea;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.ticker-titular a.activo{ opacity:1; transform:translateY(0); }
.ticker-titular a:hover{ color:#fff; }
.ticker-redes{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.ticker-redes span{ color:#ffffff; }
.ticker-redes a{
  width:26px; height:26px;
  border-radius:50%;
  background:#232633;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.ticker-redes a:hover{ background: var(--rojo); }

/* ---------------------------------------------------------------------- */
/* 3) Header: logo + nav (sticky)                                          */
/* ---------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  box-shadow: var(--sombra);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 12px 24px;
}
.site-header .logo{
  display:block;
  width: 190px;
  height: auto;
  flex-shrink:0;
}
.site-header .logo img{ width:100%; height:auto; display:block; }
.site-nav{ flex:1; display:flex; justify-content:center; }
.site-nav > ul{
  list-style:none;
  display:flex;
  gap: 26px;
  margin:0; padding:0;
  font-weight:800;
  font-size: 24px;
}
.site-nav ul a:hover,
.site-nav ul a.activo{ color: var(--rojo); }
.site-nav ul a{ white-space:nowrap; }

/* Submenú "Noticias" (localidades) */
.tiene-submenu{
  position:relative;
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.tiene-submenu > a{
  display:flex;
  align-items:center;
  gap: 5px;
}
.tiene-submenu > a .flecha{
  width:9px; height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  margin-top:-3px;
  transition: transform .15s ease;
}
.tiene-submenu.abierto > a .flecha{ transform: rotate(-135deg); margin-top:3px; }
@media (hover:hover) and (min-width:981px){
  .tiene-submenu:hover > a .flecha{ transform: rotate(-135deg); margin-top:3px; }
}

.submenu{
  list-style:none;
  margin:0; padding:8px;
  position:absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background:#fff;
  border-radius: 12px;
  box-shadow: var(--sombra);
  min-width: 220px;
  display:none;
  z-index: 80;
}
.tiene-submenu.abierto .submenu{ display:block; }
@media (hover:hover) and (min-width:981px){
  .tiene-submenu:hover .submenu{ display:block; }
}
.submenu li a{
  display:block;
  padding: 10px 14px;
  border-radius:8px;
  font-weight:700;
  font-size:20px;
  color: var(--texto);
}
.submenu li a:hover{ background: var(--fondo-body); color: var(--rojo); }

.search-btn{
  width:38px; height:38px;
  border-radius:50%;
  background: var(--fondo-body);
  color: var(--texto);
  display:flex; align-items:center; justify-content:center;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.search-btn:hover{ background: var(--rojo); color:#fff; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px; height:34px;
  border:none;
  background:none;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block; width:22px; height:2.5px; border-radius:2px;
  background: var(--azul-oscuro);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------- */
/* Badges de categoría (varios por nota, cada uno con su color)            */
/* ---------------------------------------------------------------------- */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#fff;
  background: var(--gris-osc);
}

/* ---------------------------------------------------------------------- */
/* Tarjetas de noticia                                                     */
/* ---------------------------------------------------------------------- */
.card-noticia{
  background:#fff;
  border-radius: var(--radio);
  overflow:hidden;
  box-shadow: var(--sombra);
  display:flex;
  flex-direction:column;
}
.card-noticia .foto{
  display:block;
  aspect-ratio: 16/10;
  overflow:hidden;
}
.card-noticia .foto img{ width:100%; height:100%; object-fit:cover; }
.card-noticia .cuerpo{ padding: 16px 18px 20px; }
.card-noticia h2, .card-noticia h3{
  margin:0 0 10px;
  font-size: 24px;
  line-height:1.28;
  font-weight:600;
  letter-spacing:-.01em;
}
.card-noticia h2 a:hover, .card-noticia h3 a:hover{ color: var(--rojo); }
.meta{
  display:flex;
  align-items:center;
  gap:14px;
  color: var(--texto-gris);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.meta span{ display:inline-flex; align-items:center; gap:5px; }
.card-noticia .extracto{
  margin:0;
  color: var(--texto-gris);
  font-size: 14px;
  line-height:1.5;
}

/* ---------------------------------------------------------------------- */
/* Secciones del home                                                      */
/* ---------------------------------------------------------------------- */
.section{ padding: 34px 0 6px; }
.section-title{
  display:flex;
  align-items:center;
  gap:14px;
  font-size: 21px;
  font-weight:800;
  color: var(--azul-oscuro);
  margin: 0 0 20px;
}
.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--borde);
}

/* Hero: 1 nota grande con overlay */
.hero-destacada{
  display:block;
  position:relative;
  border-radius: var(--radio);
  overflow:hidden;
  aspect-ratio: 2.5 / 1;
  color:#fff;
  box-shadow: var(--sombra);
}
.hero-destacada img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-destacada .overlay{
  position:relative; z-index:1;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 60%);
}
.hero-destacada h2{ margin:0 0 8px; font-size: 30px; font-weight:800; line-height:1.2; }
.hero-destacada .meta{ color:#d8dbe2; margin:0; }
.hero-destacada .meta span svg{ stroke:#d8dbe2; }

/* Fila de tarjetas chicas */
.small-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.small-row .card-noticia h3{ font-size: 16px; }

/* Mixto: 1 grande + 3 con overlay oscuro (estilo "Ituzaingó") */
.mix-row{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 18px;
}
.mix-row .overlay-card{
  display:block;
  position:relative;
  border-radius: var(--radio);
  overflow:hidden;
  min-height: 344px;
  color:#fff;
  box-shadow: var(--sombra);
}
.mix-row .overlay-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mix-row .overlay-card .overlay{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.05) 55%);
}
.mix-row .overlay-card h3{ margin:0 0 6px; font-size:15px; font-weight:800; line-height:1.28; }
.mix-row .overlay-card .meta{ margin:0; color:#dfe3ea; font-size:11px; }
.mix-row .overlay-card.principal{ min-height:344px; }
.mix-row .overlay-card.principal h3{ font-size:20px; }

/* Sección con fondo oscuro de punta a punta (estilo "Morón") */
.section-oscura{
  background: var(--azul-oscuro-2);
  padding: 34px 0 44px;
  margin-top: 34px;
}
.section-oscura .section-title{ color:#fff; }
.section-oscura .section-title::after{ background:#232f4a; }
.section-oscura .feature-side-list{ background:#151f38; }
.section-oscura .feature-side-item{ border-bottom-color:#232f4a; }
.section-oscura .feature-side-item h4 a{ color:#fff; }
.section-oscura .feature-side-item .meta{ color:#8b93a8; }
.section-oscura .card-noticia{ background:#151f38; }
.section-oscura .card-noticia h2 a{ color:#fff; }
.section-oscura .card-noticia .meta{ color:#8b93a8; }

/* Destacado + lista lateral (estilo "Morón") */
.feature-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}
.feature-grid .card-noticia h2{ font-size:20px; }
.feature-side-list{
  list-style:none; margin:0; padding:0;
  background:#fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow:hidden;
}
.feature-side-item{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:14px;
  padding: 14px 16px;
  border-bottom:1px solid var(--borde);
}
.feature-side-item:last-child{ border-bottom:none; }
.feature-side-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.feature-side-item h4{ margin:0 0 6px; font-size:14.5px; line-height:1.32; font-weight:700; }
.feature-side-item .meta{ margin:0; font-size:11.5px; }

/* ---------------------------------------------------------------------- */
/* Banners: bloque medio / bloque final / laterales                        */
/* ---------------------------------------------------------------------- */
.ad-row-bloque{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  flex-wrap:wrap;
  padding: 30px 0;
}
.ad-row-bloque img{
  height: 320px;
  max-height:320px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:6px;
}
.ad-promo{
  display:block;
  border-radius: var(--radio);
  overflow:hidden;
  margin: 24px 0;
  box-shadow: var(--sombra);
}
.ad-promo img{ width:100%; }

.promo-box{
  display:flex;
  align-items:center;
  gap:16px;
  background: var(--azul-oscuro);
  color:#fff;
  border-radius: var(--radio);
  padding: 18px 26px;
  margin: 24px 0;
  box-shadow: var(--sombra);
}
.promo-box .icono{
  width:38px; height:38px;
  border-radius:50%;
  background: var(--rojo);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:19px;
  flex-shrink:0;
}
.promo-box p{
  margin:0;
  font-size: 17px;
  font-weight:700;
  letter-spacing:.01em;
}
.promo-box strong{ color: var(--rojo); }
.promo-box .mano{ margin-left:6px; }

.banner-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.banner-sidebar a{ display:block; }
.banner-sidebar img{ width:100%; border-radius: var(--radio); box-shadow: var(--sombra); }

/* ---------------------------------------------------------------------- */
/* Layout de 2 columnas (listado / artículo + sidebar)                    */
/* ---------------------------------------------------------------------- */
.content-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 30px;
  padding: 30px 0 50px;
}

.grid-2{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 22px;
}

/* ---------------------------------------------------------------------- */
/* Sidebar                                                                  */
/* ---------------------------------------------------------------------- */
.sidebar > * + *{ margin-top: 22px; }
.widget{
  background:#fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.widget h3{
  margin:0 0 14px;
  font-size:17px;
  font-weight:800;
  padding-bottom:10px;
  border-bottom:2px solid var(--borde);
}
.widget-noticia{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  min-height:170px;
  color:#fff;
}
.widget-noticia img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.widget-noticia .overlay{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 65%);
}
.widget-noticia h4{ margin:0 0 6px; font-size:14.5px; font-weight:700; line-height:1.3; }
.widget-noticia .meta{ margin:0; color:#e2e4ea; font-size:11px; }
.widget-dots{
  display:flex; gap:6px; justify-content:center; margin-top:12px;
}
.widget-dots span{
  width:7px; height:7px; border-radius:50%;
  background: var(--borde);
}
.widget-dots span.activo{ background: var(--rojo); width:20px; border-radius:4px; }

/* ---------------------------------------------------------------------- */
/* Paginación                                                              */
/* ---------------------------------------------------------------------- */
.pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 0 10px; }
.pagination .prev, .pagination .next{
  min-width:120px; height:40px; padding:0 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; background: var(--azul-oscuro); color:#fff; box-shadow: var(--sombra);
  font-weight:700; font-size:14px;
}
.pagination a.prev:hover, .pagination a.next:hover{ background: var(--rojo); }
.pagination .off{ background:#fff; color:#aab0bd; box-shadow:none; border:1px solid var(--borde); cursor:default; }
.pagination .pag-info{ font-weight:700; font-size:14px; color: var(--texto-gris); text-align:center; }
@media (max-width:480px){ .pagination .prev, .pagination .next{ min-width:0; padding:0 12px; } }

/* ---------------------------------------------------------------------- */
/* Noticia individual                                                      */
/* ---------------------------------------------------------------------- */
.article-header{ padding-top: 30px; }
.article-header h1{
  font-size: 34px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
  margin: 0 0 14px;
}
.article-firma{
  display:flex; align-items:center; gap:16px;
  color: var(--texto-gris);
  font-size:13px;
  margin-bottom: 20px;
}
.article-firma span{ display:inline-flex; align-items:center; gap:6px; }
.article-firma strong{ color: var(--texto); }

.article-cuerpo{
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
}
.compartir-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.compartir-vertical a{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.compartir-vertical a.tw{ background:#1a1a1a; }
.compartir-vertical a.wa{ background:#25d366; }
.compartir-vertical a.mail{ background:#f5a623; }

.article-cover{ border-radius: var(--radio); overflow:hidden; margin-bottom: 22px; }
.article-cover img{ width:100%; }

.article-body p{
  font-size: 20px;
  line-height:1.4;
  color:#2a3441;
  margin: 0 0 20px;
}
.article-body h2{ font-size:22px; margin: 30px 0 14px; font-weight:800; }
.article-body img{ border-radius: var(--radio); margin: 20px 0; }
.article-body strong{ color: var(--azul-oscuro); }

.btn-escuchar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 4px 0 26px;
  padding: 10px 18px;
  border:none;
  border-radius:30px;
  background: var(--azul-oscuro);
  color:#fff;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition: background .15s ease;
}
.btn-escuchar:hover{ background: var(--rojo); }
.btn-escuchar.activo{ background: var(--rojo); }

/* ---------------------------------------------------------------------- */
/* Botón flotante de WhatsApp                                              */
/* ---------------------------------------------------------------------- */
.wa-flotante{
  position:fixed;
  right:22px; bottom:22px;
  width:52px; height:52px;
  border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--sombra);
  z-index:70;
  color:#fff;
}

.back-to-top{
  position:fixed;
  right:22px; bottom:84px;
  width:42px; height:42px;
  border-radius:50%;
  background: var(--azul-oscuro);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--sombra);
  z-index:65;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.back-to-top.visible{ opacity:1; pointer-events:auto; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{
  background: var(--azul-oscuro-2);
  color:#c7cbd6;
  padding: 40px 0 26px;
  margin-top: 30px;
}
.footer-links{
  text-align:center;
  font-size: 13.5px;
}
.footer-links .fila{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 22px;
  margin-bottom: 14px;
}
.footer-links a:hover{ color:#fff; }
.footer-redes{
  display:flex; justify-content:center; gap:14px;
  margin: 22px 0;
}
.footer-redes a{
  width:34px; height:34px;
  border-radius:50%;
  background:#1c2740;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.footer-redes a:hover{ background: var(--rojo); }
.footer-copy{
  text-align:center;
  font-size:12.5px;
  color:#8791a3;
  padding: 10px 0 26px;
  border-top:1px solid #1c2740;
  margin-top: 10px;
}
.footer-copy strong{ color:#c7cbd6; }
.site-footer .footer-banner{
  display:flex;
  justify-content:center;
}

/* ---------------------------------------------------------------------- */
/* Estados vacíos / 404                                                    */
/* ---------------------------------------------------------------------- */
.not-found{ padding:80px 20px; text-align:center; }
.not-found h1{ font-size:26px; margin-bottom:12px; }
.not-found a{ color: var(--rojo); font-weight:700; }
.empty-msg{ padding:40px 0; color: var(--texto-gris); }
.empty-msg a{ color: var(--rojo); font-weight:700; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px){
  .content-layout{ grid-template-columns: minmax(0,1fr); }
  .feature-grid{ grid-template-columns: minmax(0,1fr); }
  .small-row{ grid-template-columns: repeat(2,1fr); }
  .mix-row{ grid-template-columns: 1fr 1fr; }
  .mix-row .overlay-card.principal{ grid-column: span 2; min-height:230px; }
  .grid-2{ grid-template-columns: minmax(0,1fr); }
  .hero-destacada h2{ font-size:24px; }
  .hero-destacada{ aspect-ratio: 16/9; }
  .article-header h1{ font-size:27px; }

  .site-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-inner{ position:relative; }
  .site-header.abierto .site-nav{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    box-shadow: var(--sombra);
    padding:8px;
    border-radius: 0 0 14px 14px;
  }
  .site-header.abierto .site-nav > ul{
    flex-direction:column;
    width:100%;
    gap:0;
  }
  .site-header.abierto .site-nav > ul > li > a{
    display:block;
    padding:12px 14px;
    border-radius:10px;
  }
  .site-header.abierto .site-nav > ul > li > a:hover{ background: var(--fondo-body); }

  /* Submenú "Noticias" en mobile: se abre con un toque, en línea (no flotando) */
  .tiene-submenu > a .flecha{ margin-left:auto; margin-right:6px; }
  .submenu{
    display: none;
    position:static;
    transform:none;
    box-shadow:none;
    padding: 0 0 0 14px;
    min-width:0;
  }
  .tiene-submenu.abierto .submenu{ display:block; }
  .submenu li a{ font-size:13.5px; padding:9px 14px; }

  .ticker-redes span{ display:none; }
  .ticker-inner{ gap:12px; }
}

@media (max-width: 640px){
  .small-row{ grid-template-columns: 1fr 1fr; }
  .mix-row{ grid-template-columns: minmax(0,1fr); }
  .mix-row .overlay-card.principal{ grid-column: span 1; }
  .article-cuerpo{ grid-template-columns: minmax(0,1fr); }
  .compartir-vertical{ flex-direction:row; }
  .ticker-titular{ display:none; }
  .site-header .logo{ width:150px; }
  .container{ padding: 0 16px; }
  .ad-row-bloque img{ height:180px; max-height:180px; }
  .btn-escuchar{ width:100%; justify-content:center; }
}

@media (max-width: 420px){
  .small-row{ grid-template-columns: 1fr; }
  .hero-destacada h2{ font-size:20px; }
  .article-header h1{ font-size:22px; }
}

/* ---- Contenido multimedia dentro de la nota (importador WordPress) ---- */
.article-body .nota-img{margin:22px 0}
.article-body .nota-img img{display:block;width:100%;height:auto;border-radius:6px}
.article-body .nota-video{position:relative;aspect-ratio:16/9;margin:22px 0;background:#000;border-radius:6px;overflow:hidden}
.article-body .nota-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-body .nota-video.nota-short{aspect-ratio:9/16;max-width:360px;margin-left:auto;margin-right:auto}
.article-body .nota-mp4{display:block;width:100%;max-height:560px;margin:22px 0;background:#000;border-radius:6px}

/* ==========================================================================
   HOME — bloques por categoría (cada uno con su propio diseño)
   Cada bloque recibe --cat (color de la categoría) y --cat-ink (texto legible sobre ese color)
   ========================================================================== */
.hb{ padding: 40px 0 6px; }
.hb-cab{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin: 0 0 20px;
}
.hb-cab h2{ margin:0; font-size:26px; font-weight:800; color: var(--azul-oscuro); line-height:1.1; }
.hb-vermas{
  font-size:13.5px; font-weight:700; color: var(--texto-gris);
  border-bottom:2px solid var(--cat, var(--rojo)); padding-bottom:1px; white-space:nowrap;
}
.hb-vermas:hover{ color: var(--texto); }

/* Tarjeta con foto de fondo (mosaico, paneles, pósters) */
.hb-ov{
  position:relative; display:block; overflow:hidden;
  border-radius: var(--radio); color:#fff; background:#222;
  box-shadow: var(--sombra);
}
.hb-ov > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.hb-ov:hover > img{ transform: scale(1.04); }
.hb-ov .ov{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
  background: linear-gradient(to top, rgba(8,12,24,.9), rgba(8,12,24,0) 62%);
}
.hb-ov h3{ margin:0 0 6px; font-size:17px; line-height:1.25; font-weight:800; }
.hb-ov .meta{ margin:0; color:#d6dae3; font-size:12px; }
.hb-ov .ov-res{ display:block; margin: 0 0 8px; font-size:14px; line-height:1.4; color:#e6e9f0; }

/* ---- Hero (Casos para no olvidar): resumen sobre la foto ---- */
.hero-destacada .hero-res{
  display:block; max-width: 760px; margin: 0 0 10px;
  font-size:16px; line-height:1.45; color:#e8ebf1;
}

/* ---- 1) SLIDER ---- */
.h-slider{
  display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px;
  padding-top: 26px;
}
.hs-stage{
  position:relative; overflow:hidden; aspect-ratio: 16/8.6;
  border-radius: var(--radio); background:#0b1220; box-shadow: var(--sombra);
}
.hs-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hs-slide.activo{ opacity:1; visibility:visible; transition-delay:0s; }
.hs-slide > a{ display:block; position:absolute; inset:0; color:#fff; }
.hs-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hs-slide.activo img{ animation: hsZoom 9s ease-out forwards; }
@keyframes hsZoom{ from{ transform: scale(1.06); } to{ transform: scale(1); } }
.hs-info{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding: 34px 40px 44px;
  background: linear-gradient(to top, rgba(8,12,24,.92) 4%, rgba(8,12,24,.15) 62%, rgba(8,12,24,0));
}
.hs-info .badge{ margin-bottom:12px; }
.hs-info h2{ margin:0 0 10px; max-width: 900px; font-size:38px; line-height:1.12; font-weight:800; letter-spacing:-.01em; }
.hs-info p{ margin:0 0 12px; max-width:720px; font-size:17px; line-height:1.45; color:#e1e5ee; }
.hs-info .meta{ margin:0; color:#cfd4df; }
.hs-flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,.88); color: var(--azul-oscuro);
  font-size:28px; line-height:1; padding:0 0 3px;
  opacity:0; transition: opacity .2s ease, background .2s ease;
}
.hs-prev{ left:16px; } .hs-next{ right:16px; }
.hs-stage:hover .hs-flecha, .hs-flecha:focus-visible{ opacity:1; }
.hs-flecha:hover{ background:#fff; }
.hs-dots{ display:none; position:absolute; left:0; right:0; bottom:14px; z-index:3; justify-content:center; gap:7px; }
.hs-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:4px; background: rgba(255,255,255,.5); cursor:pointer; }
.hs-dots button.activo{ width:24px; background:#fff; }

.hs-lista{ position:relative; }
.hs-lista-in{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow:hidden;
}
.hs-item{
  position:relative; flex:1; min-height:0;
  display:grid; grid-template-columns: 74px 1fr; gap:14px; align-items:center;
  padding: 8px 16px 8px 14px; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--borde);
  border-left:4px solid transparent; font-family:inherit; color: var(--texto); cursor:pointer;
}
.hs-item:last-child{ border-bottom:none; }
.hs-item img{ width:74px; height:100%; max-height:74px; object-fit:cover; border-radius:6px; }
.hs-t{
  font-size:14.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hs-item.activo{ background:#f5f7fa; border-left-color: var(--cat); }
.hs-item:hover .hs-t{ color: var(--rojo); }
.hs-prog{ position:absolute; left:0; bottom:0; height:3px; width:0; background: var(--cat); }
.hs-item.activo .hs-prog{ animation: hsProg var(--hs-dur, 6500ms) linear forwards; }
.h-slider.pausado .hs-item.activo .hs-prog{ animation-play-state: paused; }
@keyframes hsProg{ from{ width:0; } to{ width:100%; } }

/* ---- 2) MOSAICO ---- */
.h-mosaico .hb-cab h2{ font-size:32px; padding-left:14px; border-left:10px solid var(--cat); }
.hm-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 232px; gap:14px;
}
.hm-grande{ grid-column: span 2; grid-row: span 2; }
.hm-grande .ov{ padding:28px; }
.hm-grande h3{ font-size:30px; line-height:1.15; margin-bottom:10px; }
.hm-grande .ov-res{ font-size:16px; max-width:560px; }

/* ---- 3) DIVIDIDO ---- */
.hv-grid{
  display:grid; grid-template-columns: 300px minmax(0,1fr);
  background:#fff; border-radius: var(--radio); overflow:hidden; box-shadow: var(--sombra);
}
.hv-lado{
  background: var(--cat); color: var(--cat-ink);
  padding:30px 28px; display:flex; flex-direction:column; justify-content:space-between; gap:28px;
}
.hv-lado h2{ margin:0; font-size:42px; line-height:1; font-weight:900; letter-spacing:-.02em; overflow-wrap:anywhere; }
.hv-btn{
  align-self:flex-start; padding:9px 18px; border:2px solid currentColor; border-radius:30px;
  font-weight:800; font-size:14px;
}
.hv-btn:hover{ background: var(--cat-ink); color: var(--cat); border-color: var(--cat-ink); }
.hv-item{
  display:grid; grid-template-columns: 240px minmax(0,1fr); gap:22px;
  padding:18px 22px; border-bottom:1px solid var(--borde); align-items:center;
}
.hv-item:last-child{ border-bottom:none; }
.hv-foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; }
.hv-item h3{ margin:0 0 8px; font-size:21px; line-height:1.22; font-weight:800; }
.hv-item h3 a:hover{ color: var(--rojo); }
.hv-item p{
  margin:0 0 8px; color: var(--texto-gris); font-size:14.5px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hv-item .meta{ margin:0; }

/* ---- 4) PÓSTERS ---- */
.hpo-layout{ display:grid; grid-template-columns: 220px minmax(0,1fr); gap:28px; align-items:start; }
.hpo-cab h2{
  margin:0 0 14px; font-size:40px; line-height:.98; font-weight:900; letter-spacing:-.02em;
  color: var(--azul-oscuro); padding-top:14px; border-top:10px solid var(--cat); overflow-wrap:anywhere;
}
.hpo-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; padding-bottom:36px; }
.hpo-card{ aspect-ratio: 3/4; border-bottom:6px solid var(--cat); }
.hpo-card:nth-child(even){ margin-top:36px; margin-bottom:-36px; }
.hpo-card h3{ font-size:20px; }

/* ---- 5) DIARIO (titular + línea de tiempo) ---- */
.h-diario .hb-cab{ padding-bottom:10px; border-bottom:3px solid var(--cat); }
.hd-grid{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap:40px; align-items:start; }
.hd-grid.hd-sola{ grid-template-columns: minmax(0,760px); }
.hd-foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius: var(--radio); }
.hd-principal h3{ margin:16px 0 10px; font-size:33px; line-height:1.14; font-weight:800; letter-spacing:-.01em; }
.hd-principal h3 a:hover{ color: var(--rojo); }
.hd-principal p{ margin:0 0 10px; font-size:16.5px; line-height:1.55; color:#3b4454; max-width:620px; }
.hd-tiempo{
  list-style:none; margin:6px 0 0; padding:0 0 0 22px;
  border-left:3px solid var(--cat);
}
.hd-tiempo li{ position:relative; padding:0 0 24px 18px; }
.hd-tiempo li:last-child{ padding-bottom:0; }
.hd-tiempo li::before{
  content:""; position:absolute; left:-31px; top:3px; width:13px; height:13px;
  border-radius:50%; background:#fff; border:3px solid var(--cat);
}
.hd-tiempo time{ display:block; margin-bottom:3px; font-size:12.5px; font-weight:800; color: var(--texto-gris); }
.hd-tiempo a{ font-size:19px; font-weight:700; line-height:1.28; }
.hd-tiempo a:hover{ color: var(--rojo); }

/* ---- 6) PANELES (se expanden al pasar el mouse) ---- */
.h-paneles .hb-cab h2{ font-size:34px; }
.hp-row{ display:flex; gap:10px; height:440px; }
.hp{
  flex:1; min-width:0; border-bottom:6px solid var(--cat);
  transition: flex .55s cubic-bezier(.2,.7,.2,1);
}
.hp:first-child{ flex:3.2; }
.hp-row:hover .hp:first-child:not(:hover){ flex:1; }
.hp:hover, .hp:focus-visible{ flex:3.2; }
.hp h3{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.hp .hp-res{ display:none; }
.hp:hover .hp-res, .hp:focus-visible .hp-res, .hp-row:not(:hover) .hp:first-child .hp-res{ display:block; }

/* ---- 7) CARRUSEL ---- */
.hc-acciones{ display:flex; align-items:center; gap:18px; }
.hc-flechas{ display:flex; gap:8px; }
.hc-flechas button{
  width:38px; height:38px; border-radius:50%; padding:0 0 3px; font-size:24px; line-height:1;
  background:#fff; border:1px solid var(--borde); color: var(--azul-oscuro); cursor:pointer;
}
.hc-flechas button:hover{ background: var(--cat); border-color: var(--cat); color: var(--cat-ink); }
.hc-pista{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 4px 2px 22px; scrollbar-width:thin;
}
.hc-card{
  flex: 0 0 clamp(250px, 23vw, 340px); scroll-snap-align:start; position:relative;
  background:#fff; border-radius: var(--radio); box-shadow: var(--sombra);
  border-top:4px solid var(--cat);
}
.hc-foto{ display:block; overflow:hidden; border-radius: 4px 4px 0 0; }
.hc-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.hc-fecha{
  position:absolute; left:14px; margin-top:-12px;
  background: var(--cat); color: var(--cat-ink); padding:4px 10px; border-radius:4px;
  font-size:12px; font-weight:800;
}
.hc-card h3{
  margin:0; padding:26px 16px 18px; font-size:18px; line-height:1.27; font-weight:800;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.hc-card h3 a:hover{ color: var(--rojo); }

/* ---- Responsive de los bloques ---- */
@media (max-width: 1100px){
  .h-slider{ grid-template-columns: minmax(0,1fr) 280px; }
  .hs-info h2{ font-size:30px; }
  .hs-info{ padding: 26px 28px 36px; }
}
@media (max-width: 900px){
  .h-slider{ grid-template-columns: minmax(0,1fr); padding-top:18px; }
  .hs-lista{ display:none; }
  .hs-stage{ aspect-ratio: 4/3.2; }
  .hs-info{ padding: 20px 20px 40px; }
  .hs-info h2{ font-size:23px; }
  .hs-info p{ display:none; }
  .hs-flecha{ display:none; }
  .hs-dots{ display:flex; }

  .hm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; }
  .hm-grid .hb-ov{ min-height:190px; }
  .hm-grande{ grid-column: span 2; grid-row: span 1; min-height:300px !important; }
  .hero-destacada{ aspect-ratio:auto; }
  .hero-destacada .overlay{ padding:20px; min-height:300px; height:auto; }
  .hero-destacada .hero-res{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:14.5px; }
  .hm-grande h3{ font-size:23px; }
  .hm-grande .ov{ padding:20px; }

  .hv-grid{ grid-template-columns: minmax(0,1fr); }
  .hv-lado{ flex-direction:row; align-items:center; padding:20px 22px; }
  .hv-lado h2{ font-size:30px; }

  .hpo-layout{ grid-template-columns: minmax(0,1fr); gap:16px; }
  .hpo-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
  .hpo-cab h2{ font-size:32px; margin:0; }
  .hpo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .hd-grid{ grid-template-columns: minmax(0,1fr); gap:26px; }
  .hd-principal h3{ font-size:26px; }

  .hp-row{ flex-direction:column; height:auto; }
  .hp, .hp:first-child, .hp:hover{ flex:none; height:170px; }
  .hp .hp-res{ display:none !important; }
  .hp-row:hover .hp:first-child:not(:hover){ flex:none; }

  .hc-flechas{ display:none; }
}
@media (max-width: 560px){
  .hm-grid{ grid-template-columns: minmax(0,1fr); }
  .hm-grid .hb-ov{ min-height:210px; }
  .hm-grande{ grid-column: span 1; min-height:280px !important; }
  .hv-item{ grid-template-columns: 112px minmax(0,1fr); gap:14px; padding:14px; }
  .hv-item h3{ font-size:16.5px; }
  .hv-item p{ display:none; }
  .hv-lado{ flex-direction:column; align-items:flex-start; }
  .hpo-card h3{ font-size:16px; }
  .hpo-card .ov{ padding:12px; }
  .hpo-card:nth-child(even){ margin-top:22px; margin-bottom:-22px; }
  .hpo-grid{ padding-bottom:22px; }
  .hb-cab h2{ font-size:22px; }
  .h-mosaico .hb-cab h2{ font-size:24px; border-left-width:7px; }
}
@media (hover: none){
  .hp-row{ flex-direction:column; height:auto; }
  .hp, .hp:first-child, .hp:hover{ flex:none; height:170px; }
  .hp .hp-res{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .hs-slide.activo img{ animation:none; }
  .hs-item.activo .hs-prog{ animation:none; width:100%; }
  .hs-slide, .hp, .hb-ov > img{ transition:none; }
}
:where(.hs-flecha, .hs-item, .hs-dots button, .hc-flechas button, .hb-ov, .hv-btn):focus-visible{
  outline:3px solid var(--azulceleste); outline-offset:2px;
}


/* ==========================================================================
   ARREGLOS MÓVILES (barra lateral, slider del home, menú hamburguesa)
   ========================================================================== */

/* --- Red de seguridad: ningún elemento puede ensanchar la página en celulares.
       (si algo se pasa de ancho, Chrome móvil agranda todo el "viewport" y la
       portada se ve gigante y con scroll lateral). `clip` no rompe el header sticky. */
html, body{ max-width:100%; overflow-x:clip; }
.ticker-bar, .site-header, .site-footer{ overflow-x:clip; }
.container, main, aside, .sidebar, .article-body, .article-cuerpo > div{ min-width:0; }
iframe, video, embed, object, svg{ max-width:100%; }
.article-body, .card-noticia, .hs-t, .hd-tiempo a, .hv-item h3{ overflow-wrap:anywhere; }
.article-body img, .article-body figure{ max-width:100%; height:auto; }

/* --- Paginación: con muchas páginas se pasaba de ancho --- */
.pagination{ flex-wrap:wrap; }
.article-firma{ flex-wrap:wrap; row-gap:6px; }

/* --- Barra "Lo último": en pantallas chicas no entraba fecha + "Lo último" + redes --- */
.ticker-inner{ min-width:0; }
.ticker-fecha, .ticker-lo-ultimo{ white-space:nowrap; }
@media (max-width: 640px){
  .ticker-inner{ padding: 8px 16px; gap:10px; font-size:12.5px; }
  .ticker-fecha{ padding:4px 9px; }
  .ticker-lo-ultimo{ margin-right:auto; }
}
@media (max-width: 400px){
  .ticker-redes{ display:none; }   /* en celulares muy angostos las redes ya están en el footer */
}

/* --- Header en celular: logo y botones sin pisarse --- */
@media (max-width: 980px){
  .header-inner{ gap:10px; }
  .site-header .logo{ min-width:0; flex-shrink:1; }
  .nav-toggle{ width:44px; height:44px; margin-left:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .search-btn{ touch-action:manipulation; }

  /* Menú abierto: ocupa lo que entra en pantalla y se desplaza por dentro si hay muchas categorías */
  .site-header.abierto .site-nav{
    max-height: calc(100vh - 100%);      /* fallback */
    max-height: calc(100dvh - 76px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .site-nav ul a{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(227,28,61,.12); }
  .site-header.abierto .site-nav > ul > li > a{ min-height:46px; display:flex; align-items:center; }
  .tiene-submenu{ padding-bottom:0; margin-bottom:0; }
  .tiene-submenu > a{ width:100%; }
  .submenu li a{ min-height:44px; display:flex; align-items:center; }
}

/* --- Slider del home en celular: la foto y el título siempre entran en la tarjeta --- */
@media (max-width: 900px){
  .hs-stage{ aspect-ratio:auto; height: clamp(300px, 86vw, 460px); }
  .hs-slide img{ max-width:none; }
  .hs-info{ padding: 18px 18px 38px; overflow:hidden; }
  .hs-info h2{
    font-size: clamp(18px, 5.6vw, 24px); line-height:1.17;
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  }
}
@media (max-width: 380px){
  .hs-info h2{ font-size:18px; -webkit-line-clamp:5; }
  .hs-info .badge{ margin-bottom:8px; }
}


/* ==========================================================================
   ARREGLOS MÓVILES (2) — fotos de tarjetas, logo, buscador
   ========================================================================== */

/* La foto de la tarjeta nunca decide el tamaño de la tarjeta (antes, una imagen
   grande podía ensanchar la columna entera y verse gigante en el celular). */
.card-noticia, .grid-2 > *{ min-width:0; max-width:100%; }
.card-noticia .foto{ position:relative; width:100%; }
.card-noticia .foto img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.article-cover img{ max-width:100%; height:auto; }

/* Logo con aire en celular */
@media (max-width: 980px){
  .site-header .header-inner{ padding-top:16px; padding-bottom:16px; padding-left:16px; padding-right:16px; }
  .site-header .logo{ width:140px; }
}
@media (max-width: 380px){
  .site-header .logo{ width:124px; }
}

/* Buscador */
.search-panel{ display:none; border-top:1px solid var(--borde); background:#fff; }
.site-header.buscando .search-panel{ display:block; }
.search-panel-in{ display:flex; gap:10px; padding-top:12px; padding-bottom:12px; }
.search-panel input{
  flex:1; min-width:0; height:44px; padding:0 16px;
  border:2px solid var(--borde); border-radius:30px;
  font:inherit; font-size:16px; color:var(--texto); background:var(--fondo-body);
}
.search-panel input:focus{ outline:none; border-color:var(--azulceleste); background:#fff; }
.search-panel button{
  height:44px; padding:0 22px; border:none; border-radius:30px; cursor:pointer;
  background:var(--rojo); color:#fff; font:inherit; font-weight:800; font-size:15px;
}
.search-btn[aria-expanded="true"]{ background:var(--rojo); color:#fff; }
.busqueda-titulo{ margin:30px 0 0; font-size:26px; font-weight:800; color:var(--azul-oscuro); overflow-wrap:anywhere; }
.busqueda-titulo small{ display:block; margin-top:4px; font-size:14px; font-weight:600; color:var(--texto-gris); }
@media (max-width: 640px){ .busqueda-titulo{ font-size:21px; margin-top:22px; } }


/* ==========================================================================
   ARREGLOS MÓVILES (3) — "Lo último" visible en celular + banner de YouTube
   ========================================================================== */

/* En celular el titular de "Lo último" pasa a una segunda línea (antes se ocultaba) */
@media (max-width: 640px){
  .ticker-inner{ flex-wrap:wrap; row-gap:6px; }
  .ticker-titular{ display:block; order:3; flex:1 0 100%; height:20px; }
  .ticker-titular a{ display:block; line-height:20px; font-size:13px; }
}

/* Banner de YouTube debajo del menú */
.banner-youtube{
  display:block;
  background:#10183a;            /* mismo azul de la imagen: en pantallas anchas se funde con los costados */
  line-height:0;
}
.banner-youtube img{
  display:block;
  width:100%;
  max-width:1484px;
  height:auto;
  margin:0 auto;
}
.banner-youtube:hover{ filter:brightness(1.12); }
@media (max-width: 640px){
  .banner-youtube img{ min-height:56px; object-fit:contain; }
}


/* ==========================================================================
   ARREGLOS MÓVILES (4) — banner de cabecera sin recortes
   ========================================================================== */

/* Los banners que no están activos no deben tapar el clic del que sí se ve */
.top-ad-banner .slide{ pointer-events:none; }
.top-ad-banner .slide.activo{ pointer-events:auto; }

/* En celular/tablet el banner se muestra COMPLETO: la altura la da la propia imagen
   (antes tenía alto fijo y `cover` recortaba los costados). Los slides se apilan en una grilla
   para que el cambio entre banners siga siendo con fundido. */
@media (max-width: 980px){
  .top-ad-banner{ height:auto; display:grid; align-items:center; }
  .top-ad-banner .slide{ position:relative; inset:auto; grid-area:1 / 1; }
  .top-ad-banner a{ height:auto; }
  .top-ad-banner img{ width:100%; height:auto; object-fit:contain; }
}

/* ---------------------------------------------------------------------- */
/* Quienes Somos                                                           */
/* ---------------------------------------------------------------------- */
.equipo{ padding-bottom:40px; }
.equipo-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
.equipo-card{ background:#fff; border-radius: var(--radio); box-shadow: var(--sombra); padding:28px 22px 30px; text-align:center; }
.equipo-card img{ width:180px; height:180px; max-width:100%; margin:0 auto 18px; border-radius:50%; object-fit:cover; object-position:center top; border:4px solid var(--rojo); }
.equipo-card h2{ margin:0 0 6px; font-size:24px; font-weight:800; color: var(--azul-oscuro); line-height:1.15; }
.equipo-card p{ margin:0; font-size:16px; line-height:1.35; color: var(--texto-gris); }
@media (max-width:820px){ .equipo-grid{ grid-template-columns:minmax(0,1fr); max-width:420px; } }