@charset "UTF-8";
/* =========================================================================
   FUSIÓN Y MALTA · CAMBIOS PEDIDOS POR EL CLIENTE
   18 de agosto de 2026 · sobre el kit v5

   ESTE ARCHIVO NO ESTÁ EN EL PAQUETE. Se carga DESPUÉS de estilos.css y solo
   contiene sobrescrituras. estilos.css sigue byte a byte como venía en el kit,
   así que este archivo ES el diff: hay que llevarlo al proyecto de diseño e
   integrarlo, o se pierde en el siguiente montaje.

   Se respeta el §3.2: nada de reglas base sobre etiquetas fuera de :where(),
   y todas las utilidades prefijadas con .fym-scope.

   ÍNDICE
    1 · Paleta clara, con contraste medido
    2 · Los cuatro sitios donde un token cambia de papel al invertir
    3 · Bandas: una tonalidad de blanco por sección
    4 · Hero de portada
    5 · Menú: marcado de anclas
    6 · Reestructura: fichas, listas y desplegables
   ========================================================================= */


/* =========================================================================
   1 · PALETA CLARA

   Los nombres de token NO cambian, a propósito: el kit los usa con un papel
   fijo (--fym-negro = fondo, --fym-hueso = texto), así que invertir los
   valores invierte el tema sin tocar ni un selector. Los nombres se quedan
   cortos de sentido —"negro" ya no es negro— y eso hay que arreglarlo en el
   proyecto de diseño renombrándolos a --fym-fondo / --fym-texto.

   Ratios calculados, no prometidos. Cada color contra los tres fondos de
   banda, siendo --fym-banda-2 (#EFE9DD) el peor caso:

     hueso  #1A1714   16,97 · 15,84 · 14,76
     humo   #635A4E    6,44 ·  6,01 ·  5,60
     verde  #2F6B23    6,15 ·  5,74 ·  5,35   (mañana)
     ámbar  #9A4708    6,09 ·  5,69 ·  5,30   (tarde)
     rojo   #B31226    6,59 ·  6,15 ·  5,73   (noche)

   Los cinco pasan AA de texto normal (4,5:1) contra los tres fondos.

   POR QUÉ NO VALE INVERTIR Y YA: sobre claro, los colores originales daban
   hueso 1,14 · humo 2,18 · verde 2,69 · ámbar 3,27 · rojo 4,06. Cinco de
   nueve dejaban de servir para texto, y verde/ámbar/rojo no son decorativos:
   significan mañana, tarde y noche en el eje horario y en la tabla. Hay que
   rediseñarlos, no invertirlos.

   EL ROJO DE MARCA #F71D33 NO SE TOCA: sigue en el logotipo y en el favicon.
   Sobre fondo claro da 3,86:1, así que no se usa para texto. Queda como
   --fym-marca-rojo para uso gráfico.
   ========================================================================= */

.fym-scope {
	--fym-negro:   #FBF9F5;   /* fondo base (antes #0C0B0A) */
	--fym-carbon:  #FFFFFF;   /* superficie elevada: tarjetas, mapa, cookies */
	--fym-hueso:   #1A1714;   /* texto principal (antes #F5EFE4) */
	--fym-humo:    #635A4E;   /* texto secundario */
	--fym-verde:   #2F6B23;   /* mañana */
	--fym-ambar:   #9A4708;   /* tarde · enlaces · foco */
	--fym-rojo:    #B31226;   /* noche */
	--fym-rojo-p:  #96101F;   /* fondo del botón principal */
	--fym-borde:   #E4DED3;   /* solo separa: 1,27:1, como el 1,43 original */

	/* Tokens nuevos que el kit no tenía y la inversión exige. */
	--fym-sobre-color: #FBF9F5;   /* texto encima de un color de marca */
	--fym-velo:        rgba(26, 23, 20, 0.55);  /* velo de la modal */
	--fym-marca-rojo:  #F71D33;   /* rojo de marca, uso gráfico */

	/* Las tres tonalidades de blanco de las bandas. */
	--fym-banda-0: #FBF9F5;
	--fym-banda-1: #F5F1E9;
	--fym-banda-2: #EFE9DD;
}


/* =========================================================================
   2 · LOS SITIOS DONDE UN TOKEN CAMBIA DE PAPEL AL INVERTIR

   El kit usa --fym-negro como "color del fondo" y --fym-hueso como "color del
   texto" de forma consistente, así que casi todo se invierte solo. Las
   excepciones son estas, y solo estas: sitios donde el texto va ENCIMA de un
   color de marca.
   ========================================================================= */

/* El botón principal: fondo rojo profundo. Con --fym-hueso ahora oscuro sería
   texto negro sobre rojo oscuro. 8,35:1 con --fym-sobre-color. */
.fym-scope .fym-btn--principal        { color: var(--fym-sobre-color); }
.fym-scope .fym-btn--principal:hover  { color: var(--fym-sobre-color); }

