/*
Theme Name: La Audiencia Editorial
Theme URI: https://laaudiencia.com
Description: Tema hijo de Astra para La Audiencia. Estética editorial (estilo The Atlantic): portada con nota central grande, tipografía serif, kickers rojos y zonas de publicidad con las medidas del media kit 2026.
Author: La Audiencia
Template: astra
Version: 1.4.8
Text Domain: la-audiencia-editorial
*/

/* =============================================================
   VARIABLES DE MARCA  — edita SOLO esto para reajustar colores
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@500;600;700&display=swap');

:root {
  --la-rojo:   #a21425;   /* carmín del logo — acento sobrio */
  --la-crema:  #FAF8F3;   /* marfil más limpio (menos amarillo) */
  --la-tinta:  #1a1a1a;
  --la-gris:   #6b6b6b;
  --la-linea:  #e0dccf;

  --la-serif-titulo: "Libre Caslon Display", "Playfair Display", Georgia, serif;
  --la-serif-texto:  "Source Serif 4", "Spectral", Georgia, serif;

  --la-ancho: 1240px;

  --la-sans-ui: "Montserrat", system-ui, sans-serif;  /* menús, kickers, meta */
  --la-lectura: #2b2b2b;                                /* gris de lectura uniforme */
}

/* =============================================================
   0. BASE
   ============================================================= */
body { background-color: var(--la-crema); }
.ast-container { max-width: var(--la-ancho); }

/* Unificar el contenedor: quitar la "caja" de otro color (móvil y escritorio).
   Astra usa "contenedor separado" con fondo blanco/lila; lo hacemos crema/
   transparente para que no se vean márgenes de distinto tono. */
.ast-separate-container { background-color: var(--la-crema) !important; }
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container #primary,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .entry-content {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Móvil: contenido casi a todo el ancho (quitar el espacio lateral de más) */
@media (max-width:768px){
  .site-content .ast-container { padding-left:10px !important; padding-right:10px !important; max-width:100% !important; }
  .ast-separate-container .ast-article-single,
  .ast-separate-container .ast-article-post,
  .ast-separate-container #primary {
    padding-top:1rem !important; padding-bottom:1rem !important;
    padding-left:12px !important; padding-right:12px !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}

/* =============================================================
   14. MÓVIL — logo más grande + fotos "a sangre" (tocan las orillas)
   ============================================================= */
@media (max-width:768px){
  /* Logo más grande en el celular */
  .site-branding img, .custom-logo, .site-logo-img img { max-width:175px !important; }

  /* Cabezal negro a todo lo ancho (toca orillas) y su foto también */
  .ast-single-entry-banner {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important; max-width: 100vw !important;
    padding-left: 18px !important; padding-right: 18px !important;
  }
  .ast-single-entry-banner .post-thumbnail {
    margin-left: -18px !important; margin-right: -18px !important;
    width: calc(100% + 36px) !important;
  }
  .ast-single-entry-banner .post-thumbnail img { width:100% !important; height:auto; display:block; }

  /* Fotos dentro del artículo, de borde a borde */
  .ast-single-post .entry-content figure,
  .ast-single-post .entry-content .wp-block-image {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important; width: 100vw !important;
  }
  .ast-single-post .entry-content figure img,
  .ast-single-post .entry-content .wp-block-image img { width:100% !important; height:auto; }
}

/* =============================================================
   1. HEADER (red de seguridad; el ajuste real es en el Header Builder)
   ============================================================= */
header.site-header { background-color:var(--la-crema); border-bottom:1px solid var(--la-linea); position:relative; }

/* La barra interna y el área del menú desplegable también en crema
   (Astra le pone un fondo lila/blanco por default; lo forzamos a crema
   para que no aparezca "hueco blanco" ni barra descolorida). */
.ast-primary-header-bar, .ast-primary-header, .main-header-bar,
.main-header-bar-navigation, .main-header-bar-navigation.toggle-on {
  background-color: var(--la-crema) !important;
}

