:root {
  --color-fondo: #fcf9f1;
  --color-texto: #00323f;
  --color-secundario: #62888e;
  --color-acento: #9f8c6f;
  --fuente-titulos: "Arvo";
  --fuente-texto: "Raleway";
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto), Arial, sans-serif;
  line-height: 1.275;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
}

header img {
  max-width: 94px;
  width: 100%;
  height: auto;
}

#selector-idioma {
  font-size: 1.1rem;
  padding: 0.3rem 1.8rem 0.3rem 0.7rem;
  border: 1px solid var(--color-secundario);
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-secundario);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

/* max-width + margin:auto igual que <main>: estos dos bloques son
   hermanos de <main> en el HTML (no van dentro), así que sin esto se
   estiraban a todo el ancho de la pantalla y en desktop sus botones
   quedaban pegados al borde real del navegador, en vez de alinearse con
   el borde del propio contenido del menú. */
#filtros-contenedor {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 0.75rem;
}

#navegacion-secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  background: var(--color-fondo);
  z-index: 10;
}

.boton-seccion-nav {
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--color-secundario);
  border-radius: 999px;
  background: transparent;
  color: var(--color-secundario);
  cursor: pointer;
  white-space: nowrap;
}

.boton-seccion-nav:hover {
  background: var(--color-secundario);
  color: white;
}

.boton-filtro {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-acento);
  border-radius: 999px;
  background: transparent;
  color: var(--color-acento);
  cursor: pointer;
}

.boton-filtro img {
  width: 1rem;
  height: 1rem;
}

.boton-filtro.activo {
  background: var(--color-acento);
  color: white;
}

.boton-filtro[data-filtro="vegetariano"] {
  border-color: #5c7a5f;
  color: #5c7a5f;
}

.boton-filtro[data-filtro="vegetariano"].activo {
  background: #5c7a5f;
  color: #f2f7f0;
}

.boton-filtro[data-filtro="vegano"] {
  border-color: #2f6b3f;
  color: #2f6b3f;
}

.boton-filtro[data-filtro="vegano"].activo {
  background: #2f6b3f;
  color: #eaf4ea;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.seccion {
  margin-bottom: 2.5rem;
}

.seccion h2 {
  font-family: var(--fuente-titulos), Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-texto);
  border-bottom: 1px solid var(--color-secundario);
  padding-bottom: 0.25rem;
  margin-bottom: 0.625rem;
}

/* Texto opcional al principio de una sección (ej. "Al horno de leña"),
   antes de sus productos. Caja destacada con el color de acento de marca,
   para que llame la atención sin necesitar un color nuevo por restaurante. */
.seccion-destacado {
  background: var(--color-acento);
  color: white;
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.9rem;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.875rem;
  white-space: pre-line;
}

/* Textos opcionales de todo el restaurante (no de una sección): al
   principio del menú (ej. precio del cubierto) y al final (ej. avisos
   legales). white-space:pre-line respeta los saltos de línea que se
   escriban en el panel, para separar varias frases sin necesitar una
   lista. */
.texto-inicio-menu,
.texto-pie-menu {
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--color-secundario);
  white-space: pre-line;
}

.texto-inicio-menu {
  margin-bottom: 1.25rem;
}

.texto-pie-menu {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-secundario);
}

/* Texto opcional al final de una sección (ej. "Pan sin gluten: 1,50 €"):
   mismo estilo discreto que el texto al pie de todo el menú, pero sin la
   línea separadora, porque ya está dentro de la propia sección. */
.seccion-pie {
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--color-secundario);
  white-space: pre-line;
  margin-top: 0.875rem;
}

/* Bloque "Destacados": franja horizontal con scroll, arriba de todo el
   menú, con los productos marcados como tal desde su propia ficha (ver
   crearBloqueDestacados() en menu.js). Reutiliza la misma tarjeta que la
   cuadrícula normal (crearPlatoEl), solo más pequeña y sin descripción —
   independiente del estilo_tarjeta que tenga elegido el restaurante,
   aquí siempre se ve compacta. */
