/*
Theme Name: Riad El Jadida
Theme URI: https://riadeljadida.com
Description: Tema de bloques a medida para el Restaurante Riad El Jadida. Paleta y tipografía derivadas del logo de la marca.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.2
Text Domain: riad-el-jadida
Tags: full-site-editing, block-theme, restaurant
*/

/*
  Casi todo el estilo vive en theme.json.
  Aquí solo va lo que theme.json no puede expresar.
*/

/*
  La cenefa: friso geometrico de estrella de ocho puntas y rombo enlazados
  por una linea, como una tira de zellige. La estrella se dibuja igual que
  en el isotipo (dos cuadrados superpuestos girados 45 grados): es el mismo
  lenguaje geometrico de la marca, no un motivo distinto.
*/
.riad-cenefa {
  height: 30px;
  background-color: var(--wp--preset--color--fondo-hondo);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22108%22%20height%3D%2230%22%20viewBox%3D%220%200%20108%2030%22%3E%3Crect%20x%3D%220%22%20y%3D%2214.5%22%20width%3D%22108%22%20height%3D%221%22%20fill%3D%22%23C8A557%22%20fill-opacity%3D%220.4%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23C8A557%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23C8A557%22%20fill-opacity%3D%221%22%20transform%3D%22rotate%2845%2012%2015%29%22%2F%3E%3Crect%20x%3D%2226.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%233E9BC9%22%20fill-opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%2226.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%233E9BC9%22%20fill-opacity%3D%220.95%22%20transform%3D%22rotate%2845%2030%2015%29%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%232E9E6B%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%232E9E6B%22%20fill-opacity%3D%221%22%20transform%3D%22rotate%2845%2048%2015%29%22%2F%3E%3Crect%20x%3D%2262.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%23C8A557%22%20fill-opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%2262.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%23C8A557%22%20fill-opacity%3D%220.95%22%20transform%3D%22rotate%2845%2066%2015%29%22%2F%3E%3Crect%20x%3D%2279%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233E9BC9%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2279%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233E9BC9%22%20fill-opacity%3D%221%22%20transform%3D%22rotate%2845%2084%2015%29%22%2F%3E%3Crect%20x%3D%2298.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%232E9E6B%22%20fill-opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%2298.8%22%20y%3D%2211.8%22%20width%3D%226.4%22%20height%3D%226.4%22%20fill%3D%22%232E9E6B%22%20fill-opacity%3D%220.95%22%20transform%3D%22rotate%2845%20102%2015%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* Enlaces del contenido: subrayado fino en oro, no el subrayado por defecto. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--oro);
  padding-bottom: 1px;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
  border-bottom-color: var(--wp--preset--color--oro-claro);
}

/* Foco visible y con contraste suficiente sobre fondo oscuro. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--oro-claro);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ MARCA */

/*
  El emblema de la cabecera. El color lo pone aqui y no en el SVG porque el
  dibujo usa `currentColor`: asi el mismo trazado sirve en oro sobre fondo
  oscuro, en crema sobre la foto del encabezado y en negro al imprimir.
*/
.riad-marca {
  display: flex;
  color: var(--wp--preset--color--oro);
  line-height: 0;
}

.riad-emblema {
  width: auto;
  height: auto;
}

/*
  El emblema en color, como el logo que mando el cliente: oval verde, arco de
  cobre, roseta azul y oro. Lo pide el `riad-emblema--color` que pone el PHP.

  Sin esa clase el dibujo entero hereda `currentColor` y sale a una tinta, que
  es lo que hace falta al imprimir la carta y en la tarjeta para compartir.

  Los tonos son mas vivos que los de la paleta de fondos: un trazo de un pixel
  necesita mas luz que un rectangulo de color para verse igual de vivo. Todos
  pasan de 6:1 sobre el fondo oscuro del tema.
*/
.riad-emblema--color {
  --emblema-oro: var(--wp--preset--color--oro);
  --emblema-verde: #2E9E6B;
  --emblema-azul: #3E9BC9;
  --emblema-cobre: #D4823F;
}

.riad-emblema--color .riad-emblema__oval,
.riad-emblema--color .riad-emblema__farol { stroke: var(--emblema-verde); }

.riad-emblema--color .riad-emblema__arco { stroke: var(--emblema-cobre); }

.riad-emblema--color .riad-emblema__luna,
.riad-emblema--color .riad-emblema__engastadas,
.riad-emblema--color .riad-emblema__marco,
.riad-emblema--color .riad-emblema__corazon,
.riad-emblema--color .riad-emblema__filete { stroke: var(--emblema-oro); }

.riad-emblema--color .riad-emblema__roseta { stroke: var(--emblema-azul); }

/* Las piezas que en el logo van rellenas de zellige, rellenas. Es lo que
   separa un dibujo de linea coloreado de algo que parece un logo. */
.riad-emblema--color .riad-emblema__roseta polygon {
  fill: color-mix(in srgb, var(--emblema-azul) 30%, transparent);
}

.riad-emblema--color .riad-emblema__engastadas polygon,
.riad-emblema--color .riad-emblema__luna polygon,
.riad-emblema--color .riad-emblema__filete polygon {
  fill: color-mix(in srgb, var(--emblema-oro) 32%, transparent);
}

.riad-emblema--color .riad-emblema__corazon circle {
  fill: color-mix(in srgb, var(--emblema-oro) 45%, transparent);
}

/* Quien pide alto contraste no necesita cuatro colores en un logo de 52 px:
   se le devuelve el emblema a una tinta, que se lee mejor. */
@media (prefers-contrast: more) {
  .riad-emblema--color * {
    stroke: currentColor !important;
    fill: none !important;
  }
}

/* En la cabecera, 52 px. Es el tamano por debajo del cual el arco y la roseta
   dejan de distinguirse; el emblema del cliente tiene detalle y necesita
   sitio. A cambio la cabecera crece un poco, que es un cambio aceptado. */
.riad-emblema--compacto {
  height: 52px;
  width: auto;
}

@media (max-width: 600px) {
  .riad-emblema--compacto { height: 44px; }
}

