/* ==========================================================================
   EL ACCITANO (elaccitano.com) — Diseño Editorial Limpio y Despejado
   Inspiración: El País · El Debate (Mucho aire blanco, sin recarga visual,
   sin cajas encerradas, jerarquía tipográfica clara y lectura descansada)
   ========================================================================== */



:root {
  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F8F9FA;
  --bg-elevated: #FFFFFF;

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-on-dark: #F9FAFB;

  /* Azul Corporativo El Accitano usado con mesura (solo acentos puntuales) */
  --brand-primary: #0C4DA2;
  --brand-secondary: #1E73BE;
  --brand-soft: #EFF6FF;

  /* Filetes finos y discretos */
  --border-light: #F1F3F5;
  --border-subtle: #E5E7EB;
  --border-strong: #D1D5DB;
  --border-editorial: #111827;

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1240px;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 2px;

  --shadow-card: none;
  --shadow-hover: none;
  --shadow-float: 0 20px 40px -15px rgba(17, 24, 39, 0.18);

  --reader-font-size: 1.15rem;
}

html[data-theme="dark"] {
  --bg-page: #0B0F17;
  --bg-surface: #111827;
  --bg-subtle: #161F30;
  --bg-elevated: #1E293B;
  --text-primary: #F3F4F6;
  --text-secondary: #D1D5DB;
  --text-muted: #9CA3AF;
  --brand-primary: #60A5FA;
  --brand-secondary: #93C5FD;
  --brand-soft: rgba(96, 165, 250, 0.12);
  --border-light: #1F2937;
  --border-subtle: #1F2937;
  --border-strong: #374151;
  --border-editorial: #E5E7EB;
}

/* ==========================================================================
   1. BASE Y RESETEO
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.container {
  width: min(var(--container-max), 100% - 48px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--brand-primary);
  color: #fff;
  padding: 8px 14px;
  z-index: 9999;
}
.skip-link:focus {
  top: 12px;
}

/* ==========================================================================
   2. FRANJA SUPERIOR MÍNIMA (FECHA + TIEMPO + 3 ACCESOS DISCRETOS)
   ========================================================================== */
.topbar,
.utility-bar {
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.topbar__inner,
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
  gap: 16px;
}

.topbar__meta,
.utility-bar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.topbar__badge {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.topbar__dot {
  display: none;
}

.topbar__weather {
  color: var(--text-secondary);
  font-weight: 600;
}

.topbar__actions,
.utility-bar__links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar__link,
.utility-bar__links a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
}
.topbar__link:hover,
.utility-bar__links a:hover {
  color: var(--brand-primary);
}

.topbar__link--highlight,
.utility-bar__cta {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

.theme-toggle {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ==========================================================================
   3. CABECERA DESPEJADA (MASTHEAD CON AIRE BLANCO)
   ========================================================================== */
.masthead {
  background: var(--bg-surface);
  padding-block: 28px 22px;
  border-bottom: 1px solid var(--border-editorial);
}

.masthead__grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 20px;
}

.masthead__edition {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.masthead__edition-tag {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-size: 0.68rem;
  margin-bottom: 2px;
}
.masthead__edition-sub {
  font-size: 0.73rem;
  color: var(--text-muted);
}

.masthead__brand {
  text-align: center;
}

.masthead__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.masthead__emblem {
  display: none;
}

.masthead__titles {
  text-align: center;
}

.masthead__kicker {
  display: none;
}

.masthead__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4.6vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--text-primary);
}

.masthead__subtitle {
  margin: 6px 0 0;
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.masthead__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
}
.search-trigger:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.search-trigger kbd {
  display: none;
}

/* Botones sobrios */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.btn--primary {
  background: var(--brand-primary);
  color: #FFFFFF;
}
.btn--primary:hover {
  background: #083B7D;
}

