/* Tema gris + café (prueba, 2026-10-12, propuesta de Víctor por audio): la página en gris clarito
   y muchas zonas en marrón (cabecera, mosaico de fotos, franjas, reserva y pie), con los toques
   azules. Usa la estructura del tema Crema (página clara, bloques .lb-cafe en café) cambiando solo
   los cremas por grises. */
html[data-theme="griscafe"] {
  --crema: #f5f5f4;          /* página; y texto claro sobre las zonas marrones */
  --crema-clara: #ffffff;    /* fichas */
  --crema-tostada: #ebebea;
  --crema-filete: #d6d6d5;   /* filetes sobre gris */
  --crema-apagada: #c9bfb3;  /* texto secundario sobre café (8:1) */
  --cafe-apagado: #5c4a3a;   /* texto secundario sobre gris (8:1) */
  color-scheme: light;
}

/* Zonas marrones: cabecera, mosaico y franjas (.seccion--baja) llevan las variables del bloque café */
html[data-theme="griscafe"] .cabecera,
html[data-theme="griscafe"] .mosaico,
html[data-theme="griscafe"] .seccion--baja {
  --superficie: var(--cafe); --superficie-alta: var(--cafe-alto); --superficie-baja: var(--cafe-profundo);
  --tinta: var(--crema); --tinta-suave: var(--crema-apagada);
  --filete: var(--cafe-marca-agua); --filete-fuerte: var(--crema);
  --acento-texto: var(--cobalto-claro); --foco: var(--cobalto-claro);
  background: var(--cafe); color: var(--crema);
}
html[data-theme="griscafe"] .lb-cabecera { border-bottom-color: var(--cafe-marca-agua); }
/* La reserva va en café y el pie un punto más oscuro para separarse */
html[data-theme="griscafe"] .lb-pie.lb-cafe { background: var(--cafe-profundo); }
html[data-theme="griscafe"] .lb-reserva .lb-boton--claro { background: var(--cobalto); border-color: var(--cobalto); color: var(--crema); }
html[data-theme="griscafe"] .lb-reserva .lb-boton--claro:hover { background: var(--crema); border-color: var(--crema); color: var(--cafe); }

/* Portada sin difuminado: botones de reserva rellenos de café para leerse sobre la foto */
html[data-theme="griscafe"] .portada-foto__reservas .lb-boton { background: var(--cafe); border-color: var(--cafe); color: var(--crema); }
html[data-theme="griscafe"] .portada-foto__reservas .lb-boton:hover { background: var(--crema); border-color: var(--crema); color: var(--cafe); }
@media (max-width: 860px) {
  html[data-theme="griscafe"] .portada-foto__reservas { margin: var(--espacio-4) var(--espacio-4) var(--espacio-5); }
}