/* ══════════════════════════════════════════════════════════
   EN TLAJOMULCO · entlajomulco.com
   Periódico de parodia — Liberation Serif + Sans, autoalojadas
   ══════════════════════════════════════════════════════════ */

@font-face{ font-family:'Prensa'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fuentes/serif-400.ttf') format('truetype'); }
@font-face{ font-family:'Prensa'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fuentes/serif-700.ttf') format('truetype'); }
@font-face{ font-family:'Prensa'; font-weight:400; font-style:italic; font-display:swap;
  src:url('../fuentes/serif-400i.ttf') format('truetype'); }
@font-face{ font-family:'Rotulo'; font-weight:400; font-display:swap;
  src:url('../fuentes/sans-400.ttf') format('truetype'); }
@font-face{ font-family:'Rotulo'; font-weight:700; font-display:swap;
  src:url('../fuentes/sans-700.ttf') format('truetype'); }

:root{
  --papel:#F5F2EA;
  --papel-hondo:#EBE6DA;
  --tinta:#141209;
  --tinta-suave:#4A4436;
  --tenue:#7E7768;
  --oro:#8A7149;
  --oro-hondo:#544529;
  --oro-claro:#A88E5E;
  --luz:#D9A63C;
  --marmol:#DCD9D2;
  --linea:#CFC8B7;
  --linea-fuerte:#A99E85;

  --serif:'Prensa', 'Times New Roman', Times, serif;
  --sans:'Rotulo', Helvetica, Arial, sans-serif;

  --ancho:1200px;
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.58;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--luz); outline-offset:2px; }

.envoltura{
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}
.envoltura--angosta{ max-width:760px; }

.saltar{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--papel); padding:12px 20px; font-family:var(--sans); }
.saltar:focus{ left:12px; top:12px; }

/* ─────────── aviso de sátira ─────────── */
.aviso{
  background:var(--oro-hondo); color:#F3EBD8;
  border-bottom:2px solid var(--luz);
  position:sticky; top:0; z-index:90;
}
.aviso__fila{
  display:flex; align-items:center; gap:12px;
  padding-block:9px;
  font-family:var(--sans); font-size:12.5px; line-height:1.45;
  letter-spacing:.01em;
}
.aviso__sello{ font-size:16px; flex:none; color:var(--luz); }
.aviso b{ color:#fff; letter-spacing:.1em; }

/* ─────────── cabecera ─────────── */
.cabecera{
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(217,166,60,.20), transparent 62%),
    var(--oro-hondo);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cabecera__caja{
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(20px,3.4vw,36px);
  text-align:center;
}
/* El logotipo es una placa: fondo dorado sobre el campo oscuro de la cabecera. */
.cabecera__logo img{
  width:clamp(150px,20vw,220px); height:auto;
  border:1px solid var(--oro-claro);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.75);
}
.cabecera__lema{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(10px,1.25vw,12.5px); letter-spacing:.34em; text-transform:uppercase;
  color:#F6EFDD; margin-top:14px;
}

.listones{
  background:var(--oro); color:#F6EFDD;
  border-top:1px solid rgba(255,255,255,.16);
}
.listones__fila{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; padding-block:8px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
}
.listones__sep{ color:var(--luz); font-size:8px; }