.btn--blue {
  background: var(--text-primary);
  color: var(--bg-page);
}
.btn--blue:hover {
  background: var(--brand-primary);
  color: #FFFFFF;
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ==========================================================================
   4. NAVEGACIÓN PRINCIPAL LIMPIA Y CENTRADA
   ========================================================================== */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

.main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav__inner::-webkit-scrollbar {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.main-nav__btn:hover {
  color: var(--brand-primary);
}
.main-nav__btn.is-active {
  color: var(--brand-primary);
  font-weight: 700;
  border-bottom-color: var(--brand-primary);
}

.main-nav__cta-ad {
  display: none;
}

/* Ocultamos barras redundantes en portada para dar aire */
.ticker-bar {
  display: none;
}

/* Barra de municipios discreta y limpia */
.comarca-strip {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-light);
  padding-block: 10px;
}
.comarca-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.comarca-strip__inner::-webkit-scrollbar {
  display: none;
}
.comarca-strip__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-right: 4px;
}

.town-pill,
.filter-pill {
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.town-pill:hover,
.filter-pill:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.town-pill.is-active,
.filter-pill.is-active {
  color: var(--brand-primary);
  font-weight: 700;
  background: var(--brand-soft);
  border-color: var(--brand-primary);
}

/* ==========================================================================
   5. APERTURA DE PORTADA CON AIRE Y CORONDELES SUAVES
   ========================================================================== */
.hero-section {
  padding-block: 36px 40px;
  border-bottom: 1px solid var(--border-strong);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 0.85fr;
  gap: 0;
  align-items: start;
}

#heroLeadContainer {
  padding-right: 32px;
  border-right: 1px solid var(--border-subtle);
}

#heroSubleadContainer {
  padding-inline: 32px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-sidebar {
  padding-left: 32px;
}

/* Antetítulo limpio (sin cuadraditos recargados) */
.story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.story-kicker__town {
  color: var(--text-muted);
  font-weight: 500;
}

/* Noticia Principal de Apertura */
.lead-story {
  cursor: pointer;
}

.lead-story__title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.7vw, 2.55rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.lead-story:hover .lead-story__title {
  color: var(--brand-primary);
}

.lead-story__excerpt {
  margin: 0 0 18px;
  font-family: var(--font-body-serif);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.lead-story__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
}

.lead-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lead-story__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Subportada (Columna Central): limpia y aireada */
.sublead-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
.sublead-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sublead-card__title {
  margin: 4px 0 8px;
  font-family: var(--font-serif);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--text-primary);
}
.sublead-card:hover .sublead-card__title {
  color: var(--brand-primary);
}

.sublead-card__excerpt {
  margin: 0 0 10px;
  font-family: var(--font-body-serif);
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sublead-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-subtle);
  margin-bottom: 10px;
}
.sublead-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sublead-card__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Columna Derecha: Agenda limpia y sin ruido */
.agenda-widget {
  background: transparent;
  padding: 0;
}

.agenda-widget__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-editorial);
}

.agenda-widget__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.agenda-widget__badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agenda-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}
.agenda-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.agenda-item__date {
  text-align: left;
  border-left: 2px solid var(--brand-primary);
  padding-left: 8px;
}
.agenda-item__day {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.agenda-item__month {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.agenda-item__info h4 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}
.agenda-item__place {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ==========================================================================
   6. SECCIONES EDITORIALES Y TARJETAS SIN CAJAS (ESTILO EL PAÍS)
   ========================================================================== */
.editorial-section {
  padding-block: 48px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border-editorial);
}

.section-header__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.section-header__accent {
  display: none;
}

.section-header__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Parrilla de noticias limpia, sin bordes de tarjeta encerrados */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 36px;
  row-gap: 40px;
}

.news-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-subtle);
  margin-bottom: 12px;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease;
}
.news-card:hover .news-card__media img {
  opacity: 0.92;
}

/* Ocultamos los parches flotantes encima de las fotos */
.news-card__badge {
  display: none;
}

.news-card__town {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  margin-bottom: 6px;
}

.news-card__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}
.news-card:hover .news-card__title {
  color: var(--brand-primary);
}

.news-card__excerpt {
  margin: 0 0 10px;
  font-family: var(--font-body-serif);
  font-size: 0.95rem;
  line-height: 1.48;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-top: 6px;
}

.news-card__readmore {
  color: var(--brand-primary);
  font-weight: 600;
}

/* ==========================================================================
   7. SUPLEMENTO «ACCITANOS INSIGNES» (SOBRIO, CREMA CÁLIDO O GRIS PAPEL)
   ========================================================================== */
.insignes-band {
  background: var(--bg-subtle);
  padding-block: 52px;
  border-bottom: 1px solid var(--border-subtle);
}

