/* Tokens de marca — WORDPRESS.md */
:root {
  --primario: #921B1B;
  --tinta: #111111;
  --acento: #921B1B;
  --papel: #FFFFFF;
  --texto: #16150F;
  --texto-suave: #6E6A5E;

  --fuente-display: 'Libre Caslon Display', 'Times New Roman', Times, serif;
  --fuente-texto: 'Libre Caslon Text', 'Times New Roman', Times, serif;

  /* Roles de superficie — la variación oscura cambia estos, nunca los tokens de marca de arriba */
  --superficie: var(--papel);
  --superficie-alterna: #f7f7f5;
  --en-superficie: var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #eee;
  /* --acento (#921B1B) como texto: 8,77:1 sobre --papel, ya pasa el 4,5:1
     de texto normal. En claro no hace falta derivar nada — se reusa tal cual. */
  --acento-texto: var(--acento);
  /* 0.45 mide 3,35:1 sobre --papel (alpha-blend real). */
  --borde-columnista: rgba(0, 0, 0, 0.45);
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --superficie-alterna: #1c1c1c;
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.65);
  --borde-suave: rgba(255, 255, 255, 0.14);
  /* --acento (#921B1B) como texto: 8,77:1 sobre --papel, pasa el 4,5:1 sin
     derivar nada en claro. Pero --primario y --tinta son tonos cercanos de
     la misma familia en esta red (trampa ya documentada en el playbook):
     #921B1B sobre --tinta (#111111) mide apenas 2,15:1, ni siquiera pasa el
     3:1 gráfico. #DD4949 es el mismo rojo aclarado y mide 7,04:1. */
  --acento-texto: #DD4949;
  /* 0.55, calibrado en la red contra un pie granate (caso límite): sigue
     cumpliendo 3:1 gráfico sobre --tinta. */
  --borde-columnista: rgba(255, 255, 255, 0.55);
}

/* Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  line-height: 1.5;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

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

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

em, .italica {
  font-style: italic;
}

/* Contenedor principal — ancho máximo compartido entre plantillas */
.contenido-principal {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Rótulo de categoría — versalitas en --acento, sin caja ni fondo (nunca chip) */
.rotulo-categoria {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.5rem;
}

[data-tema="oscuro"] .rotulo-categoria {
  color: var(--papel);
}

/* Banda a pantalla completa — header, hero, single, secciones de respiro */
.banda-tinta {
  background: var(--tinta);
  color: var(--papel);
  width: 100%;
}

.banda-tinta .rotulo-categoria {
  color: var(--papel);
}

.banda-tinta__contenido {
  max-width: 1200px;
  margin-inline: auto;
  padding: 3rem 1.5rem;
}

@media (max-width: 768px) {
  .banda-tinta__contenido {
    padding: 2rem 1.5rem;
  }
}

/* Header — masthead + nav de categorías */
.masthead__banner-contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.5rem;
}

.masthead__marca {
  display: inline-block;
}

.masthead__logo {
  display: block;
  height: 40px;
  width: auto;
}

.masthead__boton-tema {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--papel);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
}

.masthead__boton-tema svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.masthead__boton-tema .icono-luna {
  display: none;
}

[data-tema="oscuro"] .masthead__boton-tema .icono-sol {
  display: none;
}

[data-tema="oscuro"] .masthead__boton-tema .icono-luna {
  display: block;
}

.nav-categorias {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-suave);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-categorias::-webkit-scrollbar {
  display: none;
}

.nav-categorias__lista {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0.85rem 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
  white-space: nowrap;
}

.nav-categorias__lista a {
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-superficie);
}

/* Footer */
.pie-sitio__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.pie-sitio__logo {
  height: 32px;
}

.pie-sitio__categorias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
}

.pie-sitio__categorias a {
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel);
}

.pie-sitio__credito a {
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--papel);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.pie-sitio__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Tarjeta de nota — sin card, sin sombra, separada por filete */
.tarjeta-nota {
  border-top: 1px solid var(--borde-suave);
  padding-top: 1.5rem;
}

.tarjeta-nota__titular {
  font-size: 24px;
}

