/* Málaga, la enciclopedia de Cirilo
   ---------------------------------------------------------------------------
   POR QUÉ ESTE DISEÑO Y NO OTRO. La primera versión iba en serif de arriba
   abajo —Palatino en el cuerpo, Playfair en los titulares— y el resultado se
   leía como una revista cultural: correcto, respetuoso y viejo. La corrección
   del autor fue exacta: «se ve académico, no dinámico y joven».

   De ahí las cuatro decisiones de este bloque:

   1. TODO EN SANS, Y EL DISPLAY PESADO Y APRETADO. Inter de 100 a 900 servido
      desde este dominio (47 KB, subset latino). Los titulares van en 800 con
      -0.04em de tracking: eso es lo que da el aire de producto y no de tesis.
      El serif solo sobrevive en el poema, que es literatura y ahí sí toca.
   2. COLOR DE VERDAD, Y UNO SOLO. Antes el fondo compartía tono con el acento
      y la página salía rosa. Ahora el papel es un gris casi blanco y todo el
      color se concentra en un acento naranja quemado, que además es el color
      de los enlaces: antes iban en azul y competían con él.
   3. RADIOS GRANDES Y NADA DE SOMBRAS BAJO LAS FOTOS. Una sombra bajo cada
      imagen es lo que más delata una página de 2015.
   4. LOS RÓTULOS, EN MINÚSCULA. Las versalitas con letter-spacing —«4.600
      PALABRAS · 181 IMÁGENES»— eran el otro tic que la envejecía.

   Para retocar el diseño basta con este bloque :root.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter var";
  src:url("fuentes/inter.woff2") format("woff2-variations"),
      url("fuentes/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair var";
  src:url("fuentes/playfair-display.woff2") format("woff2-variations"),
      url("fuentes/playfair-display.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}

:root{
  /* AZUL Y BLANCO: LOS COLORES DE MÁLAGA. No son la marca de ninguna
     institución —eso sí se evita, porque el sitio no es de nadie más que de
     Cirilo—, sino los de la provincia, que además dan una página limpia y
     fría que deja mandar a las fotografías.

     EL AZUL VA EN DOS NIVELES Y HACE FALTA QUE SEAN DOS. El celeste es
     demasiado claro para texto: sobre blanco no llega al contraste mínimo. Así
     que el celeste es relleno (`--acento-baja`) y el que escribe es un azul
     medio (`--acento`, ~5:1 sobre blanco). Si se sube la claridad del acento
     para «que sea más celeste», los enlaces dejan de leerse. */
  --tono: 240;                    /* azul: el único acento */
  --neutro: 250;                  /* el papel, con una pizca de frío */

  --fondo:      oklch(98.8% 0.004 var(--neutro));
  --papel:      oklch(100% 0 0);
  --tinta:      oklch(19% 0.012 var(--neutro));
  --tinta-baja: oklch(47% 0.016 var(--neutro));
  --linea:      oklch(91.5% 0.008 var(--neutro));
  --acento:     oklch(51% 0.145 var(--tono));
  --acento-alto:oklch(43% 0.155 var(--tono));
  --acento-baja:oklch(96% 0.028 var(--tono));
  --celeste:    oklch(78% 0.10 var(--tono));
  --mar:        oklch(51% 0.145 var(--tono));

  --texto: "Inter var",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titular: var(--texto);
  --literario: "Playfair var",Georgia,serif;

  --radio: 1rem;
  --radio-chico: .6rem;
  --sombra: 0 1px 2px oklch(19% 0.01 var(--neutro) / .04),
            0 10px 30px oklch(19% 0.01 var(--neutro) / .06);
  --ancho: 44rem;                 /* la prosa, para que se lea */
  --ancho-amplio: 74rem;          /* rejillas, mapas y portada */
  color-scheme: light dark;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --fondo:      oklch(15.5% 0.006 var(--neutro));
    --papel:      oklch(20% 0.008 var(--neutro));
    --tinta:      oklch(95% 0.006 var(--neutro));
    --tinta-baja: oklch(70% 0.010 var(--neutro));
    --linea:      oklch(29% 0.010 var(--neutro));
    --acento:     oklch(76% 0.13 var(--tono));
    --acento-alto:oklch(84% 0.12 var(--tono));
    --acento-baja:oklch(25% 0.05 var(--tono));
    --celeste:    oklch(78% 0.10 var(--tono));
    --sombra: 0 1px 2px #0008, 0 10px 30px #0006;
  }
}
:root[data-theme="dark"]{
  --fondo:      oklch(15.5% 0.008 var(--neutro));
  --papel:      oklch(20% 0.010 var(--neutro));
  --tinta:      oklch(95% 0.008 var(--neutro));
  --tinta-baja: oklch(70% 0.014 var(--neutro));
  --linea:      oklch(29% 0.014 var(--neutro));
  --acento:     oklch(76% 0.13 var(--tono));
  --acento-alto:oklch(84% 0.12 var(--tono));
  --acento-baja:oklch(25% 0.05 var(--tono));
  --celeste:    oklch(78% 0.10 var(--tono));
  --sombra: 0 1px 2px #0008, 0 10px 30px #0006;
}

*{box-sizing:border-box}
/* EL ATRIBUTO hidden TIENE QUE GANAR. La hoja del navegador lo aplica con un
   simple `[hidden]{display:none}`, asi que CUALQUIER `display` de autor lo
   anula: al visor de fotos se le puso `display:flex` y salia abierto —pantalla
   en negro y una X— nada mas entrar en un pueblo. Con esto, apagar algo con
   `el.hidden = true` funciona siempre. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:400 1.0125rem/1.65 var(--texto);
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-underline-offset:.18em;
  text-decoration-thickness:from-font}
main{max-width:var(--ancho);margin:0 auto;padding:2rem 1.25rem 4.5rem}
/* La portada y el mapa piden aire: una rejilla de tarjetas en 44rem sale a dos
   columnas apretadas, que es parte de lo que se veía apagado. La prosa de
   dentro se vuelve a estrechar. */
body.portada main,body.ancho main{max-width:var(--ancho-amplio)}
body.portada .sobre,body.portada .portada-mapa>p{max-width:var(--ancho)}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:10;
  display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center;
  padding:.6rem 1.25rem;background:oklch(from var(--fondo) l c h / .8);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.marca{text-decoration:none;color:inherit;display:flex;gap:.45rem;
  align-items:baseline}
.marca b{font-weight:800;font-size:1.1rem;letter-spacing:-.035em}
.marca span{font-size:.78rem;color:var(--tinta-baja);letter-spacing:-.005em}
/* EL MENU, EN HAMBURGUESA. Antes eran siete enlaces sueltos en la cabecera:
   en el movil se envolvian en dos filas y en el escritorio era una hilera de
   texto pequeño que competia con el titulo. Va en <details>, asi que abre y
   cierra sin JavaScript. */
.menu{margin-left:auto;position:relative}
.menu summary{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  padding:.42rem .7rem;border-radius:.7rem;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta);
  font-weight:550;font-size:.875rem;line-height:1;letter-spacing:-.01em;
  transition:border-color .14s,background .14s;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:hover{border-color:var(--acento);background:var(--acento-baja)}
.menu summary svg{width:1.15rem;height:1.15rem}
.menu summary .cerrar,.menu[open] summary .abrir{display:none}
.menu[open] summary .cerrar{display:block}
.menu[open] summary{border-color:var(--acento);background:var(--acento-baja)}

/* EL PANEL, EN REJILLA Y NO EN TIRA. Trece entradas en una columna obligaban
   a partir «Uno a uno, con foto» en tres líneas y desperdiciaban una pantalla
   ancha entera. En tres columnas se abarcan de un vistazo. El ancho se pide
   con `min()` para que en una ventana pequeña no se salga por el borde. */
/* UNA COLUMNA Y ANCHO FIJO. Con siete entradas cortas no hace falta rejilla,
   y sin rejilla no hay ancho que calcular: el desborde de antes vino de que
   este panel es `position:absolute` dentro de `.menu`, que es SOLO EL BOTON
   —unos 75 px—, asi que cualquier ancho intrinseco se resolvia contra eso y
   las columnas se salian de la pantalla. */
/* EL RECORTE DEL PANEL: `::details-content`, novedad de Chrome.
   Chrome 131+ envuelve lo que hay dentro de un `<details>` en una caja
   anonima `::details-content` que lleva CONTENCION DE PINTADO. El panel medía
   sus 16rem perfectamente —el CSS estaba bien y por eso no se encontraba el
   fallo mirando anchos— pero se PINTABA RECORTADO a la caja del `<details>`,
   que es solo el boton: unos 100 px. De ahi que todas las entradas salieran
   cortadas justo a la misma anchura, «Los 103 pu», «Buscar en».
   Se desactiva la contencion. Los navegadores que no conocen el
   pseudoelemento ignoran la regla y siguen como antes. */
/* SOLO CUANDO ESTA ABIERTO, y esto fue un fallo gordo: sin `[open]`, el
   `content-visibility:visible` anulaba tambien el `hidden` que Chrome pone
   cuando el <details> esta CERRADO. Resultado: el menu salia desplegado
   siempre y no habia forma de cerrarlo. La contencion solo estorba mientras
   el panel se ve; cerrado tiene que seguir oculto. */
.menu[open]::details-content{
  contain:none;
  overflow:visible;
  block-size:auto;
}

.menu nav{
  position:absolute;right:0;top:calc(100% + .55rem);z-index:30;
  display:flex;flex-direction:column;width:16rem;max-width:92vw;padding:.45rem;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);
  animation:asoma .16s ease-out;
}
@keyframes asoma{from{opacity:0;transform:translateY(-.35rem)}}
.menu nav a{
  text-decoration:none;color:var(--tinta);font-weight:500;font-size:.95rem;
  padding:.5rem .7rem;border-radius:.6rem;letter-spacing:-.012em;
  /* Que no parta: los destinos son cortos y una entrada de menú en dos líneas
     se lee como dos entradas. */
  white-space:nowrap;
  transition:background .12s,color .12s;
}
.menu nav a:hover{background:var(--acento-baja);color:var(--acento-alto)}
.menu nav .grupo{
  margin:.5rem .7rem .15rem;font-size:.75rem;font-weight:600;
  color:var(--tinta-baja);
}
.menu nav .grupo:first-child{margin-top:.2rem}
/* En el movil el panel va de lado a lado: un desplegable de 16rem pegado a la
   derecha deja una banda muerta y se pulsa peor. */
/* En el movil el panel va de lado a lado —un desplegable pegado a la derecha
   deja una banda muerta y se pulsa peor— y en UNA columna: en vertical, dos
   columnas de tres entradas obligan a ir en zigzag. */
@media (max-width:560px){
  .menu summary span{display:none}
  .menu summary{padding:.45rem .55rem}
  /* Del alto REAL de la cabecera, que lo mide el JS de la plantilla: con
     un 3.4rem a ojo, el panel quedaba solapado o flotando. */
  .menu nav{position:fixed;left:.7rem;right:.7rem;width:auto;max-width:none;
    max-height:calc(100dvh - var(--alto-cabecera,3.1rem) - 1.2rem);
    overflow-y:auto;
    top:calc(var(--alto-cabecera,3.1rem) + .4rem)}
  /* Con una sola columna los tres grupos van seguidos: hace falta aire entre
     ellos o se leen como una lista de trece otra vez. */
}
@media print{.menu{display:none}}

