/* ═══════════════════════════════════════════════════════════════════════
   CARTA DIGITAL  ·  la pantalla que ve el comensal al escanear el QR
   ═══════════════════════════════════════════════════════════════════════
   Hoja independiente y autosuficiente: esta página NO carga style.css ni
   ninguna de las otras del sitio. Todo lo que necesita está aquí, para que
   abra al instante con los datos móviles de un cliente sentado en la mesa.

   ── Rediseño 2026-08-01 ────────────────────────────────────────────────
   Lo que había funcionaba y no molestaba, pero era una lista sobre blanco:
   nada que hiciera pensar «esto es la casa». Y la primera pantalla tras
   escanear un código pegado en la mesa es, literalmente, la carta de
   presentación del negocio.

   Lo que se ha traído de las cartas digitales que se ven por ahí:

   · PORTADA con la foto del propio establecimiento y su nombre encima. La
     foto ya estaba subida; no hubo que pedir nada nuevo.
   · TIPOGRAFÍA CON SERIFA (Georgia) para el nombre y los epígrafes. Es lo
     que distingue una carta de un listado: nadie imprime una carta con la
     misma letra que un albarán. Sin fuentes externas — descargar una
     tipografía en la mesa de un bar cuesta medio segundo de espera.
   · JERARQUÍA DE PRECIO: la cifra en dorado a la derecha y una guía de
     puntos hasta el nombre, como en una carta impresa.
   · MINIATURA DEL PLATO a la izquierda, en vez de un fotón que empuja el
     siguiente plato fuera de la pantalla.
   · BARRA PEGAJOSA con las secciones y un buscador.

   Todo con dos colores (tinta y dorado) sobre papel cálido. La contención
   es parte del asunto: una carta recargada se lee peor, y esta se lee con
   una mano y con hambre.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
	--cd-papel:   #f7f3ec;   /* fondo, papel cálido */
	--cd-tarjeta: #fffdfa;
	--cd-tinta:   #201c17;
	--cd-suave:   #6f6656;
	--cd-tenue:   #9c9280;
	--cd-linea:   #e9e0d0;
	--cd-oro:     #b6862c;
	--cd-oro-os:  #96690f;
	--cd-oro-cl:  #f6edda;
	--cd-serifa:  Georgia, "Iowan Old Style", "Times New Roman", serif;
}

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

.cd-body{
	margin: 0;
	padding: 0;
	background: var(--cd-papel);
	color: var(--cd-tinta);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;               /* 16px evita el zoom automático de iOS */
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

.cd-pagina{
	max-width: 620px;
	margin: 0 auto;
	padding: 0 0 44px;
	background: var(--cd-papel);
}

/* ── Portada ───────────────────────────────────────────────────────────
   La foto del establecimiento a sangre, con un velo oscuro de abajo arriba
   para que el nombre se lea SIEMPRE, salga la foto que salga. Sin el velo,
   una foto clara deja el texto blanco ilegible y no hay forma de preverlo:
   la sube el negocio, no nosotros. */
.cd-hero{
	position: relative;
	min-height: 208px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 74px 20px 20px;
	background: var(--cd-tinta) var(--cd-foto, none) center/cover no-repeat;
	text-align: center;
	overflow: hidden;
}
.cd-hero::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,17,13,.30) 0%, rgba(20,17,13,.20) 38%, rgba(20,17,13,.86) 100%);
}
/* Sin foto no se deja un agujero negro: papel oscuro con una veladura, que
   sigue pareciendo intencionado. */