/* ─────────── menú de secciones ─────────── */
.menu{
  background:var(--papel);
  border-bottom:1px solid var(--linea-fuerte);
  /* Se pega justo por debajo del aviso de sátira, cuya altura cambia
     según el ancho de la pantalla: la mide el JS y la deja aquí. */
  position:sticky; top:var(--aviso-alto, 42px); z-index:80;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.menu__caja{ display:flex; align-items:stretch; gap:0; position:relative; }
.menu__lista{
  list-style:none; display:flex; align-items:stretch; gap:0;
  flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.menu__lista::-webkit-scrollbar{ display:none; }
.menu__enlace{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-suave);
  padding:14px clamp(11px,1.5vw,17px);
  border-bottom:3px solid transparent;
  transition:color .25s var(--curva), background .25s var(--curva),
             border-color .25s var(--curva);
}
.menu__enlace b{
  font-weight:400; font-size:10.5px; letter-spacing:.04em;
  color:var(--tenue);
  background:var(--papel-hondo); border:1px solid var(--linea);
  border-radius:9px; padding:1px 6px; line-height:1.5;
  transition:background .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
}
.menu__enlace:hover{ color:var(--tinta); background:var(--papel-hondo); }
.menu__enlace--activo{
  color:var(--oro-hondo); border-bottom-color:var(--luz); background:var(--papel-hondo);
}
.menu__enlace--activo b{ background:var(--luz); color:#1A1608; border-color:var(--luz); }
.menu__flecha{
  flex:none; width:34px; border:0; cursor:pointer;
  background:linear-gradient(90deg,var(--papel) 55%,rgba(245,242,234,0));
  color:var(--oro-hondo); font-size:24px; line-height:1;
  font-family:var(--sans);
}
.menu__flecha--der{ background:linear-gradient(270deg,var(--papel) 55%,rgba(245,242,234,0)); }
.menu__flecha:hover{ color:var(--tinta); }

/* la barra de sátira ya ocupa el borde superior; el menú se pega debajo */
.aviso{ z-index:95; }

/* ─────────── fe de erratas ─────────── */
.erratas{ list-style:none; counter-reset:errata; }
.erratas li{
  counter-increment:errata;
  font-size:14.5px; line-height:1.6; color:var(--tinta-suave);
  padding-left:26px; position:relative;
}
.erratas li + li{ margin-top:13px; padding-top:13px; border-top:1px solid var(--linea); }
.erratas li::before{
  content:counter(errata); position:absolute; left:0; top:2px;
  font-family:var(--sans); font-weight:700; font-size:10px;
  color:var(--oro-hondo); border:1px solid var(--linea-fuerte);
  width:17px; height:17px; display:grid; place-items:center;
}
.erratas li + li::before{ top:15px; }

/* ─────────── cintillo ─────────── */
.cintillo{
  background:var(--tinta); color:var(--papel);
  display:flex; align-items:stretch; overflow:hidden;
  border-bottom:3px double var(--linea-fuerte);
}
.cintillo__etiqueta{
  flex:none; background:var(--luz); color:#1A1608;
  font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; padding:10px clamp(12px,2.4vw,22px);
}
.cintillo__pista{ display:flex; flex:1; min-width:0; align-items:center; overflow:hidden; }
.cintillo__tren{
  display:flex; align-items:center; gap:34px; flex:none; padding-right:34px;
  animation:desfile 52s linear infinite;
  font-family:var(--sans); font-size:13px;
}
.cintillo__tren span{ white-space:nowrap; }
.cintillo__tren i{ width:5px; height:5px; background:var(--luz); flex:none; transform:rotate(45deg); }
@keyframes desfile{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
.cintillo:hover .cintillo__tren{ animation-play-state:paused; }

/* ─────────── nota de tapa ─────────── */
.tapa{ padding-block:clamp(24px,3.4vw,40px); }
.principal{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3.4vw,42px); align-items:start;
  padding-bottom:clamp(24px,3vw,34px);
  border-bottom:3px double var(--linea-fuerte);
}
.principal__arte{ order:2; }
.antetitulo{
  font-family:var(--sans); font-weight:700;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro); margin-bottom:10px;
  display:flex; align-items:center; gap:9px;
}
.antetitulo::before{ content:''; width:22px; height:2px; background:var(--luz); flex:none; }
.titular{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,4.4vw,50px); line-height:1.07; letter-spacing:-.018em;
  text-wrap:balance;
}
.principal .entrada{
  font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  color:var(--tinta-suave); margin-top:16px;
  border-top:1px solid var(--linea); padding-top:16px;
}
.leer{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-hondo); border-bottom:2px solid var(--luz); padding-bottom:3px;
  transition:gap .3s var(--curva), color .3s var(--curva);
}
a:hover .leer, .leer:hover{ gap:14px; color:var(--tinta); }

.secundarias{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.6vw,32px);
  padding-top:clamp(22px,3vw,32px);
}
.secundaria{ padding-inline:0; }
.secundaria + .secundaria{ border-left:1px solid var(--linea); padding-left:clamp(18px,2.6vw,32px); }
.secundaria .titular{ font-size:clamp(20px,2.1vw,25px); }
.secundaria .entrada{ font-size:15.5px; color:var(--tinta-suave); margin-top:11px; }