/* ---------- tipografia ---------- */
h1{font-weight:800;font-size:clamp(2.2rem,1.1rem + 3.4vw,3.6rem);line-height:1.03;
   letter-spacing:-.042em;margin:0 0 .65rem;text-wrap:balance}
h2{font-weight:750;font-size:clamp(1.45rem,1.1rem + 1.2vw,2rem);line-height:1.14;
   margin:2.6rem 0 .7rem;letter-spacing:-.032em;text-wrap:balance}
h2.parte{margin-top:3.2rem;padding-top:1.3rem;border-top:1px solid var(--linea);
   color:var(--acento)}
h3{font-weight:650;font-size:1.05rem;line-height:1.3;letter-spacing:-.018em;
   color:var(--tinta);margin:1.7rem 0 .5rem}
p{margin:0 0 1.02rem}
.entradilla{font-size:1.12rem;line-height:1.55;color:var(--tinta-baja);
   margin-bottom:1.7rem;text-wrap:pretty;letter-spacing:-.012em}
/* Los rótulos pequeños en versalitas con letter-spacing eran lo que más
   envejecía la página. Ahora es texto normal, pequeño y apagado. */
.datos{font-weight:400;font-size:.875rem;line-height:1.5;color:var(--tinta-baja);
   margin-bottom:1.4rem}
.tenue{color:var(--tinta-baja);font-size:.9rem}
.miga{font-size:.875rem;line-height:1;margin-bottom:.85rem;color:var(--tinta-baja)}
.miga a{color:var(--tinta-baja);text-decoration:none}
.miga a:hover{color:var(--acento)}
.miga span{margin:0 .4rem;opacity:.4}
.cuenta{font-weight:500;font-size:.78em;line-height:1;color:var(--acento-alto);
   background:var(--acento-baja);padding:.22em .55em;border-radius:.6em;
   vertical-align:middle}

/* ---------- el poema ---------- */
/* El único sitio donde sobrevive el serif, y aquí sí: es un poema. */
.verso{
  margin:0 0 1.9rem;padding:1.5rem 1.7rem;background:var(--acento-baja);
  border-left:3px solid var(--celeste);border-radius:var(--radio);
}
.verso p{font-family:var(--literario);font-style:italic;font-size:1.1rem;
   line-height:1.75;margin:0}
.verso cite{display:block;margin-top:.9rem;font-family:var(--texto);
   font-size:.84rem;font-style:normal;color:var(--tinta-baja)}

/* ---------- imagenes del articulo ---------- */
/* SIN SOMBRA. Una sombra bajo cada foto es lo que más delata una página vieja;
   con el radio y el fondo claro ya se separan del texto. */
.sola{margin:1.5rem 0}
.sola img{border-radius:var(--radio-chico);margin:0 auto}
.tira{
  display:grid;gap:.4rem;margin:1.5rem 0;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.tira figure{margin:0}
.tira img{border-radius:var(--radio-chico);width:100%;
   aspect-ratio:4/3;object-fit:cover}
figure{margin:0}

.fuente{
  margin:3.2rem 0 0;padding:1.1rem 1.3rem;border:1px solid var(--linea);
  border-radius:var(--radio);background:var(--papel);
}
.fuente ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--tinta-baja)}
.fuente p{margin:0 0 .4rem;font-size:.9rem;color:var(--tinta-baja)}

/* ---------- indices ---------- */
.comarca{margin:0 0 2.75rem}
.comarca h2{margin:0 0 .25rem}
.mas{font:500 .8rem/1 var(--texto);text-decoration:none;color:var(--acento)}
.rejilla{list-style:none;margin:.9rem 0 0;padding:0;
   display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.rejilla li{display:flex;justify-content:space-between;align-items:baseline;
   gap:.5rem;padding:.5rem .7rem;background:var(--papel);
   border:1px solid var(--linea);border-radius:var(--radio-chico)}
.rejilla a{text-decoration:none;color:var(--tinta);font-weight:600;font-size:.98rem}
.rejilla a:hover{color:var(--acento)}
.rejilla span{font:400 .72rem/1 var(--texto);color:var(--tinta-baja);
   white-space:nowrap}

.tarjetas{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.6rem;
   grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.tarjetas a{display:block;padding:.9rem 1rem;background:var(--papel);
   border:1px solid var(--linea);border-radius:var(--radio-chico);text-decoration:none;
   color:var(--tinta);transition:border-color .15s}
.tarjetas a:hover{border-color:var(--acento)}
.tarjetas b{display:block;margin-bottom:.2rem;text-wrap:balance}
.tarjetas span{font:400 .75rem/1.3 var(--texto);color:var(--tinta-baja)}

/* ---------- portada ---------- */
.portada{margin-bottom:3rem}
.mosaico{display:grid;gap:.35rem;grid-template-columns:repeat(4,1fr);margin:2rem 0}
.mosaico img{aspect-ratio:1;object-fit:cover;border-radius:.25rem;
   filter:sepia(.15) contrast(1.02)}
.cifras{list-style:none;display:flex;flex-wrap:wrap;gap:1.75rem;margin:0;padding:0}
.cifras li{display:flex;flex-direction:column;font:400 .78rem/1.3 var(--texto);
   color:var(--tinta-baja);letter-spacing:-.004em}
.cifras b{font:700 1.9rem/1 "Iowan Old Style",Georgia,serif;color:var(--acento);
   letter-spacing:-.02em;text-transform:none}
.puertas{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.puertas a{padding:1.2rem;background:var(--papel);border:1px solid var(--linea);
   border-radius:.6rem;text-decoration:none;color:var(--tinta);transition:.15s}
.puertas a:hover{border-color:var(--acento);transform:translateY(-2px)}
.puertas b{display:block;font-size:1.1rem;margin-bottom:.3rem}
.puertas span{font:400 .88rem/1.45 var(--texto);color:var(--tinta-baja)}

/* ---------- galeria ---------- */
.galeria{display:grid;gap:.75rem;
   grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));margin:1.5rem 0}
.galeria figure{background:var(--papel);border:1px solid var(--linea);
   border-radius:var(--radio-chico);overflow:hidden}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galeria .v img{aspect-ratio:3/4}
.galeria figcaption{padding:.5rem .65rem;font:400 .78rem/1.35 var(--texto);
   color:var(--tinta-baja)}
.paginas{display:flex;flex-wrap:wrap;gap:.3rem;margin:1.5rem 0}
.paginas a{min-width:2rem;text-align:center;padding:.35rem .5rem;
   font:500 .82rem/1 var(--texto);text-decoration:none;color:var(--tinta-baja);
   border:1px solid var(--linea);border-radius:var(--radio-chico);background:var(--papel)}
.paginas a:hover{border-color:var(--acento);color:var(--acento)}
.paginas a.aqui{background:var(--acento);border-color:var(--acento);color:var(--papel)}

/* ---------- buscador ---------- */
#q{width:100%;padding:.85rem 1rem;font:400 1.1rem/1.3 inherit;color:var(--tinta);
   background:var(--papel);border:2px solid var(--linea);border-radius:var(--radio-chico)}
#q:focus{outline:none;border-color:var(--acento)}
.resultados{list-style:none;margin:1.5rem 0 0;padding:0}
.resultados li{padding:.85rem 0;border-bottom:1px solid var(--linea)}
.resultados a{font-weight:600;text-decoration:none;color:var(--tinta);font-size:1.05rem}
.resultados a:hover{color:var(--acento)}
.resultados em{font:400 .75rem/1 var(--texto);font-style:normal;
   color:var(--tinta-baja);
   display:block;margin-bottom:.2rem}
.resultados p{margin:.3rem 0 0;font-size:.92rem;color:var(--tinta-baja)}
mark{background:var(--acento-baja);color:inherit;padding:0 .1em;border-radius:.15em}

/* ---------- pie ---------- */
.pie{max-width:var(--ancho);margin:0 auto;padding:2rem 1.25rem 3rem;
   border-top:1px solid var(--linea);font-size:.92rem;color:var(--tinta-baja)}
.pie b{color:var(--tinta)}

@media (max-width:34rem){
  .mosaico{grid-template-columns:repeat(3,1fr)}
  .cifras{gap:1.1rem}
  .cifras b{font-size:1.5rem}
  main{padding-top:1.75rem}
}

/* ---------- estado de la búsqueda semántica ---------- */
.estado{font:400 .85rem/1.4 var(--texto);color:var(--tinta-baja);
  margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}
.estado::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  background:var(--tinta-baja);opacity:.5;flex:none;
  animation:latido 1.4s ease-in-out infinite}
.estado.listo::before{background:var(--acento);opacity:1;animation:none}
@keyframes latido{0%,100%{opacity:.25}50%{opacity:.8}}
.resultados li{position:relative;padding-right:3.5rem}
.sim{position:absolute;top:.9rem;right:0;font:500 .72rem/1 var(--texto);
  color:var(--tinta-baja);background:var(--acento-baja);padding:.25em .45em;
  border-radius:.25em}

/* ---------- informe de cobertura ---------- */
.cobertura{list-style:none;margin:.9rem 0 0;padding:0}
.cobertura li{display:grid;grid-template-columns:11rem 1fr 4.5rem 8rem;gap:.6rem;
  align-items:center;padding:.3rem 0;border-bottom:1px solid var(--linea)}
.cobertura a{text-decoration:none;color:var(--tinta);font-size:.95rem}
.cobertura a:hover{color:var(--acento)}
.barra{display:block;height:.6rem;background:var(--acento-baja);border-radius:var(--radio-chico)}
.barra i{display:block;height:100%;background:var(--acento);border-radius:var(--radio-chico)}
.barra i.flaca{background:var(--mar)}
.cobertura b{font:500 .8rem/1 var(--texto);text-align:right}
.cobertura em{font:400 .72rem/1 var(--texto);font-style:normal;
  color:var(--tinta-baja)}
@media (max-width:38rem){
  .cobertura li{grid-template-columns:1fr 3.5rem;grid-template-areas:"n c" "b b"}
  .cobertura a{grid-area:n} .cobertura b{grid-area:c} .cobertura .barra{grid-area:b}
  .cobertura em{display:none}
}

/* ---------- el agente ---------- */
#q[rows]{width:100%;padding:.85rem 1rem;font:400 1.05rem/1.5 inherit;
  color:var(--tinta);background:var(--papel);border:2px solid var(--linea);
  border-radius:var(--radio-chico);resize:vertical}
#q[rows]:focus{outline:none;border-color:var(--acento)}
.fila{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:.75rem 0 2rem}
.fila .estado{margin:0}
button{font:600 .95rem/1 var(--texto);padding:.7rem 1.4rem;
  background:var(--acento);color:var(--papel);border:0;border-radius:var(--radio-chico);
  cursor:pointer}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{background:var(--linea);color:var(--tinta-baja);cursor:default}
