/* ══════════════════════════════════════════════════════════════════════════
   EDICIONES DEL DESPOBLADO · HOJA DE ESTILO
   ══════════════════════════════════════════════════════════════════════════

   ▓▓▓  ZONA 1 — LO QUE USTED PUEDE CAMBIAR SIN RIESGO  ▓▓▓

   Todo lo de abajo son "variables": se definen una vez y el sitio entero
   las obedece. Cambie el color en un solo lugar y cambia en toda la página.

   Para probar: modifique un valor, guarde el archivo (Ctrl+S) y actualice
   el navegador (F5). Si algo se ve mal, vuelva al valor anterior.
   ══════════════════════════════════════════════════════════════════════════ */

:root{

  /* ─── COLORES ─────────────────────────────────────────────────────────────
     Estos tonos están tomados del propio logo: el ámbar de la nube, el
     negro del cerro y el crema del papel.
       Ámbar del logo   #d9a441     Negro del cerro  #1a1714
       Rojo salitre     #a8471a     Azul océano      #1e3a52
       Verde oliva      #4a6741     Vino             #6d1f1f
     ────────────────────────────────────────────────────────────────────── */

  --tinta:    #1a1714;   /* Texto principal                                 */
  --tinta-2:  #413a32;   /* Texto secundario, párrafos                      */
  --tinta-3:  #6d6357;   /* Texto tenue: fechas, notas al pie               */
  --papel:    #f5f1e8;   /* Fondo general de la página                      */
  --papel-2:  #eee7d9;   /* Fondo de las secciones alternadas               */
  --papel-3:  #e3d9c4;   /* Fondo de las portadas mientras cargan           */
  --salitre:  #a8471a;   /* COLOR PRINCIPAL: títulos, botones, subrayados   */
  --ocre:     #d9a441;   /* Ámbar del logo: avisos y marcadores pendientes  */
  --pacifico: #1e3a52;   /* Etiquetas de prensa                             */
  --linea:    rgba(26,23,20,.14);   /* Líneas divisorias                    */

  /* ─── EL PIE DE PÁGINA ────────────────────────────────────────────────────
     El fondo del pie usa el marrón cobrizo de las letras del logo.
     Para aclararlo o oscurecerlo, cambie --pie-fondo:
       #7a4a26  más claro, canela      #5d3a1e  el actual, café
       #462b16  más oscuro, casi tabaco                                      */
  --pie-fondo:  #5d3a1e;

  /* Los tres tonos de la silueta del logo sobre ese fondo. Todos son claros
     a propósito, para que la marca se lea con nitidez. */
  --pie-blanco: #ffffff;
  --pie-crema:  #f5f1e8;
  --pie-ocre:   #edd0a0;


  /* ─── TIPOGRAFÍAS ─────────────────────────────────────────────────────────
     --serif  se usa en títulos y nombres de libros.
     --sans   se usa en textos corridos, menús y etiquetas.

     Si cambia el nombre de una fuente aquí, cambie también el enlace de
     Google Fonts en la línea <link> del archivo index.html.

     Combinaciones que funcionan bien para una editorial académica:
       'Cormorant Garamond' + 'Inter'          (la actual: clásica y sobria)
       'Playfair Display'   + 'Source Sans 3'  (más editorial, más contraste)
       'Libre Baskerville'  + 'Lato'           (más tradicional, muy legible)
       'EB Garamond'        + 'Work Sans'      (más humanista)
     ────────────────────────────────────────────────────────────────────── */

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


  /* ─── EL LOGO ─────────────────────────────────────────────────────────────
     Qué imagen se usa en cada lugar se decide en js/datos.js.
     Aquí solo se controlan los tamaños.                                     */

  --marca-menu:    42px;   /* Isotipo del menú superior. Entre 34 y 52 px    */
  --logo-portada: 312px;   /* Logo completo en la portada. Entre 180 y 400px */
  --logo-pie:      88px;   /* Silueta del logo en el pie de página           */

  /* Posición horizontal del bloque logo + rótulo en la portada.
       auto   centrado (el valor actual)
       0px    pegado a la izquierda
       120px  corrido hacia la derecha                                       */
  --logo-portada-x: auto;

  /* Tamaño de los dos renglones que van bajo el logo.
     rotulo1 = EDITORIAL ACADÉMICA   ·   rotulo2 = peer review (cursiva)     */
  --rotulo1-tam: 1.05rem;
  --rotulo2-tam: 1.55rem;


  /* ─── TAMAÑOS Y PROPORCIONES ──────────────────────────────────────────── */

  --texto-base:    16.5px;  /* Texto normal. Suba a 17.5px si lo quiere más grande */
  --titulo-escala: 1;       /* Multiplica TODOS los títulos. 1.15 = 15% más grandes */
  --ancho-max:     1180px;  /* Ancho máximo del contenido */
  --ancho-menu:    1320px;  /* Ancho máximo de la cinta del menú superior */
  --aire-seccion:  76px;    /* Espacio vertical entre secciones */
  --radio:         4px;     /* Redondeo de esquinas. 0 = rectas, 12px = muy redondeadas */


  /* ─── PORTADAS DE LOS LIBROS ──────────────────────────────────────────── */

  --portada-min:   215px;   /* Ancho mínimo de cada portada en el catálogo.
                                 MÁS CHICO (170px) = más libros por fila
                                 MÁS GRANDE (260px) = menos libros, más grandes */
  --portada-gap:   28px;    /* Separación entre portadas */
  --portada-prop:  15/23;   /* Proporción ancho/alto. 15/23 es el formato del sello */

  /* Sombra de las portadas. Para quitarla del todo, escriba: none */
  --sombra: 0 1px 2px rgba(26,23,20,.05), 0 8px 28px -12px rgba(26,23,20,.22);
}

/* ══════════════════════════════════════════════════════════════════════════
   ▓▓▓  ZONA 2 — MOTOR DEL DISEÑO  ▓▓▓
   De aquí hacia abajo es el armado de la página. Se puede tocar, pero
   conviene hacer una copia del archivo antes, por si algo se descuadra.
   ══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:var(--texto-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; letter-spacing:.005em}
.wrap{max-width:var(--ancho-max); margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--salitre); margin:0 0 .7rem;
}
.lede{font-size:1.08rem; color:var(--tinta-2); max-width:62ch}

/* ─── NAVEGACIÓN ──────────────────────────────────────────────────────────
   La cinta se adapta sola: en pantallas anchas los once enlaces entran en
   una sola línea, con el tamaño y la separación ajustándose al ancho
   disponible. Por debajo de 1180px el menú se recoge tras el botón ☰.     */
