/**
 * Carta de Restaurante — estilos públicos.
 *
 * Responsive por CONTENEDOR, no por viewport: dentro de una columna de
 * Elementor, Bricks o cualquier constructor, el ancho de la pantalla no
 * dice nada sobre el sitio que tiene la carta.
 *
 * El ancho se mide en JavaScript (`frontend.js`) y se escribe como clases
 * `cr-w-780` … `cr-w-380` y como la variable `--cr-ancho`. NO se usa
 * `container-type`: en un widget de Elementor dejaba al contenedor del
 * widget con cientos de píxeles de alto de más (hueco en blanco debajo de
 * la carta en móvil). Mientras el JavaScript no ha medido todavía, mandan
 * las media queries del final del fichero.
 */

.cr-carta {
	--cr-acento: #8a5a2b;
	--cr-radio: 10px;
	--cr-foto: 120px;
	--cr-foto-radio: 14px;
	--cr-borde: color-mix(in srgb, currentColor 15%, transparent);
	--cr-fondo-sutil: color-mix(in srgb, var(--cr-acento) 6%, transparent);

	font-size: 1rem;
	line-height: 1.55;
}

.cr-carta *,
.cr-carta *::before,
.cr-carta *::after {
	box-sizing: border-box;
}

/* Algunos temas declaran display en p, li o section con más fuerza que el
   [hidden] del navegador, y entonces lo oculto deja un hueco enorme. */
.cr-carta [hidden],
.cr-carta[hidden] {
	display: none !important;
}

/* Y el último bloque no arrastra margen fuera de la carta: si el tema
   colapsa márgenes, ese hueco aparece debajo del widget. */
.cr-carta > :last-child {
	margin-bottom: 0;
}

/* Sin color-mix (navegadores antiguos) los bordes siguen viéndose. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.cr-carta {
		--cr-borde: rgba(128, 128, 128, 0.28);
		--cr-fondo-sutil: rgba(128, 128, 128, 0.06);
	}
}

/* ---------- Cabecera del menú ---------- */

.cr-menu__cabecera {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--cr-borde);
}

.cr-menu__titulo {
	margin: 0;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	color: var(--cr-acento);
}

.cr-menu__desc {
	margin: 0.4rem 0 0;
	font-size: 0.92rem;
	opacity: 0.8;
}

.cr-menu__precio {
	margin: 0.6rem 0 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--cr-menu-precio-color, var(--cr-acento));
}

/* Pie del menú: en vez de una raya más, un panel propio. El precio se
   distingue por tamaño y fondo, no por otro separador. Todo sale de
   variables para poder cambiarlo desde los ajustes o desde Elementor. */
.cr-menu__pie {
	margin-top: 2rem;
	padding: var(--cr-menu-pie-relleno, 1.25rem 1.5rem);
	border: var(--cr-menu-pie-borde, 0) solid var(--cr-menu-pie-borde-color, var(--cr-borde));
	border-radius: var(--cr-menu-pie-radio, var(--cr-radio));
	background: var(--cr-menu-pie-fondo, var(--cr-fondo-sutil));
	text-align: center;
}

.cr-menu__precio--pie {
	margin: 0;
	font-size: 2.2rem;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.cr-menu__condiciones {
	margin: 0.4rem 0 0;
	text-align: center;
	font-size: 0.88rem;
	opacity: var(--cr-menu-cond-opacidad, 0.8);
	color: var(--cr-menu-cond-color, inherit);
}

/* ---------- Filtros ---------- */

/* Sin raya: un separador más satura. Los chips se distinguen por tamaño,
   forma y color, que es lo que de verdad los separa del título. */
.cr-filtros {
	margin-bottom: 2rem;
}

.cr-filtros__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.cr-filtro-alergenos {
	flex: 0 1 auto;
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio);
	padding: 0.5rem 0.85rem;
}

.cr-filtro-alergenos > summary {
	cursor: pointer;
	font-size: 0.9rem;
	list-style: none;
}

.cr-filtro-alergenos > summary::-webkit-details-marker {
	display: none;
}

.cr-filtro-alergenos > summary::after {
	content: " ▾";
	opacity: 0.6;
}

.cr-filtro-alergenos[open] > summary::after {
	content: " ▴";
}

.cr-filtro-alergenos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.35rem 0.75rem;
	margin-top: 0.75rem;
}

.cr-filtro-check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	cursor: pointer;
}

.cr-filtro-check svg {
	flex: none;
	color: var(--cr-acento);
}