.respuesta{font-size:1.08rem;line-height:1.72}
.respuesta p{margin:0 0 1rem}
.cita{display:inline-block;min-width:1.15em;text-align:center;
  font:600 .7em/1.5 var(--texto);vertical-align:.35em;
  background:var(--acento-baja);color:var(--acento);text-decoration:none;
  border-radius:.25em;padding:0 .25em;margin:0 .1em}
.cita:hover{background:var(--acento);color:var(--papel)}
.aviso{padding:.8rem 1rem;background:var(--acento-baja);border-radius:var(--radio-chico);
  border-left:3px solid var(--acento)}
#fuentes li b{display:block;margin:.15rem 0}
#fuentes li:target{background:var(--acento-baja);border-radius:var(--radio-chico)}
code{font:400 .9em ui-monospace,monospace;background:var(--acento-baja);
  padding:.15em .4em;border-radius:.25em}
.ir{display:inline-block;margin-top:.35rem;font:500 .78rem/1 var(--texto);
  text-decoration:none;color:var(--acento)}
.ir:hover{text-decoration:underline}
#fuentes li b a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea)}
#fuentes li b a:hover{color:var(--acento);border-color:var(--acento)}
select{font:400 .9rem/1 var(--texto);padding:.45rem .6rem;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);border-radius:.35rem}
select:focus{outline:none;border-color:var(--acento)}
.galeria figcaption{display:flex;flex-direction:column;gap:.2rem;position:relative}
.galeria figcaption .sim{position:static;align-self:flex-start}
.galeria .ir{margin:0}
.enfoque{font:400 .9rem/1.5 var(--texto);color:var(--tinta-baja);
  margin:0 0 1.25rem;padding:.5rem .75rem;background:var(--acento-baja);
  border-radius:.35rem}
.enfoque:empty{display:none}
.enfoque a{color:var(--acento);text-decoration:none}
.enfoque a:hover{text-decoration:underline}
.externo{font:500 .72rem/1 var(--texto);color:var(--mar);
  background:oklch(from var(--mar) 96% 0.04 h);padding:.2em .45em;
  border-radius:.25em;white-space:nowrap}
:root:not([data-theme="light"]){@media (prefers-color-scheme: dark){
  .externo{background:oklch(from var(--mar) 28% 0.05 h)}}}
:root[data-theme="dark"] .externo{background:oklch(from var(--mar) 28% 0.05 h)}
ol.resultados{padding-left:1.4rem}
ol.resultados li{border-bottom:1px solid var(--linea);padding:.6rem 0}
.desfase{font:500 .72rem/1 var(--texto);color:var(--acento);
  background:var(--acento-baja);padding:.2em .45em;border-radius:.25em;
  white-space:nowrap}
.alerta{padding:.7rem .9rem;margin:0 0 1.1rem;border-radius:var(--radio-chico);
  border-left:3px solid oklch(58% 0.17 25);background:oklch(96% 0.03 25);
  font:400 .95rem/1.5 var(--texto)}
.alerta code{background:oklch(92% 0.05 25);color:oklch(38% 0.14 25)}
:root:not([data-theme="light"]){@media (prefers-color-scheme: dark){
  .alerta{background:oklch(26% 0.05 25)}
  .alerta code{background:oklch(33% 0.07 25);color:oklch(85% 0.09 25)}}}
:root[data-theme="dark"] .alerta{background:oklch(26% 0.05 25)}
:root[data-theme="dark"] .alerta code{background:oklch(33% 0.07 25);color:oklch(85% 0.09 25)}

/* ---------- Markdown de la respuesta del agente ---------- */
.respuesta strong{font-weight:700;color:var(--tinta)}
.respuesta em{font-style:italic}
.respuesta code{font:400 .9em ui-monospace,monospace}
.respuesta ul{margin:0 0 1rem;padding-left:1.4rem}
.respuesta li{margin:0 0 .35rem;line-height:1.6}

/* =========================================================================
   MÓVIL
   =========================================================================
   Auditado a 360 px, que es el ancho de un iPhone SE o un Android básico:
   con el padding lateral quedan 320 px de contenido. Las rejillas ya
   colapsaban bien a una columna; lo que fallaba era esto.
   ========================================================================= */

/* 1 · PALABRAS LARGAS. Los nombres de PDF del original son kilométricos
   —«Antequera 1. Historia. aspectos. Torcal..pdf»— y los títulos de sección
   también. Sin esto, uno solo empuja la página entera a lo ancho. */
body{overflow-wrap:break-word}
.fuente li,.resultados p,.miga,code{word-break:break-word}

/* 2 · ZONAS TÁCTILES. Medido: los enlaces de navegación quedaban en 27 px de
   alto y los de paginación en 25. El mínimo cómodo con el dedo son 44. */
.cabecera nav a{padding:.6rem 0;min-height:2.75rem;display:flex;align-items:center}
.paginas a{min-width:2.75rem;min-height:2.75rem;display:flex;align-items:center;
  justify-content:center;padding:.35rem .5rem}
button{min-height:2.75rem}
.ir{display:inline-flex;align-items:center;padding:.5rem 0;min-height:2.75rem}

/* 3 · EL SELECTOR DE LA BÚSQUEDA DE FOTOS. Por debajo de 16 px, iOS hace zoom
   automático al tocarlo y descoloca la página; el usuario tiene que volver a
   alejar a mano. Los campos de texto ya estaban por encima. */
select,input[type="search"],textarea{font-size:max(1rem,16px)}

@media (max-width:46rem){
  /* 4 · LA CABECERA, UNA SOLA FILA Y ARRIBA.
     Este bloque venía de cuando la cabecera eran seis enlaces sueltos: los
     ponía en columna y le quitaba el sticky, porque en tres líneas se comía
     un tercio de la pantalla. Con el menú en hamburguesa eso ya no hace
     falta, y sobraba: la columna empujaba el botón del menú a una segunda
     fila —o sea, más abajo de donde llega el pulgar— y el `position:static`
     dejaba el móvil sin cabecera fija, así que tampoco había forma de volver
     al menú sin subir hasta arriba.

     Ahora es una fila, pegada arriba: la marca a la izquierda y el botón a
     la derecha, que es donde se pulsa con una mano. La marca se recorta si no
     cabe; el botón nunca se encoge. */
  .cabecera{
    position:sticky;top:0;flex-wrap:nowrap;align-items:center;
    gap:.6rem;padding:.5rem 1rem;
  }
  .marca{min-width:0;overflow:hidden}
  .marca b{font-size:1.05rem;white-space:nowrap}
  .marca span{display:none}
  .menu{flex:0 0 auto}

  main{padding:1.5rem 1.25rem 3rem}

  /* 5 · LA PUNTUACIÓN DEJA DE FLOTAR SOBRE EL TEXTO. Estaba absoluta a la
     derecha con 3,5 rem de reserva: en 320 px eso es un tercio del ancho. */
  .resultados li{padding-right:0}
  .sim{position:static;display:inline-block;margin-top:.35rem}

  .galeria{grid-template-columns:1fr;gap:1rem}
  .tira{grid-template-columns:repeat(2,1fr);gap:.4rem}
  .fila{gap:.6rem}
  .verso{padding:1.1rem 1.2rem}
  .verso p{font-size:1.05rem}
  .fuente{padding:.9rem 1rem}
  h2.parte{margin-top:2.5rem}
}

/* 6 · Nada de animaciones para quien las ha desactivado en su sistema. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* NOTA PARA QUIEN TOQUE EL DISEÑO: de aquí abajo es el mapa, la lista de
   «Qué ver» y las rutas. Todo usa las variables de :root —oklch derivado de
   --tono— porque con color a pelo el modo oscuro se rompe. Los colores de los
   TIPOS del mapa (religioso, natural, civil…) no están aquí: viven en
   web/mapa-comun.js, porque los usan a la vez el punto del mapa y su leyenda,
   y duplicarlos garantizaba que un día no coincidieran. */

/* 7 · El mapa. Alto fijo en vh porque el mapa no puede crecer con su
   contenido: sin alto explicito Leaflet se dibuja en una caja de 0 px. */
#mapa{height:min(70vh,640px);margin:1rem 0;border:1px solid var(--linea);
  border-radius:var(--radio-chico);background:var(--acento-baja)}
.tipos{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:.6rem 0}
.tipos .tipo{display:flex;align-items:center;gap:.35rem;font-size:.92rem;
  cursor:pointer}
.tipos .tipo i{width:.8rem;height:.8rem;border-radius:50%;display:inline-block;
  border:1px solid var(--linea)}
.leaflet-popup-content .cita{font-style:italic;margin:.5rem 0;font-size:.9rem}
/* NADA DE min-width: era lo que hacia que el globo ocupase todo el ancho en un
   movil. El ancho lo pone Leaflet con `maxWidth`, calculado sobre la pantalla
   en MAPA.opcionesGlobo(). Aqui solo se asegura que el texto largo parta y no
   empuje la caja. */
.leaflet-popup-content{width:auto!important;overflow-wrap:break-word}
.leaflet-popup-content p{margin:.4rem 0}
/* La cruz de cerrar, del tamano de un dedo: la de Leaflet son 14 px y con el
   globo pegado al borde del mapa no se acertaba. */
.leaflet-popup-close-button{width:2rem!important;height:2rem!important;
  font-size:1.4rem!important;line-height:1.4rem!important;padding:0!important;
  display:flex!important;align-items:center;justify-content:center}

/* =========================================================================
   SCROLL HORIZONTAL EN MÓVIL
   =========================================================================
   Lo reportado: la página se desplazaba a lo ancho por culpa del menú.

   LA CAUSA es el mínimo automático de flexbox. `.cabecera nav` es un elemento
   flex y a la vez un contenedor flex con `nowrap`: su `min-width` vale `auto`,
   que resuelve a su tamaño de contenido — siete enlaces en mayúsculas suman
   unos 690 px—, así que se NIEGA a encoger a los 390 px del móvil y empuja la
   página. El `overflow-x:auto` no llegaba a actuar porque la caja nunca era
   más estrecha que su contenido.

   `min-width:0` es lo que le da permiso a encoger, y entonces sí se desplaza
   por dentro.
   ========================================================================= */
/* ACOTADA A HIJO DIRECTO, Y ESTO ERA EL FALLO DEL MENU.
   Esta regla se escribio para un menu HORIZONTAL en la cabecera que ya no
   existe. Al desaparecer aquel, el unico <nav> dentro de `.cabecera` paso a
   ser EL PANEL DESPLEGABLE — y `max-width:100%` significa el 100% de su
   contenedor, que es el boton: unos 83 px. El panel pedia 16rem, esta regla lo
   capaba a 83, y como tiene la misma especificidad que `.menu nav` pero va
   despues, ganaba. De ahi que todas las entradas salieran cortadas y que
   ensanchar el panel no sirviera de nada: se ensanchaba algo que luego se
   capaba igual.
   Con `>` solo alcanza a un nav hijo directo de la cabecera, que hoy no hay
   ninguno: queda inerte y disponible si alguna vez vuelve la barra. */
.cabecera > nav{min-width:0;max-width:100%}

/* Y LA RED: que la página no pueda desplazarse a lo ancho, pase lo que pase.
   `clip` y no `hidden` a propósito: `hidden` crea un contenedor de scroll y
   rompe el `position:sticky` de la cabecera en escritorio. Esto no arregla un
   desbordamiento, lo contiene — el elemento culpable habrá que corregirlo
   igual, pero deja de romper la lectura de todo lo demás. */
