/* ═══════════════════════════════════════════════════════════════════════════
   DESTINO GUATAPÉ — LAS DIEZ FORMAS
   Hoja nueva, escrita desde cero (no es un parche sobre guatape.css: las
   reglas de las dos etapas anteriores ganaban por orden de cascada y en
   47 Street eso dejó texto invisible dos veces).

   Regla del CEO: ningún cuerpo de texto con el formato por defecto.
   ⚠️ Cero opacidades en la escala de texto — una opacidad se compone contra
   el fondo que tenga debajo y el mismo token pasa AA en una sección y lo
   falla en la de al lado, en silencio. Aquí todo es sólido medido.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* --- paleta oficial, medida del PDF de la guía (no convertida de CMYK) --- */
  --petroleo:#083D43;
  --celeste:#9BD4DE;
  --bermellon:#E6392C;
  --amarillo:#F7E05B;
  --azul:#3D97CD;
  --verde:#AFC861;

  /* --- variantes de TEXTO: las únicas que pisan blanco --- */
  --celeste-txt:#2F8190;   /* 4,50:1 */
  --bermellon-txt:#D7271A; /* 5,01:1 */
  --amarillo-txt:#897607;  /* 4,51:1 */
  --azul-txt:#2D7DAE;      /* 4,51:1 */
  --verde-txt:#6A7E2C;     /* 4,53:1 */

  /* --- superficies --- */
  --papel:#FFFFFF;
  --crudo:#F6F2E9;
  --mortero:#EDE7DA;

  /* --- escala de texto: SÓLIDOS, nunca opacidades --- */
  --tinta:#0B3238;
  --texto:#1D4E55;
  --texto-70:#2C626D;
  --texto-45:#32717E;

  /* --- tipografía: cinco tamaños declarados, no variaciones improvisadas --- */
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --cuerpo:'Literata',Georgia,'Times New Roman',serif;

  --t-bando:1.375rem;   /* la proclama: mayor que el cuerpo, a propósito */
  --t-letrero:2rem;     /* rotulación de fachada */
  --t-entradilla:1.25rem;
  --t-cuerpo:1.0625rem;
  --t-pie:0.875rem;

  --medida:64ch;        /* 62–70 caracteres. Nunca más. */
  --moldura:3px;
}

/* ───────────────────────────────────────────────────────────── base ─── */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--cuerpo);font-size:var(--t-cuerpo);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;
  letter-spacing:-.025em;margin:0;color:var(--tinta);text-wrap:balance}

/* Foco visible SIEMPRE. Es un sitio público. */
:focus-visible{outline:3px solid var(--bermellon-txt);outline-offset:3px}

.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ════════════════════════════════ tratamientos de lectura ════════════ */

.lee{display:grid;grid-template-columns:minmax(0,var(--medida)) auto;
  gap:2.5rem;align-items:start}
.lee-col{min-width:0}            /* ⚠️ una celda de grid tiene min-width:auto
                                    y su contenido la estira desde dentro */

.lee-entradilla{
  font-size:var(--t-entradilla);line-height:1.5;color:var(--tinta);
  margin:0 0 .9rem;font-weight:400;
}
.lee-cuerpo{margin:0;color:var(--texto-70);max-width:var(--medida)}
.lee-cuerpo + .lee-cuerpo{margin-top:.9rem}

.lee-margen{display:flex;flex-direction:column;gap:.75rem;min-width:0}

.entradilla{
  font-size:var(--t-entradilla);line-height:1.5;color:var(--texto-70);
  max-width:var(--medida);margin:0 0 1.75rem;
}

/* ═══════════════════════════════════════ ① ZÓCALO ════════════════════ */
/* Marco de moldura DOBLE, esquinas VIVAS, campo PLENO, figura GRANDE.
   No es una tarjeta: no lleva radio, no lleva sombra, no lleva degradado. */

.zoc{background:transparent}
.zoc-marco{
  border:var(--moldura) solid var(--tinta);
  box-shadow:inset 0 0 0 2px var(--papel), inset 0 0 0 5px var(--tinta);
  border-radius:0;
  padding:1.5rem 1.25rem 1.1rem;
  background:var(--campo,var(--celeste));
  color:var(--tinta);
  text-align:center;
}
.zoc-campo{display:flex;flex-direction:column;align-items:center;gap:.6rem}
/* Zócalo con fotografía (2026-09-16): la lámina ocupa el campo de arriba a
   abajo entre las molduras; el campo de color queda como paspartú y la
   leyenda va debajo, dentro del marco. */

.zoc-fig{color:var(--tinta)}
.zoc-dato{font-family:var(--display);font-weight:800;font-size:1.75rem;
  line-height:1;margin:0;letter-spacing:-.02em}
.zoc-leyenda{font-family:var(--display);font-weight:600;font-size:.9375rem;
  margin:.7rem 0 0;line-height:1.25}
.zoc-txt{margin:.85rem 0 0;color:var(--texto-70);font-size:var(--t-pie);
  line-height:1.55;text-align:left}

.zoc--celeste   .zoc-marco{--campo:var(--celeste)}
.zoc--bermellon .zoc-marco{--campo:var(--bermellon)}
.zoc--amarillo  .zoc-marco{--campo:var(--amarillo)}
.zoc--azul      .zoc-marco{--campo:var(--azul)}
.zoc--verde     .zoc-marco{--campo:var(--verde)}
.zoc--crudo     .zoc-marco{--campo:var(--mortero)}


