/* ==========================================================
   LEL 2027 — Estilos base
   Iremos completando estilo por sección a medida que avancemos.
   ========================================================== */

/* --- Variables de marca ---
   Colores reutilizables en todo el sitio: menú, cintillos,
   cabeceras de tabla, y lo que vaya surgiendo. */
:root {
  --color-brand-red: #c0392b;
}

/* --- Reset básico --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}

/* Los <p> usan una tipografía distinta a los títulos: la display
   font (Bricolage Grotesque) es pesada y se vuelve incómoda en
   textos largos (bajadas de las cards, cuerpo de las notas). Para
   párrafos usamos la misma fuente de sistema que el body, más
   cómoda de leer. */
p {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

/* Convención para TODAS las fotos de noticias que usen object-fit: cover
   (recortadas para entrar en su placeholder): el recorte nunca debe
   comerse la parte de arriba de la imagen, para no cortar primeros
   planos / caras. Se ancla el punto de referencia arriba y el recorte,
   si hace falta, se come el margen inferior.
   Aplicar object-position: top a cada nueva clase de foto que se agregue
   (ahora-img, especial-img, y las que vengan). */

a {
  color: inherit;
  text-decoration: none;
}

body.menu-open {
  overflow: hidden;
}

/* --- Layout general --- */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

section {
  margin-bottom: 2rem;
}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
  padding: 0 1.25rem;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
}

/* --- Botón hamburguesa --- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.menu-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #2b2b2b;
  border-radius: 1px;
}

/* --- Logo --- */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.logo-img {
  height: 34px;
  width: auto;
  max-width: 100%;
}



/* Redes sociales del header: solo en desktop (ver media query) */
.header-social {
  display: none;
}

/* --- Widget de clima --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.weather-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.weather-icon {
  width: 32px;
  height: 32px;
}

.weather-temp {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2b2b2b;
}

/* Widget de radio: solo en desktop (ver media query), al lado del clima */
.radio-widget {
  display: none;
}

/* --- Fecha --- */
.header-date {
  border-top: 1px solid #e3e3e3;
  padding: 0.75rem 0;
  text-align: center;
}

.header-date p {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.9rem;
  color: #5a5a5a;
}

/* --- Menú principal (drawer mobile, superpuesto sobre el contenido) --- */
.menu-toggle {
  position: relative;
  z-index: 1000; /* por encima del overlay y del drawer, para poder cerrarlo */
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 900;
}

.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu-principal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: min(80%, 300px);
  overflow-y: auto;
  background-color: #fafafa;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  z-index: 950;
}

.menu-principal.is-open {
  transform: translateX(0);
}

.menu-principal-list {
  list-style: none;
  /* Empuja el primer ítem debajo del botón hamburguesa/X, que queda
     fijo por encima del drawer (offset real calculado por JS). */
  padding-top: var(--menu-offset-top, 4.5rem);
}

.menu-principal-list li {
  border-bottom: 1px solid #e8e8e8;
}

.menu-principal-list li:last-child {
  border-bottom: none;
}

.menu-principal-list a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #2b2b2b;
}

.menu-principal-list a:active,
.menu-principal-list a:focus-visible {
  color: var(--color-brand-red);
}

/* Ítem de X (Twitter): gráfico en vez de texto */
.menu-principal-list .menu-item-social a {
  display: flex;
  align-items: center;
  padding: 0.9rem 1.25rem;
}

.menu-principal-list .icon-x {
  width: 20px;
  height: 18px;
}

.menu-principal-list .icon-instagram {
  width: 20px;
  height: 20px;
}

.menu-principal-list .icon-youtube {
  width: 20px;
  height: 20px;
}

