/**
 * Carta de Restaurante Mi Cocina.
 *
 * Convive con Divi, que trae su propia hoja completa: por eso todo cuelga del
 * prefijo `mc-` y las reglas que Divi pisa (títulos, enlaces, márgenes de `p`)
 * se reafirman aquí en lugar de confiar en la cascada.
 *
 * Sin @import de fuentes a propósito. El sitio se va a clonar a un hosting y
 * una portada que espera a Google Fonts se dibuja dos veces: primero con la
 * fuente de reserva y luego saltando. La pila del sistema no salta.
 */

:root {
	--mc-verde: #0a7a4b;
	--mc-ambar: #e1a93b;
	--mc-crema: #fbf8f3;
	--mc-tinta: #23201c;
	--mc-gris: #6d675f;
	--mc-borde: #e8e1d6;
	--mc-serif: Georgia, "Times New Roman", serif;
	--mc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mc-carta,
.mc-seccion,
.mc-hero,
.mc-info {
	font-family: var(--mc-sans);
	color: var(--mc-tinta);
	box-sizing: border-box;
}

.mc-carta *,
.mc-seccion *,
.mc-hero *,
.mc-info * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- *
 * Portada
 * ---------------------------------------------------------------- */

.mc-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62vh;
	padding: 72px 24px;
	/* La portada tiene que llegar a los dos bordes, y el contenido de Divi vive
	   dentro de un contenedor centrado con márgenes. `50% - 50vw` saca la
	   sección de ese contenedor sin tocar la plantilla del tema. */
	margin: 0 calc(50% - 50vw) 40px;
	width: 100vw;
	max-width: 100vw;
	background: var(--mc-verde) center / cover no-repeat;
	text-align: center;
	overflow: hidden;
}

/* El margen negativo de arriba puede asomar bajo la barra de scroll vertical. */
body:has(.mc-hero) {
	overflow-x: hidden;
}

/* En la portada el hero ya dice el nombre del sitio; el título "Inicio" que
   pinta el tema encima sobra y rompe el efecto de entrada. */
body.home .entry-title,
body.home .et_post_meta_wrapper > h1 {
	display: none;
}

/* El velo es más oscuro de lo que parece necesario a propósito: la foto de
   portada cambia con la temporada y sobre una clara —un pollo dorado, un plato
   con arroz— el texto blanco desaparece. Con 0.62 arriba se lee sobre todas. */
.mc-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 26, 20, 0.62) 0%, rgba(14, 26, 20, 0.82) 100%);
}

/* Divi separa el contenido de la cabecera con 58 px de relleno en `.container`.
   Delante de una portada a sangre esa franja blanca parece un fallo de carga.
   Se apunta al contenedor que realmente envuelve el hero: `.container` también
   es el de la cabecera, y vaciarlo entero descuadra el menú.

   El selector copia entero el de Divi (`body:not(.et-tb) #main-content
   .container`) y le añade el `:has()`. Con uno más corto hay empate de
   especificidad, y en un empate gana la hoja que se carga después — que es la
   suya, porque el CSS dinámico del tema va detrás del de los plugins. */
body:not(.et-tb) #main-content .container:has(.mc-hero) {
	padding-top: 0;
}

.mc-hero__contenido {
	position: relative;
	max-width: 760px;
}

.mc-hero__antetitulo {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mc-ambar);
}

.mc-hero__titulo {
	margin: 0 0 14px;
	font-family: var(--mc-serif);
	font-size: clamp(34px, 6vw, 62px);
	line-height: 1.08;
	color: #fff;
}

.mc-hero__lema {
	margin: 0 0 30px;
	font-size: clamp(16px, 2.2vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.mc-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.mc-boton {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mc-boton--principal {
	background: var(--mc-ambar);
	color: #2a2114;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.mc-boton--secundario {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.mc-boton:hover,
.mc-boton:focus {
	transform: translateY(-2px);
	color: inherit;
}

.mc-boton--secundario:hover,
.mc-boton--secundario:focus {
	color: #fff;
}

/* ---------------------------------------------------------------- *
 * Franja de datos del local
 * ---------------------------------------------------------------- */

.mc-info {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	max-width: 1120px;
	margin: 0 auto 44px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--mc-borde);
	border-radius: 14px;
}

.mc-info__celda {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 200px;
	padding: 0 16px;
	text-align: center;
}

.mc-info__rotulo {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mc-verde);
}

.mc-info__valor {
	font-size: 15px;
	color: var(--mc-gris);
	line-height: 1.45;
}

/* ---------------------------------------------------------------- *
 * Índice de categorías
 * ---------------------------------------------------------------- */

.mc-carta {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 40px;
}

/* En escritorio las doce categorías envuelven en dos líneas: cortadas contra el
   borde derecho parecían un error de maquetación, y nadie arrastra en horizontal
   con un ratón. En móvil sí se arrastra, así que allí vuelve a ser una tira. */
.mc-indice {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0;
	margin-bottom: 12px;
	background: var(--mc-crema);
	border-bottom: 1px solid var(--mc-borde);
}

.mc-indice__chip {
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 1px solid var(--mc-borde);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-tinta);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.mc-indice__chip:hover,
.mc-indice__chip:focus {
	background: var(--mc-verde);
	border-color: var(--mc-verde);
	color: #fff;
}

/* ---------------------------------------------------------------- *
 * Secciones y rejilla
 * ---------------------------------------------------------------- */

.mc-seccion {
	/* Compensa lo que tapan la cabecera fija de Divi (54 px una vez encogida) y
	   el índice pegajoso (hasta 125 px). Con los 84 px de antes, el salto por
	   ancla dejaba el nombre de la categoría justo detrás del índice: se
	   aterrizaba en la sección correcta y parecía la anterior. */
	scroll-margin-top: 145px;
	padding: 30px 0 10px;
}

.mc-seccion--destacados {
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px 20px 40px;
}

.mc-seccion__cabecera {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mc-ambar);
}

.mc-seccion__titulo {
	margin: 0 0 6px;
	font-family: var(--mc-serif);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.15;
	color: var(--mc-verde);
}

.mc-seccion__desc {
	margin: 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mc-gris);
}