header.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
}
.nav__in{
  max-width:var(--ancho-menu); margin:0 auto; padding:0 24px; min-height:74px;
  display:flex; align-items:center; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-width:0}
.brand__mark{
  width:var(--marca-menu); height:var(--marca-menu); flex:none;
  display:grid; place-items:center; overflow:hidden;
}
.brand__mark img{width:100%; height:100%; object-fit:contain}
/* Respaldo: si no hay imagen de isotipo, se muestra la inicial sobre un cuadro */
.brand__mark--letra{
  background:var(--tinta); color:var(--papel); border-radius:3px;
  font-family:var(--serif); font-size:1.28rem; font-weight:700; letter-spacing:-.04em;
}
.brand__txt{display:flex; flex-direction:column; line-height:1.08; min-width:0}
.brand__name{font-family:var(--serif); font-size:1.16rem; font-weight:700; white-space:nowrap}
.brand__sub{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); font-weight:600; white-space:nowrap}

.nav__links{display:flex; align-items:center; gap:clamp(11px, 1.15vw, 22px)}
.nav__links a{
  text-decoration:none; font-size:clamp(.73rem, .92vw, .84rem); font-weight:500; color:var(--tinta-2);
  padding:4px 0; border-bottom:1.5px solid transparent; transition:.18s; white-space:nowrap;
}
.nav__links a:hover{color:var(--salitre); border-color:var(--salitre)}

.nav__toggle{
  display:none; align-items:center; gap:9px; background:none; color:var(--tinta);
  border:1px solid var(--linea); border-radius:100px; padding:8px 15px 8px 13px;
  cursor:pointer; font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.nav__toggle:hover{border-color:var(--salitre); color:var(--salitre)}
.nav__toggleIco{
  width:17px; height:11px; flex:none; position:relative;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.nav__toggleIco::before{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 1px);
  border-top:2px solid currentColor;
}

@media(max-width:1180px){
  .nav__in{min-height:70px}
  .nav__links{
    position:absolute; top:100%; left:0; right:0; background:var(--papel);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 18px;
    border-bottom:1px solid var(--linea); display:none;
    max-height:calc(100vh - 70px); overflow-y:auto;
    box-shadow:0 18px 30px -22px rgba(26,23,20,.5);
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 2px; border-bottom:1px solid var(--linea); font-size:.92rem}
  .nav__links a:last-child{border-bottom:0}
  .nav__toggle{display:inline-flex}
}
@media(max-width:420px){
  .nav__in{padding:0 16px; gap:12px}
  .brand__sub{display:none}
  .brand__name{font-size:1.02rem}
  .nav__toggleTxt{display:none}
  .nav__toggle{padding:9px 11px}
  .nav__links{padding-left:16px; padding-right:16px}
}

/* ─── PORTADA ─── */
.hero{
  padding:70px 0 64px; border-bottom:1px solid var(--linea);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--ocre) 20%, transparent), transparent 58%),
    radial-gradient(90% 70% at 92% 12%, color-mix(in srgb, var(--salitre) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--papel-2), var(--papel));
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:repeating-linear-gradient(0deg, rgba(26,23,20,.05) 0 1px, transparent 1px 4px);
}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; position:relative; z-index:1}
/* Evita que la pila de portadas ensanche la página y corte el texto */
.hero__grid > *{min-width:0}
.hero__marca{
  width:var(--logo-portada); margin:0 0 30px var(--logo-portada-x);
  margin-right:var(--logo-portada-x); text-align:center;
}
.hero__logo{width:100%; height:auto; margin:0}
.hero__rotulo{margin:18px 0 0; display:flex; flex-direction:column; gap:6px; line-height:1.22}
.hero__rotulo1{
  font-family:var(--sans); font-size:var(--rotulo1-tam); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-2);
}
.hero__rotulo2{
  font-family:var(--serif); font-style:italic; font-size:var(--rotulo2-tam);
  font-weight:600; color:var(--salitre); letter-spacing:.01em;
}
.hero h1{font-size:calc(clamp(2.6rem,6vw,4.35rem) * var(--titulo-escala)); letter-spacing:-.02em; margin:0 0 .5rem}
.hero h1 em{font-style:italic; color:var(--salitre)}
.hero__rule{width:74px; height:3px; background:var(--salitre); margin:1.4rem 0}
.hero p{font-size:1.06rem; color:var(--tinta-2); max-width:62ch; margin:0 0 1.7rem}
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:12px 22px; border-radius:3px; font-size:.88rem; font-weight:600;
  border:1.5px solid var(--tinta); transition:.18s; cursor:pointer; font-family:var(--sans);
}
.btn--solid{background:var(--tinta); color:var(--papel)}
.btn--solid:hover{background:var(--salitre); border-color:var(--salitre)}
.btn--ghost{background:transparent; color:var(--tinta)}
.btn--ghost:hover{background:var(--tinta); color:var(--papel)}
.hero__stack{display:flex; justify-content:center; perspective:1400px; max-width:100%}
.hero__stack .cover{width:282px; box-shadow:0 20px 45px -18px rgba(26,23,20,.55)}
.hero__stack .cover:nth-child(1){transform:rotate(-3deg) translateX(-8px); z-index:2}
.hero__stack .cover:nth-child(2){transform:rotate(6deg) translateX(14px) scale(.92); z-index:1}
@media(max-width:900px){
  .hero{padding:44px 0 46px}
  .hero__grid{grid-template-columns:1fr; gap:40px}
  .hero__stack .cover{width:min(240px, 42vw)}
  .hero__marca{width:min(var(--logo-portada), 220px)}
}
/* En pantallas de teléfono las dos portadas se montan un poco una sobre
   otra: así caben enteras y siguen viéndose grandes. */
@media(max-width:520px){
  .hero__stack .cover{width:min(240px, 52vw)}
  .hero__stack .cover:nth-child(2){margin-left:-19vw}
}