/* ═══════════════ LOS CAMPOS DE COLOR Y QUÉ TEXTO AGUANTAN ═══════════════
   Medido, no supuesto (tabla completa en el README):

     campo        tinta #0B3238   blanco    → texto de lectura
     celeste        8,42 ✅        1,63      tinta
     amarillo      10,32 ✅        1,33      tinta
     verde          7,37 ✅        1,87      tinta
     crudo/mortero 11,16+ ✅       1,2       tinta
     petróleo       1,15          11,94 ✅   blanco
     bermellón      3,26 ✗        4,21 ✗    ⚠️ NINGUNO
     azul           4,26 ✗        3,23 ✗    ⚠️ NINGUNO

   ⚠️ El bermellón puro y el azul de la guía NO pueden ser campo de un panel
   con texto de lectura: fallan AA con tinta Y con blanco. Se quedan para la
   cenefa, los motivos, los filetes y los rombos — donde no hay texto.
   Cuando hace falta un campo rojo con texto, va BERMELLÓN HONDO #D7271A,
   que con blanco da 5,01:1.

   Y la regla que se me olvidó una vez: la escala --texto-70/--texto-45 se
   midió contra papel y crudo. **Sobre un campo de color no vale**: #2C626D
   sobre celeste da 4,18 y falla. Por eso los campos redefinen los tokens. */

.zoc-marco,
.fachada-cara,
.exp--celeste,.exp--amarillo,.exp--verde,.exp--crudo{
  --texto-70:var(--tinta);
  --texto-45:var(--tinta);
}
.zoc-leyenda,.zoc-dato{color:var(--tinta)}   /* explícito: la hoja
   vieja los pintaba con blanco al 75% — una opacidad compuesta contra celeste
   da 1,45:1, y no avisa. */

/* Campo rojo con texto: el hondo, nunca el puro. */
.zoc--bermellon .zoc-marco,
.fachada--bermellon .fachada-cara{--campo:var(--bermellon-txt);color:var(--papel)}
.zoc--bermellon .zoc-leyenda,.zoc--bermellon .zoc-dato,
.zoc--bermellon .zoc-fig{color:var(--papel)}
.zoc--bermellon .zoc-marco{
  box-shadow:inset 0 0 0 2px var(--papel), inset 0 0 0 5px var(--tinta);
  --texto-70:var(--papel);--texto-45:var(--papel);
}

/* Campo petróleo: blanco encima, 11,94:1. */
.zoc--petroleo .zoc-marco,
.fachada--petroleo .fachada-cara{--campo:var(--petroleo);color:var(--papel);
  --texto-70:var(--celeste);--texto-45:var(--celeste)}
.zoc--petroleo .zoc-leyenda,.zoc--petroleo .zoc-dato,
.zoc--petroleo .zoc-fig{color:var(--papel)}

/* El azul se queda fuera de los campos con texto: solo barras del plano
   y filetes. */


/* ══════════════ TODA SUPERFICIE DECLARA SU TEXTO ═══════════════════════
   73 superficies de color en el sitio. En vez de corregirlas una a una
   —que es como se llega a 291 textos fuera de AA sin enterarse— cada
   superficie redefine los tokens de texto y todo lo que caiga dentro
   hereda bien.

   ⚠️ Y dentro de un campo de color NO HAY COLORES DE ACENTO. Un acento es
   un tono medio y el campo también, así que siempre choca: el bermellón
   texto sobre celeste da 2,75:1. En un zócalo real hay una sola tinta.
   Por eso aquí los letreros dentro de un campo son tinta o papel. */

/* --- campos CLAROS: todo en tinta (celeste 8,42 · amarillo 10,32 ·
       verde 7,37 · crudo 12,30 · mortero 11,16) --- */
.zoc--celeste .zoc-marco,.zoc--amarillo .zoc-marco,.zoc--verde .zoc-marco,
.zoc--crudo .zoc-marco,
.fachada--celeste .fachada-cara,.fachada--amarillo .fachada-cara,
.fachada--verde .fachada-cara,.fachada--crudo .fachada-cara,
.exp--celeste,.exp--amarillo,.exp--verde,.exp--crudo,
.atractivo,.atractivo-min,.chapuzon-min,.consejo,.enchufes,.looker,
.parqueo,.zona,.sem-dia,.mes,.imp-sinfoto,.f-sello,.cama-foto,.guia-foto{
  --texto-70:var(--tinta);--texto-45:var(--tinta);--acento:var(--tinta);
  color:var(--tinta);
}

/* --- campos OSCUROS: papel encima (petróleo 11,94 · bermellón hondo 5,01) --- */
.zoc--petroleo .zoc-marco,.zoc--bermellon .zoc-marco,
.fachada--petroleo .fachada-cara,.fachada--bermellon .fachada-cara,
.exp--petroleo,.exp--bermellon,
.banda,.pie,.verbo,.indice,.manifiesto,.denuncia,
.emg-linea,.cama-etq,.cita-fecha,.anio-tira,.semana-rejilla,.sem-marca,
.seccion--petroleo,.oscuro{
  --texto-70:var(--celeste);--texto-45:var(--celeste);--acento:var(--papel);
  color:var(--papel);
}
.zoc--bermellon .zoc-marco{--texto-70:var(--papel);--texto-45:var(--papel)}

/* Sobre oscuro, los titulares en papel y las cifras en amarillo (8,96:1). */
.zoc--petroleo .zoc-marco h1,.zoc--petroleo .zoc-marco h2,
.exp--petroleo h1,.exp--petroleo h2,.exp--petroleo h3,
.exp--bermellon h2,.exp--bermellon h3,
.banda h2,.banda h3,.pie h2,.pie h3,.manifiesto h2,.denuncia h2{color:var(--papel)}
.exp--petroleo .lee-entradilla,.exp--bermellon .lee-entradilla,
.oscuro .lee-entradilla{color:var(--papel)}
.exp--petroleo .placa-cifra,.oscuro .placa-cifra{color:var(--amarillo)}

/* Los letreros toman el acento de su superficie, nunca un color propio. */
.exp .letrero,.zoc .letrero,.fachada .letrero,
.banda .letrero,.pie .letrero{color:var(--acento,var(--tinta))}
.exp .letrero--accion{border-bottom-color:currentColor}

/* ⚠️ El AZUL de la guía no puede ser campo con texto: 4,26 con tinta y
   3,23 con blanco. Los zócalos que lo pedían pasan a celeste. */
.zoc--azul .zoc-marco,.fachada--azul .fachada-cara{
  --campo:var(--celeste);--texto-70:var(--tinta);--texto-45:var(--tinta);
  color:var(--tinta);
}