html{overflow-x:clip}

@media (max-width:46rem){
  /* Que se vea que el menú se desliza y no que está cortado: se desvanece por
     el borde derecho mientras quede algo por ver. */
  .cabecera nav{
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent 100%);
    mask-image:linear-gradient(to right,#000 85%,transparent 100%);
  }
}

/* 8 · La tabla de coordenadas. Envuelta en un div con scroll propio porque en
   un movil siete columnas no caben, y sin envoltura el que se desplaza a lo
   ancho es el documento entero. */
.tabla-envuelta{overflow-x:auto;margin:.8rem 0}
table.coords{border-collapse:collapse;width:100%;font-size:.9rem}
table.coords th,table.coords td{text-align:left;padding:.35rem .6rem;
  border-bottom:1px solid var(--linea);white-space:nowrap}
table.coords th{position:sticky;top:0;background:var(--papel);font-weight:600}
table.coords td.num{text-align:right;font-variant-numeric:tabular-nums}
table.coords code,code.coord{font-size:.88em;background:var(--acento-baja);
  padding:.05rem .25rem;border-radius:.2rem}
#csv{font:inherit;padding:.25rem .7rem;cursor:pointer;border-radius:.25rem;
  border:1px solid var(--linea);background:var(--papel)}
#csv:hover{background:var(--acento-baja)}

/* 9 · Los mapas incrustados: el de la portada con los pueblos y el del final
   de cada ficha con sus sitios. Más bajos que el de /mapa.html porque van
   dentro de un texto, no son la página entera. */
.mapa-ficha{height:min(46vh,380px);margin:.8rem 0;border:1px solid var(--linea);
  border-radius:var(--radio-chico);background:var(--acento-baja)}
.mapa-portada{height:min(56vh,460px)}
.portada-mapa{margin:2.5rem 0}
/* Leaflet mete su propio tipo de letra en los globos; que herede el del sitio. */
.leaflet-container{font:inherit}
/* La descripción dentro de la celda del nombre: sí envuelve, al revés que el
   resto de la tabla, o una frase de 220 caracteres haría la fila kilométrica. */
table.coords td .desc{white-space:normal;display:block;max-width:34rem;
  font-size:.85rem;line-height:1.35;margin-top:.15rem}

/* Al imprimir, el mapa sale en gris y los mandos no se imprimen. */
@media print{
  .tipos, #csv{display:none}
  #mapa,.mapa-ficha{height:9cm}
}
/* La reseña redactada, visualmente separada de las citas del autor: recta
   —las citas van en cursiva— y con una barra al margen. */
.leaflet-popup-content .resena{margin:.5rem 0;padding-left:.5rem;
  border-left:3px solid #f0c419}
/* La lista de sitios para añadir a la ruta sin abrir el globo de cada punto. */
details.sueltos{margin:.6rem 0}
details.sueltos summary{cursor:pointer;font-size:.92rem}
details.sueltos ul{list-style:none;padding:0;margin:.5rem 0;columns:2;
  column-gap:1.5rem}
details.sueltos li{padding:.12rem 0;font-size:.92rem;break-inside:avoid}
details.sueltos button{font:inherit;line-height:1;padding:0 .35rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:.2rem;background:var(--papel)}
@media (max-width:640px){details.sueltos ul{columns:1}}

/* 11 · El apartado «Qué ver»: la lista legible de los sitios del municipio. */
ul.que-ver{list-style:none;padding:0;margin:.6rem 0}
ul.que-ver>li{padding:.7rem 0;border-bottom:1px solid var(--linea)}
ul.que-ver>li p{margin:.3rem 0}
ul.que-ver .datos{font-size:.88rem}
.anadido{font-size:.78rem;
  padding:.1rem .35rem;border:1px solid var(--acento);color:var(--acento);border-radius:.2rem;
  white-space:nowrap}
.anadido.citado{border-color:var(--tinta-baja);color:var(--tinta-baja)}

/* 12 · TODO LO QUE SE PULSA EN UNA FICHA, CON LA MISMA PINTA.
   Llego a haber cuatro: los atajos eran pastillas, el boton de fotografias un
   rectangulo con su propio borde, el enlace al mapa provincial texto subrayado
   y el desplegable de una plancha una linea gris. La pagina parecia hecha por
   cuatro personas y el lector no sabia que era pulsable y que no —hasta el
   punto de dar por desaparecido lo que seguia estando—. Una sola regla. */
nav.atajos a, nav.atajos button, .boton, details.plancha summary{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border-radius:1.2rem;
  border:1px solid var(--linea);background:var(--papel);
  color:var(--tinta);text-decoration:none;cursor:pointer;
  font:500 .92rem/1.35 var(--texto);letter-spacing:-.012em;
  transition:border-color .14s,background .14s;
}
nav.atajos a:hover, nav.atajos button:hover, .boton:hover,
details.plancha summary:hover{
  border-color:var(--acento);background:var(--acento-baja);
}
/* El numero, en el acento: es el dato que se busca de un vistazo. */
nav.atajos b, .boton b{color:var(--acento-alto);font-weight:700}
nav.atajos svg, .boton svg{width:1.05rem;height:1.05rem;color:var(--acento)}
nav.atajos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0}

/* Las planchas de fotos del original, plegadas a partir de cuatro. */
details.plancha{margin:1.1rem 0}
details.plancha summary{list-style:none;color:var(--tinta-baja)}
details.plancha summary::-webkit-details-marker{display:none}
details.plancha summary::marker{content:""}
details.plancha[open] summary{margin-bottom:.6rem}
/* La imagen ya trae width/height, así que se deja que escale sin deformarse. */
figure img{height:auto}

/* 13 · LA PORTADA. Una puerta, no un índice: hero con la caja de búsqueda,
   seis accesos grandes y el apartado del proyecto. El aire es el 90 % del
   efecto, así que lo que hay que respetar al retocar son los márgenes. */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
svg.ico{width:1.35rem;height:1.35rem;flex:0 0 auto}

.hero{max-width:38rem;margin:2.5rem auto 2rem;text-align:center}
.hero h1{font-size:clamp(2rem,6vw,3.1rem);line-height:1.08;margin:0 0 .6rem;
  letter-spacing:-.02em}
.hero .entradilla{margin:0 auto 1.6rem;max-width:34rem}

/* La caja: un formulario de verdad que lleva a buscar.html?q= */
form.caja{display:flex;align-items:center;gap:.6rem;padding:.55rem .55rem .55rem 1rem;
  border:1px solid var(--linea);border-radius:2rem;background:var(--papel);
  box-shadow:var(--sombra);text-align:left}
form.caja:focus-within{border-color:var(--acento)}
form.caja svg.ico{color:var(--tinta-baja)}
form.caja input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:1.02rem;color:var(--tinta);padding:.35rem 0}
form.caja button{flex:0 0 auto;font:inherit;font-weight:600;cursor:pointer;
  padding:.55rem 1.15rem;border:0;border-radius:1.5rem;
  background:var(--acento);color:var(--papel)}
form.caja button:hover{filter:brightness(1.08)}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin:.9rem 0 0}
.chips a{font-size:.88rem;padding:.32rem .7rem;border-radius:1rem;
  border:1px solid var(--linea);text-decoration:none;color:var(--tinta-baja);
  background:var(--papel)}
.chips a:hover{color:var(--tinta);border-color:var(--acento)}

/* Los seis accesos. Rejilla que cae a una columna en el móvil. */
.accesos{display:grid;gap:.8rem;margin:2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
a.acceso{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel);
  text-decoration:none;color:var(--tinta);transition:border-color .15s,transform .15s}
a.acceso:hover{border-color:var(--acento);transform:translateY(-2px)}
a.acceso svg.ico{color:var(--acento);margin-bottom:.2rem}
a.acceso b{font-size:1.06rem;letter-spacing:-.01em}
a.acceso span{font-size:.92rem;color:var(--tinta-baja);line-height:1.4}
a.acceso em{font-style:normal;font-size:.78rem;color:var(--acento);margin-top:.15rem}

.sobre{max-width:var(--ancho);margin:2.5rem auto}
.sobre p{margin:0 0 .8rem}
@media (max-width:640px){
  .hero{margin:1.4rem auto 1.4rem}
  form.caja{padding:.5rem .5rem .5rem .8rem}
  form.caja button{padding:.5rem .9rem}
}

/* 14 · LA PORTADA, EN VERSION DINAMICA.
   La primera version tenia las tarjetas en dos columnas apretadas, el titular
   en serif y los rotulos en versalitas: correcto y apagado. Lo que cambia aqui
   es el peso del display, el color en cada tarjeta y el aire. */
.hero{max-width:44rem;margin:3rem auto 2.2rem;text-align:center}
.hero h1{font-size:clamp(2.5rem,1.2rem + 5vw,4.4rem);letter-spacing:-.048em;
  line-height:.98;margin:0 0 .8rem}
.hero .entradilla{margin:0 auto 1.9rem;max-width:33rem;font-size:1.06rem}

form.caja{box-shadow:var(--sombra);border-radius:1.6rem;padding:.5rem .5rem .5rem 1.1rem}
form.caja input{font-size:1.05rem}
form.caja button{border-radius:1.2rem;padding:.62rem 1.3rem;font-weight:600;
  background:var(--acento);color:#fff;letter-spacing:-.01em}
form.caja button:hover{background:var(--acento-alto)}

.chips a{background:var(--papel);font-weight:450}
.chips a:hover{background:var(--acento-baja);border-color:var(--acento);
  color:var(--acento-alto)}

/* Las tarjetas: tres columnas en escritorio, con el icono en una pastilla de
   color y el dato en pastilla propia. El hover levanta: eso es lo que hace que
   una rejilla parezca viva y no un indice. */
.accesos{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;
  margin:2.4rem 0}
a.acceso{padding:1.4rem;border-radius:var(--radio);gap:.5rem;
  transition:border-color .16s,transform .16s,box-shadow .16s}
a.acceso:hover{transform:translateY(-3px);box-shadow:var(--sombra);
  border-color:var(--acento)}
a.acceso svg.ico{width:1.5rem;height:1.5rem;padding:.55rem;margin:0 0 .35rem;
  box-sizing:content-box;border-radius:.8rem;background:var(--acento-baja);
  color:var(--acento-alto)}
a.acceso b{font-size:1.15rem;font-weight:700;letter-spacing:-.025em}
a.acceso span{font-size:.94rem;line-height:1.45}
a.acceso em{align-self:flex-start;font-size:.78rem;font-weight:500;
  letter-spacing:-.004em;color:var(--acento-alto);background:var(--acento-baja);
  padding:.2rem .55rem;border-radius:.6rem;margin-top:.5rem}

.cifras{list-style:none;padding:0;display:grid;gap:.8rem;margin:1.8rem 0;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.cifras li{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;
  color:var(--tinta-baja)}
.cifras b{font-size:1.75rem;font-weight:800;letter-spacing:-.04em;
  color:var(--tinta);line-height:1}

.mosaico{display:grid;gap:.3rem;margin:3rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}
.mosaico img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radio-chico);filter:saturate(.9)}