/* ─── SECCIONES ─── */
section{padding:var(--aire-seccion) 0; border-bottom:1px solid var(--linea)}
section.alt{background:var(--papel-2)}
.sec__head{margin-bottom:38px; max-width:70ch}
.sec__head h2{font-size:calc(clamp(1.9rem,3.6vw,2.6rem) * var(--titulo-escala)); letter-spacing:-.015em}
.sec__head p{color:var(--tinta-3); margin:.7rem 0 0}

/* ─── PORTADAS DE LIBROS ─── */
.cover{
  position:relative; aspect-ratio:var(--portada-prop); border-radius:2px; overflow:hidden;
  background:var(--papel-3); box-shadow:var(--sombra); flex:none;
}
/* «contain» y no «cover»: así la portada se ve entera. Con «cover» el
   navegador recortaba los costados de casi todas las tapas (entre un 7 y
   un 14 % del ancho), que es lo que hacía que se vieran mal. */
.cover img{width:100%; height:100%; object-fit:contain; display:block}
.cover__fb{
  display:none; position:absolute; inset:0; padding:14% 11%;
  flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, var(--c1,#2c2620), var(--c2,#5b4a38));
  color:#f5f1e8;
}
.cover--fb .cover__fb{display:flex}
.cover__fbTop{font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; opacity:.72; font-weight:600}
.cover__fbTitle{font-family:var(--serif); font-size:1.18rem; line-height:1.16; font-weight:600}
.cover__fbAut{font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; opacity:.82; font-weight:600}

/* ─── NOVEDADES ─── */
.feat{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.feat__card{
  display:grid; grid-template-columns:182px 1fr; gap:24px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px; box-shadow:var(--sombra);
}
.feat__tag{
  display:inline-block; font-size:.63rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; background:var(--salitre);
  padding:4px 9px; border-radius:2px; margin-bottom:10px;
}
.feat__card h3{font-size:calc(1.42rem * var(--titulo-escala)); margin:0 0 4px}
.feat__aut{font-size:.83rem; color:var(--tinta-3); margin:0 0 12px; font-style:italic}
.feat__txt{font-size:.9rem; color:var(--tinta-2); margin:0 0 14px}
.feat__meta{font-size:.74rem; color:var(--tinta-3); letter-spacing:.03em; margin:0 0 14px}
@media(max-width:960px){.feat{grid-template-columns:1fr}}
@media(max-width:520px){.feat__card{grid-template-columns:126px 1fr; gap:18px; padding:20px}}

/* ─── CATÁLOGO ─── */
/* ─── CINTA DESLIZANTE DEL CATÁLOGO ───
   Va bajo el título «Catálogo». El texto entra por la derecha y sale por
   la izquierda. La letra es del mismo tamaño que la de los chips (.78rem)
   para que las dos filas se lean como un solo bloque. */
.cinta{
  overflow:hidden; margin:-8px 0 26px; padding:9px 0;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta__pista{
  display:flex; width:max-content;
  animation:cintaCorre 34s linear infinite;
}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta__txt{
  flex:none; padding-right:64px; white-space:nowrap;
  font-size:.78rem; font-weight:500; letter-spacing:.03em; color:var(--tinta-2);
}
.cinta__txt a{color:var(--salitre); font-weight:600; text-decoration:none}
.cinta__txt a:hover{text-decoration:underline}
/* Cuatro copias en la pista: correr un 25 % deja la siguiente justo donde
   estaba la anterior, así el ciclo no muestra ningún hueco. */
@keyframes cintaCorre{from{transform:translateX(0)} to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){
  .cinta__pista{animation:none}
  .cinta{-webkit-mask-image:none; mask-image:none}
  .cinta__txt:not(:first-child){display:none}
}

.filtros{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:32px}
.chip{
  font-size:.78rem; font-weight:500; padding:8px 15px; border-radius:100px;
  border:1px solid var(--linea); background:transparent; cursor:pointer;
  transition:.16s; font-family:var(--sans); color:var(--tinta-2);
}
.chip:hover{border-color:var(--tinta-3)}
.chip.on{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.buscador{
  margin-left:auto; padding:9px 15px; border:1px solid var(--linea); border-radius:100px;
  background:var(--papel); font-family:var(--sans); font-size:.82rem; min-width:220px; color:var(--tinta);
}
.buscador:focus{outline:2px solid var(--salitre); outline-offset:1px}
@media(max-width:640px){.buscador{margin-left:0; width:100%; min-width:0}}
.grid-libros{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--portada-min), 1fr));
  gap:calc(var(--portada-gap) + 6px) var(--portada-gap);
}
.libro{cursor:pointer; background:none; border:0; padding:0; text-align:left; font:inherit; color:inherit}
.libro .cover{transition:transform .25s, box-shadow .25s}
.libro:hover .cover{transform:translateY(-6px); box-shadow:0 18px 34px -16px rgba(26,23,20,.5)}
.libro h4{font-size:1.02rem; margin:14px 0 3px; line-height:1.22}
.libro .a{font-size:.78rem; color:var(--tinta-3); font-style:italic}
.libro .y{font-size:.7rem; color:var(--tinta-3); letter-spacing:.08em; margin-top:5px}
.pill-prov{
  display:inline-block; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:#8a6118; border:1px solid var(--ocre);
  border-radius:2px; padding:1px 5px; margin-left:6px; vertical-align:2px;
}

/* ─── FICHA EMERGENTE ─── */
.modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px}
.modal.on{display:flex}
.modal__bg{position:absolute; inset:0; background:rgba(26,23,20,.62); backdrop-filter:blur(3px)}
.modal__box{
  position:relative; background:var(--papel); border-radius:5px; max-width:940px; width:100%;
  max-height:88vh; overflow:auto; padding:38px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  display:grid; grid-template-columns:340px 1fr; gap:36px;
}
/* La portada de la ficha ya no se encajona en una proporción fija: se
   muestra con su forma real y a mayor tamaño, que es para lo que uno
   hace clic. El enlace de abajo abre el archivo original completo. */