/* ═══════════════════════════════════════ ② CENEFA ════════════════════ */
/* El friso oficial: rombo doble alternando con flor de cuatro pétalos.
   ⚠️ El % de %23 no se recodifica: el SVG va con # escrito como %23 UNA vez.
   Si se pasa por urllib.parse.quote otra vez, el SVG se pinta todo negro. */

.cenefa{
  height:26px;
  background-repeat:repeat-x;background-position:center;background-size:auto 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 52 26'%3E%3Cpath d='M13 3l7 10-7 10-7-10z' fill='%23E6392C'/%3E%3Cpath d='M13 8l3.5 5-3.5 5-3.5-5z' fill='%23F6F2E9'/%3E%3Cpath d='M39 13a5 5 0 0 1 5-5 5 5 0 0 1-5-5 5 5 0 0 1-5 5 5 5 0 0 1 5 5z' fill='%23E6392C'/%3E%3Cpath d='M39 23a5 5 0 0 1 5-5 5 5 0 0 1-5-5 5 5 0 0 1-5 5 5 5 0 0 1 5 5z' fill='%23E6392C'/%3E%3C/svg%3E");
}
.cenefa--petroleo{background-color:var(--petroleo)}

/* ═══════════════════════════════════════ ③ LETRERO ═══════════════════ */
/* Rotulación pintada: una frase, peso alto, UNA tinta. */

.letrero{margin:1.25rem 0;font-family:var(--display);font-weight:800;
  line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.letrero--normal{font-size:var(--t-letrero)}
.letrero--chico{font-size:1.4375rem}
.letrero--grande{font-size:clamp(2.25rem,5vw,3.5rem)}
.letrero--tinta{color:var(--tinta)}
.letrero--bermellon{color:var(--bermellon-txt)}
.letrero--celeste{color:var(--celeste-txt)}
.letrero--papel{color:var(--papel)}

.letrero--accion{display:inline-block;text-decoration:none;
  border-bottom:5px solid var(--bermellon);padding-bottom:.15rem}
.letrero--accion:hover .letrero-txt{color:var(--bermellon-txt)}

/* ═══════════════════════════════════════ ④ BANDO ═════════════════════ */
/* La proclama fijada en el muro de la Alcaldía. Filete grueso arriba y
   abajo, márgenes generosos, cuerpo MAYOR que el de lectura, sello y firma.
   Sin campo de color y sin figura: la seriedad viene de la composición.
   Ésta es la respuesta al texto solemne — ni tarjeta de colores ni texto
   por defecto. */

.bando{
  border-top:7px solid var(--tinta);
  border-bottom:7px solid var(--tinta);
  padding:2.75rem clamp(1.25rem,5vw,3.5rem);
  margin:3rem auto;
  max-width:60ch;
  background:var(--papel);
}
.bando-membrete{
  font-family:var(--display);font-weight:700;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-45);margin:0 0 1.5rem;
}
.bando-titulo{
  font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.1;
  color:var(--tinta);margin:0 0 1.25rem;letter-spacing:-.02em;
}
.bando-cuerpo p{
  font-size:var(--t-bando);line-height:1.62;color:var(--tinta);
  margin:0 0 1.1rem;
}
.bando-cuerpo p:last-child{margin-bottom:0}
.bando-firma{
  display:flex;align-items:center;gap:.85rem;
  margin:2rem 0 0;padding-top:1.25rem;
  border-top:2px solid var(--mortero);
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--texto-70);
}
.bando-sello{color:var(--bermellon-txt);flex:none;line-height:0}

/* El bando de ley — protección a la infancia. Más severo aún. */
.bando--ley{border-color:var(--bermellon-txt);background:var(--crudo)}
.bando--ley .bando-membrete{color:var(--bermellon-txt)}

/* ═══════════════════════════════════════ ⑤ PLACA ═════════════════════ */
/* Un dato tallado. Precedente del pueblo: «la palabra que nunca se terminó». */

.placa{
  display:flex;flex-direction:column;gap:.15rem;
  border-left:6px solid var(--bermellon);
  padding:.4rem 0 .4rem .85rem;
}
.placa-cifra{font-family:var(--display);font-weight:800;font-size:1.875rem;
  line-height:1;color:var(--tinta);letter-spacing:-.03em}
.placa-pie{font-size:var(--t-pie);line-height:1.35;color:var(--texto-45)}
.placa--celeste{border-left-color:var(--celeste-txt)}
.placa--verde{border-left-color:var(--verde-txt)}
.placa--papel .placa-cifra{color:var(--papel)}
.placa--papel .placa-pie{color:var(--celeste)}

/* ═══════════════════════════════════════ ⑥ SEÑAL ═════════════════════ */

.senal{
  border:var(--moldura) solid var(--tinta);border-radius:0;
  padding:1.1rem 1.15rem;background:var(--papel);
  display:flex;flex-direction:column;gap:.5rem;
}
.senal .zoc-fig{color:var(--bermellon-txt)}
.senal-titulo{font-family:var(--display);font-weight:800;font-size:1.125rem;
  margin:0;color:var(--tinta);line-height:1.15}
.senal-txt{margin:0;font-size:var(--t-pie);line-height:1.5;color:var(--texto-70)}

.senal--urgente{background:var(--bermellon-txt);border-color:var(--tinta)}
/* ⚠️ El hondo, no el puro: blanco sobre #E6392C da 4,21 y falla. La propia
   señal de emergencia incumplía la regla de la tabla de campos. */
.senal--urgente .senal-titulo{font-size:2.75rem;color:var(--papel);letter-spacing:-.04em}
.senal--urgente .senal-txt{color:var(--papel)}
.senal--urgente .zoc-fig{color:var(--papel)}

/* ═══════════════════════════════════════ ⑦ FICHA ═════════════════════ */

.ficha{
  border:2px solid var(--mortero);border-left:6px solid var(--celeste-txt);
  padding:1.1rem 1.25rem;background:var(--papel);
}
.ficha-nombre{font-family:var(--display);font-weight:800;font-size:1.0625rem;
  margin:0 0 .4rem;color:var(--tinta)}
