/*
 * /comedor/ v2 — "cocina de verdad, pizarra de cole". Se encola SOBRE page-servicios.css
 * (solo en /comedor/). Aporta: vapor sutil en el hero, LA PIZARRA VERDE (pieza central,
 * todo en tiza dibujada), la tarjeta del menú del día y la tira "la cocina de verdad".
 *
 * TIZA = trazo crema (#f7f5ef) sobre pizarra verde bosque, con textura de tiza (filtro
 * feTurbulence/desplazamiento) + opacidad ligeramente irregular. AAA holgado (crema
 * sobre verde bosque ~15:1; aun al 88% de opacidad supera 7).
 */

/* =========================================================================
 * 4. VAPOR EN EL HERO (ambiente sutil; sube desde la zona baja).
 * ========================================================================= */
.sf-comedor .sf-svc-hero__inner { position: relative; z-index: 1; }

/* Sube por la ZONA de la foto (derecha), donde el blanco de vapor SÍ se lee sobre la
   imagen oscura de la cocina; se prolonga hacia arriba y se disuelve. Encima de la foto. */
.sf-comedor-steam {
	position: absolute;
	right: clamp(3rem, 9vw, 9rem);
	bottom: 27%;
	width: min(50%, 34rem);
	height: 62%;
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}
.sf-comedor-steam__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.sf-comedor-steam__wisp {
	stroke: #ffffff;
	stroke-width: 18;
	stroke-linecap: round;
	fill: none;
	opacity: 0;
	filter: blur( 4px );
	transform-box: fill-box;
	transform-origin: bottom center;
}

.sf-js .sf-comedor-steam__wisp {
	animation: sf-c-steam 12s ease-in-out infinite;
	animation-delay: calc( var(--sd, 0) * -4.3s );
}
.sf-comedor-steam__wisp:nth-child(2) { animation-duration: 14s; }
.sf-comedor-steam__wisp:nth-child(3) { animation-duration: 10.5s; }

@keyframes sf-c-steam {
	0%   { opacity: 0; transform: translateY( 16% ) scaleY( 0.8 ) scaleX( 1 ); }
	28%  { opacity: 0.48; }
	65%  { opacity: 0.32; }
	100% { opacity: 0; transform: translateY( -16% ) scaleY( 1.16 ) scaleX( 0.82 ); }
}

/* =========================================================================
 * 2+3. LA PIZARRA VERDE — pieza central. Todo en TIZA.
 * ========================================================================= */
.sf-comedor-pizarra {
	position: relative;
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(2.5rem, 7vh, 4.5rem);
	padding-inline: clamp(1rem, 5vw, 5rem);
}
.sf-comedor-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sf-comedor-pizarra__board {
	position: relative;
	max-width: 66rem;
	margin-inline: auto;
	border-radius: 10px;
	padding: clamp(1.8rem, 4.5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem) clamp(2.2rem, 5vw, 3.4rem);
	background-color: #0b2e1f; /* pizarra verde bosque */
	/* marco de madera clara (crema-tostado) delgado */
	border: 9px solid #c9b489;
	box-shadow:
		inset 0 0 0 2px rgba(11, 46, 31, 0.55),
		inset 0 0 60px -10px rgba(0, 0, 0, 0.55),
		0 26px 60px -30px rgba(11, 46, 31, 0.7);
	overflow: hidden;
}

/* Grano fino de pizarra (SVG turbulence, crema muy tenue). */
.sf-comedor-pizarra__grain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.3;
	mix-blend-mode: screen;
}

.sf-comedor-pizarra__inner { position: relative; z-index: 1; }