.insignes-band__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--border-editorial);
}

.insignes-band__kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.insignes-band__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
}

.insignes-band__desc {
  margin: 6px 0 0;
  max-width: 68ch;
  font-family: var(--font-body-serif);
  font-size: 1rem;
  color: var(--text-secondary);
}

.insignes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.insigne-card {
  background: var(--bg-surface);
  border-top: 2px solid var(--brand-primary);
  padding: 18px;
  cursor: pointer;
}

.insigne-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--bg-subtle);
}
.insigne-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insigne-card__tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.insigne-card__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text-primary);
}
.insigne-card:hover .insigne-card__title {
  color: var(--brand-primary);
}

.insigne-card__excerpt {
  margin: 0;
  font-family: var(--font-body-serif);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   8. EMPLEO Y SERVICIO PÚBLICO
   ========================================================================== */
.empleo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.empleo-card,
.empleo-box {
  background: var(--bg-subtle);
  border-left: 3px solid var(--brand-primary);
  padding: 20px 24px;
  cursor: pointer;
}

.empleo-card__badge {
  display: inline-block;
  color: var(--brand-primary);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.empleo-card__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.28;
}
.empleo-card:hover .empleo-card__title {
  color: var(--brand-primary);
}

.empleo-card__meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ==========================================================================
   9. PUBLICIDAD INTEGRADA CON DISCRECIÓN EDITORIAL
   ========================================================================== */
.ad-slot-container {
  padding-block: 16px;
  border-bottom: 1px solid var(--border-light);
}

.ad-megabanner {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ad-megabanner__label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ad-megabanner__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ad-megabanner__cta {
  color: var(--brand-primary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   10. PIE DE PÁGINA LIMPIO
   ========================================================================== */
.site-footer {
  background: #111827;
  color: #D1D5DB;
  border-top: 3px solid var(--brand-primary);
  padding-block: 48px 32px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h3 {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.84rem;
}
.footer-links a {
  color: #9CA3AF;
}
.footer-links a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: #9CA3AF;
}

/* ==========================================================================
   11. LECTOR DE CRÓNICAS Y MODALES
   ========================================================================== */
dialog {
  width: min(860px, 94vw);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-float);
  overflow-y: auto;
}
dialog::backdrop {
  background: rgba(17, 24, 39, 0.65);
}

.dialog-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reading-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--brand-primary);
  width: 0%;
}

.reader-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reader-tool-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.reader-tool-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.article-reader {
  padding: clamp(24px, 4vw, 44px);
}

.article-reader__title {
  margin: 8px 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.article-reader__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 14px;
  margin-bottom: 24px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
}

.article-reader__hero {
  margin: 0 0 28px;
}
.article-reader__hero img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}
.article-reader__hero figcaption {
  padding-top: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.article-reader__content {
  font-family: var(--font-body-serif);
  font-size: var(--reader-font-size, 1.15rem);
  line-height: 1.78;
  color: var(--text-primary);
  max-width: 68ch;
  margin-inline: auto;
}
.article-reader__content p {
  margin: 0 0 1.25em;
}
.article-reader__content h2,
.article-reader__content h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.8em 0 0.6em;
  color: var(--text-primary);
}
.article-reader__content a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.share-strip {
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.article-toc {
  background: var(--bg-subtle);
  border-left: 3px solid var(--brand-primary);
  padding: 16px 20px;
  margin: 0 0 28px;
}
.article-toc__title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.article-toc__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 0.94rem;
}

.article-pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.article-pager__link {
  display: block;
  padding: 16px;
  background: var(--bg-subtle);
}
.article-pager__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 4px;
}
.article-pager__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-strong);
  z-index: 95;
}
.mobile-bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-bottom-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  color: var(--text-secondary);
  background: none;
  border: none;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-bottom-nav__btn.is-active {
  color: var(--brand-primary);
  font-weight: 700;
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .masthead__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .masthead__edition {
    display: none;
  }
  .masthead__tools {
    justify-content: center;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #heroLeadContainer,
  #heroSubleadContainer,
  .hero-sidebar {
    padding-inline: 0;
    border-right: none;
  }
  #heroLeadContainer,
  #heroSubleadContainer {
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 28px;
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .insignes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 52px;
  }
  .container {
    width: min(var(--container-max), 100% - 32px);
  }
  .mobile-bottom-nav {
    display: block;
  }
  .news-grid,
  .insignes-grid,
  .empleo-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .topbar, .utility-bar, .main-nav, .mobile-bottom-nav,
  .masthead__tools, .reader-tools, #closeReaderBtn, .share-strip {
    display: none !important;
  }
}