#mCover .cover{aspect-ratio:auto; width:100%}
#mCover .cover img{height:auto}
#mCover .cover.cover--fb{aspect-ratio:var(--portada-prop)}
.modal__lupa{
  display:block; margin-top:10px; font-size:.78rem; letter-spacing:.04em;
  color:var(--tinta-3); text-decoration:none; text-align:center;
}
.modal__lupa:hover{color:var(--salitre); text-decoration:underline}
.modal__close{position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.7rem; cursor:pointer; color:var(--tinta-3); line-height:1}
.modal__box h3{font-size:calc(1.75rem * var(--titulo-escala)); margin:0 0 5px}
.modal__sub{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--tinta-2); margin:0 0 10px}
.modal__aut{font-size:.87rem; color:var(--salitre); font-weight:600; margin:0 0 18px}
.ficha{list-style:none; padding:0; margin:20px 0 0; font-size:.8rem; color:var(--tinta-3); border-top:1px solid var(--linea)}
.ficha li{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--linea)}
.ficha b{font-weight:600; color:var(--tinta-2); min-width:118px; flex:none}
@media(max-width:820px){.modal__box{grid-template-columns:260px 1fr; gap:28px}}
@media(max-width:640px){
  .modal__box{grid-template-columns:1fr; padding:26px}
  #mCover .cover{max-width:260px; margin:0 auto}
}