.cr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Mismo motivo que el botón de la foto: los chips son <button> y los
   estilos de botón del tema o de Elementor los convertirían en botonazos. */
.cr-carta .cr-chip {
	display: inline-block;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0.55rem 1.15rem !important;
	margin: 0 !important;
	border: 1px solid var(--cr-borde) !important;
	border-radius: 999px !important;
	background: var(--cr-fondo-sutil) !important;
	color: inherit !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none !important;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cr-carta .cr-chip:hover {
	border-color: var(--cr-acento) !important;
}

.cr-carta .cr-chip.is-activo {
	background: var(--cr-acento) !important;
	border-color: var(--cr-acento) !important;
	color: #fff !important;
}

/* ---------- Grupos ---------- */

.cr-grupo-platos + .cr-grupo-platos {
	margin-top: var(--cr-grupo-sep, 2.5rem);
}

.cr-grupo-platos[hidden] {
	display: none;
}

/* El título de sección puede llevar debajo una línea fina a modo de
   separador, y alinearse a la izquierda, al centro o a la derecha. Todo
   sale de variables para que Elementor pueda cambiarlo por dispositivo. */
.cr-grupo-platos__titulo {
	margin: 0 0 var(--cr-titulo-margen, 0.25rem);
	padding-bottom: var(--cr-titulo-hueco, 0);
	border-bottom: var(--cr-titulo-linea, 0) solid var(--cr-titulo-linea-color, var(--cr-borde));
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	text-align: var(--cr-titulo-align, inherit);
	color: var(--cr-acento);
}

.cr-grupo-platos__desc {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	opacity: 0.75;
}

/* ---------- Lista de platos ---------- */

.cr-platos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem 2.5rem;
}

.cr-cols-2 .cr-platos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-cols-3 .cr-platos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-cols-4 .cr-platos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cr-plato {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
}

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

/* ---------- Platos sin foto ----------
   Una carta con unos platos con foto y otros sin ella queda desalineada.
   El hueco ocupa el mismo sitio que la foto para que todos los nombres
   empiecen donde mismo. El contenido lo decide el ajuste «Platos sin
   foto»; el marcado lo pone el PHP, aquí solo se viste. */

.cr-plato__hueco {
	flex: none;
	width: var(--cr-foto);
	max-width: 100%;
	border-radius: var(--cr-foto-radio);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	/* Decorativo: no se selecciona ni se copia al pegar la carta. */
	user-select: none;
	-webkit-user-select: none;
}

/* Sangría: reserva el ancho, no el alto. La fila mide lo que mide su
   texto, así una carta casi sin fotos no se estira sin motivo. */
.cr-plato__hueco--sangria {
	height: 0;
}

.cr-plato__hueco--inicial,
.cr-plato__hueco--icono {
	height: var(--cr-foto);
	background: var(--cr-sin-foto-fondo, var(--cr-fondo-sutil));
	color: var(--cr-sin-foto-color, var(--cr-acento));
}

.cr-plato__inicial {
	font-size: calc(var(--cr-foto) * 0.44);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	opacity: var(--cr-sin-foto-opacidad, 0.7);
}

.cr-plato__icono {
	width: 44%;
	height: 44%;
	opacity: var(--cr-sin-foto-opacidad, 0.5);
}

/* En tarjetas la foto es una banda ancha, no un cuadrado: el hueco la
   imita para que la rejilla no baile. */
.cr-carta--tarjetas .cr-plato__hueco {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	border-radius: calc(var(--cr-radio) - 1px) calc(var(--cr-radio) - 1px) 0 0;
}

.cr-carta--tarjetas .cr-plato__hueco--sangria {
	display: none;
}

.cr-plato__foto {
	flex: none;
	width: var(--cr-foto);
	height: var(--cr-foto);
	max-width: 100%;
	overflow: hidden;

	/* Curva propia, independiente del redondeo general: aunque el resto
	   de la carta sea de esquina viva, la foto no se ve cuadrada. */
	border-radius: var(--cr-foto-radio);

	/* Sin fondo: con object-fit la foto llena la caja, y cualquier color
	   aquí solo aparece como un marco de más. */
	background: none;
}

/* Se apunta a «la imagen que hay dentro de la caja de la foto», no a su
   clase. Hay plugins de optimización que reescriben las etiquetas <img> y
   se dejan la clase por el camino: cuando eso pasa, la foto se quedaba sin
   estos estilos, `img { height: auto }` del tema ganaba y la foto salía
   recortada dentro de su caja. Sacar la imagen de nuestro contenedor no lo
   puede hacer ningún plugin; quitarle la clase, sí.

   El `!important` tampoco es capricho: muchos temas y Elementor declaran
   `img { height: auto }`, y eso deja la foto sin llenar su caja. */