/* El emblema grande del encabezado de portada. */
.riad-emblema--portada {
  height: clamp(96px, 15vw, 148px);
  width: auto;
  color: var(--wp--preset--color--oro);
}

/* ------------------------------------------------------------- NAVEGACION */

/* La seccion en la que estas, marcada en oro con filete debajo. */
.wp-block-navigation-item__content.riad-actual {
  color: var(--wp--preset--color--oro);
  border-bottom: 1px solid var(--wp--preset--color--oro);
  padding-bottom: 3px;
}

/* El telefono de la cabecera: contorno y texto en oro.
   El estilo de contorno de WordPress hereda el color del boton relleno, que
   aqui es el fondo oscuro, y quedaba practicamente invisible. */
.riad-tel .wp-block-button__link {
  color: var(--wp--preset--color--oro) !important;
  border-color: var(--wp--preset--color--oro) !important;
  background: transparent !important;
}

.riad-tel .wp-block-button__link:hover,
.riad-tel .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--fondo) !important;
  background: var(--wp--preset--color--oro) !important;
}

/* ------------------------------------------------------------------- HERO */

/*
  El fondo del encabezado: un halo dorado que sale del centro y, encima, una
  celosia de lineas cruzadas a 45 grados. Todo con degradados CSS: cero
  peticiones de red, que es lo que permite que la portada siga siendo rapida.
*/
.riad-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Altura real en lugar de mas relleno: asi el encabezado ocupa pantalla
     tanto en un portatil como en un monitor grande, sin quedar achatado.
     El tope de 760px evita que en pantallas muy altas haya que hacer scroll
     solo para descubrir que existe el resto de la pagina. */
  min-height: min(76vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* En movil se cede altura: 76vh de una pantalla de telefono deja el titular
   flotando en el vacio. */
@media (max-width: 600px) {
  .riad-hero { min-height: 62vh; }
}

.riad-hero::before,
.riad-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* El halo. Da profundidad y empuja la mirada al titular. */
.riad-hero::before {
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 42%,
      color-mix(in srgb, var(--wp--preset--color--oro) 12%, transparent),
      transparent 62%
    );
}

/* La trama de zellige. Hasta el 3/09/2026 era una celosia de lineas en crema,
   monocroma y casi invisible; el cliente pidio color, asi que ahora son
   estrellas de ocho puntas enlazadas en oro, verde y azul —los colores de su
   logo—. Sigue siendo muy tenue: es fondo, y encima va el titular. */
.riad-hero::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%23C8A557%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%23C8A557%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2048%2048%29%22%2F%3E%3Crect%20x%3D%22-19%22%20y%3D%22-19%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%22-19%22%20y%3D%22-19%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%200%200%29%22%2F%3E%3Crect%20x%3D%2277%22%20y%3D%22-19%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2277%22%20y%3D%22-19%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2096%200%29%22%2F%3E%3Crect%20x%3D%22-19%22%20y%3D%2277%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%22-19%22%20y%3D%2277%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%200%2096%29%22%2F%3E%3Crect%20x%3D%2277%22%20y%3D%2277%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2277%22%20y%3D%2277%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22none%22%20stroke%3D%22%232E9E6B%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2096%2096%29%22%2F%3E%3Crect%20x%3D%2241.5%22%20y%3D%22-6.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2241.5%22%20y%3D%22-6.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2048%200%29%22%2F%3E%3Crect%20x%3D%22-6.5%22%20y%3D%2241.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%22-6.5%22%20y%3D%2241.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%200%2048%29%22%2F%3E%3Crect%20x%3D%2289.5%22%20y%3D%2241.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2289.5%22%20y%3D%2241.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2096%2048%29%22%2F%3E%3Crect%20x%3D%2241.5%22%20y%3D%2289.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2241.5%22%20y%3D%2289.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%233E9BC9%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.1%22%20transform%3D%22rotate%2845%2048%2096%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: 96px 96px;
  /* Se difumina hacia los bordes para que no choque con las secciones
     contiguas ni con la cenefa de la cabecera. */
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 78%);
}

/* En pantallas pequenas la trama se aprieta para que la baldosa no salga
   cortada por la mitad en un ancho de telefono. */
@media (max-width: 600px) {
  .riad-hero::after {
    background-size: 68px 68px;
  }
}

/* Quien tenga activado el modo de alto contraste no necesita adornos que
   resten legibilidad al titular. */
@media (prefers-contrast: more) {
  .riad-hero::before,
  .riad-hero::after { display: none; }
}

/* ------------------------------------------------ PORTADA · REESTRUCTURADA */

/*
  El 3/09/2026 el cliente pidio una portada mas visual y mas marroqui, con
  restaurantealmounia.es de referencia.

  El «mas visual» no se pudo resolver como alli —fotos grandes a sangre—
  porque TODAS las fotos de esta biblioteca miden unos 250x180 pixeles reales
  (`docs/fotos.md`). A tamaño de portada se deshacen; es literalmente lo que
  el cliente vio y llamo «no se ven bien».

  Asi que lo visual lo carga el ornamento: emblema grande, arcos, cenefas y
  geometria de zellige. Todo dibujado en CSS y SVG, que es nitido a cualquier
  tamaño y no pesa. Y las fotos se usan pequeñas, enmarcadas, donde su
  resolucion aguanta.
*/

/* El emblema del encabezado. */
.riad-hero__emblema {
  display: flex;
  justify-content: center;
  color: var(--wp--preset--color--oro);
  line-height: 0;
}

.riad-hero__emblema .riad-emblema {
  height: clamp(104px, 16vw, 156px);
  width: auto;
}

/*
  El nombre en arabe.

  El tema solo trae Cormorant y Jost en subconjunto latino, asi que el arabe
  cae en la fuente del sistema. Se deja asi a proposito: cargar una fuente
  arabe entera por una linea decorativa serian cien kilobytes de mas, y las
  fuentes de sistema dibujan bien el naskh en Windows, Android e iOS.
*/
.riad-arabe {
  margin: var(--wp--preset--spacing--40) 0 0;
  text-align: center;
  font-family: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--wp--preset--color--oro);
}