/* ─── NOTICIAS ─── */
.noticias{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.noti{
  background:var(--papel); border:1px solid var(--linea); border-left:3px solid var(--salitre);
  border-radius:3px; text-decoration:none; display:flex; flex-direction:column;
  transition:.18s; overflow:hidden;
}
.noti__cuerpo{padding:22px; display:flex; flex-direction:column; flex:1}
.noti:hover{transform:translateY(-3px); box-shadow:var(--sombra); border-left-color:var(--ocre)}

/* ─── FOTOGRAFÍA DE LA NOTA ───────────────────────────────────────────────
   Se define en el campo «foto» de cada noticia, en js/datos.js.
   Si la nota no trae foto, este bloque no existe y la tarjeta sale igual
   que antes. Para cambiar la altura del recorte, mueva el aspect-ratio.  */
.noti__foto{
  aspect-ratio:16/9; overflow:hidden; background:var(--papel-3);
  border-bottom:1px solid var(--linea); flex:none;
}
.noti__foto img{width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .45s}
/* Una portada o un afiche son más altos que anchos: recortarlos a 16/9 deja
   una franja sin sentido. Cuando sitio.js detecta que la imagen es vertical
   le pone esta clase y la muestra entera, sobre el color del papel. */
.noti__foto img.foto--alta{object-fit:contain; background:var(--papel-2); padding:5px}
.noti:hover .noti__foto img.foto--alta{transform:none}
.noti:hover .noti__foto img{transform:scale(1.04)}
.noti__top{display:flex; align-items:center; gap:9px; margin-bottom:11px; flex-wrap:wrap}
.fuente{
  font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; background:var(--tinta); color:var(--papel);
}
.fuente[data-red="x"]{background:#111}
.fuente[data-red="instagram"]{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.fuente[data-red="facebook"]{background:#1877f2}
.fuente[data-red="prensa"]{background:var(--pacifico)}
.fuente[data-red="academia"]{background:var(--salitre)}
.noti__fecha{font-size:.7rem; color:var(--tinta-3); letter-spacing:.05em}
.noti h4{font-size:1.06rem; margin:0 0 8px; line-height:1.28}
.noti h4 em{font-style:italic}
.noti p{font-size:.85rem; color:var(--tinta-2); margin:0 0 14px; flex:1}
.noti p em{font-style:italic}
.noti__pie{font-size:.72rem; color:var(--salitre); font-weight:600}

/* ─── ACTIVIDADES ─── */
.agenda{list-style:none; padding:0; margin:0; border-top:1px solid var(--linea)}
.ev{display:grid; grid-template-columns:112px 1fr; gap:26px; padding:24px 0; border-bottom:1px solid var(--linea); align-items:start}
/* Actividad con fotografía: fecha · foto · texto */
.ev--conFoto{grid-template-columns:112px 210px 1fr}
.ev__foto{
  aspect-ratio:4/3; overflow:hidden; border-radius:var(--radio);
  background:var(--papel-3); border:1px solid var(--linea);
}
.ev__foto img{
  width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .45s;
}
.ev:hover .ev__foto img{transform:scale(1.04)}
.ev__fecha{font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--salitre); line-height:1.1}
.ev__fecha small{display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3); font-weight:600; margin-top:3px}
.ev h4{font-size:1.12rem; margin:0 0 5px}
.ev h4 em{font-style:italic}
.ev p{font-size:.85rem; color:var(--tinta-2); margin:0}
.ev p em{font-style:italic}
.ev__lugar{font-size:.76rem; color:var(--tinta-3); margin-top:6px; display:block}
@media(max-width:900px){.ev--conFoto{grid-template-columns:112px 160px 1fr; gap:20px}}
@media(max-width:700px){
  .ev, .ev--conFoto{grid-template-columns:1fr; gap:10px}
  .ev__foto{aspect-ratio:16/9; max-width:none}
}

/* ─── PODCAST ─── */
.pod{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start}
.pod__list{display:flex; flex-direction:column; gap:14px}
.pod__item{
  display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); text-decoration:none; transition:.18s;
}
.pod__item:hover{border-color:var(--salitre); transform:translateX(3px)}
.pod__ico{width:34px; height:34px; flex:none; border-radius:50%; background:var(--tinta); display:grid; place-items:center; color:#fff; font-size:.95rem}
.pod__ico[data-casa="spotify"]{background:#1db954}
.pod__ico[data-casa="youtube"]{background:#e62117}
.pod__item h4{font-size:1rem; margin:0 0 3px; line-height:1.3}
.pod__item h4 em{font-style:italic}
.pod__item span{font-size:.76rem; color:var(--tinta-3)}
.pod__item span em{font-style:italic}
.pod__slot{border-style:dashed; background:color-mix(in srgb, var(--ocre) 10%, transparent)}
.pod__slot .pod__ico{background:var(--ocre)}
.embed{border-radius:12px; overflow:hidden; border:1px solid var(--linea); background:var(--papel)}
/* El enlace al programa va siempre bajo el reproductor: si el marco falla,
   el podcast se alcanza igual. */
.embed__pie{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  margin:12px 2px 0; font-size:.84rem; color:var(--tinta-3);
}
.embed__pie a{color:var(--salitre); font-weight:600; text-decoration:none; margin-left:auto}
.embed__pie a:hover{text-decoration:underline}
@media(max-width:520px){.embed__pie a{margin-left:0}}

/* Relevo cuando el reproductor no carga: en vez de un recuadro vacío, el
   aviso con el enlace directo al programa. */
.embed--relevo{display:grid; place-items:center; min-height:352px; padding:32px}
/* Con el aviso puesto, el pie sobra: diría dos veces lo mismo. */
.embed--relevo + .embed__pie{display:none}
.embed__aviso{text-align:center; max-width:36ch}
.embed__aviso h4{font-size:1.15rem; margin:0 0 10px}
.embed__aviso p{font-size:.86rem; color:var(--tinta-3); margin:0 0 18px; line-height:1.6}
@media(max-width:900px){.pod{grid-template-columns:1fr}}

/* ─── PROCESO EDITORIAL ─── */
.doble{
  margin-top:44px; padding:30px 34px; background:var(--tinta); color:var(--papel-2);
  border-radius:var(--radio); display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
}
.doble__n{font-family:var(--serif); font-size:3.4rem; font-weight:700; color:var(--ocre); line-height:1}
.doble h3{color:var(--papel); font-size:1.45rem; margin:0 0 7px}
.doble p{margin:0; font-size:.9rem; color:rgba(245,241,232,.78)}
@media(max-width:600px){.doble{grid-template-columns:1fr; padding:24px}}

/* ─── NOTA SOBRE INTELIGENCIA ARTIFICIAL ─── */
.notaIA{
  margin-top:26px; padding:26px 30px; background:var(--papel);
  border:1px solid var(--linea); border-left:4px solid var(--salitre);
  border-radius:var(--radio);
}
.notaIA h3{font-size:1.16rem; margin:0 0 9px; color:var(--tinta)}
.notaIA p{margin:0 0 10px; font-size:.9rem; line-height:1.62; color:var(--tinta-2)}
.notaIA p:last-child{margin-bottom:0}
@media(max-width:600px){.notaIA{padding:22px}}

/* ─── EDITORIAL Y CONTACTO ─── */
.dos{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
@media(max-width:900px){.dos{grid-template-columns:1fr; gap:38px}}
/* Los tres párrafos de «La editorial» llevan la misma tipografía y el mismo
   cuerpo. El del medio se distingue por la cursiva, el color del sello y el
   filete lateral, no por cambiar de letra. */
.quienes{font-family:var(--sans); font-size:1.02rem; line-height:1.72; color:var(--tinta-2)}
.cita{
  border-left:3px solid var(--salitre); padding:4px 0 4px 22px; margin:26px 0;
  font-style:italic; color:var(--salitre);
}
.datos{list-style:none; padding:0; margin:0; font-size:.88rem}
.datos li{padding:12px 0; border-bottom:1px solid var(--linea); display:flex; gap:14px}
.datos li.apilado{flex-direction:column; gap:6px}
.datos li.apilado b{min-width:0}
.datos b{min-width:96px; flex:none; font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); padding-top:2px}
.redes{display:flex; gap:11px; margin-top:24px; flex-wrap:wrap}
.red{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:10px 17px; border:1px solid var(--linea); border-radius:100px;
  font-size:.8rem; font-weight:600; transition:.18s; background:var(--papel);
}
.red:hover{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.nota-edit{
  margin-top:14px; font-size:.74rem; color:#8a6118;
  background:color-mix(in srgb, var(--ocre) 20%, transparent);
  border:1px dashed var(--ocre); border-radius:3px; padding:10px 14px;
}

/* Aviso que aparece solo si falta la carpeta img */
.aviso-img{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:300;
  max-width:660px; margin:0 auto; display:flex; gap:14px; align-items:flex-start;
  background:var(--tinta); color:var(--papel); border-left:4px solid var(--ocre);
  border-radius:var(--radio); padding:16px 18px; font-size:.82rem; line-height:1.5;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
.aviso-img code{
  font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.92em;
  background:rgba(245,241,232,.14); padding:1px 5px; border-radius:3px;
}
.aviso-img button{
  margin-left:auto; flex:none; background:none; border:0; color:var(--papel);
  font-size:1.4rem; line-height:1; cursor:pointer; padding:0 2px; opacity:.7;
}
.aviso-img button:hover{opacity:1}

/* ─── PIE DE PÁGINA ─── */
footer{background:var(--pie-fondo); color:rgba(245,241,232,.84); padding:56px 0 32px; font-size:.85rem}
footer h4{color:var(--papel); font-size:1.02rem; margin:0 0 14px}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; padding-bottom:34px; border-bottom:1px solid rgba(245,241,232,.2)}
.foot a{color:rgba(245,241,232,.84); text-decoration:none; display:block; padding:4px 0}
.foot a:hover{color:var(--ocre)}

/* Silueta del logo sobre el fondo cobrizo del pie.
   Se hace en tres capas superpuestas, sin tocar el archivo del logo:
     1. la imagen del isotipo, aclarada a blanco puro;
     2. un degradado claro que se multiplica sobre ella;
     3. una capa del color del pie que devuelve el fondo a su tono exacto.
   Los tres tonos claros salen de las variables --pie-* de la Zona 1.     */
.foot__logo{
  position:relative; display:block;
  width:var(--logo-pie); height:var(--logo-pie); margin-bottom:18px;
}
.foot__logo img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:contain;
  filter:brightness(0) invert(1);
}
.foot__logo::before,
.foot__logo::after{content:""; position:absolute; inset:0; pointer-events:none}
.foot__logo::before{
  z-index:1; mix-blend-mode:multiply;
  background:linear-gradient(180deg,
    var(--pie-blanco) 0%,  var(--pie-blanco) 34%,
    var(--pie-crema)  50%, var(--pie-crema)  70%,
    var(--pie-ocre)   88%, var(--pie-ocre)   100%);
}
.foot__logo::after{z-index:2; mix-blend-mode:lighten; background:var(--pie-fondo)}
/* Respaldo: si el navegador no sabe mezclar capas, queda la silueta blanca */
@supports not (mix-blend-mode:multiply){
  .foot__logo::before, .foot__logo::after{display:none}
}

/* Tres zonas: a la izquierda lo legal, al centro el contador de visitas y
   a la derecha el código QR. Las columnas laterales miden igual (1fr), así
   el contador queda centrado en la página aunque el QR sea más alto. */
.foot__bot{
  padding-top:26px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:26px; font-size:.76rem; color:rgba(245,241,232,.62);
}
.foot__legal{display:flex; flex-direction:column; gap:7px}

/* ─── CONTADOR DE VISITAS ───
   Cifras sueltas sobre plaquitas hundidas, como un contador de rodillos. */
.contador{justify-self:center; text-align:center}
.contador__num{display:inline-flex; gap:3px}
.contador__d{
  width:21px; height:28px; display:grid; place-items:center;
  border-radius:3px;
  /* El mismo cielo del logotipo: de ocre claro arriba a naranja abajo. */
  background:linear-gradient(180deg,#f4d189 0%,#e8b65e 40%,#d9a441 68%,#c1821f 100%);
  box-shadow:inset 0 1px 0 rgba(255,248,228,.65),
             inset 0 -1px 0 rgba(110,68,16,.45),
             0 1px 3px rgba(0,0,0,.32);
  font-family:var(--serif); font-size:1.16rem; font-weight:700; line-height:1;
  color:var(--tinta); font-variant-numeric:tabular-nums;
}
.contador__d--cero{color:rgba(26,23,20,.30)}
.contador__sep{width:6px}
.contador__rot{
  display:block; margin-top:9px; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(245,241,232,.62);
}

/* ─── CÓDIGO QR ─── */
.qr{justify-self:end; text-align:center; max-width:150px}
.qr__img{
  display:block; width:106px; height:106px; margin:0 auto;
  border-radius:6px; box-shadow:0 3px 12px rgba(0,0,0,.28);
}
.qr__rot{
  display:block; margin-top:8px; font-size:.62rem; line-height:1.45;
  letter-spacing:.09em; color:rgba(245,241,232,.5);
}
.qr__rot b{display:block; font-weight:600; letter-spacing:.05em; color:var(--ocre)}

@media(max-width:780px){
  .foot{grid-template-columns:1fr; gap:30px}
  .foot__bot{grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px}
  .foot__legal{align-items:center}
  .qr{justify-self:center}
}


/* ─── ETIQUETA DE ESTADO (ediciones en proceso) ─── */
.pill-estado{
  display:inline-block; margin-top:6px; font-size:.63rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:var(--pacifico); padding:3px 9px; border-radius:2px;
}

/* ─── NOTICIA DESTACADA ─── */
.noti--destacada{
  grid-column:1 / -1; border-left-width:4px; border-left-color:var(--ocre);
  background:var(--papel-2);
}
.noti--destacada h4{font-size:1.34rem; line-height:1.24; max-width:56ch}
.noti--destacada p{font-size:.93rem; max-width:70ch}
/* Si la nota destacada trae foto, se pone a la izquierda y el texto al lado */
.noti--destacada.noti--conFoto{flex-direction:row; align-items:stretch}
.noti--destacada.noti--conFoto .noti__foto{
  width:min(38%, 380px); aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--linea);
}
@media(max-width:760px){
  .noti--destacada.noti--conFoto{flex-direction:column}
  .noti--destacada.noti--conFoto .noti__foto{
    width:100%; aspect-ratio:16/9; border-right:0; border-bottom:1px solid var(--linea);
  }
}

/* ─── NUESTROS CLIENTES ───────────────────────────────────────────────────
   Cada cliente lleva su logotipo a la izquierda del nombre. Si la imagen no
   carga, queda un monograma con sus iniciales, del mismo tamaño.          */
.clientes{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0 34px;
}
.clientes li{
  display:flex; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--linea);
  font-size:1rem; color:var(--tinta-2);
}
.cliente__logo{
  position:relative; flex:none; width:48px; height:48px; border-radius:6px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--papel); border:1px solid var(--linea);
}
.cliente__ini{
  font-family:var(--serif); font-size:1.05rem; font-weight:700;
  color:var(--salitre); letter-spacing:.02em;
}
.cliente__logo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:4px; opacity:0;
}
/* La imagen solo tapa el monograma cuando de verdad se pudo cargar */
.cliente__logo--ok img{opacity:1; background:#fff}
.cliente__logo--ok .cliente__ini{opacity:0}
.cliente__nom{min-width:0}
.cliente__nom a{text-decoration:none; border-bottom:1px solid transparent; transition:.16s}
.cliente__nom a:hover{color:var(--salitre); border-bottom-color:var(--salitre)}
@media(max-width:520px){
  .clientes{grid-template-columns:1fr}
  .clientes li{font-size:.94rem; gap:13px}
  .cliente__logo{width:42px; height:42px}
}

/* ─── CONSEJO EDITORIAL ─── */
.consejo__tit{font-size:1.3rem; margin-bottom:16px}
.consejo{list-style:none; padding:0; margin:0; border-top:1px solid var(--linea)}
.consejo li{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 0; border-bottom:1px solid var(--linea);
}
.consejo b{font-size:.95rem; font-weight:600; color:var(--tinta)}
.consejo span{font-size:.8rem; color:var(--tinta-3)}
.consejo i{font-style:normal; color:var(--salitre)}
.consejo .orcid{
  display:inline-block; margin-left:6px; text-decoration:none; white-space:nowrap;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#6d6357; border:1px solid var(--linea); border-radius:100px; padding:1px 9px;
  transition:.16s; vertical-align:1px;
}
.consejo .orcid:hover{color:#fff; background:var(--salitre); border-color:var(--salitre)}
.consejo__pie{font-size:.74rem; color:var(--tinta-3); margin:12px 0 0}

/* ─── DIAGRAMA DE FLUJO DEL PROCESO EDITORIAL ─────────────────────────────
   Línea de tiempo vertical compacta: un riel a la izquierda que enhebra las
   cinco fases numeradas. Para separar más las fases, suba el padding de
   .fase; para juntarlas, bájelo.                                          */

.flujo{
  position:relative; max-width:860px; margin:0 auto;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra);
  padding:10px 34px 18px;
}
/* El riel que une los números */
.flujo::before{
  content:""; position:absolute; left:52px; top:46px; bottom:44px; width:2px;
  background:linear-gradient(var(--salitre), var(--ocre));
}

.fase{
  position:relative;
  display:grid; grid-template-columns:36px 1fr auto; gap:0 18px;
  padding:24px 0; align-items:center;
}
.fase + .fase{border-top:1px solid var(--linea)}

.fase__num{
  grid-column:1; grid-row:1;
  width:36px; height:36px; border-radius:50%;
  background:var(--papel); border:2px solid var(--salitre); color:var(--salitre);
  display:grid; place-items:center; z-index:1;
  font-family:var(--sans); font-size:.85rem; font-weight:700;
}
.fase__tit{
  grid-column:2; grid-row:1; margin:0;
  font-size:1.06rem; text-transform:uppercase; letter-spacing:.05em; line-height:1.2;
}
.fase__tit em{font-style:italic; text-transform:none; color:var(--salitre); letter-spacing:0}
.fase__plazo{
  grid-column:3; grid-row:1; justify-self:end;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8a6118; background:color-mix(in srgb, var(--ocre) 26%, transparent);
  padding:4px 11px; border-radius:100px; white-space:nowrap;
}
.fase__plazo--vacio{background:none; padding:0}
.fase__txt{
  grid-column:2 / -1; grid-row:2; margin:8px 0 0;
  font-size:.88rem; color:var(--tinta-2); line-height:1.55; max-width:62ch;
}
/* Las subtareas van en un recuadro aparte, en dos columnas y con aire, para
   que la fase 5 no se vea amontonada. Para volver a tres columnas, cambie
   «columns:2» por «columns:3». */
.fase__tareas{
  grid-column:2 / -1; grid-row:3; margin:14px 0 0;
  padding:16px 20px 16px 38px; list-style:none; counter-reset:t;
  background:color-mix(in srgb, var(--ocre) 9%, transparent);
  border-left:2px solid var(--ocre); border-radius:0 var(--radio) var(--radio) 0;
  columns:2; column-gap:34px; font-size:.85rem; color:var(--tinta-2);
}
.fase__tareas li{
  position:relative; margin:0 0 9px; break-inside:avoid; line-height:1.45;
  padding-left:2px;
}
.fase__tareas li:last-child{margin-bottom:0}
.fase__tareas li::before{
  counter-increment:t; content:counter(t);
  position:absolute; left:-22px; top:.15em;
  font-size:.66rem; font-weight:700; color:var(--salitre);
  width:15px; height:15px; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--salitre) 40%, transparent);
}
.fase__bifurca{
  grid-column:2 / -1; grid-row:4; margin:12px 0 0;
  font-size:.79rem; font-style:italic; color:var(--tinta-3);
}
.fase__bifurca::before{content:"↳ "; color:var(--salitre); font-style:normal}