.mc-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 22px;
}

/* ---------------------------------------------------------------- *
 * Fichas de categoría (portada)
 * ---------------------------------------------------------------- */

.mc-seccion--categorias {
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px 20px 40px;
}

.mc-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 16px;
}

.mc-cat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 12px;
	background: #fff;
	border: 1px solid var(--mc-borde);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mc-cat:hover,
.mc-cat:focus {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(35, 32, 28, 0.13);
	color: inherit;
}

.mc-cat__marco {
	aspect-ratio: 3 / 2;
	background: #f0ece5;
	overflow: hidden;
}

.mc-cat__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-cat__foto--vacia {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f0ece5, #f0ece5 12px, #e9e3da 12px, #e9e3da 24px);
}

.mc-cat__nombre {
	padding: 12px 14px 0;
	font-family: var(--mc-serif);
	font-size: 17px;
	line-height: 1.2;
	color: var(--mc-tinta);
}

.mc-cat__cuenta {
	padding: 0 14px;
	font-size: 13px;
	color: var(--mc-gris);
}

/* ---------------------------------------------------------------- *
 * Tarjeta de plato
 * ---------------------------------------------------------------- */

.mc-plato {
	background: #fff;
	border: 1px solid var(--mc-borde);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mc-plato:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(35, 32, 28, 0.13);
}

.mc-plato__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.mc-plato__marco {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f0ece5;
	overflow: hidden;
}

.mc-plato__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-plato__foto--vacia {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f0ece5, #f0ece5 12px, #e9e3da 12px, #e9e3da 24px);
}

.mc-plato__sellos {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 20px);
}

.mc-sello {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur(2px);
}

.mc-sello--opciones {
	background: rgba(255, 255, 255, 0.93);
	color: var(--mc-verde);
}

.mc-sello--casa {
	background: var(--mc-ambar);
	color: #2a2114;
}

.mc-plato__texto {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
	padding: 16px 16px 18px;
}

.mc-plato__nombre {
	margin: 0;
	font-family: var(--mc-serif);
	font-size: 19px;
	line-height: 1.25;
	color: var(--mc-tinta);
}

.mc-plato__desc {
	margin: 0;
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mc-gris);
}

.mc-plato__pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--mc-borde);
}

.mc-precio {
	font-size: 19px;
	font-weight: 700;
	color: var(--mc-verde);
	white-space: nowrap;
}

.mc-precio s,
.mc-precio del {
	margin-right: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #a49c91;
	text-decoration: line-through;
}

.mc-precio ins {
	text-decoration: none;
}

/* «Desde L 385.00» de un plato con opciones que cuestan (Sprint-058). */
.mc-precio .sims-price-from {
	font-size: 15px;
}

/* WooCommerce mete un <span class="woocommerce-Price-amount"> con su propio
   tamaño heredado de Divi; sin esto el precio sale más pequeño que el tachado. */
.mc-precio .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mc-plato__ver {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-ambar);
	white-space: nowrap;
}

.mc-vacio {
	padding: 40px;
	text-align: center;
	color: var(--mc-gris);
}

/* ---------------------------------------------------------------- *
 * Pantallas pequeñas
 * ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.mc-hero {
		min-height: 52vh;
		padding: 56px 18px;
	}

	/* El contenedor de Divi deja ~60 px de aire a cada lado en móvil. Con eso,
	   una rejilla de 160 px solo cabe en una columna y la carta se vuelve un
	   rollo interminable de un plato por pantalla. Se recupera el ancho y se
	   bajan las columnas a 145 px para que entren dos. */
	.mc-carta,
	.mc-seccion--destacados,
	.mc-seccion--categorias {
		margin-inline: -6vw;
		padding-inline: 12px;
	}

	.mc-rejilla {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
		gap: 12px;
	}

	.mc-cats {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
		gap: 12px;
	}

	.mc-indice {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	/* A dos columnas los dos sellos no caben en una línea, se apilan y tapan
	   media foto. Se encogen y se quedan en una sola fila recortada. */
	.mc-plato__sellos {
		top: 6px;
		left: 6px;
		flex-wrap: nowrap;
		max-width: calc(100% - 12px);
		overflow: hidden;
	}

	.mc-sello {
		padding: 3px 7px;
		font-size: 9px;
	}

	.mc-plato__texto {
		padding: 12px 12px 14px;
	}

	.mc-plato__nombre {
		font-size: 16px;
	}

	.mc-plato__desc {
		font-size: 13px;
	}

	.mc-info__celda {
		min-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-plato,
	.mc-boton {
		transition: none;
	}
}