/* ==========================================================================
   Gran Bahía — La carta
   --------------------------------------------------------------------------
   Estilos del shortcode [gb_carta]: barra de filtros, índice de categorías y
   listado de platos.

   Se carga sólo en /carta/, en las categorías y en la ficha de plato. No tiene
   sentido pagar estos bytes en la portada.

   Todo el color y la tipografía sale de los tokens de design-system.css.
   ========================================================================== */

/* Alto de la cabecera fija. La barra de filtros se pega justo debajo: si el
   valor se queda corto, el filtro se mete bajo el menú; si se pasa, queda un
   hueco por el que el contenido se cuela entre los dos.

   Este número YA NO SE MANTIENE A MANO. gb-motion.js mide la cabecera y
   sobrescribe esta variable en `documentElement` en cada carga y en cada
   redimensionado. Lo que queda aquí es sólo el valor de reserva, para si el
   JavaScript no llega a ejecutarse.

   Los 8,25 rem (132 px) que había aquí venían de cuando la cabecera se partía
   en dos filas en el móvil, y desde que design-system.css:502 la obliga a
   caber en una sola el filtro se quedaba flotando 27 px por debajo de ella con
   la carta pasando por el hueco. Medido el 29 de agosto de 2026: 107 px en
   escritorio y 105 en móvil —casi lo mismo, así que tampoco hace falta la
   variante de móvil que había—. */
:root {
	--gb-cabecera-alto: 6.75rem;
}

.gb-carta {
	--gb-carta-columnas: 3;

	width: 100%;
	max-width: 78rem;
	margin-inline: auto;
}

/* ==========================================================================
   Barra de filtros
   --------------------------------------------------------------------------
   Va pegada bajo la cabecera: en una carta de 57 platos, si el filtro se queda
   arriba hay que volver a subir para cambiarlo, y entonces no se usa.
   ========================================================================== */

.gb-filtro {
	position: sticky;
	top: var(--gb-cabecera-alto);
	z-index: 20;
	margin-bottom: var(--gb-e-8);
	/* Al 92 % de opacidad la barra pasaba por encima de las fotos como una
	   mancha de niebla. Bajándola y desenfocando más se lee como un cristal:
	   se ve que hay algo detrás, que es lo que hace creíble que flote. */
	background: color-mix(in srgb, var(--gb-fondo) 72%, transparent);
	backdrop-filter: saturate(1.4) blur(20px);
	border-bottom: 1px solid var(--gb-filo);
}

/* Sin soporte de desenfoque no hay cristal que valga: mejor una barra opaca
   que un texto sobre una foto. */
@supports not (backdrop-filter: blur(1px)) {
	.gb-filtro {
		background: var(--gb-fondo);
	}
}

/* Sin JavaScript el formulario no filtra nada, así que llega con `hidden`
   puesto y el script lo destapa. La carta entera sí se ve siempre. */
.gb-filtro[hidden] {
	display: none;
}

.gb-filtro__barra {
	display: flex;
	align-items: center;
	gap: var(--gb-e-4);
	flex-wrap: wrap;
	padding-block: var(--gb-e-3);
}

.gb-filtro__abrir {
	display: inline-flex;
	align-items: center;
	gap: var(--gb-e-2);
	min-height: 44px;
	padding: var(--gb-e-2) var(--gb-e-4);
	font-family: var(--gb-fuente-texto);
	font-size: var(--gb-t-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gb-texto);
	background: transparent;
	border: 1px solid var(--gb-texto);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--gb-transicion), color var(--gb-transicion);
}

.gb-filtro__abrir::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background: currentcolor;
	/* Tres reguladores: el icono universal de filtro, sin cargar una fuente
	   de iconos entera para dibujarlo. */
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 7h10M18 7h2M4 12h4M12 12h8M4 17h12M20 17h0" stroke="black" stroke-width="1.8" fill="none" stroke-linecap="round"/><circle cx="16" cy="7" r="2.2" fill="black"/><circle cx="10" cy="12" r="2.2" fill="black"/><circle cx="18" cy="17" r="2.2" fill="black"/></svg>') center / contain no-repeat;
}