.cr-carta .cr-plato__foto img,
.cr-carta .cr-plato__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: inherit;
	background: none;
}

.cr-plato__datos {
	flex: 1 1 auto;
	min-width: 0;

	/* Alineación del contenido del plato. Son tres variables porque cada
	   propiedad quiere lo suyo: `justify-content` para las filas de iconos y
	   precios, `text-align` para el texto, y la guía de puntos, que con el
	   contenido centrado o a la derecha sobra (uniría el nombre con un precio
	   que ya no está enfrente). Sin valores, todo se queda como estaba. */
	text-align: var(--cr-plato-texto, inherit);
}

/* ---------- Botón de ampliar sobre la foto ----------
   OJO: esto NO es un botón de la web. Los temas y, sobre todo, los
   Estilos globales → Botones de Elementor (`.elementor-kit-N button`,
   especificidad 0-1-1) le meten fondo, relleno, borde y altura mínima
   a cualquier <button> de la página, y eso encoge la foto dentro de un
   rectángulo de color. Por eso el reset va con dos clases y con
   !important en lo que rompe la maqueta. */

.cr-carta .cr-plato__zoom {
	display: block !important;
	position: relative;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	line-height: 0;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: zoom-in;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.cr-plato__zoom img {
	transition: transform 0.25s ease;
}

.cr-plato__zoom:hover img,
.cr-plato__zoom:focus-visible img {
	transform: scale(1.06);
}

.cr-plato__zoom:focus-visible {
	outline: 2px solid var(--cr-acento);
	outline-offset: 2px;
}

.cr-plato__lupa {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(20, 18, 16, 0.55);
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.cr-plato__zoom:hover .cr-plato__lupa,
.cr-plato__zoom:focus-visible .cr-plato__lupa {
	opacity: 1;
	transform: translateY(0);
}

/* En pantallas táctiles no hay hover: la lupa se queda puesta. */
@media (hover: none) {
	.cr-plato__lupa {
		opacity: 1;
		transform: none;
	}
}

.cr-plato__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: var(--cr-plato-align, flex-start);
	gap: 0.4rem;

	/* Con `nowrap`, un nombre largo junto a dos precios se quedaba sin
	   sitio y se partía palabra a palabra en vertical. Permitiendo el
	   salto, los precios bajan a la línea siguiente cuando no caben. */
	flex-wrap: wrap;
}

.cr-plato__nombre {
	margin: 0;
	font-size: 1.03rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;

	/* Sin color configurado hereda el del tema, que es lo que se quiere
	   la mayoría de las veces. */
	color: var(--cr-color-nombre, inherit);
}

/* El nombre y, en los vinos, la bodega y la uva. Van juntos porque forman
   una sola cosa: cómo se llama lo que te vas a beber. El bloque manda sobre
   la línea de puntos y nunca se encoge por debajo de la mitad de la fila,
   así el texto rompe por donde debe. */
.cr-plato__titulo {
	flex: 1 1 auto;
	min-width: 50%;
}

.cr-plato__linea {
	/* Se apaga entera, no se encoge: con `min-width` seguiría dejando un
	   trocito de puntos suelto. */
	display: var(--cr-plato-linea, block);
	flex: 1 1 auto;
	min-width: 1.5rem;
	height: 0;
	border-bottom: 1px dotted var(--cr-borde);
	transform: translateY(-0.2em);
}

/* Puede envolver: con un precio de oferta el bloque es bastante más ancho
   («24,00 € 19,50 €» en vez de «24,00 €») y en una columna estrecha se salía
   de la caja en lugar de bajar de línea. */
.cr-plato__precios {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cr-plato-align, flex-end);
	gap: 0.15rem 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cr-acento);
}

.cr-precio {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	white-space: nowrap;
}

