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

#filtros-contenedor {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1rem 0.75rem;
}

#navegacion-secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  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;
}

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

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