.menu-principal-list .icon-radio {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Estado abierto: lo controla JS sacando/poniendo el atributo hidden */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-toggle-bar {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- Menú secundario (desktop) --- */
.site-nav {
  display: none;
}

@media (min-width: 960px) {
  /* En desktop el menú secundario reemplaza al drawer mobile */
  .menu-toggle,
  .menu-principal,
  .menu-overlay {
    display: none;
  }

  /* Grid de 3 columnas para que el logo quede centrado de verdad,
     sin depender de que el ancho izquierdo/derecho coincidan */
  .header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .logo {
    grid-column: 2;
    justify-self: center;
  }

   /* Redes sociales: ocupan la columna izquierda, donde estaba el banner */
  .header-social {
    grid-column: 1;
    justify-self: start;
    display: block;
  }

  .header-social-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
  }

  .header-social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b2b2b;
    transition: color 0.15s ease;
  }

  .header-social-list a:hover,
  .header-social-list a:focus-visible {
    color: var(--color-brand-red);
  }

  .header-social-list .icon-x {
    width: 22px;
    height: 20px;
  }

  .header-social-list .icon-instagram {
    width: 24px;
    height: 24px;
  }

  .header-social-list .icon-youtube {
    width: 28px;
    height: 28px;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
    gap: 1.5rem;
  }

  .weather-widget {
    padding-right: 1.25rem;
    border-right: 1px solid #d8d8d8;
  }

  .logo-img {
    height: 68px; /* el doble que en mobile (34px) */
  }

  .weather-icon {
    width: 52px; /* el doble que en mobile (26px) */
    height: 52px;
  }

  .weather-temp {
    font-size: 1.5rem; /* el doble que en mobile (0.75rem) */
  }

  /* Widget de radio: visible solo en desktop, mismo alto que el
     ícono del clima (52px) para que quede en la misma proporción */
  .radio-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2b2b2b;
    transition: color 0.15s ease;
  }

  .radio-widget:hover,
  .radio-widget:focus-visible {
    color: var(--color-brand-red);
  }

  .radio-widget-icon {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .radio-widget-text {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    max-width: 110px;
  }

  .site-nav {
    display: block;
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    padding: 0 1.25rem;
  }

  main,
  .site-header {
    padding: 0 1.25rem;
  }

  .site-nav-list {
    display: flex;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
  }

  .site-nav-list li {
    border-right: 1px solid #e3e3e3;
  }

  .site-nav-list li:last-child {
    border-right: none;
  }

  .site-nav-list a {
    display: block;
    padding: 0.85rem 1.4rem;
    font-family: "Baloo 2", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2b2b2b;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .site-nav-list a:hover,
  .site-nav-list a:focus-visible {
    background-color: #f5f5f5;
  }

  .site-nav-list li.is-active a {
    background-color: #fbeceb;
    color: var(--color-brand-red);
    font-weight: 700;
  }

  .site-nav-list li.is-active a:hover {
    background-color: #f6ddda;
  }

/*  Repetimos el item activo para que ilumine el iten activo del menu dinamico */

.site-nav-list li.current-menu-item a {
    background-color: #fbeceb;
    color: var(--color-brand-red);
    font-weight: 700;
  }

  .site-nav-list li.current-menu-item a:hover {
    background-color: #f6ddda;
  }





  /* Ítem de X (Twitter): gráfico en vez de texto */
  .site-nav-list .site-nav-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.2rem;
  }

  .site-nav-list .icon-x {
    width: 18px;
    height: 16px;
    color: #2b2b2b;
    transition: color 0.15s ease;
  }

  .site-nav-list .icon-instagram {
    width: 19px;
    height: 19px;
    color: #2b2b2b;
    transition: color 0.15s ease;
  }

  .site-nav-list .icon-youtube {
    width: 22px;
    height: 22px;
    color: #2b2b2b;
    transition: color 0.15s ease;
  }





  .site-nav-list .site-nav-social a:hover .icon-x,
  .site-nav-list .site-nav-social a:focus-visible .icon-x,
  .site-nav-list .site-nav-social a:hover .icon-instagram,
  .site-nav-list .site-nav-social a:focus-visible .icon-instagram,
  .site-nav-list .site-nav-social a:hover .icon-youtube,
  .site-nav-list .site-nav-social a:focus-visible .icon-youtube {
    color: var(--color-brand-red);
  }
}

/* ==========================================================
   SECCIONES DE NOTICIAS
   (estilos específicos se irán agregando sección por sección)
   ========================================================== */

.noticias-ahora {
}

.noticias-envivo {
}

/* Botón de play reutilizable: opcional, se agrega dentro de CUALQUIER
   contenedor "*-media" (ahora-media, especial-media, focal-media, o
   las que vengan) cuando esa noticia tiene video. El contenedor debe
   tener position: relative para que se ancle bien. */
.media-play {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
}

.media-play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px; /* centra ópticamente el triángulo */
}

/* --- Contenedor: agrupa cintillo + card bajo el mismo borde redondeado --- */
.ahora-wrapper {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* --- Cintillo. Reutilizable: mismo patrón para otros cintillos --- */
.cintillo {
  background-color: var(--color-brand-red);
  padding: 0.15rem 1.1rem;
}

.cintillo-text {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 3.3rem); /* el triple de 1.1rem, con tope responsivo */
  color: #ffffff;
  letter-spacing: 0.03em;
  white-space: nowrap;

  /* El texto lo va llenando JS letra por letra (ver main.js).
     Reservamos altura de línea para que no "salte" cuando está vacío
     entre un ciclo de borrado y el siguiente. */
  min-height: 1.2em;
}

.cintillo-text::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 2px;
  background-color: rgba(255, 255, 255, 0.85);
  vertical-align: -0.1em;
  animation: cintillo-caret 0.8s step-end infinite;
}

@keyframes cintillo-caret {
  50% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cintillo-text::after {
    animation: none;
  }
}

/* --- Card: foto + texto, mobile-first apilado --- */
.ahora-card {
  display: flex;
  flex-direction: column;
}

.ahora-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
}

.ahora-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Reproductor de YouTube embebido (noticias-envivo), ocupa el mismo
   espacio que ocuparía la foto en .ahora-media */
.ahora-video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.ahora-body {
  background-color: #181818;
  padding: 1.25rem;
}

.ahora-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.ahora-bajada {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #c9c9c9;
}

@media (min-width: 960px) {
  .ahora-card {
    flex-direction: row;
    align-items: stretch;
  }

  .ahora-media {
    flex: 1 1 50%;
    aspect-ratio: auto;
  }

  .ahora-body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
  }

  .ahora-title {
    font-size: 3.2rem;
    margin-bottom: 1rem;
  }

  .ahora-bajada {
    font-size: 1.15rem;
  }
}

.noticias-especial {
}

/* --- Card: foto con volanta apoyada en el vértice + cuerpo de texto --- */
.especial-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.especial-media {
  position: relative;
  aspect-ratio: 16 / 9; /* en mobile respetamos 16:9 */
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
}

.especial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Volanta apoyada en el vértice inferior izquierdo de la foto.
   En mobile es una etiqueta chica, ajustada al texto. */
.especial-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.1rem;
  border-top-right-radius: 6px;
  text-transform: uppercase;
}

.especial-body {
  background-color: #181818;
  padding: 1.25rem;
}

.especial-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.especial-bajada {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #c9c9c9;
}