/* -------- Tipografía en TIZA -------- */
.sf-comedor-chalk {
	color: var(--wp--preset--color--crema, #f7f5ef);
	filter: url( #sf-chalk-tex );
}

.sf-comedor-pizarra__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 90%, transparent );
}
.sf-comedor-pizarra__eyebrow::before {
	content: "";
	width: 1.6em;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.sf-comedor-pizarra__title {
	margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.02;
	font-size: clamp(1.9rem, 5vw, 3.1rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	filter: url( #sf-chalk-tex );
}

/* -------- Los 4 hitos -------- */
.sf-comedor-hitos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.5rem, 2vw, 1.5rem);
}

.sf-comedor-hito {
	position: relative;
	padding-right: clamp(0.5rem, 1.6vw, 1.2rem);
}

.sf-comedor-hito__doodle-svg {
	width: clamp(3rem, 6vw, 4rem);
	height: auto;
	display: block;
	margin-bottom: 0.6rem;
}

.sf-comedor-hito__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--etiquetas); /* Space Mono */
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: color-mix( in srgb, #ef9f27 34%, var(--wp--preset--color--crema, #f7f5ef) ); /* tiza cálida (AAA) */
}

.sf-comedor-hito__t {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(1.05rem, 2.3vw, 1.4rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	filter: url( #sf-chalk-tex );
}

.sf-comedor-hito__d {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.96rem;
	line-height: 1.5;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 94%, transparent );
}

/* Flecha de tiza entre hitos (horizontal en escritorio). */
.sf-comedor-hito__arrow {
	position: absolute;
	top: clamp(1.4rem, 3vw, 2rem);
	right: calc( -0.5 * clamp(0.5rem, 2vw, 1.5rem) - 0.6rem );
	width: clamp(1.8rem, 4vw, 2.7rem);
	height: auto;
	transform: translateX( 50% );
}
.sf-comedor-hito:last-child .sf-comedor-hito__arrow { display: none; }

/* -------- El motor de la TIZA: trazo crema que se DIBUJA + textura -------- */
.sf-comedor-chalk-draw {
	stroke: var(--wp--preset--color--crema, #f7f5ef);
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	opacity: 0.92;
	filter: url( #sf-chalk-tex );
}
.sf-comedor-arrow__shaft, .sf-comedor-arrow__head { stroke-width: 2.4; }
.sf-comedor-dust {
	fill: var(--wp--preset--color--crema, #f7f5ef);
	opacity: 0;
	filter: blur( 0.4px );
}

/* Gateado (con JS): el trazo empieza sin dibujar; .is-inview lo dibuja en SECUENCIA
   (retardo por hito --i; la flecha, después de su doodle). */
.sf-js .sf-comedor-hitos .sf-comedor-chalk-draw {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.7s ease;
	transition-delay: calc( var(--i, 0) * 0.5s );
}
.sf-js .sf-comedor-hitos .sf-comedor-hito__arrow .sf-comedor-chalk-draw {
	transition-duration: 0.5s;
	transition-delay: calc( var(--i, 0) * 0.5s + 0.35s );
}
.sf-js .sf-comedor-hitos .sf-comedor-dust {
	transition: opacity 0.4s ease;
	transition-delay: calc( var(--i, 0) * 0.5s + 0.55s );
}
.sf-js .sf-comedor-hitos.is-inview .sf-comedor-chalk-draw { stroke-dashoffset: 0; }
.sf-js .sf-comedor-hitos.is-inview .sf-comedor-dust { opacity: 0.5; }

/* =========================================================================
 * 3. LA TARJETA DEL MENÚ DEL DÍA (esquina, en tiza).
 * ========================================================================= */
.sf-comedor-menu {
	position: absolute;
	top: clamp(1rem, 3vw, 1.8rem);
	right: clamp(1rem, 3vw, 2rem);
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	text-align: right;
	text-decoration: none;
	transform: rotate( -2.5deg );
	transition: transform 0.3s ease;
}
.sf-comedor-menu__eu {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	line-height: 1;
	color: var(--wp--preset--color--crema, #f7f5ef);
	filter: url( #sf-chalk-tex );
}
.sf-comedor-menu__es {
	position: relative;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: color-mix( in srgb, #ef9f27 38%, var(--wp--preset--color--crema, #f7f5ef) );
}
/* Subrayado de tiza que se dibuja al hover/foco. */
.sf-comedor-menu__es::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 85%, transparent );
	transform: scaleX( 0 );
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sf-comedor-menu:hover, .sf-comedor-menu:focus-visible { transform: rotate( -1deg ); }
.sf-comedor-menu:hover .sf-comedor-menu__es::after,
.sf-comedor-menu:focus-visible .sf-comedor-menu__es::after { transform: scaleX( 1 ); }
.sf-comedor-menu:focus-visible { outline: 3px solid #ef9f27; outline-offset: 4px; border-radius: 4px; }

/* =========================================================================
 * 5. LA COCINA DE VERDAD — tira de pruebas (zoom FLIP compartido).
 * ========================================================================= */
.sf-comedor-cocina { padding-block: clamp(2.5rem, 6vh, 4rem); }
.sf-comedor-cocina__inner { max-width: 66rem; margin-inline: auto; }
.sf-comedor-cocina__cap {
	margin: 0 0 clamp(1.2rem, 3vh, 1.8rem);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 70%, transparent );
}
.sf-comedor-cocina__strip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
}
.sf-comedor-cocina__item {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 18px 40px -24px rgba(11, 46, 31, 0.5);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.sf-comedor-cocina__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
	.sf-comedor-cocina__item:hover { transform: translateY( -3px ); box-shadow: 0 26px 50px -22px rgba(11, 46, 31, 0.6); }
}
.sf-comedor-cocina__item:focus-visible { outline: 3px solid var(--wp--preset--color--primario, #00a74d); outline-offset: 3px; }

/* =========================================================================
 * Responsive: hitos en columna con flechas cortas hacia abajo (<720px).
 * ========================================================================= */
@media (max-width: 720px) {
	.sf-comedor-hitos { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
	.sf-comedor-hito { padding-right: 0; padding-bottom: 1.4rem; }
	.sf-comedor-hito__arrow {
		top: auto;
		bottom: -0.4rem;
		right: auto;
		left: clamp(1.4rem, 6vw, 2rem);
		width: 1.5rem;
		transform: rotate( 90deg );
	}
	.sf-comedor-menu { position: static; align-items: flex-start; text-align: left; transform: rotate( -1.5deg ); margin-bottom: 1.4rem; }
	.sf-comedor-cocina__strip { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Movimiento reducido: sin vapor; la tiza YA dibujada (sin animación).
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.sf-js .sf-comedor-steam__wisp { animation: none; opacity: 0; }
	.sf-js .sf-comedor-hitos .sf-comedor-chalk-draw,
	.sf-js .sf-comedor-hitos.is-inview .sf-comedor-chalk-draw {
		stroke-dashoffset: 0;
		transition: none;
	}
	.sf-js .sf-comedor-hitos .sf-comedor-dust,
	.sf-js .sf-comedor-hitos.is-inview .sf-comedor-dust { opacity: 0.5; transition: none; }
}

/* Móvil <768: sin vapor (rendimiento + intención de ambiente solo en escritorio). */
@media (max-width: 767px) {
	.sf-comedor-steam { display: none; }
}

/* =========================================================================
 * v3 · LA MESA PUESTA (ZER JATEN DU) — mantel sutil + 3 platos que se sirven.
 * ========================================================================= */
.sf-comedor-mesa-sec { position: relative; }
/* MANTEL vichy/cuadro vasco casi subliminal (crema-niebla al ~5%). */
.sf-comedor-mesa-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	--sq: clamp(22px, 3.4vw, 34px);
	background-image:
		repeating-linear-gradient( 0deg, transparent 0, transparent calc(var(--sq) / 2), rgba(11, 46, 31, 0.05) calc(var(--sq) / 2), rgba(11, 46, 31, 0.05) var(--sq) ),
		repeating-linear-gradient( 90deg, transparent 0, transparent calc(var(--sq) / 2), rgba(11, 46, 31, 0.05) calc(var(--sq) / 2), rgba(11, 46, 31, 0.05) var(--sq) );
}
.sf-comedor-mesa-sec > .sf-svc-sec__inner { position: relative; z-index: 1; }

.sf-comedor-mesa {
	list-style: none;
	margin: clamp(1.75rem, 5vh, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
}
.sf-comedor-plato { position: relative; text-align: center; }

.sf-comedor-plato__dish {
	position: relative;
	width: min(100%, 12rem);
	margin: 0 auto;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient( circle at 42% 36%, #fffdf6 0%, #f4efe2 74%, #ece4d2 100% );
	border: 2px solid color-mix( in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 52%, transparent );
	box-shadow:
		0 18px 30px -18px rgba(11, 46, 31, 0.45),
		inset 0 0 0 7px rgba(255, 255, 255, 0.5),
		inset 0 0 0 8px color-mix( in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 14%, transparent );
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.sf-comedor-plato__food { width: 62%; height: auto; overflow: visible; }

/* v4 · LA FOTO SERVIDA EN EL PLATO. La loza se queda (es la mesa puesta de la
   página); lo que se sirve encima ya no es un garabato, es comida de verdad de la
   cocina del centro. El círculo va un pelo por dentro del aro interior de la loza,
   con una sombra suave por dentro para que se lea HUNDIDO en el plato y no pegado. */
.sf-comedor-plato__img {
	width: 74%;
	height: 74%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	box-shadow:
		inset 0 0 0 1px rgba(11, 46, 31, 0.18),
		0 2px 10px -4px rgba(11, 46, 31, 0.55);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* El vapor va POR ENCIMA de la foto, con su mismo trazo de cera de siempre. */
.sf-comedor-plato__vapor {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

/* v3.1 · el VAPOR nace del propio dibujo (guiso/segundo): volutas de cera que arrancan del
   borde superior de la comida y se DIBUJAN hacia arriba al hover (mismo trazo, desfasadas). */
.sf-comedor-steam-line {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 2.1;
	stroke-linecap: round;
	fill: none;
	opacity: 0;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
/* v3.1 · POSTRE: destello (2 estrellitas de 4 puntas que parpadean, cera fina). */
.sf-comedor-sparkle {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 1.2;
	stroke-linejoin: round;
	fill: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
/* v3.1 · POSTRE: brillo que recorre el borde del plato al hover (.6s). */
.sf-comedor-plato__shine {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}
.sf-comedor-plato__shine path {
	fill: none;
	stroke: #ffffff;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 15 100;
	stroke-dashoffset: 0;
}

.sf-comedor-plato__t {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-comedor-plato__d {
	margin: 0.45rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.98rem;
	line-height: 1.5;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 82%, transparent );
}

/* Comida garabateada a cera (verde bosque sobre la loza; acento ámbar opcional). */
.sf-comedor-food-line {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
.sf-comedor-food-acc { fill: color-mix( in srgb, #ef9f27 55%, transparent ); stroke: none; }

/* Servir la mesa: los platos LLEGAN desde arriba y se asientan (stagger). */
.sf-js .sf-comedor-plato {
	opacity: 0;
	transform: translateY( -1.6rem );
}
.sf-js .sf-comedor-mesa.is-inview .sf-comedor-plato {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.5, 0.5, 1);
	transition-delay: calc( var(--i, 0) * 0.16s );
}

@media (hover: hover) {
	.sf-comedor-plato:hover .sf-comedor-plato__dish {
		transform: translateY( -3px );
		box-shadow: 0 26px 40px -18px rgba(11, 46, 31, 0.55), inset 0 0 0 7px rgba(255, 255, 255, 0.55), inset 0 0 0 8px color-mix( in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 16%, transparent );
	}
	/* Vapor: cada voluta se dibuja hacia arriba, desfasada (guiso/segundo). */
	.sf-comedor-plato:hover .sf-comedor-steam-line {
		animation: sf-c-drawsteam 1.9s ease-in-out infinite;
		animation-delay: calc( var(--sw, 0) * 0.55s );
	}
	/* Postre: destello (estrellitas) + brillo por el borde. */
	.sf-comedor-plato:hover .sf-comedor-sparkle {
		animation: sf-c-twinkle 1.5s ease-in-out infinite;
		animation-delay: calc( var(--sk, 0) * 0.6s );
	}
	.sf-comedor-plato:hover .sf-comedor-plato__shine { opacity: 0.85; }
	.sf-comedor-plato:hover .sf-comedor-plato__shine path { animation: sf-c-shine 0.6s ease-out; }
	/* La foto se acerca un poco al pasar el cursor: el plato «se ofrece». */
	.sf-comedor-plato:hover .sf-comedor-plato__img { transform: scale( 1.045 ); }
}
@keyframes sf-c-drawsteam {
	0%   { stroke-dashoffset: 100; opacity: 0; }
	25%  { opacity: 0.9; }
	55%  { stroke-dashoffset: 0; opacity: 0.9; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sf-c-twinkle {
	0%, 100% { opacity: 0; transform: scale( 0.4 ) rotate( 0deg ); }
	50%      { opacity: 0.9; transform: scale( 1 ) rotate( 20deg ); }
}
@keyframes sf-c-shine {
	from { stroke-dashoffset: 115; }
	to   { stroke-dashoffset: 0; }
}

/* =========================================================================
 * v3.1 · LAS COMANDAS DE COCINA (DIETAS) — tickets COLGADOS de un RIEL de cera.
 * ========================================================================= */
.sf-comedor-comandas-rail {
	position: relative;
	margin: clamp(2.25rem, 6vh, 3.5rem) 0 0;
	padding-top: 1.5rem;
}
/* EL RIEL: trazo de cera recto (con cuerpo) que recorre el ancho; se dibuja al entrar. */
.sf-comedor-riel {
	position: absolute;
	top: 0.4rem;
	left: clamp(1rem, 6vw, 6rem);
	right: clamp(1rem, 6vw, 6rem);
	height: 8px;
	z-index: 0;
	overflow: visible;
}
.sf-comedor-riel__line {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 3;
	stroke-linecap: round;
	fill: none;
}

.sf-comedor-comandas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(1.4rem, 3.5vw, 3rem);
}
.sf-comedor-comanda {
	position: relative;
	width: min(100%, 15rem);
	margin-top: var(--drop, 0);
	transform: rotate( var(--rot, 0deg) );
	transform-origin: top center; /* cuelga y oscila desde la pinza */
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* La PINZA (dos trazos + bolita, sin metal ni degradados): sujeta el ticket al riel. */
.sf-comedor-pinza {
	position: absolute;
	top: -1.3rem;
	left: 50%;
	transform: translateX( -50% );
	width: 1.15rem;
	height: auto;
	z-index: 2;
}
.sf-comedor-pinza path { stroke: var(--wp--preset--color--verde-bosque, #0b2e1f); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.sf-comedor-pinza circle { fill: var(--wp--preset--color--verde-bosque, #0b2e1f); }

/* El PAPEL (perforado arriba). La máscara del pliegue vive aquí, no en el <li>, para no
   recortar la pinza. */
.sf-comedor-comanda__paper {
	position: relative;
	padding: 1.5rem 1.3rem 1.25rem;
	background-color: #fffdf6;
	box-shadow: 0 16px 28px -16px rgba(11, 46, 31, 0.42), 0 2px 4px -2px rgba(11, 46, 31, 0.2);
	transition: box-shadow 0.35s ease;
	--perf: 7px;
	-webkit-mask: radial-gradient( var(--perf) at 50% 0, #0000 96%, #000 ) 0 0 / calc(2 * var(--perf)) 100%;
	mask: radial-gradient( var(--perf) at 50% 0, #0000 96%, #000 ) 0 0 / calc(2 * var(--perf)) 100%;
}
.sf-comedor-comanda__n {
	margin: 0.2rem 0 0;
	font-family: var(--wp--preset--font-family--etiquetas); /* Space Mono, escrito de cocina */
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-comedor-comanda__d {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.95rem;
	line-height: 1.5;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 88%, transparent );
}

/* ENTRADA: el riel se dibuja primero (.4s) y los tickets CAEN colgándose con péndulo mínimo
   (una oscilación ±2° y quieto), stagger, después del riel. */
.sf-js .sf-comedor-riel__line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sf-js .sf-comedor-comandas-rail.is-inview .sf-comedor-riel__line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.4s ease;
}
.sf-js .sf-comedor-comanda { opacity: 0; }
.sf-js .sf-comedor-comandas-rail.is-inview .sf-comedor-comanda {
	opacity: 1;
	animation: sf-c-hang 0.75s cubic-bezier(0.3, 0.7, 0.35, 1) backwards;
	animation-delay: calc( 0.4s + var(--i, 0) * 0.16s );
}
@keyframes sf-c-hang {
	0%   { opacity: 0; transform: translateY( -1.5rem ) rotate( var(--rot, 0deg) ); }
	50%  { opacity: 1; transform: translateY( 0 ) rotate( calc( var(--rot, 0deg) - 2deg ) ); }
	75%  { transform: translateY( 0 ) rotate( calc( var(--rot, 0deg) + 1deg ) ); }
	100% { transform: translateY( 0 ) rotate( var(--rot, 0deg) ); }
}
/* Hover: el ticket se ENDEREZA desde su pinza (transform-origin arriba) + eleva. */
@media (hover: hover) {
	.sf-comedor-comanda:hover { transform: rotate( 0deg ) translateY( -3px ); }
	.sf-comedor-comanda:hover .sf-comedor-comanda__paper {
		box-shadow: 0 24px 40px -16px rgba(11, 46, 31, 0.5), 0 3px 6px -2px rgba(11, 46, 31, 0.25);
	}
}

/* Cierre de confianza + marcador -> /visita/. */
.sf-comedor-confianza {
	margin: clamp(2rem, 5vh, 3rem) auto 0;
	max-width: 42rem;
	text-align: center;
}
.sf-comedor-confianza__line {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: balance;
}
.sf-comedor-confianza__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1.1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.82rem;
	text-decoration: none;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	border-radius: 6px;
	transition: gap 0.25s ease, color 0.25s ease;
}
.sf-comedor-confianza__link-text { position: relative; padding: 0 0.12em; }
.sf-comedor-confianza__link-text::after {
	content: "";
	position: absolute;
	left: -0.12em;
	right: -0.12em;
	bottom: 0.02em;
	height: 0.5em;
	z-index: -1;
	border-radius: 2px;
	background-color: #ffc02e;
	opacity: 0.55;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sf-comedor-confianza__link:hover .sf-comedor-confianza__link-text::after,
.sf-comedor-confianza__link:focus-visible .sf-comedor-confianza__link-text::after { transform: scaleX( 1 ); }
.sf-comedor-confianza__link:hover { gap: 0.75em; color: var(--wp--preset--color--primario, #00a74d); }
.sf-comedor-confianza__link:focus-visible { outline: 3px solid var(--wp--preset--color--primario, #00a74d); outline-offset: 4px; }
.sf-comedor-confianza__link svg { width: 1.7em; height: auto; }
.sf-comedor-confianza__link svg path { stroke: #ef9f27; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
@media (hover: hover) {
	.sf-comedor-confianza__link:hover svg { transform: scaleX( 1.3 ); transition: transform 0.25s ease; }
}

/* =========================================================================
 * v3 · Responsive (mesa/comandas) + reduced-motion.
 * ========================================================================= */
@media (max-width: 720px) {
	.sf-comedor-mesa { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
	.sf-comedor-comandas { flex-direction: column; align-items: center; }
	.sf-comedor-comanda { margin-top: 0; }
	.sf-comedor-riel { display: none; } /* en columna: cada ticket con su pinza, sin barra horizontal */
}

@media (prefers-reduced-motion: reduce) {
	/* Mesa puesta y comandas colgadas del riel DESDE EL INICIO, sin servir/caer/péndulo. */
	.sf-js .sf-comedor-plato,
	.sf-js .sf-comedor-mesa.is-inview .sf-comedor-plato {
		opacity: 1; transform: none; transition: none;
	}
	.sf-js .sf-comedor-riel__line { stroke-dashoffset: 0; }
	.sf-js .sf-comedor-comanda,
	.sf-js .sf-comedor-comandas-rail.is-inview .sf-comedor-comanda {
		opacity: 1; transform: rotate( var(--rot, 0deg) ); animation: none;
	}
	/* Platos estáticos: sin vapor, sin destellos, sin brillo y sin acercar la foto. */
	.sf-comedor-steam-line, .sf-comedor-sparkle { animation: none !important; opacity: 0; }
	.sf-comedor-plato__shine { display: none; }
	.sf-comedor-plato__img { transition: none; }
}

/* =========================================================================
 * AIRE pre-CTA: unificado en la utilidad compartida .sf-pre-cta (main.css), aplicada en el
 * markup del CTA. Se retiraron los parches locales (padding del CTA y de la última FAQ) para no
 * sumarse al aire común.
 * ========================================================================= */