.cr-precio__etiqueta {
	font-size: 0.7rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* Precio rebajado: el original tachado y detrás el de oferta. */
.cr-precio--oferta {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0.35rem;
}

.cr-precio--oferta .cr-precio__etiqueta {
	flex-basis: 100%;
	text-align: right;
}

.cr-precio__antes {
	font-weight: 400;
	opacity: 0.55;
}

/* Etiquetas del plato: «Plato más demandado», «Nuevo», «Oferta»…
   Van en su propia línea, ENCIMA del nombre: colgadas al final del título
   quedaban a merced de dónde cortara la última línea, y en nombres largos
   aparecían sueltas y descolocadas. Arriba siempre caen en el mismo sitio.

   El color sale del atributo style de cada etiqueta (--cr-et-*). Las
   variables --cr-destacado-* no se declaran en ningún sitio: existen solo
   si alguien las fuerza desde fuera (un widget de Elementor) para cambiar
   de golpe el color de todas las etiquetas de esa carta. */
.cr-plato__distintivos {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cr-plato-align, flex-start);
	gap: 0.3rem;
	margin: 0 0 0.4rem;
	line-height: 1;
}

.cr-plato__distintivo {
	display: inline-block;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	background: var(--cr-destacado-fondo, var(--cr-et-fondo, #e8a33d));
	color: var(--cr-destacado-color, var(--cr-et-color, #2b2009));
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cr-plato--agotado .cr-plato__distintivos {
	opacity: 0.5;
}

/* Texto solo para lectores de pantalla («Antes: 12,50 €»). */
.cr-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cr-plato__desc {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	opacity: 0.8;
	color: var(--cr-color-desc, inherit);
}

.cr-plato__agotado {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
}

.cr-plato--agotado .cr-plato__nombre,
.cr-plato--agotado .cr-plato__precios {
	opacity: 0.5;
}

.cr-plato--agotado .cr-plato__foto,
.cr-plato--agotado .cr-plato__hueco {
	filter: grayscale(1);
	opacity: 0.6;
}

/* El nombre de un plato destacado se pinta como cualquier otro: quien
   destaca es la etiqueta de arriba. Solo cambia de color si el cliente
   elige uno a propósito en Ajustes → Colores. */
.cr-plato--destacado .cr-plato__nombre {
	color: var(--cr-color-destacado, var(--cr-color-nombre, inherit));
}

/* ---------- Botones de reservar y llamar ----------
   Son <a>, no <button>, pero los temas y Elementor también estilan los
   enlaces con clase de botón: mismo criterio que con el resto de controles,
   reset con dos clases y !important en lo que rompe la maqueta. */

.cr-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;

	/* La alineación viene de los ajustes (hoja global) o de Elementor. */
	justify-content: var(--cr-acciones-just, flex-start);
}

.cr-acciones--arriba {
	margin-bottom: 1.5rem;
}

/* Sin raya encima: se separan por aire, que es más limpio. */
.cr-acciones--abajo {
	margin-top: 2.5rem;
}

.cr-carta .cr-carta__boton {
	display: inline-flex !important;
	align-items: center;
	gap: 0.45rem;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0.85rem 1.6rem !important;
	margin: 0 !important;
	border: 2px solid var(--cr-acento) !important;
	border-radius: var(--cr-radio) !important;
	background: var(--cr-acento) !important;
	color: #fff !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.cr-carta .cr-carta__boton:hover,
.cr-carta .cr-carta__boton:focus {
	opacity: 0.88;
	text-decoration: none !important;
}

.cr-carta .cr-carta__boton:focus-visible {
	outline: 2px solid var(--cr-acento);
	outline-offset: 2px;
}

/* El de llamar va en secundario: el principal es reservar. */
.cr-carta .cr-boton--tel {
	background: transparent !important;
	color: var(--cr-acento) !important;
}

.cr-carta__boton .cr-icono {
	flex: none;
}

.cr-boton__numero {
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	opacity: 0.85;
}

/* Alineación por ancho de CONTENEDOR, no de pantalla: dentro de una
   columna estrecha de Elementor manda la misma regla que en un móvil. */
.cr-w-560 .cr-acciones {
	justify-content: var(--cr-acciones-just-t, var(--cr-acciones-just, flex-start));
}

/* En una columna estrecha los botones ocupan toda la fila: en un móvil,
   dos botones a medias quedan pequeños justo donde más se tocan. Se puede
   desactivar en los ajustes, y entonces manda la alineación. */
.cr-carta.cr-w-420 {
	--cr-grupo-sep: 1.75rem;
}

.cr-w-420 .cr-acciones--abajo {
	margin-top: 1.75rem;
}

.cr-w-420 .cr-menu__pie {
	margin-top: 1.5rem;
	padding: 1rem 1rem;
}

.cr-w-420 .cr-menu__precio--pie {
	font-size: 1.9rem;
}

.cr-w-420 .cr-acciones {
	justify-content: var(--cr-acciones-just-m, var(--cr-acciones-just-t, var(--cr-acciones-just, flex-start)));
}

.cr-carta.cr-w-420 .cr-carta__boton {
	width: var(--cr-acciones-ancho, 100%) !important;
	justify-content: center;
}

/* Mientras el JavaScript no ha medido (y si está desactivado): por ancho
   de pantalla, que en un móvil acierta casi siempre. */
@media (max-width: 560px) {
	.cr-carta:not([data-cr-ancho]) .cr-acciones {
		justify-content: var(--cr-acciones-just-t, var(--cr-acciones-just, flex-start));
	}
}

@media (max-width: 420px) {
	.cr-carta:not([data-cr-ancho]) .cr-acciones {
		justify-content: var(--cr-acciones-just-m, var(--cr-acciones-just-t, var(--cr-acciones-just, flex-start)));
	}

	.cr-carta:not([data-cr-ancho]) .cr-carta__boton {
		width: var(--cr-acciones-ancho, 100%) !important;
		justify-content: center;
	}
}

/* Al imprimir la carta, un botón no sirve de nada: queda el teléfono. */
@media print {
	.cr-boton--reserva {
		display: none !important;
	}
}

/* ---------- Vinos ---------- */

.cr-vino__anada {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.cr-vino__ficha {
	margin: 0.2rem 0 0;
	font-size: 0.84rem;
	letter-spacing: 0.01em;
	opacity: 0.7;
}

/* En la vinoteca no hay línea de puntos: el nombre y el precio ya no son
   vecinos (entre medias van la bodega y la uva), así que la guía uniría
   dos cosas que no se miran juntas y quedaría colgando. */
.cr-carta--vinos .cr-plato__linea {
	display: none;
}

.cr-carta--vinos .cr-platos {
	gap: 1.15rem 2.5rem;
}

/* ---------- Etiquetas dietéticas ---------- */

.cr-dietas {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cr-plato-align, flex-start);
	gap: 0.35rem;
	margin: 0.5rem 0 0;
	padding: 0;
}

.cr-dieta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1rem 0.5rem 0.1rem 0.35rem;
	border: 1px solid var(--cr-dieta-color, var(--cr-acento));
	border-radius: 999px;
	color: var(--cr-dieta-color, var(--cr-acento));
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

/* ---------- Alérgenos ---------- */

.cr-alergenos {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cr-plato-align, flex-start);
	gap: 0.3rem;
	margin: 0.55rem 0 0;
	padding: 0;
}

.cr-alergeno {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--cr-acento);
}

/* El icono es un <button> para que en el móvil se pueda TOCAR y salga
   el nombre: en una pantalla táctil no existe el «pasar el ratón».
   Como todo botón del plugin, va blindado contra los estilos del tema. */
.cr-alergenos .cr-alergeno__icono {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0.2rem !important;
	border: 1px solid var(--cr-borde) !important;
	border-radius: 50% !important;
	background: var(--cr-fondo-sutil) !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	line-height: 0;
	text-transform: none !important;
	cursor: help;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease;
}

.cr-alergenos--texto .cr-alergeno__icono,
.cr-alergenos--ambos .cr-alergeno__icono {
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	cursor: default;
}

.cr-alergenos .cr-alergeno__icono:hover,
.cr-alergenos .cr-alergeno__icono:focus-visible {
	border-color: var(--cr-acento) !important;
}

.cr-alergenos .cr-alergeno__icono:focus-visible {
	outline: 2px solid var(--cr-acento);
	outline-offset: 2px;
}

/* El globo. Solo hace falta cuando se ve únicamente el icono. */
.cr-alergenos--iconos .cr-alergeno__icono::after {
	content: attr(data-nombre);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	z-index: 5;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background: #1f1c19;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

/* La punta del globo. */
.cr-alergenos--iconos .cr-alergeno__icono::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	z-index: 5;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: #1f1c19;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.cr-alergenos--iconos .cr-alergeno__icono:hover::after,
.cr-alergenos--iconos .cr-alergeno__icono:hover::before,
.cr-alergenos--iconos .cr-alergeno__icono:focus::after,
.cr-alergenos--iconos .cr-alergeno__icono:focus::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.cr-alergenos--ambos .cr-alergeno,
.cr-alergenos--texto .cr-alergeno {
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--cr-borde);
	border-radius: 999px;
	font-size: 0.74rem;
}

.cr-alergeno__texto {
	font-size: 0.74rem;
}

.cr-trazas {
	margin: 0.4rem 0 0;
	font-size: 0.76rem;
	font-style: italic;
	opacity: 0.65;
}

/* ---------- Diseño en tarjetas ---------- */

.cr-carta--tarjetas .cr-plato {
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio);

	/* Sin `overflow: hidden`: recortaba los globos con el nombre del
	   alérgeno. El redondeo de la foto lo hace ahora la propia foto. */
}

.cr-carta--tarjetas .cr-plato__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--cr-radio) - 1px) calc(var(--cr-radio) - 1px) 0 0;
}

