/*
Theme Name: La Dama Gris
Theme URI: https://factoriadigital.store/
Author: Factoría Digital
Author URI: https://factoriadigital.store/
Description: Tema editorial para Mexican Times. Identidad broadsheet clásica inspirada en la gran prensa neoyorquina: papel blanco, tinta negra, filetes finos, serif de autoridad y masthead en blackletter. "El poder tiene lectura."
Version: 1.1.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: la-dama-gris
*/

/* ==========================================================================
   1. TOKENS — La Dama Gris
   ========================================================================== */
:root{
  --papel:#ffffff;
  --tinta:#121212;
  --gris-dama:#5b5b5b;
  --gris-meta:#727272;
  --filete:#dedede;
  --filete-suave:#ebebeb;
  --banda:#f8f8f7;
  --azul-times:#326891;
  --serif:'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --franklin:'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --grafiti:'Sedgwick Ave Display', 'Permanent Marker', cursive;
  --ancho:1320px;
  --ancho-lectura:680px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:#e9e9e6;
  color:var(--tinta);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
}
/* Caja de página: TODO el diario vive dentro del cuadro */
#pagina{
  max-width:var(--ancho);
  margin:0 auto;
  background:var(--papel);
  border-left:1px solid #cfcfcc;
  border-right:1px solid #cfcfcc;
  box-shadow:0 0 24px rgba(0,0,0,.07);
  min-height:100vh;
  overflow:hidden;
}
@media(max-width:1340px){
  #pagina{border-left:0;border-right:0;box-shadow:none;}
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--tinta);text-decoration:none;}
a:hover{color:var(--azul-times);}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 34px;}
@media(max-width:700px){.contenedor{padding:0 18px;}}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:2px solid var(--azul-times);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

/* ==========================================================================
   2. BARRA SUPERIOR
   ========================================================================== */
.barra-superior{border-bottom:1px solid var(--filete);}
.barra-superior .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--franklin);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-dama);padding-top:7px;padding-bottom:7px;
}
.barra-superior a{color:var(--gris-dama);}
.barra-superior a:hover{color:var(--tinta);}
.barra-redes{display:flex;gap:14px;}

/* ==========================================================================
   3. MASTHEAD
   ========================================================================== */
.masthead{position:relative;padding:26px 20px 18px;text-align:center;}
.masthead-nombre{
  font-family:var(--grafiti);font-weight:400;
  font-size:clamp(40px,6.4vw,78px);line-height:1;letter-spacing:.02em;
  transform:rotate(-1.2deg);
}
.masthead-nombre a{color:var(--tinta);}
.masthead-nombre a:hover{color:var(--tinta);}
.masthead-bajada{
  font-family:var(--franklin);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gris-dama);margin-top:8px;
}
/* La cajita del lema — firma visual, como el "All the News That's Fit to Print" */
.caja-lema{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  border:1px solid var(--tinta);padding:8px 10px;max-width:150px;
  font-family:var(--serif);font-style:italic;font-size:12px;line-height:1.45;text-align:center;
}
.caja-edicion{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--franklin);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris-dama);text-align:right;line-height:1.7;max-width:170px;
}
@media(max-width:900px){
  .caja-lema,.caja-edicion{display:none;}
  .masthead{padding-top:18px;padding-bottom:12px;}
}

/* ==========================================================================
   4. NAVEGACIÓN
   ========================================================================== */
.navegacion{
  border-top:1px solid var(--tinta);
  border-bottom:2px solid var(--tinta);
  position:relative;
}
.navegacion::after{
  content:"";display:block;height:1px;background:var(--tinta);margin-top:1px;
}
.navegacion ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0;}
.navegacion li a{
  display:block;padding:10px 13px;
  font-family:var(--franklin);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.navegacion li a:hover{color:var(--azul-times);}
.boton-menu{display:none;}
@media(max-width:900px){
  .boton-menu{
    display:block;width:100%;background:none;border:0;cursor:pointer;
    font-family:var(--franklin);font-size:12px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;padding:11px;color:var(--tinta);
  }
  .navegacion ul{display:none;flex-direction:column;border-top:1px solid var(--filete);}
  .navegacion.abierta ul{display:flex;}
  .navegacion li a{text-align:center;border-bottom:1px solid var(--filete-suave);}
}

/* ==========================================================================
   5. ETIQUETAS Y CABECERAS DE SECCIÓN
   ========================================================================== */
.kicker{
  font-family:var(--franklin);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);
}
.kicker a{color:inherit;}
.cabecera-seccion{
  border-top:2px solid var(--tinta);
  padding-top:8px;margin-bottom:18px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.cabecera-seccion h2{
  font-family:var(--franklin);font-size:16px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.cabecera-seccion .bajada-seccion{
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gris-dama);
  flex:1;
}
.cabecera-seccion .ver-todo{
  font-family:var(--franklin);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--azul-times);white-space:nowrap;
}
.meta-nota{
  font-family:var(--franklin);font-size:11px;color:var(--gris-meta);
  letter-spacing:.03em;margin-top:6px;
}