.gb-filtro__abrir:hover,
.gb-filtro__abrir[aria-expanded="true"] {
	background: var(--gb-acento);
	color: var(--gb-blanco);
}

/* Contador de filtros activos: el aviso de que la carta que se está viendo
   no es la carta entera. */
/* Cuidado: el atributo `hidden` no gana a un `display` puesto en CSS. Cada
   elemento que se oculte desde JavaScript necesita su regla. */
.gb-filtro__marca[hidden] {
	display: none;
}

.gb-filtro__marca {
	display: inline-grid;
	place-items: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 0.35em;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	border-radius: 999px;
	background: var(--gb-acento);
	color: var(--gb-blanco);
}

.gb-filtro__abrir[aria-expanded="true"] .gb-filtro__marca,
.gb-filtro__abrir:hover .gb-filtro__marca {
	background: var(--gb-blanco);
	color: var(--gb-negro);
}

.gb-filtro__cuenta {
	margin: 0;
	margin-inline-end: auto;
	font-size: var(--gb-t-sm);
	font-variant-numeric: tabular-nums;
	color: var(--gb-texto-suave);
}

.gb-filtro__limpiar,
.gb-carta__enlace {
	min-height: 44px;
	padding: 0;
	font-family: var(--gb-fuente-texto);
	font-size: var(--gb-t-sm);
	color: var(--gb-texto);
	background: none;
	border: 0;
	border-bottom: 1px solid currentcolor;
	border-radius: 0;
	cursor: pointer;
}

.gb-carta__enlace {
	min-height: 0;
}

.gb-filtro__limpiar:hover,
.gb-carta__enlace:hover {
	color: var(--gb-texto-suave);
}

.gb-filtro__panel {
	display: grid;
	gap: var(--gb-e-6);
	padding-bottom: var(--gb-e-6);
}

.gb-filtro__panel[hidden] {
	display: none;
}

.gb-filtro__grupo {
	margin: 0;
	padding: 0;
	border: 0;
}

.gb-filtro__grupo legend {
	padding: 0 0 var(--gb-e-3);
	font-size: var(--gb-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gb-texto-suave);
}

.gb-filtro__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-e-2);
}

/* --- Casilla con aspecto de píldora ---------------------------------------
   El <input> sigue ahí, sólo que fuera de la vista: así el filtro se maneja
   con el tabulador y la barra espaciadora, y los lectores de pantalla lo
   anuncian como lo que es, una casilla de verificación. */

.gb-chip {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.gb-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gb-chip span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 40px;
	padding: 0.35em 1em;
	font-size: var(--gb-t-sm);
	line-height: 1.2;
	color: var(--gb-texto);
	background: var(--gb-fondo-alt);
	border: 1px solid var(--gb-borde);
	border-radius: 999px;
	transition: background var(--gb-transicion), border-color var(--gb-transicion), color var(--gb-transicion);
}

.gb-chip span::before {
	content: "";
	width: 0;
	height: 0.7em;
	overflow: hidden;
	background: currentcolor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="black" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
	transition: width var(--gb-transicion);
}

.gb-chip:hover span {
	border-color: var(--gb-texto);
}

.gb-chip input:checked + span {
	background: var(--gb-acento);
	border-color: var(--gb-acento);
	color: var(--gb-blanco);
}

.gb-chip input:checked + span::before {
	width: 0.7em;
}

.gb-chip input:focus-visible + span {
	outline: 3px solid var(--gb-azul);
	outline-offset: 2px;
}

/* ==========================================================================
   Índice de categorías
   ========================================================================== */

.gb-carta__indice ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-e-2) var(--gb-e-6);
	margin: 0 0 var(--gb-e-16);
	padding: 0;
	list-style: none;
}

.gb-carta__indice a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding-block: var(--gb-e-1);
	font-size: var(--gb-t-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gb-texto);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--gb-transicion), opacity var(--gb-transicion);
}

.gb-carta__indice a:hover {
	border-bottom-color: var(--gb-texto);
}

