/* ═══════════════════════════════════════════════════════════════
   ÁREA TOCABLE MÍNIMA · páginas de ciudad y venue · 2026-09-08
   (ampliada el 2026-09-14 a 5 páginas más: cabo, cenote Tulum, Los Cabos
   ES, Mayakoba y Riviera Maya bodas. Esas cinco SÍ cargan responsive.css,
   pero sus migas usan `.breadcrumbs` y seguían en 12px de alto, porque la
   regla global de 44px no aplica a elementos en LÍNEA. De esta hoja solo
   les entra la regla de migas: no usan --gold-2, ni .col-links, ni
   h3 > a, así que el resto es inerte en ellas.)

   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; }