@media (min-width: 960px) {
  .especial-media {
    aspect-ratio: 21 / 9; /* foto más apaisada en desktop */
  }

  .especial-volanta {
    font-size: 1.3rem;
    padding: 0.7rem 1.4rem;
  }

  .especial-body {
    padding: 2.5rem;
  }

  .especial-title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
  }

  .especial-bajada {
    font-size: 1.15rem;
  }
}

/* ==========================================================
   VARIANTE: noticias-especial-ancha
   Misma card que .noticias-especial (reutiliza las clases internas
   .especial-card, .especial-media, .especial-volanta, .especial-body,
   .especial-title y .especial-bajada).
   - Mobile (<960px): a sangre, apoyada en los bordes de la pantalla,
     sin bordes redondeados ni sombra.
   - Desktop (>=960px): sin variantes, idéntica a .noticias-especial.
   ========================================================== */
.noticias-especial-ancha {
}

@media (max-width: 959px) {
  .noticias-especial-ancha {
    margin-inline: -1.25rem; /* mismo valor que el padding lateral de main */
  }

  .noticias-especial-ancha .especial-card {
    border-radius: 0;
    box-shadow: none;
  }
}

.noticias-principales {
}

/* Mobile: apiladas. Desktop: en fila, con anchos desiguales
   (46% / 27% / 27%) usando fr para que el gap no rompa la proporción. */
.principales-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Card: mismo criterio que noticias-secundarias
   (paleta clara, volanta sin invertir). --- */
.principal-card {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.principal-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(135deg, #d8d8d8, #bcbcbc);
}

.principal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Volanta: SIN invertir, misma paleta que el resto del sitio */
.principal-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  border-top-right-radius: 6px;
  text-transform: uppercase;
}

.principal-body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.principal-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.principal-bajada {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #5a5a5a;
}

/* Item predominante: título un poco más grande que el resto */
.principal-card--destacada .principal-title {
  font-size: 1.6rem;
}

/* Variante oscura de la card principal (paleta invertida): fondo oscuro,
   título blanco y bajada gris claro. Se combina con la destacada:
   <article class="principal-card principal-card--destacada principal-card--oscura">
   Mismos colores que .ahora-body / .ahora-title / .ahora-bajada. */
.principal-card--oscura {
  background-color: #181818;
}

.principal-card--oscura .principal-title {
  color: #ffffff;
}

.principal-card--oscura .principal-bajada {
  color: #c9c9c9;
}

@media (min-width: 960px) {
  .principales-grid {
    display: grid;
    grid-template-columns: 46fr 27fr 27fr;
    align-items: stretch;
    gap: 1.5rem;
  }

  .principal-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .principal-card--destacada .principal-title {
    font-size: 2.2rem;
  }

  /* Balance de altura entre columnas: la predominante achica un poco
     su foto, y las dos angostas la agrandan (para compensar que su
     texto ocupa menos alto y dejaba espacio en blanco de más). */
  .principal-card--destacada .principal-media {
    aspect-ratio: 16 / 8;
  }

  .principal-card:not(.principal-card--destacada) .principal-media {
    aspect-ratio: 16 / 11;
  }

  /* Las dos noticias angostas suben levemente el tamaño de fuente,
     también para achicar el espacio en blanco que quedaba abajo. */
  .principal-card:not(.principal-card--destacada) .principal-title {
    font-size: 1.3rem;
  }

  .principal-card:not(.principal-card--destacada) .principal-bajada {
    font-size: 1rem;
  }
}

.noticias-secundarias {
}

/* Mobile: apiladas. Desktop: 3 en fila. */
.secundarias-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Card: paleta clara (invertida respecto a Ahora/Especial/Focalizadas).
   La volanta es la excepción: mantiene el mismo rojo + texto blanco. --- */
.secundaria-card {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.secundaria-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(135deg, #d8d8d8, #bcbcbc);
}

.secundaria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Volanta: SIN invertir, misma paleta que el resto del sitio */
.secundaria-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  border-top-right-radius: 6px;
}

.secundaria-body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.secundaria-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.secundaria-bajada {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #5a5a5a;
}

@media (min-width: 960px) {
  .secundarias-grid {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
  }

  .secundaria-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

.noticias-pequeñas {
}

/* Mobile: 2 por fila. Desktop: 4 por fila. */
.pequeñas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* --- Card liviana: foto + volanta + título, sin bajada.
   Paleta clara, igual que noticias-principales. --- */
.pequeña-card {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pequeña-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d8d8d8, #bcbcbc);
}

.pequeña-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Volanta: SIN invertir, misma paleta que el resto del sitio */
.pequeña-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.7rem;
  border-top-right-radius: 6px;
  text-transform: uppercase;
}

.pequeña-body {
  padding: 0.9rem 1rem;
}

.pequeña-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #1a1a1a;
}

@media (min-width: 960px) {
  .pequeñas-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .pequeña-title {
    font-size: 1rem;
  }
}

.noticias-focalizadas {
}

/* El <a> que envuelve la card debe ser bloque para que no afecte altura/área clickeable */
.noticias-focalizadas > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* --- Card: foto con volanta en el vértice + texto.
   Mobile: apilado. Desktop: foto a la izquierda, texto a la derecha. --- */
.focal-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.focal-media {
  position: relative;
  aspect-ratio: 16 / 9; /* en mobile respetamos 16:9 */
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
}

.focal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Volanta apoyada en el vértice inferior izquierdo, mismo criterio
   que en noticias-especial: se ajusta al texto, no cruza de lado a lado. */
.focal-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 0.9rem;
  border-top-right-radius: 6px;
  text-transform: uppercase;
}

.focal-body {
  background-color: #181818;
  padding: 1.25rem;
}