@media(max-width:820px){.fase__tareas{columns:1}}
@media(max-width:640px){
  .flujo{padding:6px 18px 12px}
  .flujo::before{left:36px}
  .fase{grid-template-columns:30px 1fr; gap:0 12px; padding:20px 0}
  .fase__num{width:30px; height:30px; font-size:.76rem}
  .fase__tit{font-size:.97rem}
  .fase__plazo{grid-column:2; grid-row:2; justify-self:start; margin-top:7px}
  .fase__txt{grid-row:3}
  .fase__tareas{grid-row:4; columns:1; padding:14px 16px 14px 34px}
  .fase__bifurca{grid-row:5}
}

/* Leyenda destacada del plazo total */
/* Mismas medidas que el recuadro de dictámenes, para que los dos se lean
   como una pareja y no como dos piezas distintas. */
.leyenda{
  margin:30px 0 0; padding:30px 34px;
  background:var(--tinta); color:var(--papel-2); border-radius:var(--radio);
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
}
/* La cifra y el texto usan exactamente el mismo patrón que el recuadro de
   «2 · Dictámenes ciegos por título»: número en serif redonda color ocre,
   título en serif y texto en la tipografía de lectura. Antes la cifra iba
   en cursiva y el texto en serif, y los dos recuadros no casaban. */
