@font-face {
  font-family: "Oxygen";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/oxygen-300.woff2") format("woff2");
}
@font-face {
  font-family: "Oxygen";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/oxygen-400.woff2") format("woff2");
}
@font-face {
  font-family: "Oxygen";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/oxygen-700.woff2") format("woff2");
}

:root {
  /* Color — identidad real de InfoBariloche */
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-surface-2: #f0efec;
  --color-text: #212529;
  --color-text-muted: #5c5c5c;
  --color-accent: #d10000;
  --color-accent-ink: #ffffff;
  --color-border: #e2e0dc;
  --color-header-bg: #d10000;

  /* Tipografía */
  --font-base: "Oxygen", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala — desktop (>=960px). Se ajusta por breakpoint más abajo */
  --h1-size: 40px;
  --h1-line: 46px;
  --h1-lead-size: 28px;
  --h1-lead-line: 32px;
  --card-title-size: 16px;
  --card-title-line: 21px;
  --body-size: 17px;
  --body-line: 27px;
  --meta-size: 13px;
  --meta-line: 19px;
  --eyebrow-size: 12px;
  --nav-size: 14px;

  /* Layout */
  --container-max: 1280px;
  --gutter: 24px;
  --grid-gap: 24px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px -10px rgba(0, 0, 0, 0.2);
}

/* ---------- reset base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  padding: 8px 16px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  z-index: 100;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s ease;
}
.site-header--scrolled { box-shadow: var(--shadow-card); }
/* banner chico arriba del logo, solo mobile — vive dentro de
   .site-header (sticky) así queda fijo junto con el resto del header */
.site-header__ad { display: none; padding: 0; max-width: none; margin: 0; }
.ad-slot.ad-slot--mobile-leaderboard {
  width: 100%;
  aspect-ratio: 320 / 50;
  margin: 0 0 8px;
  border-radius: 0;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding 0.2s ease;
}
.site-header--scrolled .site-header__bar { padding-top: 8px; padding-bottom: 8px; }
.site-header__logo { flex: none; }
.site-header__logo img { height: 52px; width: auto; transition: height 0.2s ease; }
.site-header--scrolled .site-header__logo img { height: 38px; }
.site-header__nav { display: flex; gap: 16px; position: relative; }
.site-header__nav a {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-text);
  white-space: nowrap;
}
.site-header__nav a:hover { color: var(--color-accent); }

/* indicador que persigue al mouse entre items (JS: assets/js/nav.js) —
   solo desktop, en mobile el nav es una lista vertical y no aplica */
.nav-indicator {
  position: absolute;
  bottom: -8px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transition: left 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}
.site-header__search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 18px;
  flex: none;
}
.site-header__search:hover { color: var(--color-accent); }
.site-header__search-label { display: none; }

/* ---------- toggle de secciones (solo visible < 992px) ---------- */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.nav-toggle-btn {
  display: none;
  width: 34px; height: 34px;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
.nav-toggle-btn span {
  display: block;
  width: 16px; height: 2px;
  background: var(--color-text);
  position: relative;
  transition: background-color 0.2s ease;
}
.nav-toggle-btn span::before, .nav-toggle-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease;
}
.nav-toggle-btn span::before { top: -5px; }
.nav-toggle-btn span::after { top: 5px; }

/* hamburguesa -> X: solo transform/background-color (composita en GPU,
   sin disparar layout) */
.nav-toggle-input:checked ~ .nav-toggle-btn span { background: transparent; }
.nav-toggle-input:checked ~ .nav-toggle-btn span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle-btn span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- ticker "minuto a minuto" ---------- */
.ticker {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.ticker__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 9px;
  padding-bottom: 9px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.ticker__bar::-webkit-scrollbar { display: none; }
.ticker__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
}
.ticker__item {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.95;
}
.ticker__sep { opacity: 0.5; }