.focal-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 6vw, 1.7rem); /* más chico que el catástrofe */
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.focal-bajada {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #c9c9c9;
}

@media (min-width: 960px) {
  .focal-card {
    flex-direction: row;
    align-items: stretch;
  }

  .focal-media {
    flex: 1 1 45%;
    aspect-ratio: auto;
    /* Altura propia de la card en desktop: antes la definía solo el texto
       porque la <img> con height:100% aporta 0px al cálculo del flex. */
    min-height: clamp(300px, 28vw, 420px);
  }

  /* Imagen fuera del flujo: llena el contenedor sin influir en su altura */
  .focal-img {
    position: absolute;
    inset: 0;
  }

  .focal-body {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
  }

  .focal-title {
    font-size: 1.7rem;
  }

  .focal-bajada {
    font-size: 1.1rem;
  }
}

.noticias-cobertura {
}

/* --- Card contenedora: fondo oscuro, todo el bloque agrupado --- */
.cobertura-card {
  background-color: #141414;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* --- Cintillo: paleta invertida respecto al resto de los cintillos
   del sitio (fondo blanco, texto rojo), centrado. Reutiliza el mismo
   mecanismo de escritura (.cintillo-text + data-palabra, ver main.js). --- */
.cobertura-cintillo {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 0.8rem 1.25rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

.cobertura-cintillo-text {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-brand-red);
  font-size: clamp(1.3rem, 6vw, 2rem);
}

/* Scroll reveal: aparece (fade + slide up) cuando entra en pantalla.
   La clase is-visible la agrega el IntersectionObserver en main.js. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    transition: none;
  }
}

.cobertura-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Noticia principal (izquierda) --- */
.cobertura-principal {
}

.cobertura-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
}

.cobertura-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cobertura-volanta {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  border-top-right-radius: 6px;
  text-transform: uppercase;
}

.cobertura-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.cobertura-bajada {
  font-size: 1rem;
  line-height: 1.5;
  color: #c9c9c9;
}

/* --- Lista de noticias de contexto (derecha) --- */
.cobertura-lista {
  list-style: none;
}

.cobertura-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cobertura-item:last-child {
  border-bottom: none;
}

.cobertura-item-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
}

.cobertura-item-title {
  flex: 1 1 auto;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #ffffff;
}

.cobertura-item-time {
  flex-shrink: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-brand-red);
  white-space: nowrap;
}

.cobertura-item-media {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
}

.cobertura-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (min-width: 960px) {
  .cobertura-card {
    padding: 2rem;
  }

  .cobertura-cintillo {
    padding: 1rem 1.5rem;
    margin-bottom: 1.75rem;
  }

  .cobertura-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .cobertura-principal {
    flex: 1 1 60%;
  }

  .cobertura-lista {
    flex: 1 1 40%;
  }

  .cobertura-title {
    font-size: 1.45rem;
  }

  .cobertura-bajada {
    font-size: 1.05rem;
  }
}

.noticias-clublujan {
}

/* --- Cuadro Club Luján: clon de la sección Flandria (mismo patrón,
   mismo orden, mismo comportamiento), solo cambia la paleta a rojo
   de marca en vez de amarillo. --- */