.cd-hero.es-sinfoto{
	background: radial-gradient(120% 90% at 50% 0%, #3a3128 0%, #221d17 60%, #1a1611 100%);
	min-height: 176px;
}
.cd-hero.es-sinfoto::after{ background: none; }
.cd-hero-cuerpo{ position: relative; z-index: 1; width: 100%; }

.cd-logo{
	width: 86px; height: 86px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 13px;
	background: #fff;
	border: 3px solid rgba(255,255,255,.92);
	box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.cd-nombre{
	margin: 0;
	font-family: var(--cd-serifa);
	font-size: 30px;
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -.2px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.cd-sub{
	margin: 8px 0 0;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255,255,255,.82);
	font-weight: 600;
}

/* ── Barra de secciones y buscador ─────────────────────────────────────
   Pegada arriba al bajar: en una carta de cien platos, tener que volver al
   principio para cambiar de sección es lo que hace cerrar la página. */
.cd-barra{
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 10px 16px 9px;
	background: rgba(247,243,236,.94);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--cd-linea);
}
.cd-tabs{
	display: flex;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* ⚠ SOMBRA DE DESPLAZAMIENTO. La barra oculta su barra de scroll a
	   propósito, y con una carta de verdad —diez secciones— en un teléfono de
	   360px solo caben tres y media: sin ninguna señal, el comensal no sabe
	   que existen «Postres», «Vinos» ni «Cafés», y esas pestañas es como si no
	   estuvieran. Con cinco secciones no se notaba; con una carta completa, sí.

	   Truco clásico y SIN JavaScript: dos degradados del color del papel
	   pegados a los bordes con `local` —o sea, que se desplazan CON el
	   contenido— tapan a otros dos degradados oscuros fijos (`scroll`). Al
	   llegar a un extremo, el tapón cubre su sombra y esa sombra desaparece
	   sola. Ni oyentes de scroll ni clases que mantener. */
	background:
		linear-gradient(90deg, var(--cd-papel) 40%, rgba(247,243,236,0)) left  / 26px 100% no-repeat local,
		linear-gradient(90deg, rgba(247,243,236,0), var(--cd-papel) 60%) right / 26px 100% no-repeat local,
		radial-gradient(farthest-side at 0    50%, rgba(32,28,23,.16), rgba(32,28,23,0)) left  / 15px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(32,28,23,.16), rgba(32,28,23,0)) right / 15px 100% no-repeat scroll;
}
.cd-tabs::-webkit-scrollbar{ display: none; }

/* ⚠ CON RATÓN, LA BARRA DE DESPLAZAMIENTO SE VE.
   Una tira que se desplaza a lo ancho y esconde su barra de scroll se maneja
   bien con el dedo y fatal con el ratón: no hay nada que arrastrar. En el
   ordenador la carta mide 620px de ancho y las diez secciones piden 916, así
   que tres quedaban fuera de alcance.

   Se probó a envolverlas en dos filas y se descartó midiendo: la barra
   pegajosa pasaba de 210 a 261px — el 29% de una ventana de 900— y eso es
   mucho techo fijo en una página que se lee bajando. Una barra fina cuesta
   8px, se arrastra, y es lo que cualquiera reconoce.

   `hover: hover` deja fuera a los táctiles: allí la barra estorbaría y el
   desplazamiento con el dedo ya es evidente por las sombras de arriba. */
@media (hover: hover) and (pointer: fine){
	.cd-tabs{
		scrollbar-width: thin;
		scrollbar-color: var(--cd-linea) transparent;
		padding-bottom: 4px;
	}
	.cd-tabs::-webkit-scrollbar{ display: block; height: 8px; }
	.cd-tabs::-webkit-scrollbar-track{ background: transparent; }
	.cd-tabs::-webkit-scrollbar-thumb{
		background: var(--cd-linea);
		border-radius: 999px;
	}
}
.cd-tab{
	flex: 0 0 auto;
	-webkit-appearance: none; appearance: none;
	border: 1px solid var(--cd-linea);
	background: #fff;
	color: var(--cd-suave);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	padding: 0 15px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	min-height: 44px;              /* el mismo objetivo táctil que el panel */
	transition: background .12s ease, color .12s ease;
}
/* ⚠ Blanco sobre el dorado de marca da 2,76 de contraste, por debajo del 4,5
   que pide la WCAG para texto normal. Medido, no supuesto. Para lo que lleva
   texto blanco encima se usa el dorado OSCURO (4,86); el dorado de marca se
   queda para filetes, bordes y detalles, donde no hay que leer nada. */
.cd-tab.activo{
	background: var(--cd-oro-os);
	border-color: var(--cd-oro-os);
	color: #fff;
	box-shadow: 0 2px 8px rgba(150,105,15,.35);
}

.cd-buscar{
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 8px;
}
.cd-buscar svg{
	position: absolute; left: 13px;
	width: 16px; height: 16px;
	color: var(--cd-tenue);
	pointer-events: none;
}
.cd-buscar input{
	width: 100%;
	min-height: 44px;
	padding: 0 38px;
	border: 1px solid var(--cd-linea);
	border-radius: 999px;
	background: #fff;
	color: var(--cd-tinta);
	font-family: inherit;
	font-size: 15px;               /* 15+ para que iOS no haga zoom al enfocar */
	-webkit-appearance: none; appearance: none;
}
.cd-buscar input::-webkit-search-decoration,
.cd-buscar input::-webkit-search-cancel-button{ -webkit-appearance: none; }
.cd-buscar input:focus{
	outline: none;
	border-color: var(--cd-oro);
	box-shadow: 0 0 0 3px rgba(182,134,44,.16);
}
.cd-buscar-x{
	position: absolute; right: 6px;
	width: 32px; height: 32px;
	border: 0; background: transparent;
	color: var(--cd-tenue);
	font-size: 22px; line-height: 1;
	cursor: pointer;
}