.tarjeta-nota__titular a {
  color: var(--en-superficie);
}

.tarjeta-nota__bajada {
  font-style: italic;
  color: var(--en-superficie-suave);
  font-size: 17px;
  margin: 0;
}

/* Fila de sección — rótulo centrado + grilla de tarjetas */
.fila-notas {
  padding: 3rem 0;
}

.fila-notas__titulo {
  text-align: center;
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
  margin-bottom: 2rem;
}

.fila-notas__grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .fila-notas__grilla {
    grid-template-columns: 1fr;
  }
}

/* Lista río — usada en single
   (Lo más leído) dentro de banda-tinta */
.lista-notas-rio {
  list-style: decimal;
  max-width: 500px;
  margin: 0 auto;
  padding-left: 1.5rem;
}

.lista-notas-rio__item {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lista-notas-rio__item:last-child {
  border-bottom: none;
}

.lista-notas-rio__link {
  font-family: var(--fuente-display);
  font-size: 19px;
  color: var(--papel);
}

/* Hero de portada — dos columnas en desktop, texto sobre banda-tinta */
.nota-principal__contenido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 768px) {
  .nota-principal__contenido {
    grid-template-columns: 1fr;
  }
}

.nota-principal__texto {
  text-align: center;
}

.nota-principal__titular {
  font-size: 56px;
  color: var(--papel);
}

@media (max-width: 768px) {
  .nota-principal__titular {
    font-size: 32px;
  }
}

.nota-principal__titular a {
  color: inherit;
}

.nota-principal__bajada {
  font-style: italic;
  font-size: 21px;
  color: rgba(255, 255, 255, 0.85);
}

.nota-principal__firma {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.nota-principal__media {
  display: block;
}

.nota-principal__imagen {
  width: 100%;
  height: auto;
  display: block;
}

.grilla-archivo {
  padding: 2rem 0 3rem;
}

.titulo-categoria,
.titulo-404 {
  text-align: center;
  font-size: 32px;
  padding-top: 2rem;
}

.contenido-principal--404 {
  text-align: center;
  padding: 4rem 1.5rem;
}

.volver-inicio {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--fuente-texto);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--en-superficie);
}

/* Header de single — idéntico en estructura al hero de portada, centrado */
.cabecera-nota__contenido {
  text-align: center;
}

.cabecera-nota__titular {
  font-size: 42px;
  color: var(--papel);
  max-width: 800px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .cabecera-nota__titular {
    font-size: 28px;
  }
}

.cabecera-nota__bajada {
  font-style: italic;
  font-size: 21px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 700px;
  margin-inline: auto;
}

.cabecera-nota__firma {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.nota-single__imagen {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
  object-fit: cover;
}

.nota-single__cuerpo {
  max-width: 700px;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  font-family: var(--fuente-texto);
  font-size: 21px;
  line-height: 1.5;
}

.nota-single__cuerpo p {
  margin: 0 0 1.5rem;
}

/* Río de Facebook — dentro de banda-tinta, siempre fondo oscuro
   (no usa los roles --superficie/--en-superficie porque .banda-tinta
   no los sigue: fuerza --tinta/--papel sin importar claro/oscuro) */
.feed-facebook {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .feed-facebook {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feed-facebook__link {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.2s ease-out, border-color 0.2s ease-out;
}

.feed-facebook__link:hover,
.feed-facebook__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--papel);
}

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

.feed-facebook__imagen {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.feed-facebook__texto {
  display: block;
  padding: 0.6rem 0.75rem 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.4;
}

.tarjeta-facebook {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

.tarjeta-facebook:hover,
.tarjeta-facebook:focus-visible {
  background: var(--acento);
  border-color: var(--acento);
  transform: translateY(-2px);
}

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

.tarjeta-facebook__icono {
  flex-shrink: 0;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--acento);
  align-items: center;
  justify-content: center;
}

.tarjeta-facebook__icono svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--papel);
}

.tarjeta-facebook__texto {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--papel);
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: 15px;
}