.lujan-card {
  background: linear-gradient(135deg, #e5695a 0%, #c0392b 50%, #8f2318 100%);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.lujan-cintillo {
  margin-bottom: 1rem;
}

.lujan-cintillo-text {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Mobile: carrusel horizontal con snap, igual que Flandria (la
   principal abre el recorrido, después las secundarias) */
.lujan-content {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.1rem;
  scrollbar-width: none; /* Firefox */
}

.lujan-content::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.lujan-principal,
.lujan-secundaria {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.lujan-principal {
  width: 78%;
}

.lujan-secundaria {
  width: 62%;
}

/* Mismo alto compartido entre principal y secundarias (ver misma
   solución aplicada en Flandria) */
.lujan-media,
.lujan-media-sec {
  position: relative;
  height: 170px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  background: rgba(0, 0, 0, 0.15);
}

.lujan-img,
.lujan-img-sec {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lujan-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #ffffff;
}

.lujan-title-sec {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #ffffff;
}

/* Pista de "deslizar" — solo tiene sentido en el carrusel mobile */
.lujan-hint {
  margin-top: 0.6rem;
  text-align: right;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 960px) {
  /* Desktop: fila fija, sin scroll (misma estructura que Flandria) */
  .lujan-content {
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 1.5rem;
  }

  .lujan-principal {
    width: auto;
    flex: 1 1 32%;
  }

  .lujan-secundaria {
    width: auto;
    flex: 1 1 22.66%;
  }

  .lujan-media,
  .lujan-media-sec {
    height: 220px;
  }

  .lujan-title {
    font-size: 1.15rem;
  }

  .lujan-title-sec {
    font-size: 0.95rem;
  }

  .lujan-hint {
    display: none;
  }
}

.noticias-clubflandria {
}

/* --- Cuadro Club Flandria: fondo degradé amarillo/dorado propio del
   club, cintillo estático (sin efecto de tipeo) y 4 noticias en fila
   (1 principal + 3 secundarias). Mobile: carrusel con scroll-snap.
   Desktop: fila fija, sin scroll. --- */
.flandria-card {
  background: linear-gradient(135deg, #fce988 0%, #f6c847 50%, #eda724 100%);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.flandria-cintillo {
  margin-bottom: 1rem;
}

.flandria-cintillo-text {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  letter-spacing: 0.01em;
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Mobile: carrusel horizontal con snap. Cada card ocupa la mayor
   parte del ancho para que se note el "asomo" de la siguiente. */
.flandria-content {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.1rem;
  scrollbar-width: none; /* Firefox */
}

.flandria-content::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.flandria-principal,
.flandria-secundaria {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.flandria-principal {
  width: 78%;
}

.flandria-secundaria {
  width: 62%;
}

/* Alto fijo (no aspect-ratio) y COMPARTIDO entre principal y
   secundarias: como cada una tiene un ancho distinto, si usáramos
   aspect-ratio quedarían con alturas distintas. Fijando el mismo
   "height" en las dos, quedan alineadas horizontalmente sea cual
   sea el ancho de la card. */
.flandria-media,
.flandria-media-sec {
  position: relative;
  height: 170px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  background: rgba(0, 0, 0, 0.08);
}

.flandria-img,
.flandria-img-sec {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.flandria-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #1a1a1a;
}

.flandria-title-sec {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #1a1a1a;
}

/* Pista de "deslizar" — solo tiene sentido en el carrusel mobile */
.flandria-hint {
  margin-top: 0.6rem;
  text-align: right;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(26, 26, 26, 0.65);
}

@media (min-width: 960px) {
  /* Desktop: se acabó el carrusel, fila fija con 4 columnas
     (principal más ancha que las secundarias) */
  .flandria-content {
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 1.5rem;
  }

  .flandria-principal {
    width: auto;
    flex: 1 1 32%;
  }

  .flandria-secundaria {
    width: auto;
    flex: 1 1 22.66%;
  }

  .flandria-media,
  .flandria-media-sec {
    height: 220px;
  }

  .flandria-title {
    font-size: 1.15rem;
  }

  .flandria-title-sec {
    font-size: 0.95rem;
  }

  .flandria-hint {
    display: none;
  }
}

.noticias-banners {
}

/* --- 3 espacios de banner, tamaño estándar 300x250 (medium rectangle).
   Mobile: apilados y centrados. Desktop: en fila, uno al lado del otro.
   Cada banner va dentro de un wrapper con rótulo "Publicidad" y
   padding alrededor (mismo criterio que usan sitios de noticias
   reales para separar visualmente el anuncio del contenido). --- */
.banners-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* --- Wrapper: fondo blanco + borde + rótulo, igual que el resto
   de las cards del sitio. Contiene el rótulo y el placeholder. --- */
.banner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.banner-label {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8a8a;
}

.banner-placeholder {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 250;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px dashed #c9c9c9;
  border-radius: 6px;
  background-color: #fafafa;
}

.banner-placeholder span {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  color: #a3a3a3;
}

/* Variante alta (300x600, "half page"), usada en el sidebar de las
   notas individuales junto al banner estándar de 300x250. */
.banner-placeholder--tall {
  aspect-ratio: 300 / 600;
}

/* Variante oreja (250x500), usada en la portada junto al main. */
.banner-placeholder--oreja {
  width: 250px;
  aspect-ratio: 250 / 500;
}

@media (min-width: 960px) {
  .banners-grid {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* ==========================================================
   NOTA INDIVIDUAL
   Dos columnas: nota (izquierda) + sidebar de publicidad (derecha).
   Mobile: apiladas, la nota primero. Reutiliza el mismo header,
   footer y paleta que el resto del sitio.
   ========================================================== */
.nota-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 1.5rem 0 3rem;
}

.nota-content {
  min-width: 0; /* evita que el texto largo empuje el ancho del grid */
}

/* --- Volanta: mismo rojo de marca que el resto del sitio, pero
   como chip independiente (no superpuesta a una foto) --- */
.nota-volanta {
  display: inline-block;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.nota-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.2;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.nota-meta {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.9rem;
  color: #7a7a7a;
  margin-bottom: 1.5rem;
}

.nota-media {
  margin-bottom: 1.5rem;
}

.nota-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  object-position: top;
}

.nota-caption {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.8rem;
  color: #8a8a8a;
  margin-top: 0.5rem;
}

/* --- Cuerpo de la nota --- */
.nota-body p {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #222222;
  margin-bottom: 1.2rem;
}

/* Letra capitular: solo en el primer párrafo del cuerpo.
   line-height: 1 evita el "half-leading" (el espacio de sobra que
   el navegador reparte arriba/abajo cuando el line-height es mayor
   al alto real del glyph) — esa era la causa del hueco debajo de
   la letra. El padding-top es un ajuste fino para que la base
   quede a la altura del segundo renglón. */
.nota-body p:first-of-type::first-letter {
  float: left;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
  padding-top: 0.01rem;
  padding-right: 0.5rem;
  color: #1a1a1a;
}

/* Subtítulos dentro del cuerpo de la nota */
.nota-body h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 2rem 0 0.9rem;
}

.nota-body h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 1.75rem 0 0.75rem;
}

.nota-body h4 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 1.5rem 0 0.6rem;
}

/* --- Listas dentro del cuerpo de la nota ---
   El reset global (* { padding: 0 }) deja las listas sin sangría y
   con el marcador "colgando" fuera del texto, así que acá se la
   devolvemos. Tipografía, tamaño e interlineado igualan a los
   párrafos (.nota-body p) para que la lista no se sienta un cuerpo
   de texto distinto.
   Se usa ::marker (y no list-style: none + ::before) a propósito:
   mantiene la semántica nativa de lista para lectores de pantalla y
   numera solo, también en listas anidadas o con start/reversed. */
.nota-body ul,
.nota-body ol {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #222222;
  padding-left: 1.75rem;
  margin: 0 0 1.2rem;
}

.nota-body ul {
  list-style: disc;
}

.nota-body ol {
  list-style: decimal;
}

.nota-body li {
  padding-left: 0.35rem; /* aire entre el marcador y el texto */
  margin-bottom: 0.5rem;
}

.nota-body li:last-child {
  margin-bottom: 0;
}

/* Marcadores en el color de marca: bullet para listas
   desordenadas, número en negrita para las ordenadas. */
.nota-body ul li::marker {
  color: var(--color-brand-red);
}

.nota-body ol li::marker {
  color: var(--color-brand-red);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
}

/* Listas anidadas: más compactas, sin margen inferior propio y con
   marcador distinto para distinguir el nivel. */
.nota-body li > ul,
.nota-body li > ol {
  font-size: 1em; /* hereda el tamaño del ítem padre, no se achica de más */
  margin: 0.5rem 0 0;
}

.nota-body ul ul {
  list-style: circle;
}

.nota-body ol ol {
  list-style: lower-alpha;
}

/* --- Hipervínculos dentro del cuerpo de la nota ---
   Globalmente los <a> heredan color y no llevan subrayado (ver regla
   `a` arriba), lo cual es correcto para menús y cards, pero dentro de
   un texto corrido un link tiene que distinguirse. Van en el rojo de
   marca, subrayados de forma sutil; al pasar el mouse o enfocar con
   teclado se oscurecen y el subrayado se engrosa. */
.nota-body a {
  color: var(--color-brand-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.nota-body a:hover,
.nota-body a:focus-visible {
  color: color-mix(in srgb, var(--color-brand-red) 75%, #000000);
  text-decoration-thickness: 2px;
}




.nota-body p img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  contain-intrinsic-size: auto 625px auto 469px;
  border-radius: 5px;
}


/* --- Notas relacionadas: listado simple debajo del cuerpo de la
   nota. Cada ítem: círculo del color de marca + título. --- */
.relacionadas {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e3e3e3;
}

.relacionadas-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.relacionadas-list {
  list-style: none;
}

.relacionadas-item {
  border-bottom: 1px solid #ececec;
}

.relacionadas-item:last-child {
  border-bottom: none;
}

.relacionadas-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  transition: color 0.15s ease;
}

.relacionadas-link:hover,
.relacionadas-link:focus-visible {
  color: var(--color-brand-red);
}

.relacionadas-bullet {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-brand-red);
}

.relacionadas-item-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: #1a1a1a;
}

.relacionadas-link:hover .relacionadas-item-title,
.relacionadas-link:focus-visible .relacionadas-item-title {
  color: var(--color-brand-red);
}

/* --- Sidebar de publicidad: reutiliza .banner-wrapper / .banner-label
   / .banner-placeholder ya definidos más arriba --- */
.nota-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .nota-layout {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 3rem;
  }

  /* El sidebar acompaña el scroll de la nota, como en la mayoría
     de los sitios de noticias */
  .nota-sidebar {
    position: sticky;
    top: 1.5rem;
  }

  .nota-meta {
    font-size: 0.95rem;
  }
}

/* ==========================================================
   BANNER PUBLICITARIO BAJO EL MENÚ (placeholder)
   Va entre el .site-nav y el <main>, dentro de .portada-content.
   - Desktop: mismo ancho que el menú (max 1100px + padding de 1.25rem).
   - Mobile: el menú secundario no existe; respeta los mismos márgenes
     laterales (1.25rem) que las cards del <main>.
   Alto fijo del banner: 60px, en ambas vistas.
   ========================================================== */
.ad-banner-menu {
  max-width: 1100px;
  margin: 0.75rem auto 1.25rem;
  padding: 0 1.25rem;
}

.ad-banner-menu-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  border: 1px dashed #c9c9c9;
  border-radius: 6px;
  background-color: #fafafa;
}

.ad-banner-menu-slot span {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #a3a3a3;
}




@media (min-width: 960px) {
  .ad-banner-menu {
    margin-top: 0; /* el .site-nav ya deja 1.25rem de aire abajo */
  }
}

/* ==========================================================
   OREJA PUBLICITARIA (portada)
   Recuadro de 250x500 a la derecha del main. Por defecto no se
   muestra (mobile, tablet y desktop angosto): el main ocupa su
   ancho de siempre, centrado. El header y el site-nav NO forman
   parte de este wrapper, así que nunca se ven afectados por esto:
   siguen al 100% del ancho de pantalla estén o no la oreja.

   A partir de los 1500px de ancho de pantalla (desktop grande) se
   activa un flex: el wrapper centra el conjunto "main + oreja" como
   si fuera un solo bloque, lo que en la práctica corre el main hacia
   la izquierda para dejarle lugar a la oreja a la derecha. Si en algún
   momento la oreja no está en el HTML, este wrapper no tiene efecto
   visual: el main se ve exactamente igual que antes.
   ========================================================== */
.oreja-publicitaria {
  display: none;
}

@media (min-width: 1500px) {
  .portada-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
  }

  /* Dentro del wrapper, el centrado lo maneja el flex de arriba;
     el margin: 0 auto propio del nav y del main (para cuando no hay
     oreja o en pantallas más chicas) queda de lado acá, para que
     ambos arranquen alineados en el borde izquierdo de la columna. */
  .portada-content > .site-nav,
  .portada-content > .ad-banner-menu,
  .portada-content > main {
    margin-left: 0;
    margin-right: 0;
  }

  .oreja-publicitaria {
    display: flex;
    flex-shrink: 0;
    /* Acompaña el scroll de la portada, igual que el sidebar de
       las notas individuales (.nota-sidebar) */
    position: sticky;
    top: 1.5rem;
  }
}