/* ── Secciones ─────────────────────────────────────────────────────────── */
.cd-seccion{ display: none; padding: 0 16px; }
.cd-seccion.activo{ display: block; }

/* Epígrafe con filetes a los lados: es el gesto que convierte una lista en
   una carta. En serifa, como el nombre de la casa. */
.cd-seccion-tit{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 16px;
	font-family: var(--cd-serifa);
	font-size: 19px;
	font-weight: 700;
	color: var(--cd-tinta);
	text-align: center;
}
.cd-seccion-tit::before, .cd-seccion-tit::after{
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cd-linea) 40%, var(--cd-linea) 60%, transparent);
}
.cd-seccion-tit span{ flex: 0 1 auto; }
/* Buscando se enseñan todas las secciones a la vez, así que el epígrafe pasa
   a ser una etiqueta: dice de dónde sale cada resultado. */
.cd-seccion.es-busqueda .cd-seccion-tit{ font-size: 15px; margin: 20px 0 12px; color: var(--cd-tenue); }

/* ── Fichas ─────────────────────────────────────────────────────────────
   Dos tipos, y no pueden pintarse igual:
   · PLATO  → la foto es del plato: miniatura al lado del nombre.
   · HOJA   → la imagen ES la carta fotografiada: tiene que verse grande. */
.cd-ficha{
	background: var(--cd-tarjeta);
	border: 1px solid var(--cd-linea);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 11px;
	box-shadow: 0 1px 2px rgba(60,45,25,.04);
}
.cd-ficha.es-plato{ display: flex; gap: 13px; align-items: flex-start; }
.cd-ficha-cuerpo{ flex: 1 1 auto; min-width: 0; }

