/**
 * Caracool Churra — el aspecto de la carta del día.
 *
 * Va encima de cc-carta.css (Caracool Carta), que solo pone estructura.
 * Aquí, el aspecto de El Churra, todo por variables del Kit de Elementor:
 * colores `--e-global-color-*` y letras `--e-global-typography-*`. Los
 * valores de detrás de la coma son el respaldo por si un día una variable
 * no está: no son colores de marca escritos a mano, son la red.
 *
 * Vale para los dos marcados de Caracool Carta: el que pinta al vuelo
 * (shortcode y widget: `h3.cc-carta__titulo`, `li.cc-carta__plato`…) y el
 * que escribe dentro de Elementor (cada clase va en el contenedor o en el
 * widget de Encabezado, y el texto en `.elementor-heading-title` dentro).
 *
 * Las reglas llevan `.cc-carta` delante a propósito: el Kit de Elementor
 * estila `h3`, `p` y `a` con `.elementor-kit-N h3`, que pesa más que una
 * clase sola, y sin el prefijo los títulos de sección salían en Inter.
 */

@property --ch-raya {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

.cc-carta {
	--cc-carta-hueco: clamp(2.5rem, 6vw, 6rem);
	--cc-carta-min: 300px;
	color: var(--e-global-color-secondary, #241610);
}

/* Los widgets de Elementor traen un margen de abajo (el «espacio entre
   widgets» del Kit) que aquí desalinearía nombre y precio. */
.cc-carta .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}
.cc-carta .elementor-heading-title {
	margin: 0;
}

/* Sobre el peso de los selectores de la carta escrita: el widget de
   Encabezado trae de fábrica la tipografía primaria del Kit (Bodoni cursiva)
   y su color, y en el editor Elementor lo escribe además elemento a
   elemento (`.elementor-22 .elementor-element.elementor-element-xxxx
   .elementor-heading-title`, cuatro clases). Para que la carta se vea igual
   en el editor que en la web, las reglas de los textos escritos llevan cinco
   clases o más, siguiendo la estructura de verdad, y fijan todo lo que fija
   Elementor: familia, tamaño, peso, estilo, interlineado, espaciado y color. */

/* La fecha, como una etiqueta */
.cc-carta .cc-carta__fecha,
.cc-carta .cc-carta__fecha.cc-carta__fecha.cc-carta__fecha .elementor-heading-title {
	margin: 0 0 2.4em;
	font-style: normal;
	font-family: var(--e-global-typography-etiqueta-font-family, Inter), sans-serif;
	font-size: var(--e-global-typography-etiqueta-font-size, 13px);
	font-weight: var(--e-global-typography-etiqueta-font-weight, 600);
	line-height: var(--e-global-typography-etiqueta-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-etiqueta-letter-spacing, .08em);
	text-transform: var(--e-global-typography-etiqueta-text-transform, uppercase);
	color: var(--e-global-color-text, #5C4433);
	opacity: 1;
}
.cc-carta .cc-carta__fecha.cc-carta__fecha.cc-carta__fecha .elementor-heading-title { margin: 0; }

.cc-carta .cc-carta__rejilla {
	gap: 1rem var(--cc-carta-hueco);
}

/* A dos o tres columnas, las secciones corren como en una carta impresa: se
   lee la primera columna entera y luego la segunda, y no quedan huecos
   cuando una sección es más larga que su vecina. Cada sección va entera en
   una columna. En pantalla estrecha, una sola columna. */
.cc-carta--cols-2 .cc-carta__rejilla,
.cc-carta--cols-3 .cc-carta__rejilla {
	display: block;
	column-gap: var(--cc-carta-hueco);
}
.cc-carta--cols-2 .cc-carta__rejilla { columns: 2; }
.cc-carta--cols-3 .cc-carta__rejilla { columns: 3; }
.cc-carta--cols-2 .cc-carta__seccion,
.cc-carta--cols-3 .cc-carta__seccion {
	break-inside: avoid;
	page-break-inside: avoid;
}
@media (max-width: 640px) {
	.cc-carta--cols-2 .cc-carta__rejilla,
	.cc-carta--cols-3 .cc-carta__rejilla { columns: 1; }
}

.cc-carta .cc-carta__seccion {
	margin-bottom: 3.2em;
}

/* ── El título de cada sección, con la raya de la casa debajo ─────────────
 * La raya no es un borde: es un pseudoelemento que se dibuja de izquierda
 * a derecha según `--ch-raya` (0 → 1), con la bola en la punta, que se
 * apaga al llegar al final. Quién mueve `--ch-raya`: el scroll, más abajo.
 */
.cc-carta .cc-carta__titulo {
	position: relative;
	margin: 0 0 .55em;
	padding-bottom: .45em;
	border-bottom: 0;
	--ch-raya: 1;
}
.cc-carta .cc-carta__titulo,
.cc-carta .cc-carta__rejilla .cc-carta__seccion .cc-carta__titulo .elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family, "Bodoni Moda"), Georgia, serif;
	font-weight: var(--e-global-typography-primary-font-weight, 500);
	font-style: var(--e-global-typography-primary-font-style, italic);
	font-size: clamp(26px, 2.2vw, 34px);
	line-height: 1.1;
	letter-spacing: var(--e-global-typography-primary-letter-spacing, -0.01em);
	text-transform: none;
	color: var(--e-global-color-secondary, #241610);
}
.cc-carta .cc-carta__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--e-global-color-secondary, #241610);
	transform: scaleX(var(--ch-raya));
	transform-origin: left center;
}
.cc-carta .cc-carta__titulo::before {
	content: "";
	position: absolute;
	bottom: -3px;
	left: calc(var(--ch-raya) * 100%);
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--e-global-color-secondary, #241610);
	opacity: min(1, calc(var(--ch-raya) * 8), calc((1 - var(--ch-raya)) * 6));
}