/* ==========================================================================
   6. PORTADA — PAQUETE PRINCIPAL
   ========================================================================== */
.zona-portada{padding-top:34px;padding-bottom:8px;}
.paquete-principal{
  display:grid;grid-template-columns:2fr 1px 1fr;gap:30px;
  padding-bottom:28px;border-bottom:1px solid var(--filete);
}
/* Candado: ningún hijo de la rejilla puede salirse del cuadro */
.paquete-principal > *,
.rejilla-2 > *,
.rejilla-3 > *,
.rejilla-4 > *{min-width:0;}
.paquete-principal img,
.tarjeta img,
.nota-lider img{width:100%;}
.paquete-principal .separador-v{background:var(--filete);width:1px;}
.nota-lider{padding-right:6px;}
.nota-lider .kicker{color:var(--azul-times);}
.nota-lider h1,.nota-lider h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(27px,3.1vw,39px);line-height:1.16;margin:10px 0 12px;
  overflow-wrap:break-word;
}
.nota-lider .sumario{font-size:17px;line-height:1.55;color:var(--gris-dama);}
.nota-lider img{margin-top:16px;}
.nota-lider figcaption,.pie-foto{
  font-family:var(--franklin);font-size:11px;color:var(--gris-meta);margin-top:6px;
}
.lista-lateral{display:flex;flex-direction:column;}
.lista-lateral article{
  padding:14px 0;border-bottom:1px solid var(--filete-suave);
}
.lista-lateral article:first-child{padding-top:0;}
.lista-lateral article:last-child{border-bottom:0;}
.lista-lateral h3{
  font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.25;margin:5px 0 6px;
}
.lista-lateral .sumario{font-size:14px;color:var(--gris-dama);line-height:1.5;}
@media(max-width:900px){
  .paquete-principal{grid-template-columns:1fr;}
  .paquete-principal .separador-v{display:none;}
}

/* ==========================================================================
   7. BLOQUES DE SECCIÓN
   ========================================================================== */
.bloque{padding:26px 0 10px;}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.rejilla-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:900px){
  .rejilla-3,.rejilla-4{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:1fr;}
}
.tarjeta h3{
  font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.25;margin:9px 0 6px;
}
.tarjeta .sumario{font-size:14px;color:var(--gris-dama);line-height:1.5;}
.tarjeta + .tarjeta{margin-top:16px;padding-top:16px;border-top:1px solid var(--filete-suave);}
.lista-compacta article{
  padding:12px 0;border-bottom:1px solid var(--filete-suave);
}
.lista-compacta article:last-child{border-bottom:0;}
.lista-compacta h3{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.3;margin-top:4px;}

/* Análisis y Coyuntura — tratamiento de opinión: serif itálica */
.bloque-analisis{background:var(--banda);border-top:2px solid var(--tinta);padding:22px 0 26px;margin-top:16px;}
.bloque-analisis .cabecera-seccion{border-top:0;padding-top:0;}
.bloque-analisis .tarjeta h3,.bloque-analisis .lista-compacta h3{
  font-style:italic;font-weight:700;
}
.bloque-analisis .kicker{color:var(--azul-times);}

/* Congreso — bloques gemelos */
.bloque-congreso .rejilla-2{gap:40px;position:relative;}
.bloque-congreso .rejilla-2::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--filete);
}
@media(max-width:620px){.bloque-congreso .rejilla-2::before{display:none;}}