.cd-mini{
	flex: 0 0 auto;
	display: block;
	width: 86px; height: 86px;
	border-radius: 11px;
	overflow: hidden;
	background: var(--cd-oro-cl);
}
.cd-mini img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.cd-ficha-cab{
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.cd-ficha-tit{
	margin: 0;
	font-family: var(--cd-serifa);
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	flex: 0 1 auto;
}
/* La guía de puntos del nombre al precio. En una carta impresa lleva ahí
   toda la vida y no es adorno: evita que el ojo se pierda de la izquierda a
   la derecha entre dos renglones. */
.cd-guia{
	flex: 1 1 auto;
	min-width: 14px;
	height: 1px;
	margin-bottom: 4px;
	border-bottom: 1px dotted var(--cd-linea);
}
.cd-precio{
	flex: 0 0 auto;
	font-family: var(--cd-serifa);
	font-size: 16px;
	font-weight: 700;
	color: var(--cd-oro-os);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cd-texto{
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cd-suave);
}

.cd-imagen{
	position: relative;
	display: block;
	margin-top: 11px;
	border-radius: 11px;
	overflow: hidden;
	background: var(--cd-oro-cl);
}
.cd-imagen img{ display: block; width: 100%; height: auto; }
/* Numerito de página: solo cuando la ficha trae más de una foto, para que se
   entienda que hay que seguir bajando y no se queden en la primera hoja. */
.cd-pagina-num{
	position: absolute;
	right: 9px; bottom: 9px;
	background: rgba(24,22,19,.74);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

.cd-pdf, .cd-enlace{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 11px;
	padding: 0 16px;
	min-height: 44px;
	border-radius: 999px;
	background: var(--cd-oro-cl);
	border: 1px solid #e6d2a8;
	color: var(--cd-oro-os);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.cd-pdf svg{ width: 17px; height: 17px; flex-shrink: 0; }
.cd-enlace{ background: #fff; border-color: var(--cd-linea); color: var(--cd-suave); }

.cd-vacio, .cd-sinres{
	text-align: center;
	color: var(--cd-tenue);
	padding: 40px 20px;
	font-size: 15px;
}

/* ── Pie con acciones ──────────────────────────────────────────────────── */
.cd-pie{
	margin: 30px 16px 0;
	padding-top: 24px;
	border-top: 1px solid var(--cd-linea);
	text-align: center;
}
.cd-accion{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 320px;
	min-height: 50px;
	margin-bottom: 10px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--cd-oro-os);
	color: #fff;
	text-decoration: none;
	font-size: 15.5px;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(150,105,15,.3);
}
.cd-accion svg{ width: 18px; height: 18px; }
.cd-accion-sec{
	background: #fff;
	color: var(--cd-suave);
	border: 1.5px solid var(--cd-linea);
	box-shadow: none;
}
.cd-firma{
	margin: 16px 0 0;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #c0b7a4;
	font-weight: 600;
}

/* ── Pantallas grandes ─────────────────────────────────────────────────
   La página no se estira sin sentido: una carta se lee en columna estrecha
   igual en un móvil que en un portátil. */
@media(min-width: 700px){
	.cd-pagina{ box-shadow: 0 0 40px rgba(60,45,25,.07); }
	.cd-hero{ min-height: 250px; }
	.cd-nombre{ font-size: 35px; }
	.cd-seccion-tit{ font-size: 21px; }
}

/* Pantallas muy estrechas (iPhone SE): la miniatura se come el nombre. */
@media(max-width: 359px){
	.cd-mini{ width: 68px; height: 68px; }
	.cd-nombre{ font-size: 25px; }
	.cd-ficha{ padding: 12px; }
}

/* Quien haya pedido menos animación en su teléfono, que no la tenga. */
@media(prefers-reduced-motion: reduce){
	.cd-tab{ transition: none; }
}

/* ── Alérgenos y distintivos ────────────────────────────────────────────
   En España informar de los catorce del Reglamento (UE) 1169/2011 es
   OBLIGATORIO en todo lo que se sirve sin envasar, y la carta digital vale
   como soporte. Van debajo del plato, en gris: tienen que leerse sin
   esfuerzo, pero no compiten con el nombre ni con el precio — quien no es
   alérgico ni los mira, y quien lo es va derecho a ellos. */
.cd-alerg{
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	font-size: 12px;
}
.cd-alerg-tit{
	color: var(--cd-tenue);
	font-weight: 600;
	letter-spacing: .2px;
}
.cd-alerg-chip{
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fbf1e4;
	border: 1px solid #eddcc0;
	color: #8a6420;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

/* Recomendación de la casa. `platos.destacado` ya se usaba para ORDENAR y no
   se enseñaba: la casa lo marcaba y el comensal no se enteraba. */
.cd-dest{
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cd-oro-os);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
}

/* Filtros. El botón dice «ocultar los que llevan», no «sin gluten»: esto
   esconde lo que DECLARA el alérgeno, no certifica que el resto no lo lleve.
   Para un celíaco, la diferencia entre las dos frases es la diferencia entre
   una comida y un ingreso. */
.cd-filtros{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
.cd-filtros-tit{
	font-size: 11.5px;
	color: var(--cd-tenue);
	font-weight: 600;
	margin-right: 2px;
}
.cd-filtro{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--cd-linea);
	border-radius: 999px;
	background: #fff;
	color: var(--cd-suave);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.cd-filtro-x{ font-size: 9px; color: var(--cd-tenue); }
.cd-filtro.activo{
	background: #3b332a;
	border-color: #3b332a;
	color: #fff;
}
.cd-filtro.activo .cd-filtro-x{ color: rgba(255,255,255,.7); }

.cd-legal{
	margin: 22px 16px 0;
	padding: 13px 15px;
	border: 1px solid var(--cd-linea);
	border-radius: 12px;
	background: #fffdfa;
	color: var(--cd-suave);
	font-size: 12px;
	line-height: 1.55;
}

/* Botón de WhatsApp con su color, que es el que la gente reconoce sin leer. */
/* El verde claro de WhatsApp con texto blanco da 2,0 de contraste. Se usa su
   verde oscuro de marca (#0e7a6d), que sigue siendo reconocible al instante y
   llega a 4,13. */
.cd-accion-wa{
	background: #0e7a6d;
	color: #fff;
	box-shadow: 0 3px 10px rgba(14,122,109,.3);
}

/* ── Modo oscuro ────────────────────────────────────────────────────────
   Una carta se mira sobre todo de noche y en un sitio con poca luz: una
   pantalla en blanco a las once de la noche deslumbra y molesta a la mesa de
   al lado. Se respeta lo que el comensal ya tenga elegido en su teléfono; no
   hay interruptor porque un ajuste más en una página que se abre treinta
   segundos es un ajuste que nadie toca.

   ⚠ El dorado puro sobre fondo oscuro pierde contraste: aquí se usa una
   versión más clara (#d9a441) para el precio y los enlaces. */
@media (prefers-color-scheme: dark){
	:root{
		--cd-papel:   #16130f;
		--cd-tarjeta: #201c17;
		--cd-tinta:   #f2ece1;
		--cd-suave:   #b8ae9d;
		--cd-tenue:   #8d8474;
		--cd-linea:   #322c24;
		--cd-oro:     #c99433;
		--cd-oro-os:  #e0ab4a;
		--cd-oro-cl:  #2a231a;
	}
	.cd-barra{ background: rgba(22,19,15,.94); }
	/* El tapón de la sombra de desplazamiento tiene que ser del color del papel
	   OSCURO, o en modo noche quedarían dos manchas claras en los bordes. */
	.cd-tabs{
		background:
			linear-gradient(90deg, var(--cd-papel) 40%, rgba(22,19,15,0)) left  / 26px 100% no-repeat local,
			linear-gradient(90deg, rgba(22,19,15,0), var(--cd-papel) 60%) right / 26px 100% no-repeat local,
			radial-gradient(farthest-side at 0    50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left  / 15px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right / 15px 100% no-repeat scroll;
	}
	.cd-tab{ background: #201c17; }
	.cd-buscar input{ background: #201c17; color: var(--cd-tinta); }
	.cd-alerg-chip{ background: #2b2318; border-color: #40331f; color: #d9b877; }
	.cd-filtro{ background: #201c17; }
	.cd-filtro.activo{ background: #e3d9c6; border-color: #e3d9c6; color: #17130e; }
	/* En oscuro se invierte: tinta sobre dorado claro llega a 6,0. */
	.cd-tab.activo{ background: var(--cd-oro); border-color: var(--cd-oro); color: #17130e; }
	.cd-accion{ background: var(--cd-oro); color: #17130e; }
	.cd-dest{ background: var(--cd-oro); color: #17130e; }
	/* WhatsApp conserva SU verde también de noche: si se volviera dorado como
	   los demás, se pierde lo único que hace que se reconozca sin leerlo. */
	.cd-accion-wa{ background: #0e7a6d; color: #fff; }
	.cd-filtro.activo .cd-filtro-x{ color: rgba(23,19,14,.6); }
	.cd-legal{ background: #1b1712; }
	.cd-accion-sec{ background: #201c17; color: var(--cd-suave); }
	.cd-enlace{ background: #201c17; color: var(--cd-suave); }
	.cd-hero.es-sinfoto{ background: radial-gradient(120% 90% at 50% 0%, #2c251c 0%, #1c1813 60%, #16130f 100%); }
	.cd-firma{ color: #5f574a; }
	/* Una foto a plena luz sobre fondo oscuro da un fogonazo: se baja un pelo
	   el brillo, lo justo para que no deslumbre y siga apeteciendo. */
	.cd-imagen img, .cd-mini img{ filter: brightness(.94); }
}

/* ── Idioma ─────────────────────────────────────────────────────────────
   El QR de la mesa lleva al castellano y no había forma de cambiar: los
   textos en inglés y alemán existían y un guiri sentado a la mesa no llegaba
   a ellos. Arriba del todo y fuera de la foto — encima del velo se pierden, y
   quien las busca las busca en la esquina. */
.cd-idiomas{
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	padding: 7px 12px 6px;
	background: var(--cd-papel);
}
.cd-idioma{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 34px;
	padding: 0 9px;
	border-radius: 999px;
	color: var(--cd-tenue);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
}
.cd-idioma.activo{
	background: var(--cd-tinta);
	color: var(--cd-papel);
}

/* ============================================================
 * OBJETIVOS TÁCTILES — medido a 360px
 * ============================================================
 * Los filtros de alérgenos y los tres enlaces de idioma medían 34px. Esta
 * página se abre de pie en una mesa, con una mano y a menudo con poca luz:
 * son justo los dos controles que hay que poder acertar sin mirar. El resto
 * de la carta ya estaba a 44.
 *
 * ⚠ El filtro de alérgenos NO es cosmético: para un celíaco, fallar el botón y
 * creer que ha filtrado es peor que no filtrar.
 */
.cd-filtro{ min-height: 40px; }
.cd-idioma{ min-height: 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES DE LA CARTA  ·  .eb-faq  (2026-09-01)
   ═══════════════════════════════════════════════════════════════════════════
   ⚠ ESTE BLOQUE ESTA DOS VECES A PROPOSITO: aqui y en `style.css`. La carta
     digital NO carga `style.css` —es la pagina que se abre con el QR desde la
     mesa y va con su propia hoja— asi que meterlo solo alli la habria dejado
     sin estilo. Es exactamente el mismo motivo por el que el distintivo de
     «Ficha de ejemplo» vive en su propio fichero cargado por las dos
     plantillas.

   ⚠ Y NO ES UNA COPIA: aqui manda el papel calido y la serifa de la carta, no
     el blanco de la web. Si se copiara tal cual, el bloque se leeria como algo
     pegado de otra pagina justo en la pantalla que mas cuida el diseño.

   ⚠ MODO OSCURO OBLIGATORIO. La carta lo tiene desde el 01/08 porque se mira
     de noche: un bloque que se quedara en blanco deslumbraria a la mesa.
   ═══════════════════════════════════════════════════════════════════════════ */

.eb-faq{
	/* ⚠ 16px a los lados, MEDIDO: es exactamente el margen que ya tienen las
	   fichas de plato y el aviso de alergenos de esta carta (16 .. 344 en una
	   pantalla de 360). Sin el, el bloque iba de borde a borde y se leia como
	   una pieza de otra pagina — que es justo lo que la regla de sincronia
	   visual de este proyecto no admite. */
	margin: 26px 16px 4px;
	max-width: 720px;
	background: rgba(255,255,255,0.5);
	border: 1px solid rgba(150,105,15,0.22);
	border-radius: 10px;
	overflow: hidden;
}

.eb-faq-tit{
	margin: 0;
	padding: 15px 18px 13px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-align: center;
	color: #4a3520;
	border-bottom: 1px solid rgba(150,105,15,0.2);
}

.eb-faq-lista{ padding: 4px 8px 8px; }

.eb-faq-item{ border-bottom: 1px solid rgba(150,105,15,0.14); }
.eb-faq-item:last-child{ border-bottom: 0; }

.eb-faq-p{
	display: block;
	list-style: none;
	cursor: pointer;
	position: relative;
	margin: 0;
	padding: 14px 38px 14px 12px;
	min-height: 44px;          /* se pulsa con el pulgar, de pie y con hambre */
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #33251a;
	border-radius: 7px;
}
.eb-faq-p::-webkit-details-marker{ display: none; }
.eb-faq-p::marker{ content: ''; }
.eb-faq-p:focus-visible{ outline: 2px solid #96690f; outline-offset: 2px; }

/* El signo se dibuja: un glifo de texto dentro de un mando se ve descolgado. */
.eb-faq-p:after{
	content: '';
	position: absolute; right: 14px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid #96690f;
	border-bottom: 2px solid #96690f;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.eb-faq-item[open] > .eb-faq-p:after{ transform: rotate(-135deg); margin-top: -2px; }

.eb-faq-r{
	margin: 0;
	padding: 0 12px 15px;
	font-size: 14.5px;
	line-height: 1.62;
	color: #52463a;
}

/* ── Modo oscuro ───────────────────────────────────────────────────────────
   Contrastes medidos sobre el fondo oscuro de la carta:
       pregunta  #f0e4d2 sobre #241d16 → 11,8
       respuesta #cbbba4 sobre #241d16 →  7,6
       dorado claro #d9a441 (el de marca no vale en claro sobre oscuro)  */
@media (prefers-color-scheme: dark){
	.eb-faq{ background: rgba(255,255,255,0.04); border-color: rgba(217,164,65,0.22); }
	.eb-faq-tit{ color: #e6d3b3; border-bottom-color: rgba(217,164,65,0.2); }
	.eb-faq-item{ border-bottom-color: rgba(217,164,65,0.14); }
	.eb-faq-p{ color: #f0e4d2; }
	.eb-faq-p:after{ border-right-color: #d9a441; border-bottom-color: #d9a441; }
	.eb-faq-r{ color: #cbbba4; }
}

@media screen and (max-width: 640px){
	/* ⚠ Los 16px de los lados TAMBIEN aqui. Los puse solo en la regla base y
	   en el movil no se aplicaban: esta media gana, y el bloque seguia yendo
	   de borde a borde justo en la pantalla para la que existe la carta. */
	.eb-faq{ margin: 20px 16px 4px; border-radius: 8px; }
	.eb-faq-tit{ padding: 14px 14px 12px; font-size: 14px; }
	.eb-faq-p{ padding: 13px 36px 13px 10px; font-size: 14.5px; }
	.eb-faq-r{ padding: 0 10px 13px; font-size: 14px; }
}