@media (max-width:640px){
  .hero{margin:1.6rem auto 1.4rem}
  .hero h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .accesos{gap:.7rem}
  a.acceso{padding:1.1rem}
}

/* 15 · EL VISOR DE FOTOGRAFÍAS.
   Fondo casi negro y nada más: en un visor, cualquier cromo compite con la
   foto. El aumento lo topa galeria.js en 2,2x sobre el tamaño real, porque la
   mitad de los escaneos no llega a 400 px de ancho y estirarlos los deshace.
   Aquí solo se pone el techo de la pantalla. */
body.sin-scroll{overflow:hidden}
.visor[hidden]{display:none}
.visor{
  position:fixed;inset:0;z-index:100;display:flex;
  align-items:center;justify-content:center;padding:1rem;
  background:oklch(12% 0.01 var(--neutro) / .94);
  backdrop-filter:blur(6px);
  animation:asoma .18s ease-out;
}
.visor figure{margin:0;display:flex;flex-direction:column;gap:.7rem;
  align-items:center;max-width:100%}
.visor img{
  width:auto;height:auto;border-radius:var(--radio-chico);
  background:#0003;box-shadow:0 12px 40px #0009;
}
/* EL PIE DEL VISOR: de qué habla la foto, no en qué página del PDF está.
   Tres piezas y en este orden: el pie que le puso el autor si lo hay, el
   arranque del párrafo del que viene la foto, y el enlace para leerlo. */
.visor figcaption{
  display:flex;flex-direction:column;gap:.35rem;align-items:center;
  max-width:44rem;color:oklch(88% 0.01 var(--neutro));
  font-size:.85rem;text-align:center;letter-spacing:-.004em;
}
.visor figcaption b{font-weight:600;font-size:.95rem;color:#fff}
.visor figcaption .de{
  font-style:italic;line-height:1.45;
  color:oklch(74% 0.01 var(--neutro));text-wrap:pretty;
}
.visor figcaption .cuantas{
  font:500 .78rem var(--dato,inherit);
  color:oklch(64% 0.01 var(--neutro));font-variant-numeric:tabular-nums;
}
.visor figcaption a.ir-parrafo{
  color:#fff;background:#ffffff26;text-decoration:none;
  padding:.32rem .7rem;border-radius:.6rem;font-weight:500;
}
.visor figcaption a.ir-parrafo:hover{background:#ffffff40}
.visor button{
  position:absolute;display:grid;place-items:center;cursor:pointer;
  width:2.9rem;height:2.9rem;padding:0;border:0;border-radius:50%;
  background:#ffffff1f;color:#fff;
  transition:background .14s,transform .14s;
}
.visor button:hover{background:#ffffff33}
.visor button:active{transform:scale(.93)}
.visor button svg{width:1.4rem;height:1.4rem}
.visor .cerrar{top:1rem;right:1rem}
.visor .antes{left:1rem}
.visor .despues{right:1rem}
/* En el móvil los mandos van abajo y centrados: en los lados quedan justo
   donde se agarra el teléfono y se pulsan sin querer. */
@media (max-width:640px){
  .visor{padding:.5rem}
  .visor .antes{left:calc(50% - 4.2rem);top:auto;bottom:1.1rem}
  .visor .despues{right:calc(50% - 4.2rem);top:auto;bottom:1.1rem}
  .visor figure{padding-bottom:4.5rem}
}
@media print{.visor,nav.atajos button{display:none}}

/* 16 · COMPARTIR UNA RESPUESTA DEL AGENTE.
   Usan la misma pastilla que el resto del sitio (.boton), con la marca de cada
   sitio SOLO en el icono: un boton verde de WhatsApp y otro azul de Facebook a
   tamano completo se comen la pagina y ademas envejecen mal. */
.compartir,.atajos-compartir{display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;margin:1.1rem 0 0}
.compartir:empty{display:none}
.compartir code{font-size:.85em;word-break:break-all}
.compartir .boton svg,.atajos-compartir .boton svg{width:1.05rem;height:1.05rem}
.compartir .wa svg{color:#25d366}
.compartir .fb svg{color:#1877f2}
.compartir .wa:hover{border-color:#25d366}
.compartir .fb:hover{border-color:#1877f2}
@media print{.compartir{display:none}}

/* 17 · LOS APARTADOS NUMERADOS DE UN ESTUDIO, Y SU INDICE.
   Cirilo numera sus apartados «1.-», «4.-», «9.-». Antes salian como un
   parrafo mas y la pagina de personajes eran diecinueve personas seguidas sin
   un solo asidero: para llegar a Anita Delgado habia que bajar leyendo. El
   numero se queda a la vista porque es suyo, y sus saltos -1, 4, 7, 9- son un
   dato: dicen que ahi habia algo que la extraccion del PDF no vio. */
h3.ficha-num{
  display:flex;align-items:baseline;gap:.55rem;
  margin:2.2rem 0 .5rem;padding-top:.9rem;
  border-top:1px solid var(--linea);
  font-size:1.18rem;font-weight:700;letter-spacing:-.024em;
}
h3.ficha-num .num{
  flex:0 0 auto;min-width:1.6rem;padding:.1rem .4rem;
  border-radius:.5rem;background:var(--acento-baja);color:var(--acento-alto);
  font-size:.78rem;font-weight:700;text-align:center;
}

/* El indice va plegado: desplegar cuarenta y cuatro nombres encima del texto
   es cambiar una pared por otra. */
details.indice{
  margin:1.2rem 0 1.8rem;padding:.2rem 0;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);
}
details.indice summary{
  cursor:pointer;list-style:none;padding:.7rem 1rem;
  font-weight:550;font-size:.95rem;letter-spacing:-.012em;
}
details.indice summary::-webkit-details-marker{display:none}
details.indice summary::marker{content:""}
details.indice summary:hover{color:var(--acento-alto)}
details.indice[open] summary{border-bottom:1px solid var(--linea)}
ol.lista-fichas{
  list-style:none;margin:0;padding:.6rem 1rem 1rem;
  display:grid;gap:.15rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
ol.lista-fichas a{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.3rem .4rem;border-radius:.5rem;
  text-decoration:none;color:var(--tinta);font-size:.94rem;
}
ol.lista-fichas a:hover{background:var(--acento-baja);color:var(--acento-alto)}
ol.lista-fichas .num{
  flex:0 0 1.7rem;text-align:right;
  color:var(--tinta-baja);font-size:.8rem;font-variant-numeric:tabular-nums;
}

/* 18 · CITAR UN TROZO DEL TEXTO.
   La pastilla solo existe mientras hay algo seleccionado: la alternativa era un
   enlacito al lado de cada parrafo, y en el estudio de la Catedral eso son
   ochocientos iconos que en el movil no hay hover que esconda. */
.citar{
  position:absolute;z-index:60;display:flex;align-items:center;gap:.5rem;
  padding:.35rem .45rem;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:.9rem;box-shadow:var(--sombra);
  animation:asoma .12s ease-out;
}
.citar button{
  font:550 .85rem/1.2 var(--texto);letter-spacing:-.012em;cursor:pointer;
  padding:.4rem .7rem;border-radius:.6rem;
  border:1px solid transparent;background:transparent;color:var(--tinta);
}
.citar button:hover{background:var(--acento-baja);color:var(--acento-alto)}
.citar .dicho{font-size:.8rem;color:var(--tinta-baja);padding-right:.35rem}
.citar .dicho:empty{display:none}

/* La cita que llega en un enlace compartido. Subrayado y no recuadro: el
   recuadro parte el parrafo en dos y se lee como si fuera otra cosa. */
mark.cita-compartida{
  background:var(--acento-baja);color:inherit;
  border-radius:.25rem;padding:.05em .1em;
  box-shadow:0 1px 0 var(--celeste);
}
@media print{.citar{display:none}}

/* 19 · LA BARRA DE LA FICHA, FIJA.
   Una ficha son 3.679 palabras de mediana y hasta 27.774: la fila de atajos se
   perdia al primer desplazamiento y desde la mitad de Ronda volver arriba eran
   doce vueltas de rueda. Ahora se queda pegada bajo la cabecera, con el
   «arriba», los cuatro destinos que existen en las 102 fichas y el indice de
   secciones como desplegable, para alcanzarlo desde cualquier punto.

   `--alto-cabecera` lo mide el JavaScript de la plantilla, porque la cabecera
   se envuelve en dos filas en el movil y un valor fijo dejaba la barra
   solapada o flotando. Si el script no corre, el valor por omision aguanta. */
nav.atajos{
  position:sticky;top:var(--alto-cabecera,3.1rem);z-index:8;
  margin:0 -1.25rem .9rem;padding:.55rem 1.25rem;
  background:oklch(from var(--fondo) l c h / .93);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
  gap:.4rem;
}
nav.atajos .subir{padding:.45rem;line-height:0}
nav.atajos .subir svg{width:1rem;height:1rem;color:var(--tinta-baja)}
nav.atajos .subir:hover svg{color:var(--acento)}

/* El indice, desplegable desde la barra. */
nav.atajos details.indice{position:relative;margin:0;border:0;background:none}
nav.atajos details.indice summary{
  padding:.45rem .9rem;border-radius:1.2rem;
  border:1px solid var(--linea);background:var(--papel);
  font:500 .92rem/1.35 var(--texto);letter-spacing:-.012em;
}
nav.atajos details.indice summary b{color:var(--acento-alto);font-weight:700}
nav.atajos details.indice[open] summary{
  border-color:var(--acento);background:var(--acento-baja);
}
nav.atajos details.indice ol.lista-fichas{
  position:absolute;right:0;top:calc(100% + .5rem);z-index:30;
  min-width:19rem;max-width:min(30rem,calc(100vw - 2.5rem));
  max-height:min(60vh,26rem);overflow-y:auto;
  grid-template-columns:1fr;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);
  animation:asoma .14s ease-out;
}
@media (max-width:640px){
  nav.atajos{margin:0 -1.25rem .8rem;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none}
  nav.atajos::-webkit-scrollbar{display:none}
  nav.atajos>*{flex:0 0 auto}
  nav.atajos details.indice ol.lista-fichas{
    position:fixed;left:.7rem;right:.7rem;min-width:0;max-width:none;
    top:auto;margin-top:.5rem}
}

/* El enlace de «Qué ver» al párrafo donde la obra lo cuenta. Sustituye a la
   referencia «pág. 12 del original», que no le servía al lector: los PDF no
   están publicados, así que le mandaba a un sitio al que no podía ir. */
a.al-texto{
  font-size:.8rem;font-weight:500;text-decoration:none;white-space:nowrap;
  color:var(--acento-alto);background:var(--acento-baja);
  padding:.15em .5em;border-radius:.5em;
}
a.al-texto:hover{background:var(--celeste);color:var(--papel)}

/* El sitio al que llega ese enlace: la primera mención en el texto. Se marca
   un instante al llegar, que si no el lector no sabe dónde ha caído. */
b[id^="t-"]{scroll-margin-top:7rem}
b[id^="t-"]:target{
  background:var(--acento-baja);border-radius:.25rem;
  box-shadow:0 1px 0 var(--celeste);
  animation:aviso 2.4s ease-out 1;
}
@keyframes aviso{
  0%,55%{background:var(--celeste)}
  100%{background:var(--acento-baja)}
}
/* Y todo destino de ancla deja hueco para las dos barras fijas. */
main :target{scroll-margin-top:7.5rem}
h2[id],h3[id]{scroll-margin-top:7.5rem}
@media (prefers-reduced-motion:reduce){
  b[id^="t-"]:target{animation:none}
}
@media print{nav.atajos{position:static;background:none}}

/* 20 · LOS PIES DE FOTO. Estaban extraídos y sin publicar; ahora se leen. Van
   pequeños y apagados: son una etiqueta, no texto de la obra. */
figure figcaption{
  margin:.4rem .1rem 0;font-size:.82rem;line-height:1.4;
  color:var(--tinta-baja);letter-spacing:-.004em;text-wrap:pretty;
}
.tira figcaption{font-size:.78rem}

/* 21 · «QUÉ VER DENTRO» DE LA CATEDRAL.
   Noventa cosas en ocho grupos. Van plegadas con la cuenta a la vista: de un
   vistazo se sabe que hay veinticuatro capillas y siete piedras, y se abre
   solo lo que interesa. Desplegado de par en par son cuatro pantallas de
   móvil, y eso es cambiar una pared por otra. */
details.dentro{
  margin:.5rem 0;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);
}
details.dentro summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:.6rem;
  padding:.85rem 1rem;
  font-weight:650;font-size:1.02rem;letter-spacing:-.02em;
}
details.dentro summary::-webkit-details-marker{display:none}
details.dentro summary::marker{content:""}
details.dentro summary:hover{color:var(--acento-alto)}
details.dentro summary .cuenta{margin-left:auto}
details.dentro[open] summary{border-bottom:1px solid var(--linea)}
details.dentro > p.datos{margin:.8rem 1rem .2rem;font-size:.9rem}
details.dentro ul.que-ver{margin:0;padding:.2rem 1rem 1rem}

/* Cada cosa: el nombre, el enlace al texto y la cita. La cita va en cursiva y
   con barra al margen porque es del original, no de esta edición — la misma
   marca que se usa en el resto del sitio. */
ul.que-ver .cita-obra{
  margin:.3rem 0 0;padding-left:.8rem;
  border-left:2px solid var(--celeste);
  font-style:italic;font-size:.9rem;line-height:1.5;color:var(--tinta-baja);
  text-wrap:pretty;
}
@media (max-width:640px){
  details.dentro summary{padding:.8rem .85rem;font-size:.98rem}
  details.dentro ul.que-ver{padding:.2rem .85rem .9rem}
  details.dentro > p.datos{margin:.7rem .85rem .2rem}
}

/* 22 · LAS FOTOS DE CADA COSA, Y SUS DOS ROTULOS.
   «Citadas» son las que el original señala con su propio número de foto; «al
   lado», las de la tira que sigue al párrafo. La diferencia es de fiabilidad y
   se marca con el color del rótulo: el acento para lo que dice el original, un
   gris para lo que es probable. Meterlas bajo el mismo rótulo sería presentar
   una conjetura con la autoridad de su remisión. */
.fotos-de{margin:.5rem 0 .2rem}
.fotos-de .rotulo{
  display:block;margin-bottom:.3rem;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;
  color:var(--tinta-baja);
}
.fotos-de.citadas .rotulo{color:var(--acento-alto)}
.fotos-de .minis{display:flex;flex-wrap:wrap;gap:.3rem}
button.mini{
  padding:0;border:1px solid var(--linea);border-radius:.4rem;
  background:var(--papel);cursor:zoom-in;line-height:0;overflow:hidden;
  transition:border-color .14s,transform .14s;
}
button.mini:hover{border-color:var(--acento);transform:translateY(-2px)}
button.mini img{width:auto;height:4.4rem;max-width:7rem;object-fit:cover}
.fotos-de.citadas button.mini{border-color:var(--celeste)}
@media (max-width:640px){
  button.mini img{height:3.6rem;max-width:5.5rem}
}
@media print{.fotos-de{display:none}}

/* 23 · EL BUSCADOR DE FOTOS: el pie manda.
   Antes el titular de cada resultado era la entrada de donde salía la foto y
   de la foto no se decía nada, aunque 2.195 de las del índice tienen pie. Se
   invirtió: el pie arriba y en negro, la procedencia debajo y apagada. */
/* CADA CELDA, EN COLUMNA Y CON AIRE.
   `.galeria .ir` llevaba el margen a cero —venia de la galeria de «Malaga
   antigua», donde el pie es una linea sola— y aqui pegaba el enlace al texto:
   «…Málaga capitalVer dónde sale →0.834», todo junto. */
#rejilla figcaption{
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
}
#rejilla figcaption b{font-weight:600;letter-spacing:-.012em;line-height:1.3}
#rejilla figcaption .de{font-size:.82rem;color:var(--tinta-baja);line-height:1.35}
#rejilla .ir{margin:.15rem 0 0}
#rejilla .sim{position:static;margin:0}
.rejilla-fotos img{cursor:zoom-in}

/* 24 · LOS DOS BOTONES DE LA PORTADA.
   Buscar y preguntar son dos maneras distintas de usar la obra, y la caja de
   la portada obligaba a elegir una. «Preguntar» va en secundario —borde y no
   relleno— porque cuesta una llamada al modelo y buscar no cuesta nada. */
form.caja button.preguntar{
  background:transparent;color:var(--acento-alto);
  border:1px solid var(--acento);
}
form.caja button.preguntar:hover{background:var(--acento-baja)}
@media (max-width:520px){
  /* En el móvil la caja pasa a dos filas: el campo arriba, los botones
     debajo y a la mitad cada uno, que en una fila salían de 60 px. */
  form.caja{flex-wrap:wrap;padding:.6rem}
  form.caja input{flex:1 1 100%;margin-bottom:.5rem}
  form.caja button{flex:1 1 0;justify-content:center}
}

/* 25 · EL HIMNO. Lo único del sitio que se escucha, así que el vídeo manda en
   su página: al ancho de la prosa, con su radio y sin sombra, como las fotos. */
video.himno{
  width:100%;max-width:var(--ancho);height:auto;display:block;
  margin:1rem 0 1.4rem;border-radius:var(--radio);background:#000;
}

/* 26 · LA LETRA DEL HIMNO.
   Es lo único del sitio que es verso cantado, y se lee de otra manera: las
   estrofas numeradas como él las numera, el estribillo destacado —se repite
   entre estrofa y estrofa— y los «¡MÁLAGA!» del principio y del final, que en
   la partitura son la entrada y el cierre de todo el coro. */
section.version{margin:1.6rem 0 2.2rem}
section.version h3{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .3rem}
blockquote.estribillo{
  margin:.8rem 0 1.2rem;padding:1.1rem 1.3rem;
  background:var(--acento-baja);border-left:3px solid var(--celeste);
  border-radius:var(--radio);
}
blockquote.estribillo p{
  margin:0;font-family:var(--literario);font-size:1.08rem;line-height:1.7;
}
blockquote.estribillo cite{
  display:block;margin-top:.7rem;font-family:var(--texto);font-style:normal;
  font-size:.8rem;color:var(--tinta-baja);
}
ol.estrofas{margin:0;padding-left:1.6rem;display:grid;gap:1rem}
ol.estrofas li::marker{color:var(--acento);font-weight:700}
ol.estrofas p{
  margin:0;font-family:var(--literario);font-size:1.02rem;line-height:1.7;
}
p.cierre{
  margin:1.2rem 0 0;font-weight:700;letter-spacing:-.01em;color:var(--acento-alto);
}

/* 27 · SUS TRES APARTADOS, Y EL ESQUEMA EXPLICADO.
   Los tres títulos que él repite en los 102 municipios llevan una marca clara:
   son la columna del estudio, no una sección cualquiera. Se distinguen del
   resto de <h2> con la barra del acento a la izquierda. */
h2.parte-esquema{
  margin:2.8rem 0 .8rem;padding:.2rem 0 .2rem .9rem;
  border-left:4px solid var(--acento);
  font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);
  letter-spacing:-.03em;text-transform:none;
}

/* El esquema, al principio de la lista de pueblos: es la llave de lectura de
   las 102 fichas, así que va a la vista y no plegado. */
section.esquema{
  margin:1.6rem 0 2.4rem;padding:1.3rem 1.4rem;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);
}
section.esquema h2{margin:0 0 .5rem;font-size:1.2rem}
section.esquema p{margin:0 0 .8rem;font-size:.96rem;color:var(--tinta-baja)}
ol.partes-esquema{margin:0 0 .9rem;padding-left:1.5rem;display:grid;gap:.35rem}
ol.partes-esquema li{font-size:.96rem;line-height:1.5}
ol.partes-esquema li::marker{color:var(--acento);font-weight:700}
ol.partes-esquema b{color:var(--tinta)}
section.esquema .tenue{margin:0;font-size:.9rem}

/* 28 · EL AVISO DE DERECHOS, y la marca de cada poema que falta.
   El aviso va arriba del estudio, una vez; la marca, donde estaba el poema.
   En ámbar y no en el acento: no es navegación, es una advertencia. */
aside.aviso-derechos{
  margin:1.2rem 0 1.6rem;padding:1rem 1.2rem;
  background:oklch(96.5% 0.030 62);border-left:3px solid oklch(58% 0.13 62);
  border-radius:var(--radio);
}
aside.aviso-derechos p{margin:0;font-size:.94rem;line-height:1.55}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    aside.aviso-derechos{background:oklch(26% 0.045 62)}
  }
}
:root[data-theme="dark"] aside.aviso-derechos{background:oklch(26% 0.045 62)}