/* El secundario invierte al pasar por encima: fondo ámbar. 6,09:1. */
.fym-scope .fym-btn--secundario:hover { color: var(--fym-sobre-color); }

/* Saltar al contenido: fondo ámbar. */
.fym-scope .fym-saltar,
.fym-scope .fym-saltar:focus          { color: var(--fym-sobre-color); }

/* El velo de la modal de preferencias. Sobre claro, un velo blanco al 82 %
   no oscurece nada: tiene que ser oscuro para que la caja se despegue. */
.fym-scope .fym-panel { background: var(--fym-velo); }

/* La cabecera se apoyaba en el contraste del fondo oscuro. Sobre claro
   necesita una sombra para despegarse al desplazar. */
.fym-scope .fym-cabecera {
	box-shadow: 0 1px 0 var(--fym-borde), 0 6px 24px -18px rgba(26, 23, 20, 0.45);
}

/* El pie era carbón sobre negro. Ahora la superficie elevada es blanca, así
   que el pie usa la banda más profunda para cerrar la página. */
.fym-scope .fym-pie { background: var(--fym-banda-2); }

/* El mapa bajo demanda y la caja de cookies: blanco con borde, para que se
   lean como superficie y no como banda. */
.fym-scope .fym-tercero,
.fym-scope .fym-cookies,
.fym-scope .fym-panel__caja { border-color: var(--fym-borde); }


/* =========================================================================
   3 · BANDAS: UNA TONALIDAD DE BLANCO POR SECCIÓN

   El marcado del kit envuelve CADA sección en su propio .fym-contenedor, así
   que la regla `.fym-seccion + .fym-seccion { border-top }` de estilos.css
   NUNCA llega a aplicarse: no son hermanos. Ese es el motivo real de que las
   secciones se vean pegadas unas a otras. Se deja la regla muerta como está y
   se separa con color, que es lo que se ha pedido.

   El contenedor pasa a ancho completo y recoloca su relleno para que el
   contenido quede EXACTAMENTE donde estaba: max(lateral, (100% - 1180) / 2 +
   lateral) da el mismo ancho de caja de contenido que max-width: 1180 +
   padding: lateral. La retícula no se mueve; solo el fondo se va a los bordes.
   ========================================================================= */

.fym-scope #fym-contenido > .fym-contenedor {
	max-width: none;
	padding-inline: max(
		var(--fym-lateral),
		calc((100% - var(--fym-ancho-max)) / 2 + var(--fym-lateral))
	);
}

.fym-scope #fym-contenido > .fym-contenedor:nth-child(3n + 1) { background: var(--fym-banda-0); }
.fym-scope #fym-contenido > .fym-contenedor:nth-child(3n + 2) { background: var(--fym-banda-1); }
.fym-scope #fym-contenido > .fym-contenedor:nth-child(3n)     { background: var(--fym-banda-2); }


/* =========================================================================
   4 · HERO DE PORTADA

   El kit dice, en el comentario del §9 de estilos.css, que la portada es puro
   rótulo "y viene de que no hay ni una imagen del local". Sigue sin haberla:
   las seis fotos del paquete son primeros planos de plato de Instagram y
   NINGUNA es apaisada. La mayor es 1440×1920, vertical.

   Así que el hero no es una foto a sangre —eso exigiría ampliar, y el §9 del
   estándar lo prohíbe—: es una retícula de dos columnas con el rótulo a la
   izquierda y una foto vertical 3:4 a la derecha, que es la proporción que sí
   existe. En móvil la foto va debajo y a lo ancho.
   ========================================================================= */

.fym-scope .fym-hero {
	padding: var(--fym-e-4) 0 var(--fym-e-5);
}

.fym-scope .fym-hero .fym-rotulo { padding: 0; }

.fym-scope .fym-hero__rejilla {
	display: grid;
	gap: var(--fym-e-3);
	align-items: center;
}

.fym-scope .fym-hero__figura { margin: 0; position: relative; }

.fym-scope .fym-hero__figura img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 3px;
}

/* El sello de horario encima de la foto. Va sobre el color de marca, así que
   usa --fym-sobre-color. */
.fym-scope .fym-hero__sello {
	position: absolute;
	left: 0;
	bottom: var(--fym-e-2);
	background: var(--fym-rojo-p);
	color: var(--fym-sobre-color);
	font-family: var(--fym-texto);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 16px;
}

@media (min-width: 56rem) {
	.fym-scope .fym-hero { padding: var(--fym-e-5) 0; }
	.fym-scope .fym-hero__rejilla {
		grid-template-columns: 7fr 5fr;
		gap: var(--fym-e-4);
	}
	.fym-scope .fym-hero__figura { max-width: 420px; margin-left: auto; }
}