.carrusel-destacados {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.25rem;
}

.tarjeta-destacada {
  /* El 1/3 del contenedor (flex-basis) vale en móvil, donde el contenedor
     ya es estrecho — pero en escritorio el menú puede llegar a 1100px, y
     un tercio de eso (~350px) es más grande que una tarjeta normal de la
     cuadrícula. El max-width limita el tamaño real en pantallas anchas: en
     vez de un número inventado, es un 65% del mínimo que usan las
     tarjetas normales en escritorio (230px, ver .cuadricula-platos más
     abajo) — así la proporción "destacada más pequeña que una normal" se
     mantiene igual sea cual sea el ancho de pantalla, en vez de solo
     valer en móvil. En escritorio caben más de 3 a la vez sin problema.
     Divisor 3.15 en vez de 3 a propósito: así las 3 primeras tarjetas no
     encajan del todo justas, siempre queda un pico visible del principio
     de la 4ª — para que se note a simple vista que hay más para hacer
     scroll, sin depender de ningún efecto ni de que nadie lo note solo. */
  flex: 0 0 calc((100% - 2.25rem) / 3.15);
  max-width: 150px;
  scroll-snap-align: start;
}

.tarjeta-destacada .plato-descripcion,
.tarjeta-destacada .ver-mas {
  display: none;
}

.tarjeta-destacada .plato-cuerpo {
  height: 5.15rem;
  padding: 0.36rem 0.729rem 0.3rem;
}

.tarjeta-destacada .plato-titulo h3 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
}

.tarjeta-destacada .plato-titulo {
  height: 2.6rem;
  align-items: flex-start;
}

.tarjeta-destacada .etiqueta {
  font-size: 0.49rem;
  padding: 0.105rem 0.385rem;
}

.tarjeta-destacada .plato-precio {
  padding-top: 0.25rem;
  margin-top: 0.2rem;
}

.cuadricula-platos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 1rem;
}

@media (min-width: 600px) {
  .cuadricula-platos {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
  }
}

.plato {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--color-secundario);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.plato-foto {
  position: relative;
  width: 100%;
  max-height: 260px;
  aspect-ratio: 4 / 3;
  background: var(--color-secundario);
}

.plato-foto-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Insignia "recomendado por el chef": icono + texto, para que no se quede
   solo el icono sin explicar qué significa. */
.badge-recomendado {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-texto);
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-recomendado-icono {
  width: 0.9rem;
  height: 0.9rem;
}