/* ─────────── cuerpo de la portada ─────────── */
.cuerpo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(26px,4vw,54px);
  padding-block:clamp(28px,4vw,46px);
  border-top:3px double var(--linea-fuerte);
  margin-top:clamp(26px,3.4vw,40px);
}
.rubro{
  font-family:var(--sans); font-weight:700;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta); padding-bottom:8px; margin-bottom:22px;
  border-bottom:2px solid var(--tinta);
}
.parrilla__rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(20px,2.6vw,30px);
}
.ficha{ display:block; }
.ficha__arte{ margin-bottom:12px; overflow:hidden; }
.ficha__arte svg,
.ficha__arte img{ display:block; width:100%; height:auto; transition:transform .6s var(--curva); }
.ficha__arte img{ aspect-ratio:16/9; object-fit:cover; }
.ficha:hover .ficha__arte svg,
.ficha:hover .ficha__arte img{ transform:scale(1.04); }

/* fotografías generadas por el motor */
.principal__arte img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.nota__arte img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.nota__pie{
  font-family:var(--sans); font-size:11.5px; line-height:1.55;
  color:var(--tenue); margin-top:9px; padding-left:11px;
  border-left:2px solid var(--linea-fuerte);
}
.ficha .titular{ font-size:clamp(18px,1.7vw,21px); }
.ficha:hover .titular{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.ficha__pie{
  font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tenue); margin-top:10px;
}

/* ─────────── costado ─────────── */
.costado{ display:flex; flex-direction:column; gap:26px; }
.modulo{ border:1px solid var(--linea-fuerte); background:var(--papel-hondo); padding:18px 20px; }
.modulo__titulo{
  font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oro-hondo);
  padding-bottom:9px; margin-bottom:14px; border-bottom:1px solid var(--linea-fuerte);
}
.modulo--nota p{ font-size:15px; color:var(--tinta-suave); }
.modulo--nota p + p{ margin-top:11px; }

.clima__grados{
  font-family:var(--serif); font-weight:700; font-size:52px; line-height:1;
  letter-spacing:-.03em;
}
.clima__estado{ font-family:var(--sans); font-size:13px; margin-top:6px; color:var(--oro-hondo); }
.clima__detalle{ font-size:15px; font-style:italic; color:var(--tinta-suave); margin-top:12px; }
.clima__pronostico{
  font-family:var(--sans); font-size:12px; color:var(--tenue);
  margin-top:12px; padding-top:11px; border-top:1px solid var(--linea);
}

.secciones{ list-style:none; }
.secciones li + li{ border-top:1px solid var(--linea); }
.secciones button{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:13.5px; color:var(--tinta);
  padding:10px 0; display:flex; justify-content:space-between; gap:12px;
  transition:color .25s var(--curva), padding-left .25s var(--curva);
}
.secciones button:hover{ color:var(--oro); padding-left:6px; }
.secciones b{ color:var(--tenue); font-weight:400; }