.gb-carta__indice-n {
	font-family: var(--gb-fuente-titulo);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	color: var(--gb-texto-suave);
}

/* Categoría que el filtro ha dejado sin platos: se atenúa en vez de
   desaparecer, para que el índice no baile mientras se filtra. */
.gb-carta__indice a[data-gb-vacia] {
	opacity: 0.35;
	pointer-events: none;
}

/* ==========================================================================
   Secciones y listado
   ========================================================================== */

.gb-carta__seccion {
	margin-bottom: var(--gb-e-24);
	/* El navegador se ahorra maquetar las secciones que aún no se ven. Con 57
	   platos y sus fotos, se nota en el primer pintado. */
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

.gb-carta__seccion[hidden] {
	display: none;
}

.gb-carta__cabecera {
	margin-bottom: var(--gb-e-8);
	padding-bottom: var(--gb-e-3);
	border-bottom: 1px solid var(--gb-texto);
}

.gb-carta__titulo {
	margin: 0;
	font-size: var(--gb-t-xl);
}

.gb-carta__entradilla {
	margin: var(--gb-e-2) 0 0;
	font-size: var(--gb-t-sm);
	color: var(--gb-texto-suave);
}

.gb-carta__lista {
	display: grid;
	grid-template-columns: repeat(var(--gb-carta-columnas), minmax(0, 1fr));
	gap: var(--gb-e-12) var(--gb-e-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.gb-carta { --gb-carta-columnas: 2; }
}

@media (max-width: 600px) {
	.gb-carta { --gb-carta-columnas: 1; }

	.gb-carta__lista {
		gap: var(--gb-e-8);
	}
}

/* --- Ficha de plato dentro de la carta ------------------------------------
   Reutiliza .gb-plato de design-system.css y añade lo propio del listado. */

.gb-plato--carta {
	gap: 0;
	padding-bottom: var(--gb-e-4);
}

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

.gb-plato--carta .gb-plato__foto {
	display: block;
	margin-bottom: var(--gb-e-4);
}

.gb-plato__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--gb-e-2);
	flex: 1;
}

.gb-plato--carta .gb-plato__nombre {
	font-size: var(--gb-t-lg);
	margin: 0;
}

.gb-plato--carta .gb-plato__nombre a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentcolor, currentcolor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--gb-transicion);
}

.gb-plato--carta .gb-plato__nombre a:hover,
.gb-plato--carta .gb-plato__nombre a:focus-visible {
	background-size: 100% 1px;
}

.gb-plato--carta .gb-plato__desc {
	margin: 0;
	flex: 1;
}

.gb-plato--carta .gb-plato__precio {
	margin: var(--gb-e-1) 0 0;
	font-size: var(--gb-t-lg);
}

.gb-plato__agotado {
	margin: 0;
	font-size: var(--gb-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-texto-suave);
}

.gb-plato__dietas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-e-1);
	margin: var(--gb-e-2) 0 0;
	padding: 0;
	list-style: none;
}

.gb-plato--carta .gb-plato__alergenos {
	margin: var(--gb-e-2) 0 0;
	line-height: 1.5;
}

.gb-plato__alergenos-et {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.9em;
}

.gb-plato__alergenos--vacio {
	font-style: italic;
}

/* ==========================================================================
   Sin resultados y aviso legal
   ========================================================================== */

.gb-carta__vacio {
	margin: var(--gb-e-16) 0;
	font-size: var(--gb-t-lg);
	font-family: var(--gb-fuente-titulo);
	text-align: center;
}

.gb-carta__vacio[hidden] {
	display: none;
}

.gb-carta__aviso {
	margin-top: var(--gb-e-12);
	padding: var(--gb-e-6);
	background: var(--gb-fondo-alt);
	border-inline-start: 2px solid var(--gb-texto);
}

.gb-carta__aviso p {
	margin: 0;
	max-width: none;
	font-size: var(--gb-t-sm);
	color: var(--gb-texto-suave);
}

/* El aviso lleva dos párrafos desde el 31 de agosto —alérgenos y fotografías—
   y sin esto se leían como uno solo. */
.gb-carta__aviso p + p {
	margin-top: var(--gb-e-3);
}