.plato-etiquetas-foto {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.plato-etiquetas-foto .etiqueta {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
}

.plato-cuerpo {
  padding: 0.9rem 0.729rem 1.1rem;
  display: flex;
  flex-direction: column;
  height: 9rem;
  overflow: hidden;
  gap: 0.35rem;
}

.plato-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.plato-titulo h3 {
  margin: 0;
  font-family: var(--fuente-titulos), Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.035em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.plato-precio {
  color: var(--color-secundario);
  margin-top: auto;
}

.etiqueta {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.44rem;
  border-radius: 999px;
}

.etiqueta-vegana {
  background: #2f6b3f;
  color: #eaf4ea;
}

.etiqueta-vegetariana {
  background: #5c7a5f;
  color: #f2f7f0;
}

.etiqueta-semifreddo {
  background: #4a90b8;
  color: #eaf4fa;
}

.etiqueta-gluten {
  background: #fadfc0;
  color: #8a4e12;
}

.etiqueta-lactosa {
  background: #b8e6e0;
  color: #0d5c56;
}

.etiqueta-generica {
  background: var(--color-acento);
  color: white;
}

.etiqueta-chef {
  background: var(--color-acento);
  color: white;
}

.lista-platos-texto {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Fila compacta y clicable (abre la ficha del producto): cabecera con
   título de hasta 2 líneas + precio, y debajo la descripción recortada a 2
   líneas como preview (igual que en la lista horizontal). Los alérgenos no
   se ven aquí, solo al tocar. Sin línea separadora entre productos, como
   en Cutilisci — el espacio entre ellos lo da el "gap" de arriba. */
.lista-plato {
  display: block;
}

.lista-plato-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.lista-plato-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.lista-plato-titulo h3 {
  margin: 0;
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mismo formato que .precio-horizontal (lista horizontal con fotos): sin
   negrita, azul oscuro, mismo tamaño — antes iba en negrita y en color de
   acento. */
.lista-plato-precio {
  color: var(--color-texto);
  white-space: nowrap;
  font-size: 0.95rem;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.lista-plato-descripcion {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--color-secundario);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Sección "lista horizontal": foto pequeña + texto al lado. Como la lista
   de texto, pero con hueco para una foto — pensada para secciones largas
   con fotos pequeñas (ej. vinos). */
.lista-horizontal {
  display: flex;
  flex-direction: column;
}

.fila-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.7rem 0;
}

.foto-horizontal {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  background: var(--color-secundario);
  overflow: hidden;
  cursor: pointer;
}

.foto-horizontal-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.info-horizontal {
  flex: 1;
  min-width: 0;
}

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

.titulo-horizontal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.titulo-horizontal h3 {
  margin: 0;
  min-width: 0;
  font-family: var(--fuente-titulos), Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Mismo formato que .plato-precio de la cuadrícula, pero en azul oscuro
   (--color-texto) en vez del azul claro (--color-secundario) que usa la
   cuadrícula — a propósito, para que destaque más en esta vista compacta. */
.precio-horizontal {
  flex-shrink: 0;
  color: var(--color-texto);
  white-space: nowrap;
  font-size: 0.95rem;
}

.descripcion-horizontal {
  margin: 0.3rem 0 0;
  font-size: 0.87rem;
  color: var(--color-secundario);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.plato-descripcion {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.035em;
  color: #333333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.plato-alergenos {
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-texto);
}

.ver-mas {
  display: block;
  margin-top: -0.15rem;
  font-family: var(--fuente-texto), Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-acento);
  /* En la cuadrícula es un <span> puramente visual (toda la tarjeta ya es
     clicable); en la lista horizontal es un <button> de verdad, así que
     necesita quitarse el estilo por defecto del navegador. */
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 600px) {
  header img {
    max-width: 119px;
  }
}

#ficha-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 100;
}

#ficha-contenido {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-fondo);
  border-radius: 16px;
}

/* Animación al abrir la ficha, elegida tras comparar varias opciones en
   una preview: el fondo aparece con un fundido, y la tarjeta blanca de
   dentro con fundido + un zoom sutil (empieza al 96% de tamaño y crece
   al 100%). Se dispara con la clase "abriendo" (ver abrirFichaPlato() en
   menu.js) — es una animation, no una transition, porque el elemento
   pasa de display:none a visible de golpe y las transitions no arrancan
   bien desde ahí. Se anima background-color del overlay (no su opacity)
   para que no afecte también, de rebote, a la opacidad de la ficha de
   dentro, que ya tiene su propia animación independiente. */
@keyframes fichaFondoFundido {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes fichaContenidoFundidoZoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

#ficha-overlay.abriendo {
  animation: fichaFondoFundido 0.2s ease forwards;
}

#ficha-overlay.abriendo #ficha-contenido {
  animation: fichaContenidoFundidoZoom 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación al tocar una tarjeta, justo antes de abrir su ficha (ver
   abrirFichaConAnimacion() en menu.js): se encoge un pelín y vuelve a su
   tamaño, dando una sensación táctil de que ha respondido al toque. */
@keyframes tarjetaPulsada {
  0% { transform: scale(1); }
  40% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.plato.pulsada,
.foto-horizontal.pulsada,
.ver-mas.pulsada {
  animation: tarjetaPulsada 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  #ficha-overlay.abriendo,
  #ficha-overlay.abriendo #ficha-contenido,
  .plato.pulsada,
  .foto-horizontal.pulsada,
  .ver-mas.pulsada {
    animation: none;
  }
}

#boton-volver-arriba {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--color-acento);
  color: white;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 20;
}

#ficha-cerrar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-texto);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1;
}

#ficha-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-secundario);
}