.ficha-linea{margin:0;font-size:var(--t-pie);line-height:1.5;color:var(--texto-70)}
.ficha-acciones{margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:.85rem}
.ficha-accion{font-family:var(--display);font-weight:700;font-size:var(--t-pie);
  color:var(--bermellon-txt);text-decoration:none;
  border-bottom:2px solid currentColor}

/* ═══════════════════════════════════════ ⑧ PLANO ═════════════════════ */

.plano{margin:1.75rem 0;overflow-x:auto}
.plano-titulo{font-family:var(--display);font-weight:800;font-size:1.125rem;
  margin:0 0 .75rem;color:var(--tinta)}
.plano-et{font-family:var(--display);font-weight:600;font-size:14px;fill:var(--texto)}
.plano-val{font-family:var(--display);font-weight:800;font-size:14px;fill:var(--tinta)}
.plano-barra{fill:var(--celeste)}
.plano-pie{margin:.75rem 0 0;font-size:var(--t-pie);color:var(--texto-45)}

/* ═══════════════════════════════════════ ⑨ CALENDARIO ════════════════ */

.calendario{margin:2rem 0}
.calendario-anio{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;
  border:var(--moldura) solid var(--tinta);padding:3px;background:var(--tinta)}
.mes{
  appearance:none;border:0;border-radius:0;cursor:pointer;
  background:var(--mortero);color:var(--texto-45);
  padding:.85rem .25rem;font-family:var(--display);font-weight:700;
  display:flex;flex-direction:column;gap:.15rem;align-items:center;
}
.mes--fiesta{background:var(--amarillo);color:var(--tinta)}
.mes[aria-selected="true"]{background:var(--bermellon);color:var(--papel)}
.mes-abrev{font-size:1rem;line-height:1}
.mes-nombre{font-size:.625rem;letter-spacing:.06em;text-transform:uppercase}
.mes-panel{border:var(--moldura) solid var(--tinta);border-top:0;padding:1.5rem}

@media (max-width:760px){
  .calendario-anio{grid-template-columns:repeat(6,1fr)}
  .mes-nombre{display:none}
}

/* ═══════════════════════════════════════ ⑩ TESTIMONIO ═══════════════ */

.testimonio{margin:2rem 0;padding-left:1.5rem;border-left:6px solid var(--amarillo)}
.testimonio-titulo{font-family:var(--display);font-weight:800;font-size:1.125rem;
  margin:0 0 .6rem;color:var(--tinta)}
.testimonio-txt{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:1.5rem;line-height:1.28;color:var(--tinta);letter-spacing:-.02em;
  max-width:38ch;
}
.testimonio-firma{margin:.85rem 0 0;font-size:var(--t-pie);color:var(--texto-45)}

/* ═══════════════════════════ LA CALLE (el carrusel) ══════════════════ */
/* Una calle de Guatapé es literalmente esto: paneles enmarcados, a la misma
   altura, uno detrás de otro. ⚠️ En móvil NO se apila: el gesto horizontal
   ES el concepto, y además es el gesto nativo del teléfono. */