/* Anular la "cabecera transparente" de Astra: que el header reserve su
   propio espacio (position:relative) y NO flote sobre las notas. Con
   !important porque Astra usa selectores de alta especificidad. */
.ast-theme-transparent-header .site-header,
.ast-theme-transparent-header.ast-header-break-point .site-header,
.ast-theme-transparent-header.ast-desktop .site-header {
  position: relative !important;
  background-color: var(--la-crema) !important;
}
/* Quitar el margen/negativo que empuja el contenido bajo el header flotante */
.ast-theme-transparent-header #content,
.ast-theme-transparent-header .site-content { margin-top: 0 !important; }

/* Nav de secciones */
.main-header-menu .menu-link,
.ast-nav-menu .menu-link { text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:600; }
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-link:hover { color:var(--la-rojo); }

/* =============================================================
   2. KICKER ROJO DE CATEGORÍA
   ============================================================= */
.cat-links a, .ast-terms-link a, .entry-meta a[rel~="category"], .blog-category a,
.la-kicker a {
  color:var(--la-rojo) !important;
  text-transform:uppercase; font-weight:700; letter-spacing:.05em;
  font-size:.72rem; text-decoration:none;
}

/* =============================================================
   3. TITULARES Y META
   ============================================================= */
.entry-title, .entry-title a, .la-card__title a, .la-hero__center h2 a {
  font-family:var(--la-serif-titulo); color:var(--la-tinta);
  line-height:1.14; letter-spacing:-.01em; text-decoration:none;
}
.entry-title a:hover, .la-card__title a:hover, .la-hero__center h2 a:hover { color:var(--la-rojo); }

.entry-meta, .entry-meta a, .posted-by a, .posted-on a, .la-meta, .la-meta a {
  color:var(--la-rojo); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
}

/* =============================================================
   4. NOTA INDIVIDUAL
   ============================================================= */
/* Cabezal de la nota: banda NEGRA con título blanco.
   Astra Pro usa la sección .ast-single-entry-banner (NO .entry-header). */
.ast-single-entry-banner {
  background:#121212 !important;
  padding-top:2.5rem !important;
  padding-bottom:2.5rem !important;
}
.ast-single-entry-banner .entry-title,
.ast-single-entry-banner .entry-title a {
  color:#ffffff !important; font-size:clamp(1.9rem,3.5vw,2.9rem);
  max-width:860px; margin-inline:auto; text-align:center;
}
.ast-single-entry-banner .entry-meta,
.ast-single-entry-banner .entry-meta *,
.ast-single-entry-banner a,
.ast-single-entry-banner .ast-blog-single-element { color:#e9e2d2 !important; }
.ast-single-post .entry-content {
  max-width:720px; margin-inline:auto;
  font-family:var(--la-serif-texto); font-size:1.15rem; line-height:1.7;
}
.entry-content hr { margin:2rem auto; border:0; border-top:1px solid var(--la-tinta); max-width:720px; }
.entry-content blockquote {
  margin:1.75rem auto; padding:.25rem 0 .25rem 1.25rem;
  border-left:3px solid var(--la-rojo); font-family:var(--la-serif-texto);
  font-style:italic; font-size:1.2rem; color:var(--la-tinta);
}
.entry-content blockquote p { margin-bottom:.5rem; }

/* =============================================================
   5. PORTADA ESTILO THE ATLANTIC  (front-page.php)
   ============================================================= */
/* La portada NO debe heredar el display:flex de Astra: bloques apilados */
.la-front { margin-top:16px !important; }   /* Astra mete 60px; lo bajamos a 16 */
.la-front .site-main {
  padding-top:0;
  display:block !important;
  max-width:var(--la-ancho);
  margin-inline:auto;
}

/* --- HERO: izquierda (2 apiladas) | centro (grande) | derecha (lista) --- */
.la-hero {
  display:grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap:2.5rem;
  align-items:start;
  padding-bottom:2rem;
  border-bottom:1px solid var(--la-linea);
}
.la-hero__center h2 { font-size:2.5rem; line-height:1.1; margin:.6rem 0; }
.la-hero__center .la-card__img img { width:100%; height:auto; display:block; }
.la-hero__center .la-dek {
  font-family:var(--la-serif-texto); color:var(--la-gris);
  font-size:1.15rem; line-height:1.5; margin-top:.5rem;
}

/* Columna izquierda: dos notas apiladas con divisor */
.la-hero__left .la-card + .la-card { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--la-linea); }
.la-hero__left .la-card__title { font-size:1.25rem; margin:.4rem 0; }