/* 25 · EL MENU AL FINAL DE CADA SECCION.
   La barra de arriba es fija y llega a todo, pero acabar «Historia» en una
   ficha de 27.774 palabras y tener que subir la vista para elegir a donde ir
   es un salto que se puede ahorrar: el menu se pone donde el lector termina
   de leer, que es donde decide.

   TIENE QUE PESAR MENOS QUE EL TEXTO. Es el mismo menu repetido hasta cuatro
   veces en una pagina; con el aspecto de la barra de arriba —pastillas con
   borde y fondo— serian cuatro bloques compitiendo con lo que se ha venido a
   leer. Aqui va como una linea de enlaces sobre una regla, y el apartado que
   se acaba de leer en negrita y sin enlace. */
nav.salto{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1.1rem;
  margin:2.6rem 0 .4rem;padding-top:.7rem;
  border-top:1px solid var(--linea);
  font:500 .88rem/1.7 var(--texto);letter-spacing:-.01em;
}
nav.salto a{color:var(--acento-alto);text-decoration:none}
nav.salto a:hover{text-decoration:underline}
nav.salto b{color:var(--tinta-baja);font-weight:600}
/* «Arriba» a la derecha y separado: no es una seccion, es la salida. */
nav.salto a.subir{margin-left:auto;color:var(--tinta-baja);font-weight:400}
nav.salto a.subir::before{content:"↑ "}
nav.salto a.subir:hover{color:var(--acento)}
@media (max-width:640px){
  nav.salto{gap:.1rem .9rem;margin-top:2rem;font-size:.85rem}
  nav.salto a.subir{margin-left:auto}
}
@media print{nav.salto{display:none}}