/* ---------- hero: grilla 3 columnas ---------- */
.hero {
  padding-top: 28px;
  padding-bottom: 28px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 50fr 30fr 23fr;
  gap: var(--grid-gap);
  align-items: start;
}
/* Columna 3: uno o más módulos (ej. "Últimas noticias" + publicidad) --
   apilados verticalmente DENTRO de su propia columna, para que agregar un
   módulo más a esta posición no rompa las 3 columnas de arriba (sin este
   contenedor, cada módulo era un ítem directo del grid y un 4to módulo
   se iba a una fila/columna nueva del grid principal). */
.hero-list-col {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* columna 1: nota principal */
.hero-main__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
}
.hero-main__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.hero-main:hover .hero-main__media img { transform: scale(1.05); }
.hero-main__eyebrow {
  display: block;
  margin-top: 16px;
  font-size: var(--eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}
.hero-main__title {
  margin-top: 6px;
  font-size: var(--h1-lead-size);
  line-height: var(--h1-lead-line);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-main__title a:hover { text-decoration: underline; }
.hero-main__dek {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* columna 2: cámaras en vivo */
.hero-live {
  border-radius: var(--radius);
  overflow: hidden;
  background: #0c0c0c;
  color: #fff;
}
.hero-live__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-live__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-live__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 40%);
  z-index: 0;
  pointer-events: none;
}
.hero-live__rec {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ff5b5b;
}
.hero-live__rec::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff5b5b;
  display: inline-block;
}
.hero-live__thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #050505;
}
.hero-live__thumb {
  flex: none;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.hero-live__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-live__thumb:hover { opacity: 0.9; }
.hero-live__thumb.is-active { opacity: 1; border-color: var(--color-accent); }
.hero-live__caption {
  display: block;
  padding: 10px 12px 12px;
  font-size: 12px;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}
.hero-live__caption strong { color: #fff; }
.hero-live__caption a { color: inherit; text-decoration: underline; }
.hero-live__title { font-size: 17px; font-weight: 700; }
.hero-live__caption {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* columna 3: lista de últimas notas */
.hero-list__title {
  font-size: var(--eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 4px;
}
.hero-list__item {
  display: flex;
  gap: 12px;
  margin: 0 -8px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.hero-list__item:last-child { border-bottom: none; }
.hero-list__item:hover { background-color: var(--color-surface-2); }
.hero-list__media {
  width: 84px;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  flex: none;
  background: var(--color-surface-2);
}
.hero-list__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.hero-list__item:hover .hero-list__media img { transform: scale(1.05); }
.hero-list__title-text {
  font-size: var(--card-title-size);
  line-height: var(--card-title-line);
  font-weight: 700;
}
.hero-list__title-text a:hover { text-decoration: underline; }

/* ---------- grilla de secciones (portada, debajo del hero) ---------- */
.section-zone { padding-top: 8px; padding-bottom: 32px; }
.section-zone__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.section-zone__title {
  font-size: 20px;
  font-weight: 700;
}
.section-zone__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
.card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__title {
  margin-top: 10px;
  font-size: var(--card-title-size);
  line-height: var(--card-title-line);
  font-weight: 700;
}
.card__title a:hover { text-decoration: underline; }
.card__meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.card__dek {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* variante con el título superpuesto sobre la imagen (scrim degradado
   para que el texto blanco se lea sobre cualquier foto) */
.card--overlay .card__media { position: relative; }
.card--overlay .card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.card--overlay .card__title a:hover { text-decoration: underline; }

/* ---------- feed de zona: leading + intro + links (com_content) ----------
   1 nota líder a ancho completo, 2 notas intro en 2 columnas debajo,
   y la lista de solo texto/miniatura al final — igual al desglose real
   de Joomla (Leading / Intro / Links). */
.zone-feed {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.zone-feed .card { max-width: none; }
.zone-feed__intro,
.hero-main__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: 20px;
}
@media (max-width: 599px) {
  .zone-feed__intro, .hero-main__intro { grid-template-columns: 1fr; }
}

/* ---------- template de zona: líder + lista + rail de banners ---------- */
.zone-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr 300px;
  gap: 32px;
  align-items: start;
}
.zone-split__ads {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.zone-split__ads .ad-slot--fixed { margin: 0; }
@media (max-width: 767px) {
  .zone-split { grid-template-columns: 1fr; }
  .zone-split__ads { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ---------- template de zona: tríptico (2 cards / 2 cards / nota principal) ---------- */
.zone-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: var(--grid-gap);
  align-items: stretch;
}
.zone-triptych__col {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
/* la nota principal llena el alto de la fila (stretch) en vez de usar
   un aspect-ratio fijo, así su base queda alineada con la suma de las
   2 cards apiladas de las columnas a su izquierda */
.zone-triptych__feature {
  min-width: 0;
  min-height: 0;
}
.zone-triptych__feature .card__media {
  position: relative;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
/* overlay más completo (título + fecha + copete) para la nota principal */
.card__media-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0) 100%);
}
.card__media-overlay .card__title { margin: 0; color: #fff; }
.card__media-overlay .card__title a:hover { text-decoration: underline; }
.card__media-overlay .card__meta { color: rgba(255, 255, 255, 0.75); margin-top: 6px; }
.card__media-overlay .card__dek { color: rgba(255, 255, 255, 0.92); margin-top: 6px; }
@media (max-width: 767px) {
  .zone-triptych { grid-template-columns: 1fr; }
}

/* .links-list reusa el mismo patrón imagen+título que .hero-list (ver arriba) */
.links-list { display: flex; flex-direction: column; }
.links-list .hero-list__item .card__meta { margin-top: 2px; }

/* separador cuando el listado va debajo de otro bloque (hero, rail) */
.hero-main .links-list, .hero-live-col .links-list, .hero-list .links-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--color-text);
}

/* ---------- espacios publicitarios ----------
   Dos formatos reales, nunca mezclados:
   - .ad-slot--fixed: unidad de red (300×250) en tamaño real fijo. Solo se
     usa donde el contenedor ya es angosto (~300-350px), como el rail real
     de infobariloche.com.ar — nunca dentro de una columna ancha, porque
     ahí quedaría una caja perdida rodeada de blanco.
   - .ad-slot--banner: creatividad de venta directa (como los banners
     propios que usa hoy el sitio real). Es fluida a propósito: llena el
     100% del contenedor que la aloja, así que nunca hay sobrante — pero
     por eso mismo nunca lleva una medida en px, porque no es una unidad
     de red de tamaño fijo. */
.ad-slot {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.ad-slot--fixed {
  width: 300px;
  height: 250px;
  flex: none;
  margin: 24px auto 0;
}
.ad-slot--fixed-lg {
  width: 336px;
  height: 280px;
  max-width: 100%;
  flex: none;
  margin: 24px auto 0;
}
.ad-slot--banner {
  width: 100%;
  aspect-ratio: 2.6 / 1;
  margin-top: 24px;
}
.ad-slot--billboard {
  max-width: 970px;
  aspect-ratio: 970 / 250;
  margin: 28px auto;
}

/* bloque de varias unidades fijas agrupadas: así se resuelve un corte
   publicitario de ancho completo entre secciones en todos los sitios
   relevados (Río Negro, ANB, bache3000) — el panel con fondo propio
   enmarca el conjunto, nunca queda como una caja sola flotando en blanco */
.ad-cluster {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 32px 0;
}
/* etiqueta de aviso: chica y debajo (como el disclosure real de "Publicidad"
   en una nota patrocinada), no un título arriba del bloque */
.ad-cluster__label {
  display: block;
  text-align: center;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 10px;
}
.ad-cluster__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.ad-cluster .ad-slot--fixed { margin: 0; }
/* neutraliza el wrapper propio de mod_custom (<div class="mod-custom">)
   para que sus hijos sigan siendo ítems directos del flex */
.ad-cluster__row > * { display: contents; }
/* banners reales (mod_banners) dentro del cluster: mismo ancho "de unidad"
   que .ad-slot--fixed, para que varios entren lado a lado sin que una
   imagen ancha empuje a las demás a la fila de abajo */
.ad-cluster .banneritem { flex: 0 1 300px; }
.ad-cluster .banneritem img { width: 100%; height: auto; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--color-text);
  color: #d8d8d8;
  padding: 32px 0;
  margin-top: 24px;
}
.site-footer a { color: #fff; }
.site-footer__logo img { width: auto; height: 32px; margin-bottom: 12px; }
.site-footer__meta { font-size: 13px; color: #a9a9a9; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: 0.6; }
.breadcrumbs li[aria-current] { color: var(--color-text); }

/* ---------- artículo ---------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding-top: 28px;
  padding-bottom: 48px;
  align-items: start;
}
.article__eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}
.article__title {
  margin-top: 10px;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.article__byline {
  margin-top: 14px;
  font-size: var(--meta-size);
  line-height: var(--meta-line);
  color: var(--color-text-muted);
}
.article__byline strong { color: var(--color-text); font-weight: 700; }
.article__listen-btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
}
.article__listen-btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.article__listen-btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.article__media {
  margin: 20px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
}
.article__media img { display: block; width: 100%; height: auto; }
.article__caption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.article__body {
  margin-top: 24px;
}
.article__body p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  margin-bottom: 20px;
}
.article__body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
}

/* Links a documentos (subidos con "Insertar multimedia" o pegados a mano):
   se muestran como una tarjetita con ícono, no como un link de texto suelto.
   Mismo bloque se carga dentro del editor (content_css_custom de TinyMCE),
   así Oscar ve exactamente esto mientras escribe. */
.article__body a[href$=".pdf"],
.article__body a[href$=".doc"],
.article__body a[href$=".docx"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}
.article__body a[href$=".pdf"]:hover,
.article__body a[href$=".doc"]:hover,
.article__body a[href$=".docx"]:hover {
  border-color: var(--color-accent);
}
.article__body a[href$=".pdf"]::before,
.article__body a[href$=".doc"]::before,
.article__body a[href$=".docx"]::before {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
}
.article__body a[href$=".pdf"]::before {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext x='15' y='19' font-family='Arial,Helvetica,sans-serif' font-size='10' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
}
.article__body a[href$=".doc"]::before,
.article__body a[href$=".docx"]::before {
  background-color: #2456a6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext x='15' y='19' font-family='Arial,Helvetica,sans-serif' font-size='9' font-weight='700' fill='%23fff' text-anchor='middle'%3EDOC%3C/text%3E%3C/svg%3E");
}

/* Imágenes insertadas en el cuerpo de la nota vía "Insertar multimedia",
   con alineación opcional respecto del texto. Mismas clases se usan en el
   editor (content_css_custom) y acá, para que se vea igual en los dos lados. */
.article__body figure.ib-media {
  margin: 20px 0;
  max-width: 100%;
}
.article__body figure.ib-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.article__body figure.ib-media figcaption {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.article__body figure.ib-media.ib-align-left {
  float: left;
  width: 45%;
  margin: 4px 24px 12px 0;
}
.article__body figure.ib-media.ib-align-right {
  float: right;
  width: 45%;
  margin: 4px 0 12px 24px;
}
.article__body figure.ib-media.ib-align-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Limpia los floats de las imágenes alineadas antes de que arranque el
   siguiente bloque del cuerpo (rail, etc.), para que no se superpongan. */
.article__body::after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 640px) {
  .article__body figure.ib-media.ib-align-left,
  .article__body figure.ib-media.ib-align-right {
    float: none;
    width: 100%;
    margin: 20px 0;
  }
}

/* Banners -- tanto los nativos de Joomla (mod_banners) como los propios
   resueltos del lado del cliente (mod_infobarilochebanners,
   plg_content_paragraphbanners, vía banners.js) -- siempre centrados
   horizontalmente en el espacio que les toque ocupar, sea cual sea la
   posición/módulo/contexto donde aparezcan. */
.ib-banner-slot,
.mod-banners .banneritem {
  text-align: center;
}
.ib-banner-slot-inner,
.mod-banners .banneritem {
  max-width: 100%;
}
.ib-banner-slot-inner img,
.mod-banners .banneritem img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* mod_infobarilochebanners: cuando una misma instancia pide varios banners
   (parámetro "Cantidad"), se acomodan solos según su propio tamaño natural
   -- sin forzar ningún ancho fijo -- así un banner ancho (ej. un
   leaderboard) ocupa su ancho real, y varios banners cuadrados quedan lado
   a lado hasta que no entra otro más, pasando a una fila nueva recién ahí. */
.ib-banner-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Espacios de banner intercalados cada X párrafos dentro de una nota
   (plg_content_paragraphbanners): mismo respiro vertical que separa a los
   párrafos del resto del cuerpo. */
.article__body .ib-banner-slot {
  margin: 28px 0;
}

.rail { display: flex; flex-direction: column; gap: 24px; }
.rail .ad-slot--fixed { margin: 0 auto; }
.rail__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--color-surface);
}
.rail__card-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.rail__item {
  display: flex;
  gap: 10px;
  margin: 0 -8px;
  padding: 10px 8px;
  border-top: 1px solid var(--color-border);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.rail__item:first-child { border-top: none; padding-top: 0; }
.rail__item:hover { background-color: var(--color-surface-2); }
.rail__item .hero-list__media { width: 64px; }
.rail__item:hover .hero-list__media img { transform: scale(1.05); }
.rail__item-title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

/* ---------- categoría ---------- */
.category-header {
  padding: 20px 0 28px;
  border-bottom: 3px solid var(--color-text);
  margin-bottom: 28px;
}
.category-header__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.category-header__dek {
  margin-top: 8px;
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 60ch;
}
.category-grid { padding-bottom: 8px; }
.category-grid .card-grid { margin-bottom: 40px; }

.archive-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.archive-filters select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 4px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 48px;
}
.pagination a, .pagination span {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  padding: 0 10px;
}
.pagination a { border: 1px solid var(--color-border); color: var(--color-text); }
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination span[aria-current] { background: var(--color-accent); color: var(--color-accent-ink); }
.pagination .pagination__ellipsis { color: var(--color-text-muted); font-weight: 400; }

/* ---------- nav colapsable (< 992px, mismo corte que el sitio real) ---------- */
@media (max-width: 991px) {
  .site-header__ad { display: block; }
  .site-header__bar { flex-wrap: wrap; }
  .site-header__logo { order: 1; }
  .nav-toggle-btn { display: flex; order: 2; }
  .site-header__nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .site-header__nav a {
    padding: 12px 2px;
    font-size: 14px;
    border-top: 1px solid var(--color-border);
  }
  .site-header__search { display: none; }
  .nav-indicator { display: none; }
  .nav-toggle-input:checked ~ .site-header__nav {
    /* dropdown más alto que la pantalla (portrait, muchas categorías):
       se limita a 70vh y scrollea internamente en vez de tapar items */
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 6px;
  }
  .nav-toggle-input:checked ~ .site-header__search {
    display: flex;
    order: 4;
    flex-basis: 100%;
    padding: 12px 2px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
  }
  .nav-toggle-input:checked ~ .site-header__search .site-header__search-label {
    display: inline;
  }
}
/* en horizontal el alto de pantalla es chico y el header ya ocupa
   buena parte — el banner se oculta para no comerse casi toda la
   pantalla visible */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
  .site-header__ad { display: none; }
}

/* ---------- breakpoints (mismos que CNN: 480 / 960) ---------- */
@media (max-width: 959px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .hero-list { grid-column: 1 / -1; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .rail { flex-direction: row; flex-wrap: wrap; }
  .rail__card { flex: 1 1 260px; }
  :root {
    --h1-size: 32px;
    --h1-line: 37px;
  }
}

@media (max-width: 479px) {
  :root {
    --gutter: 16px;
    --h1-size: 24px;
    --h1-line: 29px;
    --h1-lead-size: 22px;
    --h1-lead-line: 26px;
    --body-size: 16px;
    --body-line: 25px;
  }
  .hero__grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .ticker__label { display: none; }
  .category-header__title { font-size: 26px; }
}