/* ==========================================================
   SECCIÓN / CATEGORÍA (template genérico)
   Dos columnas: listado de notas (izquierda) + sidebar de publicidad
   (derecha). Mobile: apiladas. Reutiliza .nota-sidebar / .banner-*
   ya definidos para la publicidad.
   ========================================================== */
.categoria-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 1.5rem 0 3rem;
}

.categoria-main {
  min-width: 0;
}

.categoria-title {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  color: #1a1a1a;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--color-brand-red);
  margin-bottom: 1.75rem;
}

.categoria-lista {
  list-style: none;
}

.categoria-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e3e3e3;
}

.categoria-item:first-child {
  padding-top: 0;
}

.categoria-item:last-child {
  border-bottom: none;
}

.categoria-body {
  flex: 1 1 auto;
  min-width: 0;
}

.categoria-chip {
  display: inline-block;
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.categoria-item-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  transition: color 0.15s ease;
}

.categoria-item-title a:hover,
.categoria-item-title a:focus-visible {
  color: var(--color-brand-red);
}

.categoria-bajada {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5a5a5a;
}

.categoria-media {
  flex-shrink: 0;
  width: 110px;
}

.categoria-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  object-position: top;
}

/* --- Paginación --- */
.categoria-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.categoria-pagina-link {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
  padding: 0.55rem 1rem;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.categoria-pagina-link:hover,
.categoria-pagina-link:focus-visible {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
}

.categoria-pagina-actual {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 0.85rem;
  color: #8a8a8a;
}

@media (min-width: 550px) {
  .categoria-media {
    width: 160px;
  }

  .categoria-item-title {
    font-size: 1.3rem;
  }

  .categoria-bajada {
    font-size: 0.95rem;
  }
}

@media (min-width: 960px) {
  .categoria-layout {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 3rem;
  }
}

/* ==========================================================
   FARMACIAS DE TURNO
   Reutiliza .categoria-layout / .categoria-main / .categoria-title
   / .nota-sidebar ya definidos. Acá solo lo específico: el bloque
   de vigencia y las tarjetas de cada farmacia.
   ========================================================== */
.farmacias-intro {
  text-align: center;
  padding: 0.5rem 0 2rem;
}

.farmacias-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
}