.leyenda__cifra{
  font-family:var(--serif); font-weight:700;
  font-size:3.4rem; line-height:1; color:var(--ocre); white-space:nowrap;
}
.leyenda h3{color:var(--papel); font-size:1.45rem; margin:0 0 7px}
.leyenda__txt{margin:0; font-size:.9rem; color:rgba(245,241,232,.78)}
@media(max-width:600px){
  .leyenda{grid-template-columns:1fr; gap:12px; padding:22px}
  .leyenda__cifra{font-size:3rem}
}

/* ─── UBICA LA LIBRERÍA MÁS CERCANA ───────────────────────────────────────
   Recuadro del mapa en la sección de Contacto. El dibujo de Chile es una
   silueta esquemática hecha con coordenadas reales; al hacer clic se abre
   en grande, con los nombres y los enlaces de cada local.               */
.libs{
  margin-top:52px; padding:30px 34px; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center;
}
.libs__tit{font-size:1.3rem; margin:0 0 6px}
.libs__baj{font-size:.88rem; color:var(--tinta-3); margin:0 0 18px}
.libs__total{font-size:.9rem; color:var(--tinta); font-weight:600; margin:0 0 14px}
/* Las ciudades, de norte a sur, con la cuenta de locales cuando hay más
   de uno. Es el índice del mapa: sirve para ver de un vistazo si hay algo
   cerca, sin abrir la ventana grande. */
.libs__ciudades{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.libs__ciudades button{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--linea); border-radius:100px; padding:5px 13px;
  font-family:var(--sans); font-size:.82rem; color:var(--tinta-2);
  background:none; cursor:pointer; transition:.16s;
}
.libs__ciudades button:hover{border-color:var(--salitre); color:var(--salitre)}
.libs__cuenta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:100px;
  background:var(--salitre); color:var(--papel); font-size:.66rem; font-weight:700;
}