.calle{position:relative;margin:0 0 1rem}
.calle-tira{
  list-style:none;margin:0;padding:.25rem 0 1.25rem;
  display:flex;gap:1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.calle-tira::-webkit-scrollbar{display:none}
.calle-item{
  flex:0 0 clamp(232px,26vw,320px);
  scroll-snap-align:start;min-width:0;
}
.calle--ancha .calle-item{flex-basis:clamp(280px,42vw,520px)}

/* Se ve el borde del panel siguiente asomando: es lo que dice «hay más»
   sin necesidad de una flecha. */
.calle-tira{padding-right:2.5rem}

.calle-pista{height:4px;background:var(--mortero);margin:0;overflow:hidden}
.calle-pista-barra{display:block;height:100%;width:22%;background:var(--bermellon);
  transition:transform .18s ease-out}

.calle:focus-visible{outline:3px solid var(--bermellon-txt);outline-offset:6px}

/* ═══════════════════════════ LA FACHADA ═════════════════════════════ */

.fachada{border:var(--moldura) solid var(--tinta);background:var(--papel);height:100%;
  display:flex;flex-direction:column}
.fachada-cara{
  appearance:none;border:0;border-radius:0;cursor:pointer;width:100%;
  background:var(--campo,var(--celeste));color:var(--tinta);
  padding:1.5rem 1.15rem 1.25rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:1;
  font-family:inherit;
}
.fachada--celeste   .fachada-cara{--campo:var(--celeste)}
.fachada--bermellon .fachada-cara{--campo:var(--bermellon)}
.fachada--amarillo  .fachada-cara{--campo:var(--amarillo)}
.fachada--azul      .fachada-cara{--campo:var(--azul)}
.fachada--verde     .fachada-cara{--campo:var(--verde)}
.fachada--crudo     .fachada-cara{--campo:var(--mortero)}

.fachada-titulo{font-family:var(--display);font-weight:800;font-size:1.1875rem;
  line-height:1.12;letter-spacing:-.02em}
.fachada-resumen{margin:0;font-size:var(--t-pie);line-height:1.45;color:var(--tinta)}
.fachada-mas{
  width:26px;height:26px;margin-top:.35rem;flex:none;
  border:3px solid var(--tinta);position:relative;
}
.fachada-mas::before,.fachada-mas::after{
  content:"";position:absolute;background:var(--tinta);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.fachada-mas::before{width:12px;height:3px}
.fachada-mas::after{width:3px;height:12px;transition:opacity .15s}
[aria-expanded="true"] .fachada-mas::after{opacity:0}

.fachada-dentro{border-top:var(--moldura) solid var(--tinta);padding:1.15rem}
.fachada-hojas{list-style:none;margin:0;padding:0}
.hoja-foto{margin:0}
.hoja-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hoja-pie{margin:.5rem 0 0;font-size:var(--t-pie);color:var(--texto-45)}
.hoja-datos{display:flex;flex-direction:column;gap:.7rem}
.hoja-txt{font-size:var(--t-pie);line-height:1.6;color:var(--texto-70)}
.hoja-hacer{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.55rem;font-size:var(--t-pie);color:var(--texto-70)}
.hoja-hacer li{display:flex;gap:.6rem;align-items:baseline}
.hacer-n{width:9px;height:9px;flex:none;background:var(--bermellon);
  transform:rotate(45deg)}

.fachada-puntos{display:flex;gap:.4rem;justify-content:center;margin:1rem 0 0}
.hoja-punto{
  appearance:none;border:2px solid var(--tinta);background:transparent;
  width:11px;height:11px;padding:0;cursor:pointer;border-radius:0;
  transform:rotate(45deg);
}
.hoja-punto[aria-selected="true"]{background:var(--bermellon)}

/* ═══════════════════════════ superficies oscuras ════════════════════ */
/* Sobre petróleo pasan AA sin retocar: amarillo 8,96 · celeste 7,31 ·
   verde 6,40. El bermellón (2,83) y el azul (3,70) NUNCA son texto aquí. */

.oscuro{background:var(--petroleo);color:var(--celeste)}
.oscuro h1,.oscuro h2,.oscuro h3{color:var(--papel)}
.oscuro .lee-entradilla{color:var(--papel)}
.oscuro .lee-cuerpo,.oscuro .entradilla{color:var(--celeste)}
.oscuro .placa-cifra{color:var(--amarillo)}
.oscuro .placa-pie{color:var(--celeste)}
.oscuro .placa{border-left-color:var(--amarillo)}

/* ═══════════════════════════ movimiento ═════════════════════════════ */
/* Un solo momento orquestado: la calle del hero se desplaza sola una vez,
   corto, y se detiene. Todo lo demás responde a una acción. */

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

/* ═══════════════════════════ responsive ═════════════════════════════ */

@media (max-width:900px){
  .lee{grid-template-columns:1fr}
  .lee-margen{flex-direction:row;flex-wrap:wrap;gap:1.25rem}
  :root{--t-letrero:1.625rem;--t-bando:1.1875rem;--t-entradilla:1.125rem}
  .bando{padding:2rem 1.25rem;margin:2rem auto}
}


/* ⚠️ EL PIE DEL ZÓCALO NO ES DEL CAMPO ═══════════════════════════════════
   `.zoc-txt` va FUERA del marco, apoyado en el fondo de la sección. Darle
   el color del campo lo dejó blanco sobre blanco —1,0:1, invisible y sin un
   solo error en consola—. Sigue a la sección, siempre, y por eso va al final
   de la hoja: para ganar a cualquier regla de campo. */
.zoc-txt{color:var(--texto-70)}
.oscuro .zoc-txt,.banda .zoc-txt,.pie .zoc-txt,
.seccion--petroleo .zoc-txt{color:var(--celeste)}


/* ══════════ ZÓCALOS DENTRO DE UNA BANDA OSCURA ═══════════════════════
   La hoja vieja da por hecho que un zócalo de la banda de emergencias va
   sobre fondo oscuro y pinta su leyenda en blanco. Esta hoja les estaba
   dando campo CELESTE claro — y blanco sobre celeste da 1,45:1. Se alinean
   los dos supuestos: dentro de una banda oscura, el campo es petróleo. */
.banda .zoc-marco,.oscura .zoc-marco,.util--emergencias .zoc-marco,
.pie .zoc-marco{
  --campo:var(--petroleo);color:var(--papel);
  --texto-70:var(--celeste);--texto-45:var(--celeste);
  box-shadow:inset 0 0 0 2px var(--petroleo), inset 0 0 0 5px var(--celeste);
  border-color:var(--celeste);
}
.banda .zoc-fig,.oscura .zoc-fig,.util--emergencias .zoc-fig{color:var(--celeste)}

/* ══════════ LOS TRES ÚLTIMOS, CADA UNO POR SU RAZÓN ══════════════════ */

/* 1. Sobre bermellón hondo el secundario NO puede ser celeste (3,07:1).
      El bermellón hondo solo admite blanco, y por eso da 5,01:1. */
.exp--bermellon,.zoc--bermellon .zoc-marco,.fachada--bermellon .fachada-cara{
  --texto-70:var(--papel);--texto-45:var(--papel);
}
.exp--bermellon .zoc-txt{color:var(--papel)}

/* 2. ⚠️ Los colores de texto de la guía se midieron contra BLANCO. Sobre
      crudo pierden un escalón: el amarillo texto se queda en 4,04:1. En
      cualquier superficie que no sea blanca, el destacado va en tinta. */
.consejo b,.consejo strong,.zona b,.parqueo b,.enchufes b{color:var(--tinta)}
/* ⚠️ `.atractivo` NO entra: es una tarjeta CON FOTOGRAFÍA, no una superficie
   clara. Meterla aquí dejó el titular en tinta sobre la foto — ilegible, y
   el auditor no lo ve porque excluye el texto sobre fotografía. */
/* ⚠️ `.util` NO entra en la lista: tiene variante clara Y oscura (crudo ×3,
   mortero ×2, petróleo ×2). Una regla ciega le puso tinta sobre petróleo y
   dejó las notas del directorio a 1,15:1. Cada regla de color se acota a la
   superficie que conoce. */
.util--claro b,.util--crudo b{color:var(--tinta)}

/* 3. La dirección de la Mesa de Empresarios y del Punto de Información
      iba en un celeste de texto que no llega sobre crudo. */
.dato-dir{color:var(--texto-70)}
.oscura .dato-dir,.banda .dato-dir,.pie .dato-dir{color:var(--celeste)}

/* ══════════ LOS CUATRO DE LA HOME ════════════════════════════════════
   Mismo patrón una vez más, y por eso queda escrito: los colores de texto
   de la guía están medidos CONTRA BLANCO. En cuanto la superficie deja de
   ser blanca pierden un escalón y se caen de AA sin avisar.
     · celeste texto sobre crudo    → 4,03  (sobre blanco daba 4,50)
     · azul texto sobre amarillo    → 3,39
     · texto-45 sobre un tinte      → 4,37
   Sobre cualquier superficie que no sea blanca, tinta.

   ⚠️ `.kicker` es el rótulo en versalitas espaciadas que el plan manda
   ELIMINAR (§4.4). Se le arregla el color para no dejar el sitio fuera de
   AA mientras tanto, pero desaparece al rehacer la home. */
/* --texto-70 #2C626D está medido y pasa en las tres superficies claras
   donde vive el kicker: blanco 6,83 · crudo 6,11 · amarillo 5,13. */
.seccion .kicker,.portada .kicker,.env .kicker,p.f-cuando,
.seccion p.f-cuando{color:var(--texto-70)}
.oscura .kicker,.banda .kicker,.seccion--petroleo .kicker,
.oscura p.f-cuando{color:var(--amarillo)}

/* ══════════ LA ÚLTIMA: EL AZUL COMO FONDO DE ETIQUETA ════════════════
   `.cita-tipo--cultura` llevaba blanco sobre el azul de la guía: 3,23:1.
   Es el mismo hallazgo de la tabla de campos — el azul no sostiene texto
   ni en blanco ni en tinta. La etiqueta pasa a petróleo (11,94:1), que es
   la superficie oscura del sistema. */
.cita-tipo--cultura{background:var(--petroleo);color:var(--papel)}

/* ══════════ MAQUETA DE LA PÁGINA DE EXPERIENCIAS ═════════════════════
   `.exp-in` es una retícula de dos columnas (15rem + resto) que la hoja
   vieja rellenaba con `.exp-titulo`. Al renombrar el bloque a `.exp-cabeza`
   se quedó sin celda y el titular se montaba encima del texto. */
.exp-cabeza{grid-column:1;min-width:0}
.exp-cabeza h2{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);line-height:.98}
.exp-cabeza .letrero{margin:.6rem 0 0;font-size:1.0625rem}
.exp-cuerpo{grid-column:2;min-width:0}

/* El panel de un plan: la figura pequeña y el nombre grande. Aquí el dato
   es el nombre, no el icono. */
.zoc--plan .zoc-campo{gap:.4rem}
.zoc--plan .zoc-marco{padding:1.1rem .9rem .9rem}
.zoc--plan .zoc-leyenda{font-size:1.0625rem;margin:.35rem 0 0}
.zoc--plan .exp-motivo{width:40px;height:40px;margin:0}

/* ══════════ LA SECCIÓN DE LOS BANDOS ═════════════════════════════════
   Un bando es un DOCUMENTO fijado en un muro: va sobre papel, no sobre
   una superficie oscura. Antes estas dos secciones eran petróleo con
   párrafos encima. */
.bandos{background:var(--papel);padding:clamp(2rem,5vw,4rem) 0}
.canales-senal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;max-width:60ch;margin:0 auto;
}
.canales-senal a{color:inherit;font-weight:700}
.senal--urgente .senal-txt a{color:var(--papel)}