.farmacias-vigencia {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #1a1a1a;
}

.farmacias-lista {
  list-style: none;
}

/* --- Etiqueta de barrio, cuando una farmacia queda fuera del radio
   céntrico --- */
.farmacia-grupo {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7a7a7a;
  margin-bottom: 0.6rem;
}

/* --- Tarjeta de farmacia --- */
.farmacia-item {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.farmacia-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.farmacia-direccion {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #1a1a1a;
}

.farmacia-nombre {
  font-size: 1.05rem;
  color: #5a5a5a;
  margin-top: 0.3rem;
}

/* Teléfono: es el dato más urgente de la tarjeta, así que va como
   link de "tap-to-call" (href="tel:..."), grande y en rojo de marca
   para que se distinga de un vistazo en una emergencia. */
.farmacia-telefono {
  display: inline-block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-brand-red);
  margin-top: 0.5rem;
  transition: opacity 0.15s ease;
}

.farmacia-telefono:hover,
.farmacia-telefono:focus-visible {
  opacity: 0.8;
}

.farmacia-geo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-top: auto;
  padding-top: 0.9rem;
  transition: color 0.15s ease;
}

.farmacia-geo svg {
  width: 18px;
  height: 18px;
  color: var(--color-brand-red);
}

.farmacia-geo:hover,
.farmacia-geo:focus-visible {
  color: var(--color-brand-red);
}

.farmacia-media {
  flex-shrink: 0;
  width: 110px;
}

.farmacia-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  object-position: top;
}

@media (min-width: 550px) {
  .farmacia-media {
    width: 170px;
  }

  .farmacia-direccion {
    font-size: 1.6rem;
  }

  .farmacia-nombre {
    font-size: 1.1rem;
  }

  .farmacia-telefono {
    font-size: 1.5rem;
  }

  .farmacia-geo {
    font-size: 1.1rem;
  }
}

/* ==========================================================
   EL TIEMPO EN LUJÁN
   Reutiliza .categoria-layout / .categoria-main / .categoria-title
   / .nota-sidebar ya definidos (mismo patrón que Farmacias de turno).
   Acá solo lo específico: la bajada de "actualizado a las..." y las
   dos tarjetas de clima (condiciones actuales / pronóstico 24 hs).
   Cada tarjeta lleva su propio ícono PNG (assets/weather-icons/...),
   referenciado acá como placeholder — reemplazar por el ícono real
   correspondiente a cada estado del tiempo.
   ========================================================== */
.clima-intro {
  text-align: center;
  padding: 0.5rem 0 2rem;
}

.clima-actualizado {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #1a1a1a;
}

.clima-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Tarjeta de clima --- */
.clima-item {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 1.25rem;
}

/* El título ocupa todo el ancho de la tarjeta, arriba de todo */
.clima-card-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

/* Debajo del título: la lista de datos a la izquierda y el ícono
   del estado del tiempo a la derecha */
.clima-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.clima-datos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* align-items: flex-start (no center) a propósito: cuando el valor
   ocupa dos líneas (ej. "Parcialmente nublado" en mobile), la
   etiqueta ("Cielo:") y el bullet quedan alineados con la primera
   línea en vez de centrados entre las dos. */
.clima-datos li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1rem;
  color: #3a3a3a;
}

/* Bullet redondo del color de marca antes de cada dato. El
   margin-top lo baja para que quede centrado con la altura de la
   primera línea (ver align-items: flex-start del li de arriba). */