/* ----------------------------------------------------------- MEDALLONES */

/*
  Las fotos, enmarcadas en arco de herradura. El arco se hace con radios
  elipticos en vez de un `clip-path`: se adapta solo a cualquier ancho, no
  necesita un SVG aparte y funciona en todos los navegadores desde hace años.
*/
.riad-medallones {
  list-style: none;
  margin: var(--wp--preset--spacing--60) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
}

.riad-medallon {
  /* 150 px es el techo: por encima, una foto de 250 px de ancho recortada a
     vertical empieza a verse blanda. */
  width: clamp(112px, 16vw, 150px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--medallon-color, var(--wp--preset--color--oro));
  border-radius: 50% 50% 3px 3px / 42% 42% 3px 3px;
  background-color: var(--wp--preset--color--superficie);
  /* El filete doble del emblema, repetido aqui: es el mismo lenguaje. */
  box-shadow: 0 0 0 4px var(--wp--preset--color--fondo),
              0 0 0 5px color-mix(in srgb, var(--medallon-color, var(--wp--preset--color--oro)) 45%, transparent);
  transition: transform 200ms ease;
}

/* Los cuatro arcos, en los cuatro colores del logo. */
.riad-medallon:nth-child(1) { --medallon-color: var(--wp--preset--color--oro); }
.riad-medallon:nth-child(2) { --medallon-color: #2E9E6B; }
.riad-medallon:nth-child(3) { --medallon-color: var(--wp--preset--color--terracota); }
.riad-medallon:nth-child(4) { --medallon-color: #3E9BC9; }

.riad-medallon:hover { transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  .riad-medallon { transition: none; }
  .riad-medallon:hover { transform: none; }
}

.riad-medallon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------- PRESENTACION */

/* Trama de zellige muy tenue, para que la seccion no sea un rectangulo liso.
   Se intuye, no se lee: mismo criterio que la del encabezado.

   Nacio para la presentacion de la portada y el 4/09/2026 se hizo generica,
   cuando el cliente pidio el mismo tratamiento en la carta y en contacto.
   `.riad-presentacion` se queda como esta por compatibilidad: cualquier
   seccion nueva usa `.riad-zellige`. */
.riad-presentacion,
.riad-zellige {
  position: relative;
  isolation: isolate;
}

.riad-presentacion::before,
.riad-zellige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,
      color-mix(in srgb, var(--wp--preset--color--oro) 5%, transparent) 0 1px,
      transparent 1px 34px),
    repeating-linear-gradient(-60deg,
      color-mix(in srgb, var(--wp--preset--color--oro) 5%, transparent) 0 1px,
      transparent 1px 34px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

@media (prefers-contrast: more) {
  .riad-presentacion::before,
  .riad-zellige::before { display: none; }
}

/* ----------------------------------------------------------- CASABLANCA */

.riad-travesia {
  margin: var(--wp--preset--spacing--50) auto 0;
  max-width: 460px;
  color: var(--wp--preset--color--oro-claro);
}

.riad-travesia .riad-dibujo {
  width: 100%;
  height: auto;
}

/* Los dos rotulos, cada uno bajo su arco. */
.riad-travesia__pies {
  /* Dos columnas iguales y el texto centrado en cada una: los centros caen en
     el 25 % y el 75 %, que es justo donde el dibujo pone sus arcos. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  margin-top: 0.4rem;
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--crema);
}

@media (max-width: 480px) {
  .riad-travesia__pies {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}

/* ------------------------------------------------------ MENUS CERRADOS */

/*
  Los dos menus con precio global, en tarjeta y arriba del todo de la carta.

  Van destacados a proposito: son lo unico de la carta que se vende con un
  precio cerrado, y es lo que mira quien entra a mediodia entre semana.
*/
.riad-menus {
  margin-bottom: 3rem;
}

.riad-menus__rejilla {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 1.25rem;
}

@media (min-width: 800px) {
  .riad-menus__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.riad-menu {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--riad-borde);
  /* El filete de color de la izquierda, como el de arriba en las fichas de
     plato destacado: es el mismo recurso, girado. */
  border-left: 3px solid var(--wp--preset--color--azul-vivo);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

/* El menu del dia va en oro: es el que se busca a mediodia entre semana. */
.riad-menu--destacado {
  border-left-color: var(--wp--preset--color--oro);
}

.riad-menu__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.riad-menu__nombre {
  margin: 0;
  font-size: var(--wp--preset--font-size--titulo-3);
  line-height: 1.2;
  color: var(--wp--preset--color--crema-viva);
}

.riad-menu__precio {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--titulares);
  font-size: var(--wp--preset--font-size--titulo-3);
  color: #6FBEE0;
}

.riad-menu--destacado .riad-menu__precio {
  color: var(--wp--preset--color--oro);
}

.riad-menu__cuando {
  margin: 0.4rem 0 0;
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--riad-suave);
}

.riad-menu__pasos {
  margin: 1.4rem 0 0;
}

.riad-menu__paso + .riad-menu__paso {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--riad-linea);
}

.riad-menu__paso dt {
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro-claro);
}

.riad-menu__paso dd {
  margin: 0.3rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.65;
  color: var(--wp--preset--color--crema);
}

/*
  La nota de alergenos. No es cortesia: los trece platos que componen los dos
  menus tienen sus alergenos en su ficha y aqui no se repiten, asi que esta
  linea es la que dice donde estan. Reglamento (UE) 1169/2011.
*/
.riad-menus__nota {
  margin: 1.25rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.7;
  color: var(--riad-suave);
  border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--oro) 45%, transparent);
  padding-left: 0.9rem;
}

/* ------------------------------------------------------ CARTA DE SHISHAS */

/*
  La carta de shishas, como panel en azul noche.

  Va por CSS y no envolviendola en un grupo de color porque el conmutador de
  vistas pone `hidden` sobre esta misma seccion: un grupo alrededor se quedaria
  visible, como una franja de color vacia, al volver a la carta de comer.

  El azul la separa de la carta de comer sin que parezcan dos webs: es el mismo
  azul del emblema y del de Casablanca.
*/
.riad-shishas {
  background: var(--wp--preset--color--azul-noche);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 30%, transparent);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: 2rem;
}