/* ══════════ EL FRISO NECESITA SU PROPIO CAMPO ════════════════════════
   Un zócalo es una banda CON CAMPO. Los frisos de agua tenían el fondo del
   mismo petróleo que la sección que bordean, así que la banda desaparecía y
   los motivos quedaban flotando: «corre y luego desaparece».
   (Regresión mía: `--hondo` era un turquesa propio, y al remapearlo a la
   paleta oficial cayó justo en el color de la sección.)

   Campo celeste con los motivos en petróleo y amarillo: se lee sobre papel
   y sobre petróleo. */
.friso--velero{
  --f-fondo:var(--celeste);
  --f-img:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2224%22 viewBox=%220 0 48 24%22><path d=%22M12 3 21 12 12 21 3 12Z%22 fill=%22%23083D43%22/><path d=%22M12 7.6 16.4 12 12 16.4 7.6 12Z%22 fill=%22%23F7E05B%22/><g transform=%22translate(24 0)%22><path d=%22M12 2.5c2.1 3.4 2.1 6.4 0 9.5-2.1-3.1-2.1-6.1 0-9.5Z%22 fill=%22%23083D43%22/><path d=%22M12 21.5c-2.1-3.4-2.1-6.4 0-9.5 2.1 3.1 2.1 6.1 0 9.5Z%22 fill=%22%23083D43%22/><path d=%22M2.5 12c3.4-2.1 6.4-2.1 9.5 0-3.1 2.1-6.1 2.1-9.5 0Z%22 fill=%22%23083D43%22/><path d=%22M21.5 12c-3.4 2.1-6.4 2.1-9.5 0 3.1-2.1 6.1-2.1 9.5 0Z%22 fill=%22%23083D43%22/></g></svg>");
}

/* El motivo mide 24 px y la banda hasta 30: sin centrarlo, las flores se
   cortan por abajo. */
.friso::after{background-position:center!important}

/* Y el friso crudo sobre página blanca tampoco tenía campo visible. */
.friso--sol,.friso--flor{--f-fondo:var(--mortero)}

/* ══════════ EL ZÓCALO DE LA TARJETA CON FOTO ═════════════════════════
   El título iba sobre un degradado encima de la foto y no se leía. Un
   degradado depende de lo que haya debajo, y la foto cambia en cada
   tarjeta: sobre el cielo claro de la Piedra el titular desaparecía.

   La solución es la del pueblo, y la pidió el CEO: **un zócalo**. Una banda
   de campo pleno al PIE de la fachada — que es literalmente dónde va un
   zócalo de verdad— con su moldura y el texto en tinta. Deja de depender
   de la fotografía. */
.atractivo::after{display:none}          /* fuera el degradado */
.atractivo{background:var(--mortero)}
.atractivo img{height:auto;aspect-ratio:4/3;object-fit:cover}

/* Las dos líneas de moldura entre foto y banda se retiraron a petición del
   CEO (2026-09-16): la banda de campo pleno se queda; la moldura, no. */
.atractivo-txt{
  position:static;padding:0;color:var(--tinta);
  background:var(--crudo);
}
.atractivo-txt > *{padding-inline:1rem}
.atractivo-txt b{padding-top:1rem;color:var(--tinta);font-size:1.2rem}
.atractivo-txt span{color:var(--texto-70)}
.atractivo-txt > :last-child{padding-bottom:1rem}
.atractivo-alt{color:var(--texto-45)}

