/* =====================================================================
   Libertad de Expresión — estilos del diseño (tema hijo TT4)
   TOKENS (1:1 con theme.json):
   base #FFFFFF · contrast #1A1A1A · primary #E2231A
   muted #5B6470 · surface #F4F4F4 · border #DADADA
   serif Georgia · system system-ui
   Los estilos puntuales viven en línea en las plantillas PHP;
   aquí solo lo que requiere clases: reset, grid, responsive y :hover.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.le-body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1A1A1A;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

/* Accesibilidad: solo lectores de pantalla */
.le-sronly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Cabecera / navegación ===== */
.le-nav-desktop { display: flex; }
.le-hamburger-wrap { display: none; }
.le-nav-link:hover { color: #E2231A; }

@media (max-width: 780px) {
  .le-nav-desktop { display: none !important; }
  .le-hamburger-wrap { display: block !important; }
  .le-edition-date { display: none; }
}
@media (min-width: 781px) {
  .le-mobile-menu { display: none !important; }
}
@media (max-width: 560px) {
  .le-mast { font-size: 38px !important; }
}

/* ===== Portada: 3 columnas ===== */
.le-grid {
  display: grid;
  grid-template-columns: 20fr 54fr 26fr;
  gap: 42px;
  align-items: start;
}
@media (max-width: 980px) {
  .le-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .le-aside-left, .le-aside-right { max-width: 620px; }
  .le-arrow { top: 130px !important; }
}

/* ===== Nota (single): artículo + sidebar ===== */
.le-article {
  display: grid;
  grid-template-columns: 66fr 34fr;
  gap: 48px;
  align-items: start;
}
.le-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 980px) {
  .le-article { grid-template-columns: 1fr !important; gap: 40px; }
  .le-aside { max-width: 620px; }
  .le-more { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .le-more { grid-template-columns: 1fr !important; }
  .le-title { font-size: 32px !important; }
}

/* ===== Archivo / listado ===== */
.le-archive {
  display: grid;
  grid-template-columns: 66fr 34fr;
  gap: 48px;
  align-items: start;
}
.le-card { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
@media (max-width: 980px) {
  .le-archive { grid-template-columns: 1fr !important; gap: 40px; }
}
@media (max-width: 560px) {
  .le-card { grid-template-columns: 1fr !important; gap: 12px; }
}

/* ===== Búsqueda: resultados ===== */
.le-result { display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
@media (max-width: 560px) {
  .le-result { grid-template-columns: 1fr !important; gap: 12px; }
}

/* ===== Pie ===== */
.le-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 780px) {
  .le-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}
.le-foot-link:hover { color: #FFFFFF; }

/* ===== Estados hover comunes ===== */
.le-read-link:hover { color: #E2231A; }                 /* enlaces "Lo más leído" */
.le-btn-red:hover { background: #C21D14; }              /* botones rojos */
.le-arrow:hover { background: #E2231A; color: #fff; border-color: #E2231A; }
.le-tag:hover { border-color: #E2231A; color: #E2231A; }
/* Zonas: texto negro, al pasar el mouse se ilumina en rojo */
.le-zona:hover { background: #E2231A; color: #FFFFFF; border-color: #E2231A; }

/* ===== Paginación nativa de WordPress, con estilo del diseño ===== */
.le-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 34px; flex-wrap: wrap;
}
.le-pagination .page-numbers {
  padding: 9px 14px; border: 1px solid #DADADA;
  color: #1A1A1A; font-size: 14px; font-weight: 600; text-decoration: none;
}
.le-pagination a.page-numbers:hover { border-color: #E2231A; color: #E2231A; }
.le-pagination .page-numbers.current {
  border-color: #E2231A; background: #E2231A; color: #FFFFFF; font-weight: 700;
}
.le-pagination .page-numbers.dots { border: none; }