.gb-carta__aviso strong {
	color: var(--gb-texto);
}

/* Aviso de trabajo, visible sólo con la sesión iniciada. */
.gb-carta__aviso--interno {
	margin-top: var(--gb-e-3);
	background: repeating-linear-gradient(
		135deg,
		var(--gb-gris-100) 0 12px,
		var(--gb-gris-50) 12px 24px
	);
}

/* ==========================================================================
   Vinoteca — /carta-de-vinos/
   --------------------------------------------------------------------------
   Aquí no hay fotos: una carta de vinos se lee, no se mira. Dos columnas de
   líneas con el precio alineado a la derecha, como en la carta de papel.
   ========================================================================== */

.gb-vinos__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gb-e-6) var(--gb-e-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 860px) {
	.gb-vinos__lista {
		grid-template-columns: 1fr;
	}
}

.gb-vino {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gb-e-4);
	padding-bottom: var(--gb-e-4);
	border-bottom: 1px solid var(--gb-borde);
}

.gb-vino__texto {
	min-width: 0;
}

.gb-vino__nombre {
	margin: 0;
	font-size: var(--gb-t-base);
	font-weight: 500;
}

.gb-vino .gb-vino__ficha {
	margin: var(--gb-e-1) 0 0;
	max-width: none;
}

.gb-vino__marca {
	display: inline-block;
	margin-inline-start: var(--gb-e-2);
	padding: 0.1em 0.6em;
	font-family: var(--gb-fuente-texto);
	font-size: 0.6em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: middle;
	border: 1px solid var(--gb-borde);
	border-radius: 999px;
	color: var(--gb-texto-suave);
}

.gb-vino .gb-vino__precio {
	margin: 0;
	flex: none;
	font-size: var(--gb-t-base);
}

.gb-vino--agotado {
	opacity: 0.5;
}

/* ==========================================================================
   Ficha de plato — /carta/plato/arroz-a-banda/
   --------------------------------------------------------------------------
   La foto manda: es lo que decide si alguien pide el plato. El texto ocupa
   una columna estrecha al lado y se queda quieto mientras la imagen sube.
   ========================================================================== */

/* La foto del plato es ahora el hero, a pantalla completa, así que aquí abajo
   sólo quedan los datos: una columna estrecha y centrada. Estrecha a
   propósito —una línea de 68 caracteres se lee; una de 120, no—. */
.gb-ficha__split {
	max-width: 46rem;
	margin-inline: auto;
}

.gb-ficha__precio {
	font-size: var(--gb-t-2xl);
	line-height: 1;
	margin-block: var(--gb-e-2);
}

.gb-ficha__desc p {
	font-size: var(--gb-t-lg);
	line-height: 1.45;
	color: var(--gb-texto);
}

.gb-ficha__texto {
	color: var(--gb-texto-suave);
}

/* Las etiquetas dinámicas devuelven texto plano: «Apto para: Vegano · Sin
   gluten». Se le da presencia de dato, no de párrafo. */
.gb-ficha__dietas {
	margin-top: var(--gb-e-4);
	padding: var(--gb-e-2) var(--gb-e-4);
	font-family: var(--gb-fuente-texto);
	font-size: var(--gb-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--gb-borde);
	border-radius: 999px;
	width: fit-content;
}

.gb-ficha__alergenos {
	margin-top: var(--gb-e-4);
	padding-top: var(--gb-e-4);
	border-top: 1px solid var(--gb-borde);
}

.gb-ficha__nota p {
	margin: 0;
	font-size: var(--gb-t-xs);
	font-style: italic;
	color: var(--gb-texto-suave);
}

.gb-ficha__acciones {
	gap: var(--gb-e-4);
	margin-top: var(--gb-e-6);
}

/* Segundo botón, el de volver: presencia de enlace, área de botón. */
.gb-boton--fantasma .elementor-button {
	background: transparent;
	color: var(--gb-texto);
	border: 1px solid var(--gb-borde);
}

.gb-boton--fantasma .elementor-button:hover,
.gb-boton--fantasma .elementor-button:focus-visible {
	background: transparent;
	color: var(--gb-texto);
	border-color: var(--gb-texto);
}