/* La tarjeta deja de ser 4/5 fijo: la foto manda su proporción y el zócalo
   crece con su texto. */
.atractivo{aspect-ratio:auto;display:flex;flex-direction:column}
.atractivo-txt{margin-top:auto}

/* ══════════ EL NAV, CON OCHO ENTRADAS ════════════════════════════════
   «Viaja con respeto» es la octava y a 1180 px la barra desbordaba en
   horizontal. Se comprime el nav en la franja estrecha en vez de acortar
   la etiqueta: la página de turismo responsable la pidió el CEO con nombre
   propio y encogerlo a «Respeto» la haría ilegible. */
@media (min-width:961px) and (max-width:1340px){
  .barra{gap:.9rem;padding-inline:1rem}
  .barra nav{gap:.7rem}
  .barra nav a{font-size:.7rem;letter-spacing:.05em}
  .barra .boton{font-size:.7rem;padding:.65rem .8rem}
  .marca-bajada{display:none}   /* la bajada del logo se recupera al ensanchar */
}
@media (min-width:961px) and (max-width:1120px){
  .barra nav{gap:.6rem}
  .barra nav a{font-size:.68rem;letter-spacing:.05em}
}
/* El botón partía «Arma tu viaje» en dos líneas y engordaba la barra a 103 px. */
.barra .boton{white-space:nowrap}

/* ═══ Zócalo CON FOTO: sin recuadro (CEO, 2026-09-16: «eliminemos los recuadros») ═══
   Va al final a propósito: `.zoc--plan .zoc-marco` tiene la misma especificidad
   y, más arriba, ganaba por orden de cascada. La foto va limpia; la leyenda
   conserva su estilo, debajo. */
.zoc--confoto .zoc-marco{padding:0;border:0;box-shadow:none;background:transparent}
.zoc--confoto .zoc-campo{align-items:stretch;gap:.35rem;border:0;padding:0;min-height:0;background:transparent}
.zoc-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--mortero)}
.zoc--confoto .zoc-leyenda{margin-top:.5rem}


/* ═══════════════════════════════════════════════════════════════════════
   CAMBIOS FINALES DE LA ALCALDÍA (2026-09-20)
   «Cambios finales sitio web Guatape.docx». Van al final a propósito: ganan
   por orden de cascada a todo lo anterior.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Botones de filtro EN REPOSO ─────────────────────────────────────────
   Estaban en la lista de «campos oscuros» y salían con texto blanco sobre
   amarillo (el Contador), crudo (la agenda) y blanco (dónde dormir): «el
   amarillo hace que se pierdan las letras blancas». En reposo: tinta sobre
   el campo, borde de tinta al 55 %. Pulsado: campo de tinta, texto claro. */