/* Sobre el azul, el filete de los titulares de categoria se pierde. */
.riad-shishas .riad-categoria__titulo::after {
  background: color-mix(in srgb, currentColor 45%, transparent);
}

/* ---------------------------------------------------------------- HORARIO */

/*
  La franja verde va pegada al encabezado, sin franja oscura entre medias:
  los margenes se anulan en el patron.
  Los tres bloques se separan con lineas verticales, como en el diseno.
*/
/*
  Los bloques de la franja verde. Mismas reglas para los horarios de la
  portada y para los tres pilares de "El restaurante": es la misma pieza de
  diseno usada dos veces, asi que comparte estilos en lugar de duplicarlos.

  Rejilla y no flex: el icono ocupa la primera columna a lo alto y el texto se
  apila en la segunda. Con flex, la etiqueta y el texto acababan uno al lado
  del otro en la misma linea.
*/
.riad-horario__bloque,
.riad-pilar {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  align-items: center;
  align-content: center;
  padding-inline: clamp(1rem, 3vw, 2.75rem);
}

.riad-horario__bloque > *,
.riad-pilar > * {
  grid-column: 2;
}

/* Separadores solo entre bloques, nunca en los extremos. */
@media (min-width: 782px) {
  .riad-horario__bloque + .riad-horario__bloque,
  .riad-pilar + .riad-pilar {
    border-left: 1px solid var(--riad-borde);
  }
}

/* Apilados en movil, la linea pasa a ser horizontal. */
@media (max-width: 781px) {
  .riad-horario__bloque + .riad-horario__bloque,
  .riad-pilar + .riad-pilar {
    border-top: 1px solid var(--riad-borde);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
}

/* El icono de cada bloque, dibujado con mascara para que herede el color. */
.riad-horario__bloque::before,
.riad-pilar::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  width: 26px;
  height: 26px;
  background: var(--wp--preset--color--oro);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.riad-horario__bloque--abierto::before {
  -webkit-mask-image: var(--riad-icono-reloj);
  mask-image: var(--riad-icono-reloj);
}

.riad-horario__bloque--cocina::before {
  -webkit-mask-image: var(--riad-icono-cubiertos);
  mask-image: var(--riad-icono-cubiertos);
}

.riad-horario__bloque--reservas::before {
  -webkit-mask-image: var(--riad-icono-telefono);
  mask-image: var(--riad-icono-telefono);
}

/* Valores que se repiten por todo el tema. Estaban escritos a mano en cada
   sitio con porcentajes ligeramente distintos —22, 24, 25, 28, 30, 35— y eso
   es como se desalinea un diseno sin que nadie lo decida. */
:root {
  --riad-borde: color-mix(in srgb, var(--wp--preset--color--oro) 26%, transparent);
  --riad-borde-fuerte: color-mix(in srgb, var(--wp--preset--color--oro) 55%, transparent);
  --riad-linea: color-mix(in srgb, var(--wp--preset--color--crema) 10%, transparent);
  --riad-suave: var(--riad-suave);

  --riad-icono-reloj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --riad-icono-cubiertos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v7a4 4 0 0 0 8 0V3'/%3E%3Cpath d='M8 10v11'/%3E%3Cpath d='M18 3c-1.5 2-2 4-2 6s.5 3 2 3 2-1 2-3-.5-4-2-6Z'/%3E%3Cpath d='M18 12v9'/%3E%3C/svg%3E");
  --riad-icono-telefono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ PANEL */

/*
  Hueco de fotografia. Mientras no haya imagen se ocupa con celosia y estrella
  en lugar de un recuadro vacio, que se lee como pagina a medio hacer.
  Al subir la foto se sustituye por un bloque de imagen y la maqueta no cambia.
*/
.riad-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  color: color-mix(in srgb, var(--wp--preset--color--oro) 45%, transparent);
  background-color: var(--wp--preset--color--superficie);
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--wp--preset--color--oro) 9%, transparent) 0 1px,
      transparent 1px 18px),
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--wp--preset--color--oro) 9%, transparent) 0 1px,
      transparent 1px 18px);
  border: 1px solid var(--riad-borde);
}

/* Variante alta, para el bloque del restaurante: el artboard lo tiene mas
   apaisado que el de desayunos. */
.riad-panel--alto { aspect-ratio: 5 / 4; }

/* Foto ancha de cabecera. */
.riad-panel--ancho { aspect-ratio: 21 / 9; }

/* Retratos del equipo: vertical, como una foto de persona. */
.riad-panel--retrato { aspect-ratio: 3 / 4; }

.riad-panel svg {
  width: clamp(48px, 12vw, 76px);
  height: auto;
  opacity: 0.8;
}

/* Con foto real, la celosia y el icono ya no pintan nada: la imagen cubre
   el hueco entero, mismo marco y misma proporcion que el panel vacio. */
.riad-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------------- PILARES */

/* El titular baja de tamano para que la banda quede tan compacta como la de
   los horarios. Con el tamano de titulo la seccion crecia el doble. */
.riad-pilar h3 {
  font-size: var(--wp--preset--font-size--grande);
  line-height: 1.25;
  margin: 0;
}

.riad-pilar p {
  margin-top: 0.5rem !important;
}

.riad-pilar--producto::before {
  -webkit-mask-image: var(--riad-icono-mercado);
  mask-image: var(--riad-icono-mercado);
}

.riad-pilar--lenta::before {
  -webkit-mask-image: var(--riad-icono-fuego);
  mask-image: var(--riad-icono-fuego);
}

.riad-pilar--mesa::before {
  -webkit-mask-image: var(--riad-icono-mesa);
  mask-image: var(--riad-icono-mesa);
}