/* Edición 2026: jerarquía de periódico, enlaces nativos y lectura adaptable. */
:root { --container-max:1280px; --text-muted:#59616e; }
html { scroll-padding-top:72px; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--brand-primary); outline-offset:4px; }
a, button { -webkit-tap-highlight-color:transparent; }
button, .btn, .main-nav__btn, input[type=search] { min-height:44px; }
.topbar { border-top:4px solid var(--brand-primary); }
.topbar__inner { flex-wrap:wrap; row-gap:8px; }
.topbar__meta { flex-wrap:wrap; }
.topbar__actions { flex-wrap:wrap; gap:14px; }
.masthead { padding-block:28px 24px; }
.masthead__title { font-size:clamp(2.7rem,6.2vw,5.4rem); letter-spacing:-.055em; line-height:1; }
.masthead__subtitle { margin-top:12px; letter-spacing:.09em; font-size:.76rem; }
.masthead__edition-tag { color:var(--brand-primary); }
.main-nav { border-top:1px solid var(--border-editorial); border-bottom:3px double var(--border-editorial); }
.main-nav__inner { justify-content:flex-start; scrollbar-width:thin; }
.main-nav__list { min-width:max-content; margin-inline:auto; }
.main-nav__btn { padding:13px 12px; font-size:.71rem; }
.edition-line { display:flex; justify-content:space-between; gap:12px; padding-block:18px 0; font-size:.73rem; color:var(--text-muted); }
.edition-line > span { font-style:italic; font-family:var(--font-body-serif); font-size:1rem; }
.edition-line a { font-weight:700; color:var(--brand-primary); }
.hero-section { padding-top:24px; }
.hero-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr); }
.hero-grid > *, .news-grid > *, .footer-grid > * { min-width:0; }
.lead-story__title { font-size:clamp(1.9rem,2.75vw,2.65rem); line-height:1.13; text-wrap:balance; }
.lead-story__excerpt { font-size:1.13rem; }
.news-card__title { line-height:1.23; text-wrap:pretty; }
.lead-story,.news-card,.sublead-card,.insigne-card,.empleo-card { position:relative; }
.lead-story__title a::after,.news-card__title a::after,.sublead-card__title a::after,.insigne-card__title a::after,.empleo-card__title a::after { content:''; position:absolute; inset:0; }
.news-card__title a:focus-visible::after,.lead-story__title a:focus-visible::after { outline:3px solid var(--brand-primary); outline-offset:5px; }
.news-card__media,.lead-story__media,.sublead-card__thumb { overflow:hidden; }
.news-card__media img,.lead-story__media img { object-fit:cover; width:100%; }
.hero-sidebar { background:var(--bg-subtle); padding:18px; margin-left:24px; border-top:3px solid var(--brand-primary); }
.agenda-widget__title { font-size:1.6rem; }
.agenda-item__info h4 { font-size:.99rem; line-height:1.3; }
.agenda-item__place { line-height:1.45; }
.agenda-item__info a { text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.section-header__title { line-height:1.2; }
.section-header { gap:16px; }
.section-header__sub { flex-shrink:0; }
.empty-state { padding:24px; border:1px solid var(--border-strong); background:var(--bg-subtle); }
.empty-state a, main > section p a:not(.btn) { text-decoration:underline; text-underline-offset:3px; }
#searchModalResults { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:6px; }
#searchModalResults > .empty-state { grid-column:1/-1; }
#searchModalResults .news-card__media { aspect-ratio:16/9; }
#searchModalResults .news-card__title { font-size:1.1rem; }
#searchModalResults .news-card__excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
dialog { width:min(800px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); overscroll-behavior:contain; }
.dialog-sticky-bar { gap:12px; }
#hemGrid { row-gap:36px; }
#hemLocalSearch,#hemArchiveSearch { background:var(--bg-surface); border:1px solid var(--border-strong); color:var(--text-primary); }
.mobile-bottom-nav { padding-bottom:env(safe-area-inset-bottom); background:var(--bg-surface); }
.mobile-bottom-nav__btn { min-height:52px; }
.site-footer { margin-top:20px; }
@media(min-width:760px) and (max-width:1100px) {
 .hero-grid { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:24px; }
 #heroLeadContainer { padding-right:24px; border-right:1px solid var(--border-subtle); border-bottom:0; }
 #heroSubleadContainer { padding:0; border:0; }
 .hero-sidebar { grid-column:1/-1; margin:0; padding:20px; }
 .hero-sidebar .agenda-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 .hero-sidebar .agenda-item { border:0; margin:0; padding:0; }
 .hero-sidebar .agenda-item:nth-child(n+4) { display:none; }
 .masthead__grid { grid-template-columns:1fr auto; text-align:left; }
 .masthead__tools { justify-content:flex-end; }
}
@media(max-width:759px) {
 .hero-grid { display:block; }
 #heroLeadContainer { padding:0 0 24px; border-right:0; }
 #heroSubleadContainer { display:grid; grid-template-columns:1fr 1fr; padding:24px 0; border-right:0; gap:20px; }
 .sublead-card { display:block; }
 .sublead-card__thumb { margin-bottom:12px; }
 .sublead-card__title { font-size:1.1rem; }
 .sublead-card__excerpt,.sublead-card__meta { display:none; }
 .hero-sidebar { margin:0; padding:16px; }
 .hero-sidebar .agenda-list { display:flex; overflow-x:auto; gap:20px; padding-bottom:10px; scroll-snap-type:x proximity; }
 .hero-sidebar .agenda-item { flex:0 0 240px; scroll-snap-align:start; margin:0; padding:0 0 8px; border:0; }
 .masthead { padding-block:22px 18px; }
 .masthead__grid { gap:12px; }
 .masthead__subtitle { font-size:.63rem; letter-spacing:.06em; }
 .topbar__actions .topbar__link[href='/wp-admin/'] { display:none; }
 .topbar__meta { font-size:.65rem; gap:6px; }
 .topbar__actions { justify-content:space-between; width:100%; gap:12px; }
 .topbar__inner { padding-block:8px; }
 .theme-toggle { font-size:.66rem; }
 .main-nav__list { margin-inline:0; }
 .main-nav__btn { padding-inline:12px; }
 .edition-line { padding-top:14px; }
 .edition-line > span { font-size:.9rem; }
 .hero-section { padding-top:18px; }
 .lead-story__title { font-size:clamp(1.8rem,7.4vw,2.4rem); }
 .lead-story__excerpt { font-size:1.06rem; }
 .section-header { align-items:flex-start; flex-wrap:wrap; }
 .section-header__title { font-size:1.45rem; }
 .news-card__title { font-size:1.4rem; }
 .insignes-band__header { align-items:flex-start; gap:16px; flex-wrap:wrap; }
 .insignes-band__title { font-size:1.8rem; }
 .footer-grid { gap:28px; }
 #searchModalResults { grid-template-columns:1fr; }
 .dialog-sticky-bar strong { font-size:.9rem !important; }
 body { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media(max-width:759px) {
 .topbar__badge,.topbar__badge + span { display:none; }
 .masthead { padding-block:20px; }
 .masthead__grid { grid-template-columns:minmax(0,1fr) auto; gap:12px; text-align:left; }
 .masthead__title { font-size:clamp(1.9rem,8vw,2.8rem); }
 .masthead__subtitle { font-size:.54rem; letter-spacing:.02em; margin-top:8px; }
 .masthead__tools { justify-content:flex-end; }
 .search-trigger { padding:8px; font-size:.73rem; }
}
/* Dos bloques de portada, integrados entre contenidos y nunca superpuestos. */
.ad-break { margin-block:36px; padding-block:14px; border-block:1px solid var(--border-subtle); }
.ad-break__label { margin-bottom:10px; text-align:center; font:500 .62rem/1.4 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.ad-break__unit { width:100%; height:90px; margin-inline:auto; }
.ad-break:has(ins[data-ad-status="unfilled"]) { display:none; }
@media(max-width:759px) { .ad-break { margin-block:28px; } .ad-break__unit { height:100px; } }