/* Columna derecha: lista de titulares sin imagen grande */
.la-hero__right .la-headline { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--la-linea); }
.la-hero__right .la-headline:first-child { padding-top:0; }
.la-hero__right .la-headline__text h3 { font-family:var(--la-serif-titulo); font-size:1.1rem; line-height:1.2; margin:0 0 .3rem; }
.la-hero__right .la-headline__text h3 a { color:var(--la-tinta); text-decoration:none; }
.la-hero__right .la-headline__text h3 a:hover { color:var(--la-rojo); }
.la-hero__right .la-headline__thumb { flex:0 0 84px; }
.la-hero__right .la-headline__thumb img { width:84px; height:84px; object-fit:cover; }

/* --- GRID inferior: 3 columnas parejas (lo que ya te gustaba) --- */
.la-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; padding-top:2rem; }
.la-card__img img { width:100%; height:auto; display:block; margin-bottom:.6rem; }
.la-card__title { font-size:1.4rem; margin:.4rem 0; }
.la-card__title a { color:var(--la-tinta); }
.la-dek { font-family:var(--la-serif-texto); color:var(--la-gris); }
.la-sep { border:0; border-top:2px solid var(--la-tinta); margin:2.5rem 0; }
.la-section-title { font-family:var(--la-serif-titulo); font-size:1.4rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 1.25rem; }