.cr-carta--tarjetas .cr-plato__datos {
	padding: 0.9rem 1rem 1.1rem;
	width: 100%;
}

.cr-carta--tarjetas.cr-cols-1 .cr-platos {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* En tarjetas el nombre dispone de poco ancho: el precio baja a su propia línea. */
.cr-carta--tarjetas .cr-plato__cabecera { flex-wrap: wrap; }
.cr-carta--tarjetas .cr-plato__linea { display: none; }
.cr-carta--tarjetas .cr-plato__titulo { flex: 1 1 100%; }
.cr-carta--tarjetas .cr-plato__precios { margin-top: 0.2rem; justify-content: var(--cr-plato-align, flex-start); }
.cr-carta--tarjetas .cr-precio { align-items: var(--cr-plato-align, flex-start); }

/* ---------- Leyenda y aviso ---------- */

.cr-leyenda {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cr-borde);
}

.cr-carta--solo-leyenda .cr-leyenda {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.cr-leyenda__titulo {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

.cr-leyenda__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.5rem 1rem;
}

.cr-leyenda__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.84rem;
}

.cr-leyenda__item svg {
	flex: none;
	color: var(--cr-acento);
}

.cr-aviso {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--cr-acento);
	background: var(--cr-fondo-sutil);
	border-radius: 0 var(--cr-radio) var(--cr-radio) 0;
	font-size: 0.84rem;
}