/* Wanabees — el radar del poder que viene */
.bloque-wanabees{
  border:2px solid var(--tinta);padding:20px;margin:26px 0;position:relative;
}
.bloque-wanabees::before{
  content:"";position:absolute;inset:4px;border:1px solid var(--tinta);pointer-events:none;
}
.bloque-wanabees .interior{position:relative;z-index:1;padding:6px;}
.bloque-wanabees .titulo-wanabees{
  font-family:var(--franklin);font-weight:800;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
.bloque-wanabees .lema-wanabees{
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gris-dama);
  text-align:center;margin:4px 0 16px;
}

/* ==========================================================================
   8. ZONAS DE ANUNCIO
   ========================================================================== */
.zona-anuncio{
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  text-align:center;padding:22px 16px;margin:22px 0;
}
.zona-anuncio .aviso{
  font-family:var(--franklin);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris-meta);margin-bottom:8px;
}
.zona-anuncio h4{
  font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.02em;margin-bottom:6px;
}
.zona-anuncio p{font-size:14px;font-style:italic;color:var(--gris-dama);max-width:560px;margin:0 auto 12px;}
.zona-anuncio .accion{
  display:inline-block;border:1px solid var(--tinta);padding:8px 22px;
  font-family:var(--franklin);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.zona-anuncio .accion:hover{background:var(--tinta);color:var(--papel);}

/* ==========================================================================
   9. NOTA INDIVIDUAL
   ========================================================================== */
.nota-cuerpo{max-width:var(--ancho-lectura);margin:0 auto;padding:34px 20px 40px;}
.nota-cuerpo .kicker{color:var(--azul-times);}
.nota-titulo{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,4vw,44px);line-height:1.12;margin:10px 0 14px;
}
.nota-bajada{font-size:19px;line-height:1.5;color:var(--gris-dama);margin-bottom:18px;}
.nota-firma{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:10px 0;margin-bottom:22px;
  font-family:var(--franklin);font-size:12px;color:var(--gris-dama);
}
.nota-firma .autor{font-weight:700;color:var(--tinta);text-transform:uppercase;letter-spacing:.05em;}
.nota-destacada{margin:0 0 22px;}
.contenido-nota{font-size:18px;line-height:1.75;}
.contenido-nota p{margin-bottom:22px;}
.contenido-nota h2,.contenido-nota h3{
  font-family:var(--serif);font-weight:700;line-height:1.25;margin:30px 0 12px;
}
.contenido-nota h2{font-size:26px;}
.contenido-nota h3{font-size:22px;}
.contenido-nota a{color:var(--azul-times);border-bottom:1px solid rgba(50,104,145,.35);}
.contenido-nota blockquote{
  border-left:2px solid var(--tinta);padding-left:18px;margin:26px 0;
  font-style:italic;font-size:20px;color:var(--gris-dama);
}
.contenido-nota img{margin:24px auto;}
.contenido-nota ul,.contenido-nota ol{margin:0 0 22px 24px;}
.etiquetas-nota{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;}
.etiquetas-nota a{
  border:1px solid var(--filete);padding:4px 12px;
  font-family:var(--franklin);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-dama);
}
.etiquetas-nota a:hover{border-color:var(--tinta);color:var(--tinta);}
.relacionadas{max-width:var(--ancho);margin:0 auto;padding:0 20px 34px;}

/* ==========================================================================
   10. ARCHIVO / CATEGORÍA / BÚSQUEDA
   ========================================================================== */
.cabecera-archivo{
  text-align:center;padding:30px 20px 22px;border-bottom:2px solid var(--tinta);margin-bottom:8px;
}
.cabecera-archivo .kicker{color:var(--azul-times);}
.cabecera-archivo h1{
  font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,40px);margin-top:6px;
}
.cabecera-archivo .descripcion{font-style:italic;color:var(--gris-dama);font-size:15px;margin-top:8px;}
.lista-archivo{max-width:900px;margin:0 auto;padding:10px 20px 30px;}
.lista-archivo article{
  display:grid;grid-template-columns:1fr 220px;gap:22px;
  padding:22px 0;border-bottom:1px solid var(--filete-suave);
}
.lista-archivo article.sin-imagen{grid-template-columns:1fr;}
.lista-archivo h2{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.22;margin:6px 0 8px;}
.lista-archivo .sumario{font-size:15px;color:var(--gris-dama);}
@media(max-width:620px){
  .lista-archivo article{grid-template-columns:1fr;}
  .lista-archivo article img{order:-1;}
}
.paginacion{
  display:flex;justify-content:center;gap:6px;padding:10px 0 34px;
  font-family:var(--franklin);font-size:13px;
}
.paginacion .page-numbers{
  border:1px solid var(--filete);padding:7px 13px;color:var(--tinta);
}
.paginacion .page-numbers.current{background:var(--tinta);color:var(--papel);border-color:var(--tinta);}
.paginacion .page-numbers:hover{border-color:var(--tinta);}