:root {
  --riad-icono-mercado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6c0 4 6 12 6 12s6-8 6-12a6 6 0 0 0-6-6Z'/%3E%3Ccircle cx='12' cy='9' r='2'/%3E%3C/svg%3E");
  --riad-icono-fuego: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-5a8 8 0 0 1 16 0v5'/%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M12 7V3'/%3E%3C/svg%3E");
  --riad-icono-mesa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3C/svg%3E");
}

/* En el cierre, los botones se alinean a la derecha en escritorio y se
   estiran en movil, donde alinear a la derecha deja un hueco raro. */
@media (max-width: 781px) {
  .riad-cierre .wp-block-buttons { justify-content: flex-start; }
}

/* -------------------------------------------------------------- PASTILLAS */

/*
  Todo lo que se pulsa y no es un boton principal comparte forma: las
  categorias de la carta, los alergenos del filtro y el conmutador de cartas.
  Antes cada uno tenia su relleno y su tipografia y se notaba.
*/
.riad-nav__enlace,
.riad-filtro__chip,
.riad-vistas__boton {
  /* 44px de alto minimo: esto se pulsa con el dedo, no con el raton. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--riad-borde);
  background: none;
  color: var(--wp--preset--color--crema);
  font: inherit;
  font-size: var(--wp--preset--font-size--menudo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .riad-nav__enlace,
  .riad-filtro__chip,
  .riad-vistas__boton { transition: none; }
}

/* ------------------------------------------------------------------ CARTA */

/*
  Navegación por categorías: pegajosa, para no perder el sitio al bajar.
  Salta de línea en vez de desbordar con scroll horizontal: con scroll, el
  último botón que no cabía quedaba cortado a lo bruto contra el borde, y se
  leía como un fallo de maquetación en lugar de una pista de que había más.
  Con salto de línea nunca se corta ningún botón, cueste lo que cueste de
  alto a la barra.
*/
.riad-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  background: var(--wp--preset--color--fondo);
  border-bottom: 1px solid var(--riad-linea);
}

.riad-nav__enlace { flex-shrink: 0; }

.riad-nav__enlace:hover,
.riad-nav__enlace:focus-visible {
  color: var(--wp--preset--color--fondo);
  background: var(--wp--preset--color--oro);
  border-color: var(--wp--preset--color--oro);
}

/* Filtro de alérgenos */
.riad-filtro {
  border: 1px solid var(--riad-borde);
  background: var(--wp--preset--color--superficie);
  padding: 1rem;
  margin-bottom: 2rem;
}

.riad-filtro__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.riad-filtro__titulo {
  color: var(--wp--preset--color--oro-claro);
  font-size: var(--wp--preset--font-size--menudo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.riad-filtro__limpiar {
  border: 0;
  background: none;
  color: var(--wp--preset--color--oro);
  font: inherit;
  font-size: var(--wp--preset--font-size--menudo);
  cursor: pointer;
  padding: 0.75rem 0.5rem;
  margin: -0.75rem -0.5rem;
}

.riad-filtro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* El filtro lleva texto normal: son nombres de alergenos, no etiquetas. */
.riad-filtro__chip {
  padding-inline: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.riad-filtro__chip[aria-pressed="true"] {
  background: var(--wp--preset--color--verde-riad);
  border-color: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--oro-claro);
}

.riad-filtro__estado {
  margin: 0.9rem 0 0;
  font-size: var(--wp--preset--font-size--menudo);
  color: var(--riad-suave);
}

.riad-filtro__estado:empty { display: none; }

/* Categorías y platos */
.riad-categoria { margin-bottom: 2.75rem; }

.riad-categoria__titulo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--wp--preset--color--oro-claro);
  font-size: var(--wp--preset--font-size--titulo-3);
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}

.riad-categoria__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--riad-borde);
}

/*
  Cada categoria de la carta, de un color. Antes eran seis titulares iguales en
  oro claro y la carta se leia como una lista larga; con el color se ve de un
  vistazo donde empieza cada bloque al bajar con el movil en la mano.

  Va por `nth-of-type` y no por clase porque las categorias las crea el cliente
  desde su panel: aqui no sabemos ni cuantas hay ni como se llaman.
*/
.riad-categoria:nth-of-type(4n+2) .riad-categoria__titulo { color: #57C08D; }
.riad-categoria:nth-of-type(4n+3) .riad-categoria__titulo { color: #6FBEE0; }
.riad-categoria:nth-of-type(4n+4) .riad-categoria__titulo { color: var(--wp--preset--color--terracota); }

/* El filete que sale del titular hereda su color, mas apagado. */
.riad-categoria__titulo::after {
  background: color-mix(in srgb, currentColor 30%, transparent);
}

.riad-categoria__platos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.riad-plato {
  display: flex;
  gap: 0.9rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--riad-linea);
}

.riad-plato[hidden] { display: none; }

.riad-plato__foto {
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  object-fit: cover;
}

/* Sin foto, el plato ocupa todo el ancho y se apoya en la tipografía. */
.riad-plato--sin-foto { gap: 0; }

.riad-plato__cuerpo { flex: 1; min-width: 0; }

.riad-plato__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.riad-plato__nombre {
  margin: 0;
  font-size: var(--wp--preset--font-size--grande);
  line-height: 1.3;
}

.riad-plato__precio {
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--titulares);
  font-size: var(--wp--preset--font-size--grande);
  color: var(--wp--preset--color--oro);
  white-space: nowrap;
}

.riad-plato__descripcion {
  margin: 0.35rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.6;
  color: var(--riad-suave);
}

.riad-plato__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

/* Distintivo de alérgeno: su número del Anexo II, el mismo que en la leyenda. */
.riad-alergeno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--riad-linea);
  border-radius: 50%;
  /* El numero se lee de pie, con el movil en la mano y con poca luz: a 0,8rem
     y al 80% de opacidad habia que acercarse. Se sube tamano y contraste. */
  color: var(--wp--preset--color--crema);
  font-family: var(--wp--preset--font-family--titulares);
  font-size: 1rem;
  line-height: 1;
  cursor: help;
}

.riad-plato__sin-alergenos {
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cobre);
  border: 1px dashed color-mix(in srgb, var(--wp--preset--color--cobre) 70%, transparent);
  padding: 0.3rem 0.55rem;
}