#ficha-foto img:not(.badge-recomendado-icono) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ficha-foto .badge-recomendado {
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
}

#ficha-foto .badge-recomendado-icono {
  width: 1rem;
  height: 1rem;
}

#ficha-cuerpo {
  padding: 1.1rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#ficha-cuerpo .plato-titulo h2 {
  margin: 0;
  font-family: var(--fuente-titulos), Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
}

.ficha-descripcion {
  margin: 0;
  font-size: 1rem;
  color: #333333;
}

#ficha-cuerpo .plato-precio {
  font-size: 1.1rem;
}

/* Estilo alternativo "mini": tarjetas de cuadrícula con esquinas rectas
   (en vez de redondeadas) y sin preview de descripción — solo foto, título
   y precio, con una línea antes del precio. Tarjetas más bajas, pensado
   para restaurantes con muchos productos por sección donde la descripción
   no aporta tanto y sobra espacio en blanco. Se activa por restaurante
   desde la base de datos (columna estilo_tarjeta). */

.estilo-mini .plato {
  border-radius: 0;
}

.estilo-mini #ficha-contenido,
.estilo-mini #ficha-foto {
  border-radius: 0;
}

.estilo-mini .plato-descripcion,
.estilo-mini .plato .ver-mas {
  display: none;
}

/* Alto fijo para toda la tarjeta (no depende del título): así todas las
   tarjetas de una fila miden lo mismo. El título también lleva un alto
   fijo (el de 2 líneas, con el texto recortado a 2 en vez de las 3 del
   estilo general) y el precio un margen fijo en vez de "auto" — así el
   precio y su línea divisoria caen siempre en la misma posición exacta,
   tenga el título 1 línea o 2, y los huecos se pueden ajustar a mano. */
.estilo-mini .plato-cuerpo {
  height: 5.15rem;
  padding: 0.36rem 0.729rem 0.3rem;
}

.estilo-mini .plato-titulo h3 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* 0.9, 1.0 y 1.1 seguían recortando las letras con rabito (g, p, q, y)
     en la 2ª línea con esta tipografía — subiendo de poco en poco no
     bastaba. Prueba de control con un valor claramente seguro (1.25, por
     encima del "normal" original ~1.2): si con esto tampoco se corta nada,
     bajamos poco a poco desde aquí para encontrar el mínimo real. */
  line-height: 1.25;
}

/* Ojo: escopado a ".plato .plato-titulo" (no ".estilo-mini .plato-titulo"
   a secas) — el título de la ficha detallada usa esa misma clase
   (plato-titulo) pero con letra más grande y a veces más etiquetas; con la
   regla sin escopar, esa altura fija de 2 líneas pequeñas se le aplicaba
   también a la ficha, y su contenido se salía por encima del precio. */
.estilo-mini .plato .plato-titulo {
  /* 2 líneas a line-height 1.25: 1.05rem × 1.25 × 2 líneas ≈ 2.6rem. */
  height: 2.6rem;
  align-items: flex-start;
}

/* Etiquetas (vegana, semifreddo, etc.) un 25% más pequeñas que el tamaño
   general: en DUCI tapaban bastante la foto, sobre todo con tarjetas más
   compactas (estilo mini). Escoge esto por restaurante (no lo cambiamos
   para todos) porque el problema es específico de tarjetas pequeñas. */
.estilo-mini .etiqueta {
  font-size: 0.49rem;
  padding: 0.105rem 0.385rem;
}

.estilo-mini .plato .plato-precio {
  /* Prueba: sin línea divisoria, a ver qué tal se ve. */
  padding-top: 0.25rem;
  margin-top: 0.2rem;
}