.filtro{color:var(--tinta);border-color:rgba(11,50,56,.55);background:rgba(255,255,255,.35)}
.filtro:hover{color:var(--tinta);border-color:var(--tinta);background:rgba(255,255,255,.7)}
.filtro[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.seccion--am .filtro{background:transparent}
.seccion--am .filtro:hover{background:rgba(255,255,255,.35)}
/* Va DESPUÉS de las dos de arriba: `.seccion--am .filtro{background}` tiene la
   misma especificidad que `.filtro[aria-pressed]` y el pulsado se quedaba sin campo. */
.seccion--am .filtro[aria-pressed="true"]{background:var(--tinta);color:var(--amarillo);border-color:var(--tinta)}
.filtros--cama .filtro{color:var(--tinta);border-color:rgba(11,50,56,.4);background:transparent}
.filtros--cama .filtro:hover{color:var(--tinta);border-color:var(--tinta);background:var(--crudo)}
.filtros--cama .filtro[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* ── El agua, sobre CELESTE ──────────────────────────────────────────────
   «El color verde hace ver las imágenes oscuras». Tenían razón dos veces:
   el petróleo de fondo, y encima las fotos iban al 86 % con un degradado
   oscuro sobre la mitad inferior. La sección pasa al celeste oficial (texto
   en tinta, 8,42:1) y las tarjetas al patrón aprobado de los imperdibles:
   foto limpia y ZÓCALO de texto debajo, sin velo. */
.seccion--celeste{background:var(--celeste);color:var(--tinta)}
.seccion--celeste h2,.seccion--celeste h3,.seccion--celeste .kicker,
.seccion--celeste .prosa,.seccion--celeste .prosa b,.seccion--celeste .prosa p,
.seccion--celeste .carrusel-pie,.seccion--celeste .rio-pie{color:var(--tinta)}
.seccion--celeste .pintada{--p-a:var(--tinta);--p-b:var(--bermellon)}
.seccion--celeste .cabeza-cifra{color:rgba(11,50,56,.16)}
.seccion--celeste :where(a,button):focus-visible{outline-color:var(--tinta)}
.seccion--celeste .carrusel::-webkit-scrollbar-thumb{background:rgba(11,50,56,.35)}
.chapuzon{aspect-ratio:auto;display:flex;flex-direction:column;border:0;border-radius:6px;
  background:var(--papel);color:var(--tinta);transition:transform .3s var(--t)}
.chapuzon:hover{transform:translateY(-4px)}
.chapuzon img{height:auto;aspect-ratio:3/4;opacity:1;transition:transform .8s var(--t)}
.chapuzon:hover img{transform:scale(1.04);opacity:1}
.chapuzon-txt{position:static;padding:.9rem 1rem 1rem;background:var(--papel);color:var(--tinta);margin-top:auto}
.chapuzon-txt b{color:var(--tinta);font-size:1.15rem}
.chapuzon-txt span{color:var(--texto-70)}
.chapuzon-min{color:var(--tinta);background:var(--amarillo)}

/* ── Sin recuadros de doble línea en las fotografías ──────────────────── */
.foto img{border:0;outline:0;background:var(--mortero)}
.foto{padding:0}
.cama{border:0;border-radius:6px;background:var(--crudo)}
.cama:hover{border-color:transparent;box-shadow:none;transform:translateY(-4px)}

/* ── Carruseles: en móvil los elementos van CENTRADOS ─────────────────────
   «Que queden centrados y no alineados a la izquierda». Anclaje al centro y
   margen lateral igual a ambos lados, para que el primero y el último también
   puedan centrarse. Con ratón se arrastran (formas.js). */
.calle-tira,.carrusel{cursor:grab}
.calle-tira img,.carrusel img{-webkit-user-drag:none;user-select:none}
.calle-tira[data-arrastrando],.carrusel[data-arrastrando]{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.calle-tira[data-arrastrando] *,.carrusel[data-arrastrando] *{pointer-events:none}
@media (max-width:640px){
  /* El margen lateral se calcula en % del propio contenedor, no en vw: las
     calles de /experiencias/ viven dentro de una franja con sangría y con vw
     el primer panel quedaba corrido. */
  .carrusel{scroll-padding-inline:50%;padding-inline:calc(50% - var(--item-w,10rem) / 2)}
  .carrusel>*{scroll-snap-align:center}
  .atractivo{--item-w:15rem;flex-basis:15rem}
  .chapuzon{--item-w:13rem;flex-basis:13rem}
  .calle-tira{scroll-snap-align:center;padding-inline:calc(50% - min(78vw,420px) / 2)!important}
  .calle-item{scroll-snap-align:center}
  .calle--foto .calle-item{flex-basis:min(78vw,420px)}
  .calle:not(.calle--foto) .calle-item{flex-basis:min(74vw,320px)}
  .calle:not(.calle--foto) .calle-tira{padding-inline:calc(50% - min(74vw,320px) / 2)!important}
  .galeria .calle-pista{margin-inline:var(--marco)}
}

/* ── El año de Guatapé, sin cuadrícula ───────────────────────────────────
   «Que no se perciba brusco y cuadriculado, y que los elementos de los
   eventos sean uniformes en lo ancho». Antes: doce cajas con marco de
   petróleo y rejilla de 5 px. Ahora: una línea de tiempo en doce columnas
   sin marco, meses como rótulos sobre un filete, y cada celebración es una
   BARRA de ancho fijo (una columna, o dos si cruza de mes) en carriles
   apilados, así ninguna mide distinto. En pantallas estrechas la tira se
   desplaza en horizontal, como cualquier calle del sitio. */
.anio-mapa{position:relative;margin:0;padding:2.7rem 0 0;list-style:none;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(var(--carriles,1),4.6rem);column-gap:6px;row-gap:6px}
.anio-scroll{overflow-x:auto;scrollbar-width:thin;padding-bottom:.5rem;
  margin-inline:calc(-1 * var(--marco));padding-inline:var(--marco)}
.anio-scroll .anio-mapa{min-width:760px}
.anio-f{margin:0;padding:0;display:grid}
.anio-mes{position:absolute;left:0;right:0;top:-2.7rem;height:2rem;
  display:flex;justify-content:center;align-items:flex-start;
  font-family:var(--dato);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-45)}
.anio-mes abbr{text-decoration:none}
.anio-mes::after{content:'';position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(11,50,56,.28)}
.anio-mes--fiesta{color:var(--tinta)}
.anio-mes--fiesta::after{background:var(--bermellon);width:8px;height:8px;bottom:-4px}
.anio-col{grid-row:1/-1;align-self:stretch;position:relative;pointer-events:none;margin:0;padding:0}
.anio-col::before{content:'';position:absolute;left:-3px;right:-3px;top:-.7rem;height:1px;background:rgba(11,50,56,.18)}
.anio-col:first-child::before{left:0}.anio-col:nth-child(12)::before{right:0}
/* Sin campo de fondo por columna: con él volvían a leerse doce cajas.
   Las columnas solo sostienen el rótulo y su tramo de la línea. Las barras
   van posicionadas para pintarse ENCIMA de las columnas (que son relative). */
.anio-f{position:relative;z-index:1}
.mes-fiesta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  margin:0;padding:.45rem .3rem;border-radius:6px;text-decoration:none;text-align:center;
  transition:transform .18s var(--t),box-shadow .18s var(--t)}
.mes-fiesta:hover{transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(11,50,56,.7)}
.mes-fiesta .zoc-fig{width:26px;height:26px}
/* ⚠ Esta gana sobre la de guatape.css: formas.css se carga después.
   Subida de .6rem (9,6 px) a .68rem en la auditoría del 2026-09-24. */
.mes-nombre{font-size:.68rem;letter-spacing:.03em;line-height:1.15}
/* El `.calendario` viejo oculta `.mes-nombre` en móvil; aquí la tira se
   desplaza en horizontal y el nombre cabe siempre. */
.anio-mapa .mes-nombre{display:block}
.mes-fiesta--bermellon{background:var(--bermellon-txt);color:#fff}
.mes-fiesta--azul{background:#2D7DAE;color:#fff}
.mes-fiesta--verde{background:var(--verde);color:var(--tinta)}
.mes-fiesta--celeste{background:var(--celeste);color:var(--tinta)}
.mes-fiesta--amarillo{background:var(--amarillo);color:var(--tinta)}
.mes-fiesta--petroleo{background:var(--petroleo);color:var(--amarillo)}
.anio-detalle{margin-top:2rem}
.f{border-radius:0 6px 6px 0}

/* ── Las tres reseñas ────────────────────────────────────────────────── */
.voces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2.5rem;margin-top:2rem}
.voces .testimonio{margin:0}
@media (max-width:900px){.voces{grid-template-columns:1fr}}

/* ── Tres desbordes de 2–15 px en 320 px, vistos en el barrido del 2026-09-20 ──
   `minmax(19rem,1fr)` no puede encoger por debajo de 19rem y a 320 px sobran
   2 px; el enlace a monjesbenedictinosguatape.org no tiene por dónde partirse;
   y la semana de residuos a 4 columnas seguía siendo ancha para «Inservibles ·
   rural». */
.anio-detalle{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.imp-txt a,.detalle a{overflow-wrap:anywhere}
@media (max-width:400px){
  .semana-rejilla{grid-template-columns:repeat(2,1fr)}
  .sem-marca b{overflow-wrap:anywhere}
}