/* Revisado y sin alergenos: se pinta en verde, no en cobre. Es una
   afirmacion tranquilizadora, no un aviso pendiente.

   Hasta el 4/09/2026 el comentario decia verde y el codigo ponia oro claro,
   que es el mismo color que el resto de la carta: la distincion no se veia.
   Ahora que hay un verde vivo en la paleta, se pinta de verde de verdad. */
.riad-plato__sin-alergenos--ok {
  color: #57C08D;
  border-color: color-mix(in srgb, #57C08D 45%, transparent);
  border-style: solid;
}

/* Agotado */
.riad-plato--agotado { opacity: 0.5; }
.riad-plato--agotado .riad-plato__foto { filter: grayscale(1); }
.riad-plato--agotado .riad-plato__precio { color: inherit; }

.riad-plato__agotado {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--cobre) 80%, transparent);
  color: #c97a50;
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}

.riad-carta__aviso {
  border: 1px solid var(--riad-borde);
  padding: 1rem 1.1rem;
  margin-top: 2rem;
}

.riad-carta__aviso p {
  margin: 0;
  font-size: var(--wp--preset--font-size--menudo);
  line-height: 1.7;
}

@media (min-width: 782px) {
  .riad-plato__foto { width: 104px; height: 104px; }
}

/* En papel no tienen sentido ni el filtro ni la navegación. */
/* --------------------------------------------------------- ALERGENOS: LEYENDA */

/*
  Leyenda con los catorce alergenos de declaracion obligatoria. El titulo de
  seccion reutiliza .riad-categoria__titulo y el aviso legal reutiliza
  .riad-carta__aviso: es la misma carta, no un modulo aparte.
*/
.riad-alergenos-leyenda { margin-top: 3rem; }

.riad-alergenos-leyenda__grid {
  display: grid;
  gap: 1.75rem 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .riad-alergenos-leyenda__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .riad-alergenos-leyenda__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.riad-alergenos-leyenda__item {
  display: flex;
  gap: 1rem;
}

/* Version grande del distintivo de plato: aqui el numero es el protagonista,
   no un sello discreto junto al precio. */
.riad-alergenos-leyenda__numero {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--riad-borde);
  border-radius: 50%;
  color: var(--wp--preset--color--oro);
  font-family: var(--wp--preset--font-family--titulares);
  font-size: 1.125rem;
}

.riad-alergenos-leyenda__nombre {
  margin: 0.4rem 0 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.3;
  color: var(--wp--preset--color--crema-viva);
}

.riad-alergenos-leyenda__descripcion {
  margin: 0.3rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.6;
  color: var(--riad-suave);
}

/* --------------------------------------------------------------- GALERIA */

.riad-galeria { margin-top: 3rem; }

.riad-galeria__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .riad-galeria__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .riad-galeria__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.riad-galeria__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--riad-borde);
  background: var(--wp--preset--color--superficie);
}

.riad-galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ficha de plato en la galeria: la foto usa el mismo recuadro que el resto
   de la rejilla (riad-galeria__item), y debajo va nombre y descripcion con
   la misma tipografia que la ficha de plato de la carta. */
.riad-galeria__plato {
  margin: 0;
}

.riad-galeria__nombre {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--wp--preset--font-family--titulares);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--crema-viva);
}

.riad-galeria__descripcion {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.5;
  color: var(--riad-suave);
}

/*
  Una estrella pequeña delante de cada titulo de categoria. En una carta de
  cinco secciones y una galeria de dos, es lo que marca donde empieza cada
  bloque sin tener que meter otra linea horizontal.
*/
.riad-categoria__titulo::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 0.6rem;
  vertical-align: 0.08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect x='4' y='4' width='10' height='10' fill='%23C8A557'/%3E%3Crect x='4' y='4' width='10' height='10' fill='%23C8A557' transform='rotate(45 9 9)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.75;
}

/* ------------------------------------------------------------ ORNAMENTOS */

/*
  Dos filetes y la estrella de la marca en medio. Abre la portada y «El
  restaurante», y cierra el pie.

  La estrella va de fondo y no de SVG en linea para que el marcado sea una
  sola linea: asi la puede poner igual un patron en PHP que el pie, que es una
  plantilla .html y no puede llamar a funciones. Se construye como en el
  isotipo, dos cuadrados girados 45 grados, no con un dibujo distinto.
*/
.riad-ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-inline: auto;
}

.riad-ornamento::before,
.riad-ornamento::after {
  content: "";
  width: clamp(40px, 8vw, 70px);
  height: 1px;
  background: color-mix(in srgb, var(--wp--preset--color--oro) 40%, transparent);
}

.riad-ornamento {
  /* La estrella, entre los dos filetes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect x='4' y='4' width='10' height='10' fill='%23C8A557'/%3E%3Crect x='4' y='4' width='10' height='10' fill='%23C8A557' transform='rotate(45 9 9)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  min-height: 16px;
}

/* En el pie hace de separador antes de la linea de creditos. */
.riad-ornamento--pie {
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--30);
}

.riad-ornamento--pie::before,
.riad-ornamento--pie::after {
  width: clamp(60px, 22vw, 240px);
}

/* ---------------------------------------------------------------- FRISO */

/*
  La arqueria de «El restaurante». Ocupa el hueco de la foto panoramica que no
  va a llegar. Sin recuadro ni fondo: es un friso, no una fotografia enmarcada.
*/
.riad-friso {
  color: var(--wp--preset--color--oro);
  margin-top: var(--wp--preset--spacing--30);
}

.riad-friso .riad-arqueria {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- LAMINAS */

/*
  Las ilustraciones de la portada. Van sueltas sobre el fondo, sin recuadro:
  el recuadro era el marco de una foto, y esto ya no es una foto. Debajo, un
  filete y un pie, como la lamina de un libro.
*/
.riad-lamina {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Los trazos del dibujo heredan este color con currentColor. */
  color: var(--wp--preset--color--oro);
}

.riad-lamina .riad-dibujo {
  width: min(100%, 330px);
  height: auto;
  display: block;
}

.riad-lamina__pie {
  margin-top: 1.4rem;
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--oro);
}

