/* ═══════════════════════════════════════════════════════════════
   ÁREA TOCABLE MÍNIMA · páginas de ciudad y venue · 2026-09-08
   Estas 27 páginas NO cargan responsive.css, así que ninguna de las
   reglas de área tocable del sitio les llegaba nunca. Medido en
   WebKit a 402px: las migas de navegación en 14px de alto y los
   enlaces del pie en 21px. Son navegación, no texto dentro de una
   frase, así que les corresponde el mínimo de 44px.

   Por qué no basta con `a { min-height: 44px }`: esa propiedad NO
   aplica a elementos en LÍNEA, y estos enlaces lo son. Hay que
   sacarlos del flujo en línea para que la altura mínima cuente.

   Se sirve como hoja aparte y no metiendo responsive.css entero,
   porque esa trae reglas de maquetación de todo el sitio y estas
   páginas tienen su propio estilo embebido.
   ═══════════════════════════════════════════════════════════════ */

/* Migas: el relleno crece hacia arriba y hacia abajo y se le resta
   por margen, para que la fila siga cayendo donde caía. */
.bc a {
  display: inline-block;
  padding: 15px 4px;
  margin: -15px 0;
}

/* Pie: aquí sí conviene que separe más, son enlaces apilados. */
footer .col-links a,
.col-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Igual que .bc, pero para las migas con la otra clase. Dos posts del
   diario las llevan en su estilo embebido y no cargan blog.css, donde
   vive el arreglo del resto. */
.breadcrumbs a {
  display: inline-block;
  padding: 14px 4px;
  margin: -14px 0;
}

/* Enlaces que SON el título de una tarjeta (un <a> que llena su <h3>).
   Son navegación, no texto dentro de una frase, y medían 27px de alto en
   las fichas de venue. El relleno crece y se compensa por margen para no
   separar las tarjetas. */
h3 > a:only-child {
  display: inline-block;
  padding: 9px 0;
  margin: -9px 0;
}

/* ═══════════════════════════════════════════════════════════════
   CONTRASTE DEL DORADO SOBRE FONDO CLARO · 2026-09-08
   Medido en WebKit: en las páginas de ciudad, 39 textos quedaban
   por debajo del mínimo de contraste (razones de 2.89 a 3.31 contra
   el 4.5 que pide la norma), incluidos ENLACES DEL CUERPO a 17px.
   La causa es que un MISMO dorado, #a8894a, viste dos fondos
   opuestos: sobre el crema se queda corto, y sobre el azul tinta
   del hero, el FAQ, el bloque de cierre y el pie va perfecto (5.7).
   Un solo color no puede servir a los dos, así que se separan:
   el dorado profundo pasa a ser el de fondo claro, y las secciones
   oscuras recuperan el dorado claro heredando la variable.
   Comprobado antes de tocar: esas cuatro secciones son oscuras en
   todas las páginas de ciudad, no solo en la que salió el fallo.
   ═══════════════════════════════════════════════════════════════ */
:root { --gold-2: #7d6428; }
.hero, .faq, .cta-block, .colophon, footer { --gold-2: #c9a54e; }