.libs__mapa{
  flex:none; background:none; border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 18px; cursor:zoom-in; transition:border-color .18s, box-shadow .18s;
}
.libs__mapa:hover{border-color:var(--salitre); box-shadow:0 10px 26px -16px rgba(26,23,20,.5)}
.libs__mapa .mapa{height:320px; width:auto; display:block}

.mapa__pais{fill:var(--papel-3); stroke:var(--tinta-3); stroke-width:1.6; stroke-linejoin:round}

/* Divisiones regionales: un trazo muy tenue, recortado contra la silueta
   del país para que no se salga por los bordes. */
.mapa__regiones line{stroke:var(--tinta-3); stroke-width:.7; opacity:.32}

/* Las balas de las ciudades. El halo es transparente y sólo agranda la
   zona sensible al clic, que si no sería de cinco píxeles. */
.mapa__bala{fill:var(--salitre); stroke:var(--papel); stroke-width:1.8}
.mapa__halo{fill:transparent}
/* Línea y punto que unen una bala corrida con su ubicación real */
.mapa__guia{stroke:var(--salitre); stroke-width:1.2}
.mapa__real{fill:var(--salitre); stroke:none}

/* En la ventana grande la bala es un enlace */
a.mapa__pin{cursor:pointer}
a.mapa__pin .mapa__bala,
a.mapa__pin .mapa__rotulo{transition:.15s}
a.mapa__pin:hover .mapa__bala{r:7}
a.mapa__pin:hover .mapa__rotulo{fill:var(--salitre)}
a.mapa__pin:focus-visible{outline:none}
a.mapa__pin:focus-visible .mapa__halo{fill:none; stroke:var(--salitre); stroke-width:1.5}
a.mapa__pin.on .mapa__bala{r:7.5; stroke-width:2.5}
a.mapa__pin.on .mapa__halo{fill:none; stroke:var(--salitre); stroke-width:1.5; opacity:.55}
a.mapa__pin.on .mapa__rotulo{fill:var(--salitre); font-weight:700}
.mapa__rotulo{fill:var(--tinta-2); font-size:12px; font-family:var(--sans); font-weight:600}
.mapa__cuenta{fill:var(--tinta-3); font-weight:500}

.modal--mapa .modal__box--mapa{grid-template-columns:auto 1fr; align-items:start; max-width:880px}
.mapaGrande{position:sticky; top:0}
.mapaGrande .mapa{height:min(66vh, 560px); width:auto; display:block; max-width:100%}
.libs__detalle{margin:18px 0 0; display:grid; gap:22px}
/* La ciudad elegida desde el mapa queda resaltada un momento */
.libs__grupo{scroll-margin-top:12px; border-radius:var(--radio); transition:background .4s}
.libs__grupo.on{background:color-mix(in srgb, var(--ocre) 16%, transparent);
                box-shadow:0 0 0 10px color-mix(in srgb, var(--ocre) 16%, transparent)}
/* Más específico que «.libs__detalle span», si no se estira a todo el ancho */
.libs__detalle .libs__cuantas{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:1px;
  min-width:16px; height:16px; padding:0 4px; border-radius:100px; margin-left:4px;
  background:var(--salitre); color:var(--papel); font-size:.6rem; letter-spacing:0;
}
.libs__grupo h4{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--salitre); margin:0 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--linea);
}
.libs__grupo ul{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.libs__grupo li{font-size:.9rem}
.libs__detalle b{display:block; color:var(--tinta)}
.libs__detalle span{display:block; font-size:.85rem; color:var(--tinta-3); margin-top:2px}
/* Más específico que «.libs__detalle span», si no los dos enlaces salen
   pegados uno al otro. */
.libs__detalle .libs__enlaces{display:flex; flex-wrap:wrap; gap:16px; margin-top:4px}
.libs__enlaces a{color:var(--salitre); text-decoration:none; font-weight:600; font-size:.83rem}
.libs__enlaces a:hover{text-decoration:underline}

@media(max-width:820px){
  .libs{grid-template-columns:1fr; gap:24px; justify-items:center; text-align:left}
  .libs__mapa .mapa{height:230px}
}
@media(max-width:640px){
  .modal--mapa .modal__box--mapa{grid-template-columns:1fr; justify-items:center}
  .mapaGrande .mapa{height:min(48vh, 380px)}
}


/* ═══ 13. CONTADOR JUNTO AL QR (sept. 2026) ═════════════════════════════════
   Este bloque va AL FINAL del archivo y manda sobre lo anterior.
   El contador deja el centro de la página y se arrima al QR, a su
   izquierda y a media altura. Es una plaquita pequeña: fondo café hundido,
   filete ocre y cifras sobre teclas vainilla, como un odómetro antiguo.
   Para agrandarlo o achicarlo, cambie sólo --cont-alto (entre 18 y 28 px). */

.foot__bot{grid-template-columns:1fr auto auto; gap:22px}

.contador{
  --cont-alto: 21px;
  justify-self:end; align-self:center;
  display:inline-flex; flex-direction:column; align-items:center;
  padding:9px 11px 8px;
  background:linear-gradient(180deg, rgba(40,22,9,.55), rgba(40,22,9,.30));
  border:1px solid rgba(237,208,160,.38);          /* filete ocre pálido */
  border-radius:7px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35), 0 1px 0 rgba(245,241,232,.06);
}
.contador__num{display:inline-flex; gap:2px}
.contador__d{
  width:calc(var(--cont-alto) * .72); height:var(--cont-alto);
  border-radius:2px;
  background:linear-gradient(180deg,#fbf1dc 0%,#f1dfb8 48%,#e6c98e 52%,#dcb877 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
             inset 0 -1px 0 rgba(120,76,24,.35),
             0 1px 2px rgba(0,0,0,.4);
  font-family:var(--serif); font-size:calc(var(--cont-alto) * .78); font-weight:700;
  color:#4a2c14;                                     /* café tostado */
}
.contador__d--cero{color:rgba(74,44,20,.28)}
.contador__sep{width:4px}
.contador__rot{
  margin-top:6px; font-family:var(--sans); font-size:.56rem; font-weight:600;
  letter-spacing:.22em; color:var(--pie-ocre);
}

@media(max-width:780px){
  .foot__bot{grid-template-columns:1fr}
  .contador{justify-self:center}
}