.riad-lamina__pie::before {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 0 auto 1.1rem;
  background: var(--wp--preset--color--oro);
  opacity: 0.55;
}

/* Marca de seccion, no ilustracion de bloque: mas pequeña y con aire debajo. */
.riad-lamina--menuda {
  margin: 0 auto 2.5rem;
}

.riad-lamina--menuda .riad-dibujo {
  width: min(100%, 200px);
}

/* En movil el dibujo cede tamaño: manda el texto, que es lo que informa. */
@media (max-width: 781px) {
  .riad-lamina .riad-dibujo { width: min(70%, 240px); }
  .riad-lamina--menuda .riad-dibujo { width: min(55%, 160px); }
}

/* --------------------------------------------------------------- LEXICO */

/*
  Glosario de "El restaurante". Rejilla que se llena sola: en una pantalla
  ancha caben tres columnas, en tableta dos y en movil una, sin saltos.
  Se usa un <dl> de verdad porque eso es exactamente lo que es —terminos y
  definiciones— y quien navegue con lector de pantalla lo agradecera.
*/
.riad-lexico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 2rem 2.5rem;
  margin: 3rem 0 0;
}

.riad-lexico__entrada {
  /* Filete corto en oro sobre cada termino: separa las entradas sin encerrar
     cada una en su caja, que apelmazaria una rejilla de doce. */
  border-top: 1px solid var(--wp--preset--color--oro);
  padding-top: 1rem;
}

.riad-lexico__termino {
  font-family: var(--wp--preset--font-family--titulares);
  font-size: var(--wp--preset--font-size--titulo-3);
  line-height: 1.2;
  color: var(--wp--preset--color--crema-viva);
}

.riad-lexico__definicion {
  margin: 0.5rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.65;
  color: var(--riad-suave);
}

.riad-lexico__definicion em {
  color: var(--wp--preset--color--oro-claro);
  font-style: italic;
}

/* ------------------------------------------------------------- DESTACADOS */

.riad-destacados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

@media (min-width: 782px) {
  .riad-destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.riad-destacado {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--riad-borde);
  /* El filete de color de arriba. Es lo que rompe la fila de tres cajas
     oscuras iguales sin tener que meter color al fondo de la tarjeta, que
     pelearia con la foto del plato. */
  border-top: 3px solid var(--wp--preset--color--oro);
  transition: transform 160ms ease, border-color 160ms ease;
}

/* Un color por tarjeta, en el orden del logo: oro, verde, azul. Con `nth-child`
   y no con una clase por plato, porque los platos destacados los elige el
   cliente desde su panel y aqui no sabemos cuales son. */
.riad-destacado:nth-child(3n+2) { border-top-color: var(--wp--preset--color--verde-vivo); }
.riad-destacado:nth-child(3n+3) { border-top-color: var(--wp--preset--color--azul-vivo); }

.riad-destacado:nth-child(3n+2) .riad-destacado__precio { color: #57C08D; }
.riad-destacado:nth-child(3n+3) .riad-destacado__precio { color: #6FBEE0; }

/* Se levanta un poco al pasar por encima. Es el unico movimiento de la
   portada y va con transicion corta: mas es mareo, no modernidad. */
.riad-destacado:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--wp--preset--color--oro) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .riad-destacado { transition: none; }
  .riad-destacado:hover { transform: none; }
}

.riad-destacado__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--riad-borde);
}

.riad-destacado__cuerpo { padding: 1.75rem 1.5rem; }

/* Sin foto la tarjeta se apoya en la tipografia, no en un hueco vacio. */
.riad-destacado--sin-foto .riad-destacado__cuerpo { padding-top: 2.25rem; }

.riad-destacado__nombre {
  margin: 0;
  font-size: var(--wp--preset--font-size--titulo-3);
  line-height: 1.25;
}

.riad-destacado__texto {
  margin: 0.75rem 0 0;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.7;
  color: var(--riad-suave);
}

.riad-destacado__precio {
  margin: 1.25rem 0 0;
  font-family: var(--wp--preset--font-family--titulares);
  font-size: var(--wp--preset--font-size--titulo-3);
  color: var(--wp--preset--color--oro);
}

/* Lista de ventajas con marca de verificacion dibujada, no un guion. */
.riad-ventajas {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.riad-ventajas li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.6;
}

.riad-ventajas li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  background: currentColor;
  color: var(--wp--preset--color--oro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.riad-qr {
  max-width: 260px;
  margin-inline: auto;
  padding: 1rem;
  background: var(--wp--preset--color--crema);
  line-height: 0;
}

.riad-qr svg { width: 100%; height: auto; }

/* ----------------------------------------------------------------- VISTAS */

/*
  Conmutador entre la carta de comida y la de shishas. Lo inyecta el
  JavaScript: sin el, la pagina trae las dos cartas visibles y se lee entera.
*/
.riad-vistas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  /*
    El margen de arriba hay que ponerlo a mano. La barra la inserta el
    JavaScript entre el parrafo de precios y la carta, y la separacion que
    WordPress da entre bloques hermanos la pisaba este mismo `margin`, que
    empezaba en 0. Resultado: los botones pegados al texto de encima.
  */
  margin: 3rem 0 2.5rem;
}

/*
  Las dos opciones se ven siempre como opciones: ambas con contorno dorado y
  la inactiva legible, no apagada. Antes la inactiva era gris sobre oscuro y
  no se leia como algo pulsable, que es justo lo que habia que arreglar.
*/
.riad-vistas__boton {
  flex: 1 1 0;
  max-width: 15rem;
  min-height: 54px;
  padding: 1rem 1.75rem;
  border-color: var(--riad-borde-fuerte);
  color: var(--wp--preset--color--oro-claro);
  font-size: var(--wp--preset--font-size--pequeno);
  letter-spacing: 0.16em;
}

.riad-vistas__boton:hover {
  border-color: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--oro);
}