/* 26 · LA TARJETA DEL PUEBLO, DE UN VISTAZO.
   Quien aterriza en Frigiliana se encuentra 8.102 palabras y ninguna respuesta
   rapida: que es esto, que se ve, cuanto tardo. La tarjeta lo contesta antes
   de que haya que desplazarse, sin apartar el texto, que sigue debajo.

   NO ES UNA CAJA CON BORDE, y es deliberado: con foto, reclamo, tres sitios y
   el poema dentro, un marco alrededor la convertia en un cartel. Va abierta,
   separada por una regla arriba y otra abajo, y lo que la sujeta visualmente
   es la foto. */
aside.tarjeta-pueblo{
  margin:0 0 2.2rem;padding:0;
  border-bottom:1px solid var(--linea);
}
aside.tarjeta-pueblo .portada-pueblo{
  margin:0 0 1.15rem;border-radius:var(--radio);overflow:hidden;
  background:var(--papel);line-height:0;
}
aside.tarjeta-pueblo .portada-pueblo img{
  width:100%;height:auto;display:block;
  /* Recortada a panoramica: una foto de 1600x755 y otra de 800x600 tienen que
     ocupar lo mismo, que si no la tarjeta baila de un pueblo a otro. */
  aspect-ratio:16/7;object-fit:cover;
}
aside.tarjeta-pueblo .portada-pueblo figcaption{
  padding:.5rem .1rem 0;font-size:.85rem;line-height:1.5;
  color:var(--tinta-baja);
}
aside.tarjeta-pueblo .reclamo{
  margin:0 0 .6rem;font:600 clamp(1.15rem,3.4vw,1.42rem)/1.3 var(--titulo);
  letter-spacing:-.022em;color:var(--acento-alto);text-wrap:balance;
}
aside.tarjeta-pueblo .reclamo::before{content:"«"}
aside.tarjeta-pueblo .reclamo::after{content:"»"}
aside.tarjeta-pueblo .resumen{
  margin:0;font-size:1.03rem;line-height:1.62;color:var(--tinta);
}

/* QUE VER: tres cosas y QUE SON. Una lista de nombres no informa a quien no
   conoce el pueblo; con la reseña al lado, si. */
aside.tarjeta-pueblo .ver-rapido{margin:1.15rem 0 0}
aside.tarjeta-pueblo .ver-rapido h2{
  margin:0 0 .5rem;font:650 .78rem/1 var(--texto);
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-baja);
}
aside.tarjeta-pueblo .ver-rapido ul{margin:0;padding:0;list-style:none}
aside.tarjeta-pueblo .ver-rapido li{
  margin:0 0 .5rem;padding-left:.95rem;position:relative;
  font-size:.95rem;line-height:1.55;
}
aside.tarjeta-pueblo .ver-rapido li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.36rem;height:.36rem;border-radius:50%;background:var(--acento);
}
aside.tarjeta-pueblo .ver-rapido li b{color:var(--tinta);font-weight:650}
/* EL NOMBRE ES UN ENLACE AL PARRAFO donde la obra lo cuenta, porque la reseña
   de aqui va recortada a 130 caracteres. Sin subrayado permanente —serian tres
   subrayados en una tarjeta que ya tiene bastante— pero con un subrayado tenue
   que avisa de que hay algo debajo, y la flecha al pasar. */
aside.tarjeta-pueblo .ver-rapido li b a{
  color:var(--tinta);text-decoration:none;
  border-bottom:1px solid var(--acento-baja);
}
aside.tarjeta-pueblo .ver-rapido li b a:hover{
  color:var(--acento-alto);border-bottom-color:var(--acento);
}
aside.tarjeta-pueblo .ver-rapido li b a::after{
  content:" ↓";font-weight:400;color:var(--acento);
  font-size:.85em;opacity:.55;
}
aside.tarjeta-pueblo .ver-rapido li b a:hover::after{opacity:1}
aside.tarjeta-pueblo .ver-rapido li span{color:var(--tinta-baja)}
aside.tarjeta-pueblo .ver-rapido p{margin:.6rem 0 0;font-size:.9rem}

aside.tarjeta-pueblo .cifras-pueblo{
  display:flex;flex-wrap:wrap;gap:.25rem 1.15rem;
  margin:1.15rem 0 0;padding-top:.75rem;
  border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--tinta-baja);
}
aside.tarjeta-pueblo .cifras-pueblo b{color:var(--tinta);font-weight:650}

/* El poema cierra la tarjeta, CENTRADO. Suelto y a la izquierda se leia como
   otro parrafo mas; centrado se lee como lo que es, cuatro u ocho versos. */
aside.tarjeta-pueblo .verso{
  margin:1.3rem 0 1.35rem;padding:1.05rem 0 0;border:0;
  border-top:1px solid var(--linea);background:none;
  text-align:center;
}
aside.tarjeta-pueblo .verso p{
  margin:0;display:inline-block;text-align:center;
  font:italic 400 1.02rem/1.85 var(--titulo);color:var(--tinta);
  text-wrap:balance;
}
aside.tarjeta-pueblo .verso cite{
  display:block;margin:.7rem 0 0;font-style:normal;
  font-size:.82rem;color:var(--tinta-baja);
}

/* Compartir el pueblo: la fila va centrada bajo la tarjeta y con los botones
   en pequeno, que no compitan con el contenido. */
.compartir-pueblo{justify-content:center;margin:1.15rem 0 .2rem}
.compartir-pueblo .boton{font-size:.86rem;padding:.4rem .8rem}
.compartir-pueblo .boton svg{width:.95rem;height:.95rem}
@media (max-width:640px){
  aside.tarjeta-pueblo{margin-bottom:1.7rem}
  aside.tarjeta-pueblo .portada-pueblo{
    margin:0 -1.25rem 1rem;border-radius:0}
  aside.tarjeta-pueblo .portada-pueblo img{aspect-ratio:16/9}
  aside.tarjeta-pueblo .portada-pueblo figcaption{padding:.5rem 1.25rem 0}
  aside.tarjeta-pueblo .resumen{font-size:.99rem}
}
@media print{aside.tarjeta-pueblo{break-inside:avoid}}

/* 27 · LA GUIA: LOS 102 PUEBLOS DE UN VISTAZO.
   `pueblos.html` sirve para BUSCAR un pueblo —nombres agrupados, se barre con
   la vista—. Esta pagina sirve para PASEARLA, y ademas es la que se comparte:
   una lista de 102 nombres no se manda por WhatsApp, 102 fotos si.

   EL PESO ES EL RIESGO. Son 102 fotografias: van con `loading=lazy` y con
   `aspect-ratio` fijo, asi que solo se piden las que se ven y la pagina no da
   botes de cien pixeles cada vez que llega una. */
nav.atajos-guia{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 .4rem;
}
nav.atajos-guia a{
  padding:.38rem .8rem;border-radius:1.2rem;
  border:1px solid var(--linea);background:var(--papel);
  font:500 .88rem/1.35 var(--texto);color:var(--tinta);text-decoration:none;
}
nav.atajos-guia a:hover{border-color:var(--acento);color:var(--acento-alto)}
nav.atajos-guia a b{color:var(--tinta-baja);font-weight:600;font-size:.85em}

section.comarca-guia{margin:2.6rem 0 0;scroll-margin-top:6rem}
section.comarca-guia h2{
  margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--linea);
}
ul.rejilla-guia{
  display:grid;gap:1.35rem;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
li.tarjeta-guia > a{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--papel);
  transition:border-color .14s ease, transform .14s ease;
}
li.tarjeta-guia > a:hover{
  border-color:var(--acento);transform:translateY(-2px);
}
li.tarjeta-guia img,li.tarjeta-guia .sin-foto{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  background:var(--fondo);
}
li.tarjeta-guia .nombre{
  padding:.8rem .9rem 0;font:650 1.06rem/1.25 var(--titulo);
  letter-spacing:-.02em;color:var(--tinta);
}
li.tarjeta-guia .reclamo{
  padding:.2rem .9rem 0;font:italic 400 .92rem/1.45 var(--titulo);
  color:var(--acento-alto);text-wrap:balance;
}
li.tarjeta-guia .resumen{
  padding:.5rem .9rem 0;font-size:.88rem;line-height:1.55;
  color:var(--tinta-baja);
}
/* «Que ver» empuja al fondo con el `margin-top:auto`, asi que todas las
   tarjetas de una fila lo alinean abajo aunque el reclamo mida distinto. */
li.tarjeta-guia .ver{
  margin-top:auto;padding:.7rem .9rem 0;
  font-size:.85rem;line-height:1.5;color:var(--tinta-baja);
}
li.tarjeta-guia .ver::before{
  content:"Qué ver: ";color:var(--tinta);font-weight:650;
}
li.tarjeta-guia .hab{
  padding:.55rem .9rem .85rem;font-size:.8rem;color:var(--tinta-baja);
}
@media (max-width:640px){
  ul.rejilla-guia{gap:1.1rem;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
  section.comarca-guia{margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  li.tarjeta-guia > a{transition:none}
  li.tarjeta-guia > a:hover{transform:none}
}

/* 28 · LAS VARIANTES DE LA TARJETA: comarca y estudio de la capital.
   La misma pieza con menos cosas dentro. La comarca no tiene habitantes ni
   poema: tiene MUNICIPIOS, y su «Que ver» necesita decir en que pueblo esta
   cada cosa, que es lo primero que hace falta saber. */
aside.tarjeta-comarca .ver-rapido li .donde{
  display:inline-block;margin:0 .35rem 0 .1rem;padding:.05rem .42rem;
  border-radius:.6rem;background:var(--acento-baja);
  font-size:.78rem;font-weight:600;color:var(--acento-alto);
  vertical-align:.05em;
}
aside.tarjeta-comarca .ver-rapido li .donde + span{color:var(--tinta-baja)}
/* El estudio de la capital solo lleva foto, reclamo y tamano, asi que sin el
   «Que ver» la tarjeta queda corta: se le quita el aire de mas. */
aside.tarjeta-estudio .cifras-pueblo{margin-top:.9rem;padding-top:.65rem}
aside.tarjeta-estudio .compartir-pueblo{margin-top:.9rem}

/* El gancho de la guia: la linea que hace pinchar. Va por delante del resumen
   y en el color de acento, porque en una rejilla de 102 tarjetas lo que decide
   es la curiosidad, no la descripcion. */
li.tarjeta-guia .gancho{
  padding:.45rem .9rem 0;font:600 .93rem/1.45 var(--texto);
  color:var(--acento-alto);text-wrap:balance;
}
li.tarjeta-guia .gancho + .resumen{padding-top:.35rem;font-size:.85rem}

/* 29 · EL APARTADO DE SEMANA SANTA. Una lista de sitios por barrio: lo que
   importa es barrerla con la vista, no que cada uno haga bulto. */
section.barrio-ss{margin:2.4rem 0 0;scroll-margin-top:6rem}
section.barrio-ss h2{
  margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--linea);
}
ul.lista-ss{
  display:grid;gap:.9rem;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));
}
ul.lista-ss li{
  padding:.85rem 1rem;border:1px solid var(--linea);
  border-radius:var(--radio);background:var(--papel);
  border-left:3px solid var(--acento-baja);
}
ul.lista-ss li b{display:block;font:650 1rem/1.35 var(--titulo);
  letter-spacing:-.015em;color:var(--tinta);text-wrap:balance}