/* Páginas estáticas */
.pagina-cuerpo{max-width:var(--ancho-lectura);margin:0 auto;padding:34px 20px 44px;}
.pagina-cuerpo h1{
  font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,40px);
  border-bottom:2px solid var(--tinta);padding-bottom:14px;margin-bottom:22px;
}
.pagina-cuerpo .contenido-nota h2{border-top:1px solid var(--filete);padding-top:18px;}

/* Formulario de búsqueda */
.forma-busqueda{display:flex;max-width:520px;margin:0 auto;}
.forma-busqueda input[type=search]{
  flex:1;border:1px solid var(--tinta);padding:10px 14px;
  font-family:var(--serif);font-size:15px;
}
.forma-busqueda button{
  border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);
  font-family:var(--franklin);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;cursor:pointer;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.pie{border-top:2px solid var(--tinta);margin-top:30px;}
.pie::before{content:"";display:block;height:1px;background:var(--tinta);margin-top:1px;}
.pie-interior{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
  padding:32px 0 22px;
}
.pie .nombre-pie{font-family:var(--grafiti);font-size:30px;line-height:1;}
.pie .lema-pie{font-style:italic;font-size:13px;color:var(--gris-dama);margin-top:10px;max-width:340px;}
.pie h4{
  font-family:var(--franklin);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
}
.pie ul{list-style:none;}
.pie li{margin-bottom:8px;}
.pie a{font-family:var(--franklin);font-size:13px;color:var(--gris-dama);}
.pie a:hover{color:var(--tinta);}
.pie .contacto-pie{font-family:var(--franklin);font-size:13px;color:var(--gris-dama);line-height:1.8;}
.pie .contacto-pie a{color:var(--azul-times);}
.pie-legal{
  border-top:1px solid var(--filete);padding:14px 0;
  font-family:var(--franklin);font-size:11px;color:var(--gris-meta);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
}
.pie-legal a{color:var(--gris-dama);}
@media(max-width:820px){.pie-interior{grid-template-columns:1fr;gap:24px;}}

/* ==========================================================================
   12. EL CORRESPONSAL — chatbot flotante
   ========================================================================== */
.corresponsal-boton{
  position:fixed;right:20px;bottom:20px;z-index:900;
  background:var(--tinta);color:var(--papel);border:0;cursor:pointer;
  font-family:var(--franklin);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:13px 18px;box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.corresponsal-boton:hover{background:var(--azul-times);}
.corresponsal-panel{
  position:fixed;right:20px;bottom:74px;z-index:901;
  width:330px;max-width:calc(100vw - 40px);
  background:var(--papel);border:2px solid var(--tinta);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:none;flex-direction:column;
}
.corresponsal-panel.abierto{display:flex;}
.corresponsal-cabecera{
  background:var(--tinta);color:var(--papel);padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;
}
.corresponsal-cabecera strong{
  font-family:var(--grafiti);font-weight:400;font-size:18px;letter-spacing:.02em;
}
.corresponsal-cerrar{background:none;border:0;color:var(--papel);font-size:18px;cursor:pointer;line-height:1;}
.corresponsal-mensajes{
  padding:14px;height:250px;overflow-y:auto;
  font-family:var(--franklin);font-size:13px;line-height:1.5;
}
.corresponsal-mensajes .msj{margin-bottom:10px;padding:9px 12px;max-width:88%;}
.corresponsal-mensajes .msj.bot{background:var(--banda);border-left:2px solid var(--tinta);}
.corresponsal-mensajes .msj.usuario{background:var(--tinta);color:var(--papel);margin-left:auto;}
.corresponsal-mensajes .msj a{color:var(--azul-times);font-weight:600;}
.corresponsal-atajos{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;
}
.corresponsal-atajos button{
  border:1px solid var(--filete);background:var(--papel);cursor:pointer;
  font-family:var(--franklin);font-size:11px;padding:6px 10px;letter-spacing:.03em;
}
.corresponsal-atajos button:hover{border-color:var(--tinta);}