.riad-vistas__boton[aria-selected="true"] {
  background: var(--wp--preset--color--oro);
  border-color: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--fondo);
  font-weight: 500;
}

/* ---------------------------------------------------------------- SHISHAS */

/*
  La carta de shishas reutiliza el marcado de la carta de platos
  (riad-categoria, riad-plato) para leerse como la misma carta, no como un
  modulo aparte. Solo hace falta lo que esas clases no cubren: el acento del
  aviso legal y la lista de sabores dentro de cada nivel.
*/

/*
  El aviso de que no llevan tabaco ni nicotina va destacado y arriba a
  proposito: ademas de informar al cliente, es lo que sostiene que esta carta
  se pueda publicar. Ver la nota del patron. Mismo aviso que el de alergenos
  al pie de la carta, con un acento a la izquierda para que se note primero.
*/
.riad-carta__aviso--legal {
  margin-top: 0;
  margin-bottom: 2.5rem;
  border-left: 3px solid var(--wp--preset--color--oro);
}

.riad-carta__aviso--legal strong {
  color: var(--wp--preset--color--oro-claro);
  font-weight: 500;
}

/* Sabores de cada nivel de shisha, debajo del nombre y precio del plato. */
.riad-shisha__sabores {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.riad-shisha__sabores li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--riad-linea);
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.6;
}

.riad-shisha__sabores li:last-child { border-bottom: 0; }

.riad-shisha__sabores b {
  font-weight: 500;
  color: var(--wp--preset--color--crema-viva);
}

/* La descripcion, mas apagada: el nombre es lo que se busca. */
.riad-shisha__sabores span {
  color: var(--riad-suave);
}

/* --------------------------------------------------------------- CONTACTO */

/*
  Hueco del mapa. Rejilla de calles insinuada en lugar del panel de celosia:
  asi se lee como mapa aunque no lo haya todavia. Cuando llegue la direccion
  se sustituye por el iframe de Google Maps y la maqueta no se mueve.
*/
.riad-panel--mapa {
  aspect-ratio: 16 / 11;
  background-image:
    linear-gradient(color-mix(in srgb, var(--wp--preset--color--oro) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--oro) 7%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
}

.riad-panel--mapa svg {
  width: clamp(38px, 8vw, 52px);
  opacity: 1;
}

/* Tabla de horarios: termino a la izquierda, hora a la derecha, con la linea
   de puntos entre medias como en una carta impresa. */
.riad-horas {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
}

.riad-horas > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--riad-borde);
}

.riad-horas dt {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--crema-viva);
}

.riad-horas dd {
  margin: 0 0 0 auto;
  font-size: var(--wp--preset--font-size--base);
  color: color-mix(in srgb, var(--wp--preset--color--crema) 80%, transparent);
  white-space: nowrap;
}

/* Nota destacada con filete al lado, para lo que conviene que no se pase por
   alto: aqui, que la cocina cierra aunque el local siga abierto. */
.riad-nota {
  margin: 1.5rem 0 0;
  padding-left: 0.95rem;
  border-left: 2px solid var(--wp--preset--color--oro);
  font-size: var(--wp--preset--font-size--menudo);
  line-height: 1.7;
  color: color-mix(in srgb, var(--wp--preset--color--crema) 78%, transparent);
}

/* --------------------------------------------------------------- FORMULARIO */

.riad-form {
  --riad-campo: color-mix(in srgb, var(--wp--preset--color--crema) 18%, transparent);
  border: 1px solid var(--riad-borde);
  background: var(--wp--preset--color--superficie);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.riad-form__aviso {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.6;
  border-left: 3px solid;
}

.riad-form__aviso--ok {
  border-color: var(--wp--preset--color--oro);
  background: color-mix(in srgb, var(--wp--preset--color--verde-riad) 55%, transparent);
  color: var(--wp--preset--color--crema-viva);
}

.riad-form__aviso--error {
  border-color: var(--wp--preset--color--cobre);
  background: color-mix(in srgb, var(--wp--preset--color--cobre) 18%, transparent);
  color: var(--wp--preset--color--crema-viva);
}

.riad-form__fila {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .riad-form__fila { grid-template-columns: 1fr 1fr; }
}

.riad-form__campo {
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.riad-form__fila .riad-form__campo { margin-bottom: 0; }

.riad-form__campo label {
  font-size: var(--wp--preset--font-size--diminuto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--crema) 72%, transparent);
}

.riad-form input[type="text"],
.riad-form input[type="email"],
.riad-form input[type="tel"],
.riad-form textarea {
  width: 100%;
  box-sizing: border-box;
  /* 48px de alto: se rellena con el pulgar, no con el ratón. */
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--wp--preset--color--fondo);
  border: 1px solid var(--riad-campo);
  border-radius: 0;
  color: var(--wp--preset--color--crema-viva);
  font: inherit;
  font-size: var(--wp--preset--font-size--base);
}

.riad-form textarea {
  resize: vertical;
  line-height: 1.7;
}

.riad-form input:focus-visible,
.riad-form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--oro-claro);
  outline-offset: 2px;
  border-color: transparent;
}

/* La trampa para robots: invisible sin usar display:none, que algunos
   detectan, y fuera del alcance de lectores de pantalla. */
.riad-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.riad-form__consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
}

.riad-form__consentimiento input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  accent-color: var(--wp--preset--color--oro);
}

.riad-form__consentimiento label {
  font-size: var(--wp--preset--font-size--menudo);
  line-height: 1.7;
  color: color-mix(in srgb, var(--wp--preset--color--crema) 72%, transparent);
}

.riad-form__acciones { margin: 1.75rem 0 0; }

.riad-form__enviar {
  width: 100%;
  min-height: 52px;
  padding: 1rem 2.25rem;
  border: 0;
  background: var(--wp--preset--color--oro);
  color: var(--wp--preset--color--fondo);
  font: inherit;
  font-size: var(--wp--preset--font-size--menudo);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.riad-form__enviar:hover { background: var(--wp--preset--color--oro-claro); }

@media (min-width: 640px) {
  .riad-form__enviar { width: auto; }
}

/* Respetar a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}