.tarjeta-facebook__texto span {
  font-family: var(--fuente-texto);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.tarjeta-nota__imagen-link {
  display: block;
  margin-bottom: 1rem;
}

.tarjeta-nota__imagen {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Sección de opinión
   ============================================================ */

.contenido-principal--opinion {
  padding-top: 2rem;
}

.cabecera-seccion {
  margin-bottom: 2rem;
}

.cabecera-seccion__titulo {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.5rem;
}

.cabecera-seccion__bajada {
  color: var(--en-superficie-suave);
  margin: 0;
}

/* ---- Firma del columnista ---- */

.firma-columnista__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.firma-columnista__foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--borde-columnista);
  flex: 0 0 auto;
}

.firma-columnista__datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.firma-columnista__nombre {
  font-weight: 700;
  line-height: 1.2;
}

.firma-columnista__cargo {
  font-size: 0.8rem;
  color: var(--en-superficie-suave);
}

/* ---- Tarjeta de opinión ---- */

.grilla-opinion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.tarjeta-opinion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  /* --acento (#921B1B) da solo 2,15:1 sobre --tinta en oscuro — no llega al
     piso gráfico de 3:1 (--primario y --tinta son tonos cercanos de la
     misma familia en esta red, trampa ya documentada en el playbook).
     --acento-texto ya resuelve esto: vale --acento en claro (8,77:1) y el
     rojo aclarado #DD4949 en oscuro (7,04:1). No se toca --acento. */
  border-top: 3px solid var(--acento-texto);
}

.tarjeta-opinion__titular {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
}

.tarjeta-opinion__titular a {
  color: inherit;
  text-decoration: none;
}

.tarjeta-opinion__titular a:hover {
  text-decoration: underline;
}

.tarjeta-opinion__bajada {
  color: var(--en-superficie-suave);
  margin: 0;
}

.tarjeta-opinion__fecha {
  font-size: 0.8rem;
  color: var(--en-superficie-suave);
  margin-top: auto;
}

/* ---- Artículo ---- */

.articulo-opinion {
  max-width: 42rem;
  margin: 0 auto;
}

.articulo-opinion__etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: 0.75rem;
}

.articulo-opinion__titular {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.articulo-opinion__fecha {
  display: block;
  font-size: 0.8rem;
  color: var(--en-superficie-suave);
  margin-top: 1rem;
}

.articulo-opinion__cuerpo {
  margin-top: 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---- Perfil del columnista ---- */

.perfil-columnista {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--borde-suave);
}

.perfil-columnista__foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--borde-columnista);
}

.perfil-columnista__datos {
  flex: 1 1 16rem;
}

.perfil-columnista__nombre {
  margin: 0 0 0.25rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.1;
}

.perfil-columnista__cargo {
  margin: 0 0 0.75rem;
  color: var(--acento-texto);
  font-weight: 700;
}

.perfil-columnista__bio {
  margin: 0;
  color: var(--en-superficie-suave);
  max-width: 42rem;
}

.estado-vacio {
  color: var(--en-superficie-suave);
}

/* ---- Franja de columnistas (portada, antes del pie) ---- */

.franja-columnistas {
  border-top: 1px solid var(--borde-suave);
  margin-top: 3rem;
  padding: 2.5rem 0 3rem;
}

/* Franja fuera de .contenido-principal: repite su mismo ancho máximo/centrado
   y el padding lateral (1.5rem) para alinearse con el resto de la página. */
.franja-columnistas__interior {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.franja-columnistas__titulo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
  margin: 0 0 1.5rem;
}

.franja-columnistas__lista {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
}

.franja-columnistas__lista::-webkit-scrollbar {
  display: none;
}

.franja-columnistas__item {
  flex: 0 0 auto;
  width: 11rem;
}

.franja-columnistas__persona {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.franja-columnistas__foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--borde-columnista);
  margin-bottom: 0.75rem;
}

.franja-columnistas__nombre {
  font-weight: 700;
  line-height: 1.2;
}

.franja-columnistas__cargo {
  font-size: 0.8rem;
  color: var(--en-superficie-suave);
}

.franja-columnistas__ultimo {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
}

.franja-columnistas__ultimo:hover {
  text-decoration: underline;
}