/* Cada plato: nombre a la izquierda, precio a la derecha, filete fino entre uno y otro */
.cc-carta .cc-carta__plato {
	display: flex;
	align-items: baseline;
	gap: 1.2em;
	padding: .6em 0;
	border-bottom: 1px solid var(--e-global-color-borde, #E3D8C6);
}
.cc-carta .cc-carta__lista > .cc-carta__plato:last-child {
	border-bottom: 0;
}

.cc-carta .cc-carta__nombre,
.cc-carta .cc-carta__seccion .cc-carta__lista .cc-carta__plato .cc-carta__nombre .elementor-heading-title {
	font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 17px);
	font-weight: 300;
	font-style: normal;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--e-global-color-secondary, #241610);
}

.cc-carta .cc-carta__precio,
.cc-carta .cc-carta__seccion .cc-carta__lista .cc-carta__plato .cc-carta__precio .elementor-heading-title {
	font-family: var(--e-global-typography-precio-font-family, Inter), sans-serif;
	font-size: var(--e-global-typography-precio-font-size, 17px);
	font-weight: var(--e-global-typography-precio-font-weight, 500);
	font-style: normal;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--e-global-color-secondary, #241610);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cc-carta .cc-carta__unidad {
	font-family: var(--e-global-typography-nota-font-family, Inter), sans-serif;
	font-size: var(--e-global-typography-nota-font-size, 14px);
	font-weight: var(--e-global-typography-nota-font-weight, 300);
	color: var(--e-global-color-text, #5C4433);
	opacity: 1;
	margin-left: .3em;
}

/* La estrella de los platos que se terminan en la mesa, en el rojo azulejo */
.cc-carta .cc-carta__marca {
	margin-left: .4em;
	font-size: .78em;
	color: var(--e-global-color-primary, #93210B);
	vertical-align: .08em;
	opacity: 1;
}

.cc-carta .cc-carta__nota,
.cc-carta .cc-carta__nota.cc-carta__nota.cc-carta__nota .elementor-heading-title {
	margin: .5em 0 0;
	font-family: var(--e-global-typography-nota-font-family, Inter), sans-serif;
	font-size: var(--e-global-typography-nota-font-size, 14px);
	font-weight: var(--e-global-typography-nota-font-weight, 300);
	font-style: normal;
	line-height: var(--e-global-typography-nota-line-height, 20px);
	letter-spacing: normal;
	text-transform: none;
	color: var(--e-global-color-text, #5C4433);
}
.cc-carta .cc-carta__nota.cc-carta__nota.cc-carta__nota .elementor-heading-title { margin: 0; }
.cc-carta .cc-carta__nota .cc-carta__marca {
	margin: 0 .35em 0 0;
}

/* Sin carta que enseñar (no hay, o lleva días sin actualizarse) */
.cc-carta--sin .cc-carta__aviso {
	margin: 0;
	max-width: 30ch;
	font-family: var(--e-global-typography-primary-font-family, "Bodoni Moda"), Georgia, serif;
	font-weight: var(--e-global-typography-primary-font-weight, 500);
	font-style: var(--e-global-typography-primary-font-style, italic);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.15;
	color: var(--e-global-color-secondary, #241610);
}

@media (max-width: 767px) {
	.cc-carta .cc-carta__seccion { margin-bottom: 2.4em; }
	.cc-carta .cc-carta__titulo,
	.cc-carta .cc-carta__rejilla .cc-carta__seccion .cc-carta__titulo .elementor-heading-title { font-size: 26px; }
}

/* ── La raya se dibuja con el scroll ──────────────────────────────────────
 * Motor 1, CSS: cada título tiene su propia línea de tiempo (`view()`) y
 * la raya se dibuja mientras el título sube por el primer tercio de la
 * pantalla; al subir se recoge. Motor 2, el script `ch-carta.js`, hace lo
 * mismo donde no hay `animation-timeline` (Firefox) y pone `cc-carta--js`.
 * Con movimiento reducido no hay motor y la raya sale entera.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes ch-carta-raya { from { --ch-raya: 0; } to { --ch-raya: 1; } }

		.cc-carta:not(.cc-carta--js) .cc-carta__titulo {
			animation-name: ch-carta-raya;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: cover 0% cover 35%;
		}
	}
}