.clima-datos li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background-color: var(--color-brand-red);
}

.clima-datos li strong {
  font-weight: 700;
  color: #1a1a1a;
}

/* Ícono PNG del estado del tiempo de esa tarjeta (ej. soleado,
   parcialmente nublado, lluvia). Placeholder hasta que se sumen
   los archivos reales en assets/. Va desplazado hacia abajo, a la
   altura de la lista de datos, y más grande que el título. */
.clima-icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 550px) {
  .clima-card-title {
    font-size: 1.6rem;
  }

  .clima-icon {
    width: 104px;
    height: 104px;
  }

  .clima-datos li {
    font-size: 1.05rem;
  }
}

/* --- Tarjeta de pronóstico extendido (7 días): un ítem por día,
   con bullet de marca, textos apilados y un ícono chico a la
   derecha (mitad del tamaño del ícono usado en las otras dos
   tarjetas: 84/104px allá vs. 42/52px acá). --- */
.clima-extendido-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.clima-extendido-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e3e3e3;
}

.clima-extendido-item:first-child {
  padding-top: 0;
}

.clima-extendido-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.clima-extendido-texto {
  position: relative;
  padding-left: 1.15rem;
}

/* Bullet redondo del color de marca, alineado con la primera línea
   (misma convención que .clima-datos li::before) */
.clima-extendido-texto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-brand-red);
}

.clima-extendido-fecha {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.clima-extendido-fecha strong {
  font-weight: 800;
}

.clima-extendido-detalle {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #5a5a5a;
}

/* Mitad del tamaño de .clima-icon */
.clima-icon--sm {
  width: 42px;
  height: 42px;
}

@media (min-width: 550px) {
  .clima-extendido-fecha {
    font-size: 1.1rem;
  }

  .clima-extendido-detalle {
    font-size: 0.95rem;
  }

  .clima-icon--sm {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================
   TABLAS EMBEBIDAS (contenido externo, p. ej. generado por IA)
   ----------------------------------------------------------
   Convención: cualquier tabla que se pegue en el sitio —ya sea
   HTML crudo generado por una IA u otra fuente externa— va
   envuelta en un <div class="tabla-embed">...</div>, sin tocar
   el <table> en sí. Ejemplo:

     <div class="tabla-embed">
       <table>
         <thead>
           <tr><th>Columna</th><th>Columna</th></tr>
         </thead>
         <tbody>
           <tr><td>Dato</td><td>Dato</td></tr>
         </tbody>
       </table>
     </div>

   Como las reglas de abajo apuntan a las etiquetas semánticas
   (table, th, td) y no a clases propias, cualquier tabla —por
   más que venga con estilos inline básicos o sin clases— hereda
   automáticamente la tipografía y paleta del sitio apenas queda
   dentro del wrapper. El wrapper también resuelve el scroll
   horizontal en mobile para tablas anchas, así nunca rompen el
   layout de una nota o sección.
   ========================================================== */
.tabla-embed {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
}

.tabla-embed table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
}

.tabla-embed caption {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #7a7a7a;
  text-align: left;
  padding: 0.75rem 1rem 0;
}

.tabla-embed thead th {
  background-color: var(--color-brand-red);
  color: #ffffff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  padding: 0.85rem 1rem;
  white-space: nowrap;
}

.tabla-embed tbody td,
.tabla-embed tbody th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ececec;
  color: #2a2a2a;
  vertical-align: top;
}

.tabla-embed tbody th {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  text-align: left;
  background-color: #fafafa;
}

.tabla-embed tbody tr:last-child td,
.tabla-embed tbody tr:last-child th {
  border-bottom: none;
}

.tabla-embed tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-embed tbody tr:hover {
  background-color: #fbeceb;
}

.tabla-embed tfoot td {
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: #1a1a1a;
  border-top: 2px solid #e3e3e3;
}

@media (min-width: 700px) {
  .tabla-embed table {
    font-size: 1rem;
  }
}


  /* Contenedor del video al 100% de ancho con proporción 16:9 */
.video-nota-full {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Mantiene la relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.video-nota-full iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  margin-top: 3rem;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  border-top: 3px solid var(--color-brand-red);
  color: #d8d8d8;
}

.footer-top {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

.footer-brand {
  min-width: 0;
}

.footer-logo {
  display: inline-flex;
  margin-bottom: 0.85rem;
}

.footer-logo-img {
  height: 32px;
  width: auto;
  /* El logo original está pensado para fondo claro. Lo invertimos acá
     para que se lea bien sobre el fondo oscuro del footer. Si en algún
     momento se suma una versión blanca del logo, usar esa imagen en su
     lugar y sacar este filter. */

}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #b8b8b8;
  max-width: 32ch;
  margin-bottom: 1.25rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
  list-style: none;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: color 0.15s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--color-brand-red);
}

.footer-social .icon-x {
  width: 18px;
  height: 16px;
}

.footer-social .icon-instagram {
  width: 20px;
  height: 20px;
}

.footer-social .icon-youtube {
  width: 23px;
  height: 23px;
}

.footer-col-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-nav ul,
.footer-contact ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-nav a,
.footer-contact a {
  font-size: 0.9rem;
  color: #b8b8b8;
  transition: color 0.15s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: #ffffff;
}

.footer-contact li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #b8b8b8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  font-size: 0.8rem;
  color: #8a8a8a;
  text-align: center;
}

@media (min-width: 700px) {
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
  }
}


/* Achicamos tamaño de font de menu desktop para no rompres cajas de menu en desktops chicos */
@media (max-width: 1080px) {
   .site-nav-list a {
    font-size: 0.80rem;
  }
}