/* =========================================================================
   5 · MENÚ: MARCADO DE ANCLAS

   El fallo: WordPress recorta todo lo que va desde "#" antes de comparar la
   URL de un enlace personalizado con la URL actual. /#terraza y /#directos se
   convierten los dos en "/", que es la portada, así que el núcleo marcaba los
   DOS con current-menu-item. No era el CSS.

   El filtro de functions.php les quita esa clase y les pone .fym-nav__ancla.
   Quién está activo lo decide el JS por posición de desplazamiento, que es la
   única forma de saberlo: el servidor no puede.
   ========================================================================= */

.fym-scope .fym-nav__lista .fym-actual > a,
.fym-scope .fym-menu-movil__lista .fym-actual > a {
	color: var(--fym-ambar);
	border-bottom-color: var(--fym-ambar);
}


/* =========================================================================
   6 · REESTRUCTURA: FICHAS, LISTAS Y DESPLEGABLES

   El diagnóstico no era "sobra texto": 498-770 palabras por página es justo la
   banda que persigue el §7. Lo que pasaba es que casi todo era párrafo
   corrido: 34 párrafos y una sola lista en la portada, 20 párrafos y CERO
   listas en /la-cocina/. Estas clases dan formato al mismo texto sin quitar
   una palabra, para no pagar el coste en posicionamiento.
   ========================================================================= */

/* Rejilla de fichas: dos o tres columnas según quepa. */
.fym-scope .fym-fichas {
	list-style: none;
	margin: var(--fym-e-3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--fym-e-2);
}

@media (min-width: 44rem) {
	.fym-scope .fym-fichas { grid-template-columns: repeat(2, 1fr); }
	.fym-scope .fym-fichas--tres { grid-template-columns: repeat(3, 1fr); }
}

.fym-scope .fym-ficha {
	margin: 0;
	background: var(--fym-carbon);
	border: 1px solid var(--fym-borde);
	border-radius: 3px;
	padding: var(--fym-e-2);
}

.fym-scope .fym-ficha__titulo {
	font-family: var(--fym-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fym-hueso);
	margin: 0 0 6px;
}

.fym-scope .fym-ficha__texto {
	font-family: var(--fym-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fym-humo);
	margin: 0;
}

/* Lista de datos: etiqueta a la izquierda, valor a la derecha. Sustituye a los
   párrafos de "X es tal, Y es cual". */
.fym-scope .fym-datos {
	margin: var(--fym-e-3) 0 0;
	border-top: 1px solid var(--fym-borde);
}

.fym-scope .fym-datos__fila {
	display: grid;
	gap: 2px var(--fym-e-2);
	padding: 12px 0;
	border-bottom: 1px solid var(--fym-borde);
}

@media (min-width: 40rem) {
	.fym-scope .fym-datos__fila { grid-template-columns: 12rem 1fr; align-items: baseline; }
}

.fym-scope .fym-datos__clave {
	font-family: var(--fym-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fym-humo);
	margin: 0;
}

.fym-scope .fym-datos__valor {
	font-family: var(--fym-texto);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fym-hueso);
	margin: 0;
}

/* Desplegables para lo que no todo el mundo necesita leer: alérgenos, detalle
   de cookies, preguntas largas. Nativo <details>, sin JS. */
.fym-scope .fym-desplegable {
	border-bottom: 1px solid var(--fym-borde);
}

.fym-scope .fym-desplegable > summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 28px 14px 0;
	position: relative;
	font-family: var(--fym-texto);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fym-hueso);
}

.fym-scope .fym-desplegable > summary::-webkit-details-marker { display: none; }

.fym-scope .fym-desplegable > summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 12px;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--fym-ambar);
}

.fym-scope .fym-desplegable[open] > summary::after { content: "−"; }

.fym-scope .fym-desplegable__cuerpo {
	padding: 0 0 var(--fym-e-2);
	max-width: var(--fym-ancho-texto);
}

.fym-scope .fym-desplegable__cuerpo > :where(p) {
	color: var(--fym-humo);
	margin: 0 0 var(--fym-e-1);
}

.fym-scope .fym-desplegable__cuerpo > :where(p:last-child) { margin-bottom: 0; }

/* Lista con viñeta de marca, para enumeraciones cortas dentro de prosa. */
.fym-scope .fym-lista-marca {
	list-style: none;
	margin: var(--fym-e-2) 0 0;
	padding: 0;
	max-width: var(--fym-ancho-texto);
}

.fym-scope .fym-lista-marca li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 10px;
	color: var(--fym-hueso);
}

.fym-scope .fym-lista-marca li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fym-ambar);
}

/* Aviso de dato pendiente: que se vea que falta y no se lea como texto normal. */
.fym-scope .fym-pendiente {
	display: block;
	border-left: 3px solid var(--fym-ambar);
	background: var(--fym-carbon);
	padding: 12px var(--fym-e-2);
	margin: var(--fym-e-2) 0;
	font-size: 1rem;
	color: var(--fym-humo);
	max-width: var(--fym-ancho-texto);
}