/* ==========================================================================
   Segunda revisión responsive — 31 de agosto de 2026
   --------------------------------------------------------------------------
   Continúa la numeración que empezó en escenas.css: allí van del 1 al 13, aquí
   siguen el 14, el 15 y el 16. Cada arreglo vive en la hoja a la que pertenece;
   la numeración es única para poder citarla en el informe.
   ========================================================================== */

/* --- 14. Dos textos bajaban de 12 px en el teléfono -----------------------
   Los dos están escritos en `em`, así que encogen con su padre, y su padre ya
   es el escalón más pequeño del sistema. Medido en la web:

     .gb-vino__marca        «Recomendado»   0,6em de un titular de 16 px →  9,6 px
     .gb-plato__alergenos-et «Contiene:»    0,9em de --gb-t-xs (12 px)   → 10,8 px

   Nueve pixeles y medio es texto que no se lee en un teléfono sin acercar la
   pantalla, y el segundo es justamente la etiqueta de los alérgenos: la línea
   de la carta que más importa que se entienda a la primera.

   Se les pone un suelo de 0,75 rem —12 px, el mínimo del sitio— sin quitarles
   el `em`, para no perder la relación con el padre si algún día ese padre
   crece.

   Medido después: los dos quedan en 12 px en TODOS los anchos, de 320 a 1920.
   Es decir, el `em` no llegaba a los 12 px en ninguna pantalla y el suelo manda
   siempre. Se deja escrito así, y no como un `0.75rem` a secas, porque la
   intención es «sigue a tu padre, pero nunca por debajo de 12», y esa es la
   regla que hay que conservar si mañana se toca la escala tipográfica. */

.gb-vino__marca {
	font-size: max(0.6em, 0.75rem);
}

.gb-plato__alergenos-et {
	font-size: max(0.9em, 0.75rem);
}

/* --- 15. El aviso de alérgenos daba líneas de 159 caracteres ---------------
   `.gb-carta__aviso p` lleva `max-width: none`, que anula a propósito el ancho
   de lectura que design-system.css le da a todo párrafo. En un portátil de
   1440 el aviso ocupa los 1.198 px del contenido de un tirón: unos 159
   caracteres por línea, cuando la lectura cómoda está entre 45 y 75.

   Con líneas así el ojo pierde el renglón al volver al margen izquierdo, y
   este párrafo es el que explica que hay que avisar de las alergias al
   camarero. No es decorativo.

   No se le devuelve el ancho del sistema, que lo estrecharía demasiado dentro
   de su recuadro: 68 ch deja la línea larga —es un aviso, no un artículo— pero
   dentro de lo legible. Por debajo de 1024 px no llega a aplicarse, porque la
   caja ya es más estrecha que eso. */
.gb-carta__aviso p {
	max-width: 68ch;
}


/* --- 16. La vinoteca desperdiciaba la tableta -----------------------------
   La lista de vinos pasa a una columna por debajo de 860 px, así que en un
   iPad en vertical —768 y 834 son los dos anchos más comunes— cada vino ocupa
   una fila de 786 px de ancho para poner un nombre a la izquierda y un precio
   a la derecha, con medio palmo de nada en medio. Se ven seis vinos por
   pantalla donde caben doce.

   El listado de platos, en la misma carta, baja a una columna en 600. Aquí se
   iguala: dos listas de la misma sección que cambian de forma en puntos
   distintos es una incoherencia que se nota al girar la tableta.

   La fila de vino aguanta de sobra el ancho resultante: en el teléfono ya se
   dibuja en 272 px, y a 600 px de ventana cada columna mide 244.

   La separación entre columnas baja de --gb-e-16 a --gb-e-8 mientras hay poco
   sitio: cuatro rem de aire entre dos columnas de 244 es más hueco que texto. */
@media (max-width: 860px) {
	.gb-vinos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--gb-e-8);
	}
}

@media (max-width: 600px) {
	.gb-vinos__lista {
		grid-template-columns: 1fr;
	}
}