/* ─────────── nota completa ─────────── */
.vista--oculta{ display:none; }
.volver{
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oro-hondo);
  padding:clamp(22px,3vw,34px) 0 0; display:inline-flex; gap:9px; align-items:center;
  transition:gap .3s var(--curva);
}
.volver:hover{ gap:15px; }
.nota{ padding-block:22px clamp(40px,6vw,80px); }
.nota__arte{ margin:22px 0 26px; }
.nota .titular{ font-size:clamp(30px,4.6vw,46px); }
.nota .entrada{
  font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--tinta-suave);
  margin-top:18px; padding-top:18px; border-top:1px solid var(--linea);
}
.nota__meta{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue); margin-top:16px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.nota__meta i{ width:4px; height:4px; background:var(--luz); transform:rotate(45deg); font-style:normal; }
.nota__texto p{ margin-top:19px; }
.nota__texto > p:first-child::first-letter{
  font-size:3.3em; line-height:.84; float:left; font-weight:700;
  margin:.06em .1em 0 0; color:var(--oro);
}
.nota__cita{
  margin:30px 0; padding:20px 24px;
  background:var(--papel-hondo); border-left:4px solid var(--luz);
}
.nota__cita p{
  font-size:clamp(19px,2vw,23px); line-height:1.4; font-style:italic; font-weight:700;
  text-wrap:balance;
}
.nota__cita cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue);
}
/* ─────────── recuadro «lo que sí es verdad» ─────────── */
.verdad{
  margin-top:clamp(28px,3.6vw,38px);
  padding:20px 22px;
  background:#EDF1EA;
  border:1px solid #B9C6AE;
  border-left:5px solid #4E7A38;
}
.verdad__titulo{
  font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#3B5E2A;
  margin-bottom:11px;
  display:flex; align-items:center; gap:9px;
}
.verdad__titulo::before{
  content:'✓'; width:18px; height:18px; flex:none;
  background:#4E7A38; color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:11px; letter-spacing:0;
}
.verdad__texto{ font-size:15.5px; line-height:1.62; color:#26301F; }
.verdad__fuente{
  display:inline-block; margin-top:13px;
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  color:#3B5E2A; border-bottom:1px solid #90A683; padding-bottom:2px;
  transition:color .25s var(--curva), border-color .25s var(--curva);
}
.verdad__fuente:hover{ color:#14120E; border-bottom-color:#14120E; }

/* ─────────── compartir ─────────── */
.compartir{
  margin-top:clamp(30px,4vw,42px);
  padding-top:22px;
  border-top:3px double var(--linea-fuerte);
}
.compartir__titulo{
  font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oro-hondo);
  margin-bottom:16px;
}
.compartir__fila{ display:flex; flex-wrap:wrap; gap:10px; }
.compartir__boton{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:13px;
  letter-spacing:.02em; line-height:1;
  padding:11px 16px;
  border:1px solid var(--linea-fuerte);
  background:var(--papel-hondo); color:var(--tinta);
  cursor:pointer;
  transition:background .28s var(--curva), color .28s var(--curva),
             border-color .28s var(--curva), transform .28s var(--curva);
}
.compartir__boton svg{ width:18px; height:18px; flex:none; fill:currentColor; }
.compartir__boton:hover{ transform:translateY(-2px); color:#fff; }
.compartir__boton--whatsapp:hover{ background:#1FA855; border-color:#1FA855; }
.compartir__boton--facebook:hover{ background:#1B5FC1; border-color:#1B5FC1; }
.compartir__boton--x:hover{ background:#14120E; border-color:#14120E; }
.compartir__boton--telegram:hover{ background:#2481B8; border-color:#2481B8; }
.compartir__boton--enlace:hover,
.compartir__boton--movil:hover{ background:var(--oro-hondo); border-color:var(--oro-hondo); }
.compartir__boton.copiado{
  background:var(--luz); border-color:var(--luz); color:#1A1608; transform:none;
}
.compartir__nota{
  font-family:var(--sans); font-size:11.5px; color:var(--tenue);
  margin-top:14px; letter-spacing:.02em;
}

.nota__sello{
  margin-top:34px; padding:16px 20px;
  border:2px dashed var(--linea-fuerte);
  font-family:var(--sans); font-size:12.5px; line-height:1.6; color:var(--tinta-suave);
}
.nota__sello b{ color:var(--oro-hondo); letter-spacing:.08em; }
.mas{ margin-top:clamp(34px,5vw,56px); }

/* ─────────── pie ─────────── */
.pie{
  background:var(--tinta); color:#CFC8B7;
  padding-block:clamp(34px,5vw,58px);
  margin-top:clamp(30px,4vw,50px);
}
.pie__rejilla{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);
}
.pie__marca{
  font-family:var(--sans); font-weight:700; font-size:20px;
  letter-spacing:.16em; color:var(--luz);
}
.pie__lema{
  font-family:var(--serif); font-style:italic; font-size:15px;
  color:#9A9384; margin-top:8px;
}
.pie__legal p{ font-size:14px; line-height:1.72; }
.pie__legal p + p{ margin-top:13px; }
.pie__legal b{ color:var(--papel); }
.pie__firma{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#7E7768; margin-top:32px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
}

/* ─────────── adaptable ─────────── */
@media (max-width:900px){
  .principal{ grid-template-columns:1fr; }
  .principal__arte{ order:0; }
  .cuerpo{ grid-template-columns:1fr; }
  .secundaria + .secundaria{ border-left:0; padding-left:0; border-top:1px solid var(--linea); padding-top:20px; }
  .pie__rejilla{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16.5px; }
  .aviso__fila{ align-items:flex-start; }
  .listones__ocultar, .listones__sep--ocultar{ display:none; }
  .compartir__fila{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compartir__boton{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .aviso{ position:static; }
  .cintillo,.costado,.volver,.leer,.compartir{ display:none !important; }
  body{ background:#fff; }
}