/* Los menús del día. Creado 2026-09-18 · v1.2.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).

   Usa el carrusel de la agenda (.q27-carro, .q27-tira, .q27-plan) para que
   valga el mismo JS de flechas, pero la ficha es otra cosa. Aqui lo que manda
   no es una foto: es el nombre del restaurante y el precio.

   Orden de la ficha, tal y como lo pidio Angel:
       nombre
       tipo de menu · precio
       logotipo

   Y tarjetas con su caja, que se vean separadas: el logotipo va sobre blanco y
   sin caja se confundia con el de al lado.

   v1.2.0 — Aire entre la raya de la cabecera y las tarjetas: se tocaban.
   v1.1.0 — El crema va a todo el ancho de la pagina, las tarjetas se separan
   de verdad y la banda queda encerrada entre dos filetes.

   Todo va prefijado con .m27 porque el kit de Elementor (.elementor-kit-99596)
   gana a las reglas de una sola clase. */

/* La tira de la agenda viene con el ancho de contenido puesto; aqui se suelta
   para que el fondo llegue de borde a borde, y el contenido se vuelve a meter
   en los 1.280 por dentro. */
.m27.q27{
	max-width:none;
	width:100%;
	margin:0;
	padding:0;
	background:var(--wti-crema-fondo,#FBF7F2);
	border-top:1px solid var(--wti-linea,#E8E2DA);
	border-bottom:1px solid var(--wti-linea,#E8E2DA);
}
.m27 .q27-cabeza,
.m27 .q27-carro{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:22px;
	padding-right:22px;
	box-sizing:border-box;
}
.m27 .q27-cabeza{padding-top:30px}
.m27 .q27-carro{padding-top:22px;padding-bottom:32px}

/* Aire entre tarjetas: cinco por pantalla contando los huecos. */
.m27 .q27-tira{
	gap:16px;
	border-bottom:0;
}
.m27 .q27-plan{
	flex:0 0 calc((100% - 4 * 16px) / 5);
	width:calc((100% - 4 * 16px) / 5);
	padding:0;
}

/* ---------- la tarjeta ---------- */
.m27 .m27-ficha{
	background:#fff;
	border:1px solid var(--wti-linea,#E8E2DA);
	border-radius:var(--wti-radio,14px);
	box-shadow:0 12px 26px -20px rgba(27,21,18,.45);
	overflow:hidden;
	transition:transform .2s ease,box-shadow .2s ease;
}
.m27 .m27-ficha:hover{
	transform:translateY(-3px);
	box-shadow:0 18px 34px -20px rgba(27,21,18,.5);
}

.m27 a.m27-enlace{
	display:flex;
	flex-direction:column;
	height:100%;
	padding:16px 16px 0;
	box-sizing:border-box;
	text-decoration:none;
}

/* ---------- 1. el nombre ---------- */
.m27 .m27-nombre{
	margin:0;
	font-family:var(--wti-titulos,"Oswald",sans-serif);
	font-weight:400;
	font-size:18px;
	line-height:1.25;
	color:var(--wti-tinta,#1B1512) !important;
	/* Dos lineas como mucho: si no, las tarjetas se descuadran entre si. */
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.m27 a.m27-enlace:hover .m27-nombre{color:var(--wti-naranja,#F57C00) !important}

/* ---------- 2. tipo de menu y precio, en la misma linea ---------- */
.m27 .m27-linea{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:0 9px;
	margin:8px 0 0;
}
.m27 .m27-tipo{
	font-size:13.5px;
	line-height:1.3;
	color:var(--wti-gris,#8A817B);
}
.m27 .m27-tipo + .m27-precio::before{
	content:"·";
	margin-right:9px;
	color:#D9CFC3;
}
.m27 .m27-precio{
	font-family:var(--wti-titulos,"Oswald",sans-serif);
	font-size:18px;
	font-weight:500;
	line-height:1.2;
	letter-spacing:.01em;
	color:var(--wti-naranja,#F57C00);
	white-space:nowrap;
}

/* ---------- 3. el logotipo ---------- */
.m27 .m27-logo{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:14px -16px 0;
	padding:12px 16px;
	border-top:1px solid var(--wti-linea-suave,#F0EAE2);
	background:#fff;
	aspect-ratio:2 / 1;
	overflow:hidden;
}
.m27 .m27-logo img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
}

/* ---------- la ultima tarjeta: ver todos ---------- */
.m27 .m27-ficha-final{
	background:var(--wti-crema,#F2E6D8);
	border-color:var(--wti-crema,#F2E6D8);
	box-shadow:none;
}
.m27 a.m27-mas{
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:16px;
	text-align:center;
}
.m27 .m27-mas-flecha{
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--wti-naranja,#F57C00);
	color:#fff;
	font-size:20px;
	line-height:1;
}
.m27 .m27-mas-texto{
	font-family:var(--wti-titulos,"Oswald",sans-serif);
	font-size:14px;
	font-weight:500;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--wti-marron,#7A5238) !important;
}

/* ---------- movil ---------- */
@media (max-width:1024px){
	.m27 .q27-tira{gap:14px}
	.m27 .q27-plan{
		flex:0 0 calc((100% - 2 * 14px) / 3);
		width:calc((100% - 2 * 14px) / 3);
	}
}

@media (max-width:640px){
	.m27 .q27-cabeza{padding-top:24px}
	.m27 .q27-carro{padding-top:18px;padding-bottom:26px}
	.m27 .q27-tira{gap:12px}
	.m27 .q27-plan{
		flex:0 0 calc((100% - 12px) / 1.6);
		width:calc((100% - 12px) / 1.6);
	}
	.m27 a.m27-enlace{padding:14px 14px 0}
	.m27 .m27-nombre{font-size:17px}
	.m27 .m27-precio{font-size:17px}
	.m27 .m27-logo{margin:12px -14px 0;padding:10px 14px}
}