.cr-sin-resultados {
	padding: 2rem 0;
	text-align: center;
	opacity: 0.7;
}

.cr-vacio {
	padding: 1.5rem;
	border: 1px dashed var(--cr-borde);
	border-radius: var(--cr-radio);
	text-align: center;
	opacity: 0.75;
}

/* ---------- Accesibilidad ---------- */

.cr-carta .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cr-chip,
	.cr-plato__zoom img,
	.cr-plato__lupa,
	.cr-visor,
	.cr-visor__panel {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   VISOR DE IMAGEN
   Vive fuera de .cr-carta (se cuelga del body para que ningún
   contenedor con overflow o transform le rompa el position:fixed),
   así que define sus propios colores sin depender del tema.
   ============================================================ */

.cr-visor {
	--cr-visor-fondo: #ffffff;
	--cr-visor-texto: #1c1a18;
	--cr-visor-velo: rgba(18, 16, 14, 0.82);

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: var(--cr-visor-velo);
	color: var(--cr-visor-texto);
	opacity: 0;
	transition: opacity 0.18s ease;
	overscroll-behavior: contain;
}

.cr-visor[hidden] {
	display: none;
}

.cr-visor.is-abierto {
	opacity: 1;
}

/* Aquí había un bloque `prefers-color-scheme: dark` que forzaba un panel
   oscuro. Se ha quitado: ahora el fondo del visor es un ajuste del cliente
   y el color del texto se calcula a partir de él, así que imponer otro
   par de colores por el modo del sistema solo serviría para ignorar su
   elección en la mitad de los visitantes. */

.cr-visor__panel {
	display: flex;
	flex-direction: column;
	max-width: min(1000px, 100%);
	max-height: 100%;
	background: var(--cr-visor-fondo);
	border-radius: var(--cr-radio, 10px);
	overflow: hidden;
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
	transform: scale(0.97);
	transition: transform 0.18s ease;
}

.cr-visor.is-abierto .cr-visor__panel {
	transform: scale(1);
}

.cr-visor__imagen {
	display: block;
	max-width: 100%;
	max-height: 68vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	background: color-mix(in srgb, var(--cr-visor-texto) 6%, transparent);
}

.cr-visor__ficha {
	padding: 1rem 1.25rem 1.25rem;
	overflow-y: auto;
	font-size: 1rem;
	line-height: 1.55;
}

/* La ficha es un clon del plato: hereda sus estilos, pero aquí
   el nombre manda más y las fotos ya no compiten con el texto. */
.cr-visor__ficha .cr-plato__nombre {
	font-size: 1.25rem;
}

.cr-visor__ficha .cr-plato__desc {
	font-size: 0.95rem;
}

.cr-visor .cr-visor__cerrar {
	position: absolute;

	/* El panel lleva `transform`, y eso crea contexto de apilamiento: sin
	   un z-index explícito la foto se pinta ENCIMA del botón. En escritorio
	   no se notaba porque el botón cae fuera del panel, pero en móvil el
	   panel ocupa toda la pantalla y la X quedaba tapada e impulsable. */
	z-index: 2;

	top: clamp(10px, 2vw, 22px);
	right: clamp(10px, 2vw, 22px);
	top: max(clamp(10px, 2vw, 22px), env(safe-area-inset-top, 0px));
	right: max(clamp(10px, 2vw, 22px), env(safe-area-inset-right, 0px));

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;

	/* Oscuro y sólido: tiene que leerse igual sobre el velo, sobre una
	   foto clara y sobre el panel blanco del modo móvil. */
	background: rgba(24, 21, 18, 0.78) !important;
	color: #fff !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35);

	font: inherit;
	line-height: 1;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.cr-visor .cr-visor__cerrar:hover {
	background: rgba(24, 21, 18, 0.95) !important;
}

.cr-visor .cr-visor__cerrar:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cr-visor .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Con el visor abierto, la página de detrás no se mueve. */
.cr-visor-abierto {
	overflow: hidden !important;
}

@media (max-width: 600px) {
	.cr-visor {
		padding: 0;
	}

	.cr-visor__panel {
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.cr-visor__imagen {
		max-height: 50vh;
		width: 100%;
	}
}

/* ============================================================
   MODO «HEREDAR DEL TEMA»
   Se queda la estructura (rejillas, separaciones, iconos) y se
   devuelve al tema el control de tipografías, tamaños y color.
   ============================================================ */

.cr-estilo--tema .cr-menu__titulo,
.cr-estilo--tema .cr-grupo-platos__titulo,
.cr-estilo--tema .cr-plato__nombre,
.cr-estilo--tema .cr-leyenda__titulo {
	font: inherit;
	font-weight: 700;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}

/* …pero si se ha elegido un color a mano, manda ese. */
.cr-estilo--tema .cr-plato__nombre {
	color: var(--cr-color-nombre, inherit);
}

/* Las etiquetas son una pieza gráfica, no texto corrido: mantienen su
   tamaño y su color aunque el resto herede la tipografía del tema. */
.cr-estilo--tema .cr-plato__distintivo {
	font-size: 0.68rem;
	text-transform: uppercase;
	color: var(--cr-destacado-color, var(--cr-et-color, #2b2009));
}

.cr-estilo--tema .cr-grupo-platos__titulo {
	font-size: 1.25em;
}

.cr-estilo--tema .cr-menu__titulo {
	font-size: 1.5em;
}

.cr-estilo--tema .cr-plato__desc,
.cr-estilo--tema .cr-grupo-platos__desc,
.cr-estilo--tema .cr-menu__desc,
.cr-estilo--tema .cr-leyenda__item,
.cr-estilo--tema .cr-aviso,
.cr-estilo--tema .cr-trazas {
	font-size: inherit;
	opacity: 1;
	color: inherit;
}

.cr-estilo--tema .cr-plato__desc,
.cr-estilo--tema .cr-trazas,
.cr-estilo--tema .cr-vino__ficha {
	font-size: 0.92em;
}

.cr-estilo--tema .cr-plato__desc {
	color: var(--cr-color-desc, inherit);
}

.cr-estilo--tema .cr-plato__precios,
.cr-estilo--tema .cr-menu__precio {
	color: var(--cr-color-destacado, var(--cr-acento));
}

.cr-estilo--tema .cr-plato--destacado .cr-plato__nombre {
	color: var(--cr-color-destacado, var(--cr-color-nombre, inherit));
}

.cr-estilo--tema .cr-chip.is-activo {
	color: #fff;
}

/* ============================================================
   RESPONSIVE POR CONTENEDOR
   Los cortes miran el ancho de la carta, no el de la ventana.
   ============================================================ */

.cr-w-780.cr-cols-3 .cr-platos,
.cr-w-780.cr-cols-4 .cr-platos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cr-w-560 .cr-platos {
	gap: 1.25rem 1.5rem;
}

.cr-w-560.cr-cols-2 .cr-platos,
.cr-w-560.cr-cols-3 .cr-platos,
.cr-w-560.cr-cols-4 .cr-platos {
	grid-template-columns: 1fr;
}

.cr-w-560 .cr-plato__cabecera {
	flex-wrap: wrap;
}

.cr-w-560 .cr-plato__linea {
	display: none;
}

.cr-w-560 .cr-plato__precios {
	width: 100%;
	justify-content: var(--cr-plato-align, flex-start);
	margin-top: 0.15rem;
}

.cr-w-560 .cr-precio {
	align-items: var(--cr-plato-align, flex-start);
}

.cr-w-560 .cr-precio__etiqueta {
	display: inline;
	margin-right: 0.25rem;
}

/* En móvil hay una sola columna y sobra ancho: la foto se agranda. El tope
   sobre `--cr-ancho` (el ancho real de la carta, medido en JavaScript)
   evita que se coma la fila en pantallas pequeñas. */
/* Solo en el diseño de lista. En tarjetas la foto es una banda que ocupa
   todo el ancho de la tarjeta, y esta regla —que viene después en el
   fichero y pesa lo mismo— la encogía a un cuadrado pequeño pegado a la
   izquierda: en móvil la tarjeta quedaba con la foto en una esquina y un
   hueco enorme al lado. */
.cr-w-560:not(.cr-carta--tarjetas) .cr-plato__foto,
.cr-w-560:not(.cr-carta--tarjetas) .cr-plato__hueco {
	width: min(calc(var(--cr-foto) * 1.25), calc(var(--cr-ancho, 100vw) * 0.4));
	height: min(calc(var(--cr-foto) * 1.25), calc(var(--cr-ancho, 100vw) * 0.4));
}

/* La sangría sigue sin alto aunque crezca de ancho. */
.cr-w-560:not(.cr-carta--tarjetas) .cr-plato__hueco--sangria {
	height: 0;
}

.cr-w-560 .cr-menu__precio {
	font-size: 1.7rem;
}

.cr-w-560 .cr-leyenda__lista {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.cr-w-380 .cr-filtro-alergenos {
	width: 100%;
}

.cr-w-380 .cr-plato {
	gap: 0.75rem;
}

/* El tamaño de la foto NO se toca en el corte de 380 px a propósito: el
   tope sobre `--cr-ancho` del bloque de 560 px ya la adapta sola, y un
   móvil corriente deja un contenedor de unos 350 px, que también entra en
   ese corte. Volver a fijarla la dejaba pequeña justo donde se quería
   grande. */

/* Respaldo mientras el JavaScript no ha medido, y si está desactivado. */
@media (max-width: 900px) {
	.cr-carta:not([data-cr-ancho]).cr-cols-3 .cr-platos,
	.cr-carta:not([data-cr-ancho]).cr-cols-4 .cr-platos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cr-carta:not([data-cr-ancho]).cr-cols-2 .cr-platos,
	.cr-carta:not([data-cr-ancho]).cr-cols-3 .cr-platos,
	.cr-carta:not([data-cr-ancho]).cr-cols-4 .cr-platos {
		grid-template-columns: 1fr;
	}

	.cr-carta:not([data-cr-ancho]) .cr-plato__cabecera { flex-wrap: wrap; }
	.cr-carta:not([data-cr-ancho]) .cr-plato__linea { display: none; }
	.cr-carta:not([data-cr-ancho]) .cr-plato__precios { width: 100%; justify-content: var(--cr-plato-align, flex-start); margin-top: 0.15rem; }
	.cr-carta:not([data-cr-ancho]) .cr-precio { align-items: var(--cr-plato-align, flex-start); }
	.cr-carta:not([data-cr-ancho]):not(.cr-carta--tarjetas) .cr-plato__foto,
	.cr-carta:not([data-cr-ancho]):not(.cr-carta--tarjetas) .cr-plato__hueco { width: min(calc(var(--cr-foto) * 1.25), 40vw); height: min(calc(var(--cr-foto) * 1.25), 40vw); }
	.cr-carta:not([data-cr-ancho]):not(.cr-carta--tarjetas) .cr-plato__hueco--sangria { height: 0; }
	.cr-carta:not([data-cr-ancho]) .cr-menu__precio { font-size: 1.7rem; }
}

/* ---------- Impresión ---------- */

@media print {
	.cr-filtros,
	.cr-sin-resultados,
	.cr-plato__lupa,
	.cr-visor {
		display: none !important;
	}

	.cr-carta {
		font-size: 11pt;
	}

	.cr-grupo-platos,
	.cr-plato,
	.cr-menu__cabecera {
		break-inside: avoid;
	}

	.cr-plato__foto {
		display: none;
	}
}