/* Sección "Revista Impresa" en el home: portada centrada que enlaza a la biblioteca */
.la-revista { text-align:center; }
/* Fila de portadas (formato vertical): pon 2-3 imágenes en el widget */
.la-revista__cover, .la-revista-widget { display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; }
.la-revista-widget figure, .la-revista__cover figure { margin:0; }
.la-revista__cover img { max-width:170px; height:auto; display:block; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.la-revista__cta { margin-top:1rem; }
.la-revista__cta a { font-family:var(--la-sans-ui); text-transform:uppercase; letter-spacing:.05em; font-weight:700; font-size:.8rem; color:var(--la-rojo); text-decoration:none; }
.la-revista__cta a:hover { text-decoration:underline; }

/* Responsive portada */
@media (max-width:900px){
  .la-hero { grid-template-columns:1fr; gap:2rem; }
  .la-grid { grid-template-columns:1fr; }
  .la-hero__center h2 { font-size:2rem; }
}

/* =============================================================
   6. ZONAS DE PUBLICIDAD  (medidas exactas del media kit 2026)
   -------------------------------------------------------------
   Los tamaños NO se tocan (requisito legal). El contenedor solo
   centra y separa. El intercambio escritorio/móvil lo hace el
   shortcode [la_ad] con las clases .la-ad__d / .la-ad__m.
   ============================================================= */
.la-ad { display:block; margin:1.5rem auto; text-align:center; line-height:0; }
.la-ad img { display:inline-block; max-width:100%; height:auto; }

/* Placeholder cuando aún no hay creatividad cargada */
.la-ad__ph {
  display:inline-flex; align-items:center; justify-content:center;
  background:#efe9dc; border:1px dashed #c9c0ab; color:#9a8f77;
  font:600 .75rem/1.2 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em;
}

/* Intercambio escritorio / móvil */
.la-ad__m { display:none; }
@media (max-width:781px){
  .la-ad__d { display:none; }
  .la-ad__m { display:inline-block; }
}

/* Zona leaderboard en portada */
.la-ad-zone--leaderboard { padding:1rem 0 1.5rem; border-bottom:1px solid var(--la-linea); margin-bottom:1.5rem; }

/* Anuncio insertado dentro de la nota (cuadrado 300x250) */
.la-ad--incontent { margin:2rem auto; }

/* =============================================================
   7. POP UP DE PORTADA (1400x900)
   ============================================================= */
.la-popup-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.la-popup-overlay.is-open { display:flex; }
.la-popup { position:relative; max-width:1400px; width:100%; }
.la-popup img { width:100%; height:auto; display:block; }
.la-popup__close {
  position:absolute; top:-14px; right:-14px; width:36px; height:36px; border-radius:50%;
  background:#fff; color:#000; border:2px solid #000; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* =============================================================
   8. MÓVIL — tipografía compacta (el escritorio NO se toca)
   ============================================================= */
@media (max-width:600px){
  .entry-title, .entry-title a { font-size:1.55rem; line-height:1.2; }
  .ast-single-entry-banner .entry-title { font-size:1.7rem; }
  .la-hero__center h2 { font-size:1.7rem; }
  .la-card__title { font-size:1.25rem; }
  .ast-single-post .entry-content { font-size:1.05rem; line-height:1.6; }
  .ast-single-entry-banner { padding:1.75rem 1rem !important; }
}

/* =============================================================
   9. NOTA — banner vertical (240x600) sticky en la barra lateral
   ============================================================= */
.ast-single-post #secondary .widget,
.ast-single-post #secondary .la-ad { position:sticky; top:100px; }

/* =============================================================
   10. Ocultar botones de compartir en la PORTADA / listados
   ============================================================= */
.swp_social_panel, .social-warfare, .swp-content-locker,
.swp_social_panelSide { display:none !important; }

/* =============================================================
   11. SISTEMA TIPOGRÁFICO (3 fuentes, uniforme en todo el sitio)
   - Títulos:  serif display (Libre Caslon Display)
   - Lectura:  serif texto (Source Serif 4) en gris uniforme
   - Etiquetas / menús / kickers / meta:  Montserrat, mayúsculas
   ============================================================= */
.main-header-menu .menu-link, .ast-nav-menu .menu-link,
.la-kicker a, .cat-links a, .ast-terms-link a, .blog-category a,
.la-meta, .la-meta a, .entry-meta, .entry-meta a,
.posted-by a, .posted-on a, .la-section-title {
  font-family: var(--la-sans-ui) !important;
  font-weight: 700;
}
/* Texto de lectura: mismo gris en todo el sitio */
.entry-content, .la-dek,
.ast-article-post .entry-content, .ast-excerpt-container,
.ast-single-post .entry-content { color: var(--la-lectura); }
.ast-single-post .entry-content { font-weight: 400; }  /* el cuerpo NO en negrita, para leer cómodo */

/* =============================================================
   12. MENÚ HAMBURGUESA — panel angosto a la izquierda, SOBRIO
   (crema + texto negro, rojo solo en hover; sin bloque rojo)
   ============================================================= */
.main-header-bar-navigation.toggle-on .main-header-menu {
  max-width: 340px;
  margin-left: 0;
  background-color: var(--la-crema) !important;
  box-shadow: 2px 10px 30px rgba(0,0,0,.12);
}
.main-header-bar-navigation.toggle-on .main-header-menu .menu-item {
  background-color: var(--la-crema) !important;
  border-bottom: 1px solid var(--la-linea) !important;
}
.main-header-bar-navigation.toggle-on .main-header-menu .menu-link {
  background-color: transparent !important;
  color: var(--la-tinta) !important;
  padding-left: 22px !important;
}
.main-header-bar-navigation.toggle-on .main-header-menu .menu-link:hover {
  color: var(--la-rojo) !important;
}