ul.lista-ss .tipo{
  display:inline-block;margin:.3rem 0 0;padding:.05rem .45rem;
  border-radius:.6rem;background:var(--acento-baja);
  font-size:.74rem;font-weight:600;color:var(--acento-alto);
  text-transform:lowercase;
}
ul.lista-ss .donde{display:block;margin:.4rem 0 0;font-size:.86rem;
  line-height:1.5;color:var(--tinta-baja)}
ul.lista-ss .tenue{display:block;margin:.2rem 0 0;font-size:.82rem}
ul.lista-ss .datos{display:block;margin:.4rem 0 0;font-size:.84rem}
@media (max-width:640px){
  ul.lista-ss{grid-template-columns:1fr;gap:.75rem}
  section.barrio-ss{margin-top:1.9rem}
}
/* La cita de la guia ajena: entre comillas, con su fuente y su pagina debajo.
   Va marcada como cita y no como texto nuestro, que es lo que la hace legal y
   lo que hace que el lector sepa quien lo escribio. */
ul.lista-ss .cita-guia{
  margin:.6rem 0 0;padding:.5rem 0 0;border:0;background:none;
  border-top:1px solid var(--linea);
}
ul.lista-ss .cita-guia p{
  margin:0;font-size:.88rem;line-height:1.55;color:var(--tinta);
}
ul.lista-ss .cita-guia p::before{content:"«"}
ul.lista-ss .cita-guia p::after{content:"»"}
ul.lista-ss .cita-guia cite{
  display:block;margin:.35rem 0 0;font-style:normal;
  font-size:.76rem;line-height:1.45;color:var(--tinta-baja);
}
/* La historia de Semana Santa: apartados cortos, cada uno con su fuente. */
section.cap-historia{margin:0 0 1.5rem;max-width:var(--ancho)}
section.cap-historia h3{
  margin:0 0 .45rem;font:650 1.06rem/1.3 var(--titulo);letter-spacing:-.018em;
}
section.cap-historia p{margin:0;font-size:1rem;line-height:1.65}
section.cap-historia .tenue{margin:.4rem 0 0;font-size:.82rem;line-height:1.5}

/* LA RESEÑA DE CADA LUGAR DE SEMANA SANTA. No es una cita —el texto es de
   esta edicion— asi que NO lleva el sangrado ni la barra lateral de
   `cita-guia`: se lee como lo que es, prosa de la casa. La linea de
   procedencia va debajo, pequena, para poder comprobar el dato. */
.resena-ss {
  margin: .6rem 0 .2rem;
  max-width: 62ch;
}
.resena-ss p {
  margin: 0;
  line-height: 1.62;
}
/* EL HILO: lo que aporta el recuento, no lo que dice la ficha. Se marca con
   barra y cursiva justamente para que se vea que es de otra naturaleza que la
   reseña de arriba. */
.hilo-ss {
  margin: .45rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--acento, currentColor);
  font-style: italic;
  font-size: .92em;
  color: var(--tinta-baja);
}

/* LA HISTORIA POR EPOCAS. Cinco tramos con nombre y, dentro de cada uno, las
   tarjetas en dos columnas cuando hay sitio. Asi dieciocho apartados dejan de
   ser una columna infinita. */
.epoca { margin: 1.6rem 0 2.2rem; }
.epoca > h3 {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--linea, currentColor);
  padding-bottom: .35rem;
}
.rejilla-historia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem 1.8rem;
  align-items: start;
}
.rejilla-historia .cap-historia { margin: 0; }
.rejilla-historia h4 {
  margin: 0 0 .3rem;
  font-size: .98rem;
}
.rejilla-historia p {
  margin: 0;
  line-height: 1.6;
  text-wrap: pretty;
}

/* PUERTA A LOS ESTUDIOS DE LA CAPITAL. Se marca con subrayado punteado y no
   con el color de enlace normal: no es «pincha aqui», es «de esto hay mas
   escrito ahi». Discreto, para que no compita con la lectura. */
.a-la-obra {
  color: inherit;
  text-decoration: underline dotted var(--acento);
  text-underline-offset: .18em;
}
.a-la-obra:hover, .a-la-obra:focus-visible {
  color: var(--acento);
  text-decoration-style: solid;
}

/* LA CORPORACION NAZARENA de cada lugar: de quien es la casa, o a quien acoge
   el templo. Va destacada sobre la sede canonica porque es lo que la gente
   busca cuando pregunta «que cofradias hay aqui». */
.corp{display:block;font-size:.92rem;font-weight:600;margin:.15rem 0 .1rem}

/* LOS PERSONAJES. Rejilla de fichas cortas: nombre, oficio, semblanza y los
   sitios donde sale. Se lee a saltos, que es como se lee un quien es quien. */
.rejilla-personajes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1rem 1.6rem;align-items:start;margin:1rem 0 2rem;
}
.personaje h4{margin:0 0 .1rem;font-size:1rem}
.personaje .oficio{
  margin:0 0 .35rem;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-baja);
}
.personaje p{margin:0 0 .35rem;line-height:1.55;text-wrap:pretty}
.personaje .donde-sale{font-size:.85rem;color:var(--tinta-baja)}
.personaje .donde-sale a{color:inherit;text-decoration:underline dotted var(--acento)}
.personaje .donde-sale a:hover{color:var(--acento)}
.entradilla-sec{color:var(--tinta-baja);max-width:56ch;margin:.2rem 0 1rem}

/* LA TARJETA QUE NO ES UN ESTUDIO. En la parrilla de la capital conviven los
   estudios de Cirilo y la seccion de Semana Santa, que no es suya. Se marca
   con el borde en el acento para que se vea cual es cual sin tener que
   explicarlo. */
.tarjetas .tarjeta-seccion a{
  border-left:3px solid var(--acento);
}

/* EL CALENDARIO DE FIESTAS. Rejilla de meses; dentro, una lista donde lo
   primero que se ve es el nombre y la fecha, que es lo que se viene buscando.
   La cita del estudio va debajo y en gris: sostiene el dato sin competir con
   el. */
.lista-fiestas{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.9rem 1.6rem}
.lista-fiestas li{margin:0;padding:.55rem 0 .6rem;border-top:1px solid var(--linea)}
.lista-fiestas b{display:block;font-size:1rem;line-height:1.3}
.lista-fiestas .cuando{display:inline-block;margin:.15rem .6rem .15rem 0;
  font-size:.86rem;font-weight:600;color:var(--acento)}
.lista-fiestas .donde{font-size:.86rem;color:var(--tinta-baja)}
.cita-fiesta{margin:.3rem 0 0;font-size:.82rem;line-height:1.5;
  color:var(--tinta-baja);text-wrap:pretty}
.mes{margin:1.4rem 0 2rem}
.mes > h2{margin:0 0 .5rem;font-size:1.15rem}

/* EL FORMULARIO DE CONTACTO. Sencillo y ancho comodo de leer. */
.formulario{display:grid;gap:.35rem;max-width:34rem;margin:.6rem 0 1.4rem}
.formulario label{font-size:.86rem;font-weight:600;margin-top:.5rem}
.formulario input,.formulario select,.formulario textarea{
  font:inherit;padding:.5rem .6rem;border:1px solid var(--linea);
  border-radius:.35rem;background:var(--fondo);color:inherit;width:100%}
.formulario textarea{resize:vertical;line-height:1.5}
.formulario button{
  justify-self:start;margin-top:.8rem;font:inherit;font-weight:600;
  padding:.5rem 1.1rem;border:0;border-radius:.35rem;cursor:pointer;
  background:var(--acento);color:#fff}
.formulario button[disabled]{opacity:.6;cursor:default}
/* EL CAMPO TRAMPA. Fuera de la vista pero NO con `display:none` ni `hidden`:
   algunos robots se saltan lo que lleva esas dos, y entonces la trampa no
   atrapa a nadie. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* «AQUÍ AL LADO»: los pueblos que lindan y las fiestas del municipio. Va al
   final del estudio, separado con una línea, para que se lea como lo que es
   —por dónde seguir— y no como parte del texto. */
.cerca{margin:2.2rem 0 1rem;padding-top:1rem;border-top:1px solid var(--linea)}
.cerca h2{margin:0 0 .5rem;font-size:1.05rem}
.cerca p{margin:.3rem 0;line-height:1.7}
.cerca b{font-weight:600;margin-right:.3rem}

/* «QUÉ HAY CERCA». La distancia va delante y en color, porque es el dato que
   se viene a buscar: se lee la columna de distancias antes que los nombres. */
.lista-cerca{list-style:none;margin:1rem 0;padding:0}
.lista-cerca li{margin:0;padding:.6rem 0;border-top:1px solid var(--linea)}
.lista-cerca .dist{
  display:inline-block;min-width:4.5rem;font-weight:700;color:var(--acento);
  font-variant-numeric:tabular-nums}
.lista-cerca b{font-size:1rem}
.lista-cerca .donde{margin-left:.4rem;font-size:.85rem;color:var(--tinta-baja)}
.lista-cerca p{margin:.25rem 0 0 4.5rem;font-size:.88rem;line-height:1.55;
  color:var(--tinta-baja);text-wrap:pretty}
.desde{font-weight:600;margin:.8rem 0 0}
.lejos{margin:1rem 0;padding:.8rem 1rem;border-left:3px solid var(--acento);
  background:var(--acento-baja,transparent)}
.sin-permiso{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--linea)}
.sin-permiso h2{font-size:1.05rem;margin:0 0 .4rem}
#cerca-pueblo{font:inherit;padding:.4rem .5rem;border:1px solid var(--linea);
  border-radius:.35rem;background:var(--fondo);color:inherit}
@media (max-width:32rem){
  .lista-cerca p{margin-left:0}
}

/* El icono del tipo de sitio: ayuda a barrer la lista con la vista.
   `aria-hidden` porque no aporta nada leido en voz alta. */
.lista-cerca .ico{margin-right:.25rem}

/* EL MAPA DE «QUÉ HAY CERCA». Alto fijo y esquinas redondeadas, como el de las
   fichas. Nace oculto: lo enseña el JavaScript cuando hay algo que pintar. */
#cerca-mapa{height:22rem;margin:1rem 0;border-radius:.5rem;
  border:1px solid var(--linea);background:var(--linea)}
@media (max-width:32rem){ #cerca-mapa{height:16rem} }

/* LOS OFICIOS COFRADES. Columnas por oficio: lo que se viene a ver es cuánta
   gente hay de cada cosa, así que el recuento va en el título. */
.rejilla-oficios{display:grid;gap:1rem 1.8rem;margin:1rem 0 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.oficio h4{margin:0 0 .3rem;font-size:.95rem}
.oficio ul{list-style:none;margin:0;padding:0}
.oficio li{padding:.18rem 0;font-size:.92rem;line-height:1.4}
.oficio .obra-en{display:block;font-size:.78rem;color:var(--acento)}