/* =====================================================================
   Microbial Factory · Portada
   Todo está dentro de .mfp-root para no pisar los estilos del tema.
   ================================================================== */

.mfp-root {
	--mfp-rojo: #B5121B;
	--mfp-rojo-osc: #7C0D13;
	--mfp-naranja: #F7A600;
	--mfp-verde: #79B12B;
	--mfp-tinta: #231311;
	--mfp-crema: #FFF7EF;
	--mfp-radio: 20px;
	--mfp-radio-sm: 10px;

	--mfp-linea: rgba(35, 19, 17, .10);
	--mfp-suave: rgba(35, 19, 17, .62);
	--mfp-sombra: 0 18px 48px -24px rgba(35, 19, 17, .38);
	--mfp-sombra-alta: 0 26px 60px -26px rgba(124, 13, 19, .45);
	--mfp-esp: clamp(64px, 7vw, 112px);
	--mfp-ancho: 1200px;

	--mfp-display: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
	--mfp-cuerpo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	position: relative;
	font-family: var(--mfp-cuerpo);
	color: var(--mfp-tinta);
	background: var(--mfp-crema);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	isolation: isolate;
}

.mfp-root *,
.mfp-root *::before,
.mfp-root *::after {
	box-sizing: border-box;
}

.mfp-root img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ancho completo aunque Elementor limite el contenedor -------------- */
.mfp-ancho-completo {
	width: var(--mfp-vw, 100vw);
	max-width: var(--mfp-vw, 100vw);
	margin-left: calc(50% - (var(--mfp-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--mfp-vw, 100vw) / 2));
}

.mfp-contenedor {
	width: 100%;
	max-width: var(--mfp-ancho);
	margin: 0 auto;
	padding: 0 24px;
}

.mfp-seccion {
	position: relative;
	padding: var(--mfp-esp) 0;
}

/* Greca andina del logo -------------------------------------------- */
.mfp-greca-mini {
	display: inline-block;
	width: 26px;
	height: 10px;
	margin-right: 10px;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url(../img/greca.svg) left center / auto 10px repeat-x;
	mask: url(../img/greca.svg) left center / auto 10px repeat-x;
	opacity: .9;
}

.mfp-root:not(.mfp-con-greca) .mfp-greca-mini {
	display: none;
}

.mfp-con-greca .mfp-card-cinta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background-color: var(--mfp-naranja);
	-webkit-mask: url(../img/greca.svg) left center / auto 8px repeat-x;
	mask: url(../img/greca.svg) left center / auto 8px repeat-x;
}

/* Tipografía -------------------------------------------------------- */
.mfp-root h1,
.mfp-root h2,
.mfp-root h3 {
	font-family: var(--mfp-display);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0;
	color: inherit;
}

.mfp-titulo {
	font-size: clamp(28px, 3.2vw, 44px);
}

.mfp-titulo em {
	font-style: normal;
	color: var(--mfp-rojo);
}

.mfp-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--mfp-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mfp-rojo);
	margin-bottom: 14px;
}

.mfp-eyebrow--claro {
	color: var(--mfp-naranja);
}

.mfp-cabecera {
	max-width: 720px;
	margin-bottom: 48px;
}

.mfp-cabecera--centro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.mfp-cabecera-desc {
	margin: 16px 0 0;
	color: var(--mfp-suave);
	font-size: 17px;
}

/* Botones ----------------------------------------------------------- */
.mfp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: var(--mfp-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .01em;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.mfp-btn:hover {
	transform: translateY(-2px);
}

.mfp-btn:focus-visible {
	outline: 3px solid var(--mfp-naranja);
	outline-offset: 3px;
}

.mfp-btn--primario {
	background: var(--mfp-rojo);
	color: #fff;
	box-shadow: 0 14px 30px -14px rgba(181, 18, 27, .85);
}

.mfp-btn--primario:hover {
	background: var(--mfp-rojo-osc);
	color: #fff;
}

.mfp-btn--fantasma {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(4px);
}

.mfp-btn--fantasma:hover {
	background: #fff;
	color: var(--mfp-rojo-osc);
	border-color: #fff;
}

.mfp-btn--oscuro {
	background: var(--mfp-tinta);
	color: #fff;
	flex: 0 0 auto;
}

.mfp-btn--oscuro:hover {
	background: #000;
	color: #fff;
}

.mfp-btn--whats {
	background: var(--mfp-verde);
	color: #fff;
	margin-top: 26px;
}

.mfp-btn--whats:hover {
	background: #5f8f1f;
	color: #fff;
}

.mfp-btn--bloque {
	width: 100%;
	margin-top: 6px;
}

.mfp-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.mfp-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-family: var(--mfp-display);
	font-weight: 800;
	font-size: 14px;
	color: var(--mfp-rojo);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: gap .18s ease, border-color .18s ease;
}

.mfp-enlace:hover {
	gap: 14px;
	border-color: var(--mfp-naranja);
	color: var(--mfp-rojo);
}

.mfp-flecha {
	width: 18px;
	height: 18px;
}

/* Ondas divisorias -------------------------------------------------- */
.mfp-onda {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(40px, 5vw, 82px);
	line-height: 0;
	pointer-events: none;
	z-index: 2;
}

.mfp-onda svg {
	width: 100%;
	height: 100%;
	display: block;
}

.mfp-onda--crema svg path {
	fill: var(--mfp-crema);
}

.mfp-onda--inv {
	bottom: auto;
	top: -1px;
	transform: rotate(180deg);
}

/* =====================================================================
   Portada / slider
   ================================================================== */
.mfp-hero {
	position: relative;
	/* El alto ya no depende solo de vh: se acota entre 600px y 880px para que
	   en laptops de pantalla baja el contenido no quede aplastado. */
	height: auto;
	min-height: clamp(600px, var(--mfp-hero-alto, 86vh), 880px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--mfp-tinta);
}

.mfp-hero-pista {
	position: absolute;
	inset: 0;
}

.mfp-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.06);
	transition: opacity .9s ease, transform 7s linear, visibility 0s linear .9s;
}

.mfp-slide.is-activa {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: opacity .9s ease, transform 8s linear, visibility 0s;
	z-index: 1;
}

.mfp-slide-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	background: var(--mfp-tinta);
}

/* Con video no aplicamos el zoom lento: deformaría el encuadre. */
.mfp-slide--video {
	transform: none;
	transition: opacity .9s ease, visibility 0s linear .9s;
}

.mfp-slide--video.is-activa {
	transform: none;
	transition: opacity .9s ease, visibility 0s;
}

.mfp-slide-velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: var(--mfp-velo, 1);
	background:
		linear-gradient(102deg, rgba(35, 19, 17, .92) 0%, rgba(35, 19, 17, .70) 42%, rgba(124, 13, 19, .34) 78%, rgba(124, 13, 19, .22) 100%),
		linear-gradient(180deg, rgba(35, 19, 17, .45) 0%, rgba(35, 19, 17, 0) 32%);
}

.mfp-slide-inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 1.6vw, 22px);
	/* Aire arriba y espacio abajo reservado para puntos, pausa y onda. */
	padding-top: clamp(56px, 7vh, 96px);
	padding-bottom: clamp(140px, 16vh, 200px);
	color: #fff;
}

/* El gap del flex ya marca el ritmo: anulamos los márgenes heredados. */
.mfp-slide-inner > * {
	margin-top: 0;
	margin-bottom: 0;
}

.mfp-hero-titulo {
	/* 15ch obligaba a partir el titular en 3 lineas muy juntas. */
	max-width: 22ch;
	font-size: clamp(32px, 4.4vw, 62px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: balance;
}

.mfp-hero-titulo em {
	font-style: normal;
	color: var(--mfp-naranja);
}

.mfp-hero-texto {
	max-width: 48ch;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
}

.mfp-hero-flecha {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .38);
	background: rgba(35, 19, 17, .32);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color .2s ease, border-color .2s ease;
}

.mfp-hero-flecha svg {
	width: 22px;
	height: 22px;
}

.mfp-hero-flecha:hover {
	background: var(--mfp-rojo);
	border-color: var(--mfp-rojo);
}

.mfp-hero-flecha--prev {
	left: clamp(10px, 2vw, 28px);
}

.mfp-hero-flecha--next {
	right: clamp(10px, 2vw, 28px);
}

.mfp-hero-puntos {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: clamp(64px, 7vw, 96px);
	z-index: 4;
	display: flex;
	gap: 10px;
}

.mfp-punto {
	width: 30px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}

.mfp-punto.is-activo {
	width: 52px;
	background: var(--mfp-naranja);
}

/* Pausa del movimiento (video + rotación) --------------------------- */
.mfp-hero-pausa {
	position: absolute;
	left: clamp(16px, 3vw, 34px);
	bottom: clamp(64px, 7vw, 96px);
	z-index: 4;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .38);
	background: rgba(35, 19, 17, .32);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color .2s ease, border-color .2s ease;
}

.mfp-hero-pausa:hover {
	background: var(--mfp-rojo);
	border-color: var(--mfp-rojo);
}

.mfp-hero-pausa svg {
	width: 17px;
	height: 17px;
}

.mfp-hero-pausa .mfp-ico-play {
	display: none;
}

.mfp-hero-pausa[data-estado="pausado"] .mfp-ico-pausa {
	display: none;
}

.mfp-hero-pausa[data-estado="pausado"] .mfp-ico-play {
	display: block;
}

/* =====================================================================
   Cifras
   ================================================================== */
.mfp-stats {
	position: relative;
	z-index: 3;
	padding: var(--mfp-esp) 0 0;
}

.mfp-stats--montada {
	padding-top: 0;
	margin-top: clamp(-90px, -6vw, -50px);
}

.mfp-stats-caja {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	background: #fff;
	border-radius: var(--mfp-radio);
	box-shadow: var(--mfp-sombra);
	padding: clamp(24px, 3vw, 38px) clamp(16px, 2vw, 32px);
	border: 1px solid var(--mfp-linea);
}

.mfp-stat {
	position: relative;
	text-align: center;
	padding: 6px 12px;
}

.mfp-stat + .mfp-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: var(--mfp-linea);
}

.mfp-stat-num {
	display: block;
	font-family: var(--mfp-display);
	font-weight: 900;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1;
	color: var(--mfp-rojo);
}

.mfp-stat-num i {
	font-style: normal;
	color: var(--mfp-naranja);
}

.mfp-stat-txt {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mfp-suave);
}

/* =====================================================================
   Portafolio
   ================================================================== */
.mfp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 26px;
}

.mfp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mfp-linea);
	border-radius: var(--mfp-radio);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.mfp-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--mfp-sombra);
}

.mfp-card-foto {
	position: relative;
	height: 196px;
	background: #e9ded4 center / cover no-repeat;
}

.mfp-card-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 28px;
}

.mfp-card-cuerpo h3 {
	font-size: 21px;
	margin-bottom: 10px;
}

.mfp-card-cuerpo p {
	margin: 0;
	font-size: 15px;
	color: var(--mfp-suave);
}

.mfp-card-cuerpo .mfp-enlace {
	margin-top: auto;
	padding-top: 18px;
}

/* =====================================================================
   Destacados
   ================================================================== */
.mfp-destacados {
	background:
		radial-gradient(120% 100% at 12% 0%, rgba(247, 166, 0, .22) 0%, rgba(247, 166, 0, 0) 55%),
		linear-gradient(155deg, var(--mfp-rojo) 0%, var(--mfp-rojo-osc) 100%);
	color: #fff;
	padding: calc(var(--mfp-esp) + 26px) 0;
	overflow: hidden;
}

.mfp-destacados .mfp-titulo,
.mfp-destacados .mfp-cabecera-desc {
	color: #fff;
}

.mfp-destacados .mfp-titulo em {
	color: var(--mfp-naranja);
}

.mfp-destacados .mfp-cabecera {
	margin-bottom: 0;
}

.mfp-destacados .mfp-cabecera-desc {
	color: rgba(255, 255, 255, .82);
}

.mfp-destacados-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
}

.mfp-carrusel-nav {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.mfp-carrusel-btn {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .4);
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.mfp-carrusel-btn svg {
	width: 20px;
	height: 20px;
}

.mfp-carrusel-btn:hover {
	background: #fff;
	color: var(--mfp-rojo);
}

.mfp-carrusel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 10px;
	scrollbar-width: none;
}

.mfp-carrusel::-webkit-scrollbar {
	display: none;
}

.mfp-prod {
	flex: 0 0 clamp(268px, 31%, 366px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--mfp-tinta);
	border-radius: var(--mfp-radio);
	overflow: hidden;
	padding: 0;
	box-shadow: var(--mfp-sombra-alta);
	transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}

.mfp-prod:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 64px -28px rgba(35, 19, 17, .55);
}

/* Foto a sangre: ocupa todo el ancho de la tarjeta.
   El fondo desenfocado rellena los laterales vacios y la imagen real va
   en object-fit:contain, asi el envase nunca se deforma ni se recorta. */
.mfp-prod-foto {
	position: relative;
	height: clamp(210px, 22vw, 250px);
	overflow: hidden;
	background: linear-gradient(160deg, #FFFDFB 0%, #F4EDE6 100%);
}

.mfp-prod-foto-fondo {
	position: absolute;
	inset: -12%;
	background-size: cover;
	background-position: center;
	filter: blur(26px) saturate(1.15);
	transform: scale(1.15);
	opacity: .62;
}

.mfp-prod-foto-img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 14px 10px;
	filter: drop-shadow(0 16px 22px rgba(35, 19, 17, .28));
	transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}

.mfp-prod:hover .mfp-prod-foto-img {
	transform: scale(1.06);
}

/* Velo suave para que el texto blanco del chip no compita con la foto. */
.mfp-prod-foto-brillo {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 34%),
		linear-gradient(0deg, rgba(35, 19, 17, .10) 0%, rgba(35, 19, 17, 0) 26%);
}

.mfp-prod-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 24px 26px;
}

.mfp-chip {
	align-self: flex-start;
	font-family: var(--mfp-display);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mfp-rojo);
	background: rgba(181, 18, 27, .08);
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.mfp-prod h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.mfp-prod p {
	margin: 0;
	font-size: 15px;
	color: var(--mfp-suave);
}

.mfp-prod .mfp-enlace {
	margin-top: auto;
	padding-top: 18px;
}

.mfp-prod-cuerpo h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

/* =====================================================================
   Nosotros
   ================================================================== */
.mfp-nosotros {
	background: var(--mfp-crema);
}

.mfp-nosotros-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: center;
}

.mfp-nosotros-p {
	margin: 18px 0 0;
	font-size: 17px;
	color: var(--mfp-suave);
}

.mfp-lista {
	list-style: none;
	margin: 28px 0 32px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.mfp-lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15.5px;
	font-weight: 500;
}

.mfp-lista svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(121, 177, 43, .14);
	color: var(--mfp-verde);
	margin-top: 1px;
}

.mfp-figura {
	position: relative;
	margin: 0;
	border-radius: var(--mfp-radio);
	overflow: hidden;
	box-shadow: var(--mfp-sombra);
}

.mfp-figura img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mfp-nosotros-media {
	position: relative;
}

.mfp-nosotros-media::before {
	content: "";
	position: absolute;
	right: -16px;
	bottom: -16px;
	width: 62%;
	height: 62%;
	border: 3px solid var(--mfp-naranja);
	border-radius: var(--mfp-radio);
	z-index: -1;
}

.mfp-video {
	position: relative;
	border-radius: var(--mfp-radio);
	overflow: hidden;
	box-shadow: var(--mfp-sombra);
	aspect-ratio: 16 / 9;
}

.mfp-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =====================================================================
   Cobertura
   ================================================================== */
.mfp-cobertura {
	background: #fff;
}

.mfp-cobertura-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: center;
}

.mfp-cobertura.tiene-mapa .mfp-cobertura-grid {
	grid-template-columns: 1fr .8fr;
}

.mfp-cobertura .mfp-cabecera {
	margin-bottom: 30px;
}

.mfp-regiones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mfp-region {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 14px;
	border-radius: 999px;
	background: var(--mfp-crema);
	border: 1px solid var(--mfp-linea);
	font-size: 14.5px;
	font-weight: 600;
}

.mfp-region i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mfp-naranja);
}

.mfp-cobertura-mapa img {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

/* =====================================================================
   Galería
   ================================================================== */
.mfp-galeria {
	background: var(--mfp-crema);
	padding-bottom: clamp(48px, 5vw, 78px);
	overflow: hidden;
}

/* Cinta continua: una sola linea que se desliza de derecha a izquierda.
   Sin filas incompletas ni huecos debajo. */
.mfp-cinta {
	position: relative;
	margin-top: clamp(28px, 4vw, 48px);
	padding: 6px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.mfp-cinta-pista {
	display: flex;
	gap: clamp(12px, 1.4vw, 20px);
	width: max-content;
	animation: mfp-desliz var(--mfp-cinta-dur, 40s) linear infinite;
	will-change: transform;
}

/* Se desplaza exactamente el bloque repetido, por eso el bucle es invisible. */
@keyframes mfp-desliz {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-100% / var(--mfp-cinta-vueltas, 2)), 0, 0);
	}
}

/* Pausa al pasar el mouse o al enfocar con teclado. */
.mfp-cinta:hover .mfp-cinta-pista,
.mfp-cinta:focus-within .mfp-cinta-pista {
	animation-play-state: paused;
}

/* Degradados laterales que funden la cinta con el fondo crema. */
.mfp-cinta-borde {
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(40px, 7vw, 120px);
	z-index: 3;
	pointer-events: none;
}

.mfp-cinta-borde--izq {
	left: 0;
	background: linear-gradient(90deg, var(--mfp-crema) 0%, rgba(255, 247, 239, 0) 100%);
}

.mfp-cinta-borde--der {
	right: 0;
	background: linear-gradient(270deg, var(--mfp-crema) 0%, rgba(255, 247, 239, 0) 100%);
}

.mfp-cinta-item {
	flex: 0 0 clamp(230px, 22vw, 320px);
	height: clamp(180px, 17vw, 240px);
	aspect-ratio: auto;
}

.mfp-cinta-lupa {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	opacity: 0;
	color: var(--mfp-rojo);
	background: rgba(255, 247, 239, .28);
	backdrop-filter: blur(2px);
	transition: opacity .3s ease;
	pointer-events: none;
}

.mfp-cinta-lupa svg {
	width: 26px;
	height: 26px;
	padding: 12px;
	box-sizing: content-box;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 24px -10px rgba(35, 19, 17, .6);
	transform: scale(.86);
	transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}

.mfp-cinta-item:hover .mfp-cinta-lupa,
.mfp-cinta-item:focus-visible .mfp-cinta-lupa {
	opacity: 1;
}

.mfp-cinta-item:hover .mfp-cinta-lupa svg,
.mfp-cinta-item:focus-visible .mfp-cinta-lupa svg {
	transform: scale(1);
}

.mfp-mosaico-item {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: var(--mfp-radio-sm);
	overflow: hidden;
	cursor: zoom-in;
	background: #e9ded4;
	aspect-ratio: 4 / 3;
	box-shadow: 0 14px 30px -20px rgba(35, 19, 17, .55);
	transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}

.mfp-mosaico-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 44px -22px rgba(35, 19, 17, .6);
}

.mfp-mosaico-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.mfp-mosaico-item:hover img {
	transform: scale(1.07);
}

.mfp-mosaico-pie {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 16px 12px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, rgba(35, 19, 17, 0), rgba(35, 19, 17, .78));
}

.mfp-visor {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 5vh 5vw;
	background: rgba(20, 10, 9, .93);
}

.mfp-visor img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--mfp-radio-sm);
}

.mfp-visor-cerrar {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 46px;
	height: 46px;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* =====================================================================
   Noticias
   ================================================================== */
.mfp-noticias {
	background: #fff;
}

.mfp-noticias-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 24px;
}

.mfp-nota {
	display: flex;
	flex-direction: column;
	border-radius: var(--mfp-radio);
	overflow: hidden;
	border: 1px solid var(--mfp-linea);
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}

.mfp-nota:hover {
	transform: translateY(-5px);
	box-shadow: var(--mfp-sombra);
}

.mfp-nota-foto {
	display: block;
	height: 172px;
	background: #e9ded4 center / cover no-repeat;
}

.mfp-nota-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 26px;
}

.mfp-nota-fecha {
	font-family: var(--mfp-display);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mfp-naranja);
	margin-bottom: 8px;
}

.mfp-nota h3 {
	font-size: 18px;
	line-height: 1.25;
	margin-bottom: 10px;
}

.mfp-nota h3 a {
	color: inherit;
	text-decoration: none;
}

.mfp-nota h3 a:hover {
	color: var(--mfp-rojo);
}

.mfp-nota p {
	margin: 0;
	font-size: 14.5px;
	color: var(--mfp-suave);
}

.mfp-nota .mfp-enlace {
	margin-top: auto;
	padding-top: 16px;
}

.mfp-nota-foto--vacia {
	background:
		linear-gradient(135deg, rgba(181, 18, 27, .92) 0%, rgba(124, 13, 19, .92) 100%);
	position: relative;
}

.mfp-nota-foto--vacia::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 96px;
	height: 18px;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, .5);
	-webkit-mask: url(../img/greca.svg) center / auto 18px repeat-x;
	mask: url(../img/greca.svg) center / auto 18px repeat-x;
}

.mfp-noticias-pie {
	margin-top: 42px;
	text-align: center;
}

.mfp-btn--linea {
	color: var(--mfp-rojo);
	border-color: rgba(181, 18, 27, .35);
	background: transparent;
}

.mfp-btn--linea:hover {
	background: var(--mfp-rojo);
	border-color: var(--mfp-rojo);
	color: #fff;
}

.mfp-aviso-admin {
	max-width: 720px;
	margin: 0 auto;
	padding: 18px 22px;
	border-radius: var(--mfp-radio-sm);
	background: #FFF6E3;
	border-left: 4px solid var(--mfp-naranja);
	font-size: 14.5px;
	color: #6b5a2e;
}

/* =====================================================================
   Contacto
   ================================================================== */
.mfp-contacto {
	background: var(--mfp-crema);
}

.mfp-contacto-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: stretch;
}

.mfp-contacto-info {
	position: relative;
	padding: clamp(30px, 4vw, 52px);
	border-radius: var(--mfp-radio);
	color: #fff;
	overflow: hidden;
	background:
		radial-gradient(110% 90% at 90% 10%, rgba(247, 166, 0, .25) 0%, rgba(247, 166, 0, 0) 60%),
		linear-gradient(160deg, var(--mfp-rojo) 0%, var(--mfp-rojo-osc) 100%);
}

.mfp-contacto-info .mfp-titulo {
	color: #fff;
}

.mfp-contacto-info .mfp-titulo em {
	color: var(--mfp-naranja);
}

.mfp-contacto-desc {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, .84);
	font-size: 16px;
}

.mfp-datos {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.mfp-datos li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 15.5px;
	color: rgba(255, 255, 255, .95);
}

.mfp-datos a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.mfp-datos a:hover {
	color: var(--mfp-naranja);
	border-color: var(--mfp-naranja);
}

.mfp-dato-ico {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.mfp-dato-ico svg {
	width: 21px;
	height: 21px;
}

.mfp-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.mfp-redes a {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, .4);
	transition: background-color .2s ease, color .2s ease;
}

.mfp-redes a:hover {
	background: #fff;
	color: var(--mfp-rojo);
}

.mfp-contacto-form {
	background: #fff;
	border: 1px solid var(--mfp-linea);
	border-radius: var(--mfp-radio);
	padding: clamp(26px, 3.4vw, 44px);
	box-shadow: var(--mfp-sombra);
}

.mfp-form-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mfp-form label {
	display: block;
	margin-bottom: 16px;
}

.mfp-form label span {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mfp-tinta);
}

.mfp-form input,
.mfp-form textarea {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--mfp-tinta);
	background: #FDFAF7;
	border: 1.5px solid #EBDFD4;
	border-radius: var(--mfp-radio-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.mfp-form textarea {
	resize: vertical;
	min-height: 110px;
}

.mfp-form input:focus,
.mfp-form textarea:focus {
	outline: none;
	border-color: var(--mfp-rojo);
	box-shadow: 0 0 0 4px rgba(181, 18, 27, .12);
}

.mfp-form .tiene-error input,
.mfp-form .tiene-error textarea {
	border-color: var(--mfp-rojo);
	background: #FFF4F3;
}

.mfp-error-campo {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mfp-rojo);
}

.mfp-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mfp-legal {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--mfp-suave);
	text-align: center;
}

.mfp-form-aviso {
	margin-top: 16px;
	padding: 0;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: var(--mfp-radio-sm);
}

.mfp-form-aviso.es-ok,
.mfp-form-aviso.es-error {
	padding: 14px 18px;
}

.mfp-form-aviso.es-ok {
	background: rgba(121, 177, 43, .12);
	color: #4d7a13;
}

.mfp-form-aviso.es-error {
	background: rgba(181, 18, 27, .09);
	color: var(--mfp-rojo);
}

.mfp-mapa {
	margin-top: 30px;
	border-radius: var(--mfp-radio);
	overflow: hidden;
	border: 1px solid var(--mfp-linea);
	height: 340px;
}

.mfp-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* =====================================================================
   Cierre
   ================================================================== */
.mfp-cta {
	background: linear-gradient(100deg, var(--mfp-naranja) 0%, #FFC24D 100%);
	padding: clamp(40px, 5vw, 66px) 0;
	color: var(--mfp-tinta);
}

.mfp-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.mfp-cta h2 {
	font-size: clamp(24px, 2.6vw, 34px);
	max-width: 24ch;
}

.mfp-cta p {
	margin: 10px 0 0;
	max-width: 56ch;
	font-size: 16px;
	color: rgba(35, 19, 17, .78);
}

/* =====================================================================
   Animaciones
   ================================================================== */
.mfp-anima .mfp-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.22, .9, .3, 1);
}

.mfp-anima .mfp-reveal.es-visible {
	opacity: 1;
	transform: none;
}

/* =====================================================================
   Responsive
   ================================================================== */
@media (max-width: 1024px) {
	.mfp-nosotros-grid,
	.mfp-contacto-grid,
	.mfp-cobertura.tiene-mapa .mfp-cobertura-grid {
		grid-template-columns: 1fr;
	}

	.mfp-nosotros-media {
		order: -1;
	}

	.mfp-cobertura-mapa {
		max-width: 380px;
		margin: 0 auto;
	}

	.mfp-prod {
		flex-basis: 300px;
	}
}

@media (max-width: 780px) {
	.mfp-stats-caja {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 8px;
	}

	.mfp-stat:nth-child(3)::before {
		display: none;
	}

	.mfp-destacados-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.mfp-carrusel-nav {
		display: none;
	}

	.mfp-hero-flecha {
		display: none;
	}

	.mfp-slide-inner {
		text-align: left;
	}
}

@media (max-width: 560px) {
	.mfp-root {
		font-size: 15.5px;
	}

	.mfp-contenedor {
		padding: 0 18px;
	}

	.mfp-hero {
		min-height: clamp(540px, 88vh, 680px);
	}

	.mfp-botones .mfp-btn {
		flex: 1 1 100%;
	}

	.mfp-form-fila {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mfp-stats--montada {
		margin-top: -46px;
	}

	.mfp-hero-pausa {
		width: 38px;
		height: 38px;
		bottom: auto;
		top: clamp(14px, 4vw, 24px);
		left: auto;
		right: clamp(14px, 4vw, 24px);
	}

	.mfp-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.mfp-prod {
		flex-basis: 82%;
	}

	.mfp-cinta-item {
		flex: 0 0 68vw;
		height: 46vw;
	}
}


/* =====================================================================
   Portada · ajustes finos de legibilidad del hero
   ================================================================== */

/* Laptops y tablets en horizontal: el titular necesita mas ancho util. */
@media (max-width: 1200px) {
	.mfp-hero-titulo {
		max-width: 20ch;
		font-size: clamp(30px, 5vw, 52px);
	}

	.mfp-hero-texto {
		max-width: 44ch;
	}
}

/* Tablet vertical. */
@media (max-width: 900px) {
	.mfp-hero {
		min-height: clamp(560px, 78vh, 720px);
	}

	.mfp-hero-titulo {
		max-width: 18ch;
		font-size: clamp(30px, 6vw, 44px);
		line-height: 1.16;
	}
}

/* Movil. */
@media (max-width: 560px) {
	.mfp-hero-titulo {
		max-width: 16ch;
		font-size: clamp(28px, 8.4vw, 38px);
		line-height: 1.18;
	}

	.mfp-hero-texto {
		max-width: 100%;
		font-size: 15.5px;
	}

	.mfp-slide-inner {
		padding-top: clamp(64px, 12vh, 110px);
		padding-bottom: clamp(120px, 18vh, 170px);
	}
}

/* CAUSA REAL EN MUCHOS EQUIPOS: pantallas de poca ALTURA (laptops 768px,
   o cualquier viewport con barra de admin + cabecera del tema encima).
   Aqui no reducimos el alto: reducimos el contenido para que respire. */
@media (max-height: 800px) and (min-width: 901px) {
	.mfp-hero-titulo {
		font-size: clamp(30px, 3.6vw, 48px);
	}

	.mfp-hero-texto {
		font-size: 16px;
	}

	.mfp-slide-inner {
		gap: 14px;
		padding-top: 48px;
		padding-bottom: 130px;
	}

	.mfp-botones .mfp-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

@media (max-height: 660px) and (min-width: 901px) {
	.mfp-hero {
		min-height: 580px;
	}

	.mfp-hero-titulo {
		font-size: clamp(28px, 3.2vw, 40px);
	}

	.mfp-hero-texto {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}


/* Cinta de galeria: ajustes responsive y accesibilidad ---------------- */
@media (max-width: 900px) and (min-width: 561px) {
	.mfp-cinta-item {
		flex: 0 0 clamp(200px, 42vw, 260px);
		height: clamp(150px, 32vw, 200px);
	}
}

/* Sin animacion: la cinta pasa a ser una tira que se arrastra a mano. */
@media (prefers-reduced-motion: reduce) {
	.mfp-cinta {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mfp-cinta-pista {
		animation: none !important;
		width: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

	.mfp-cinta-item {
		scroll-snap-align: start;
	}
}

/* En pantallas tactiles tambien se puede arrastrar si el usuario quiere. */
@media (hover: none) {
	.mfp-cinta-lupa {
		display: none;
	}
}

/* Accesibilidad ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mfp-root *,
	.mfp-root *::before,
	.mfp-root *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.mfp-anima .mfp-reveal {
		opacity: 1;
		transform: none;
	}

	.mfp-slide {
		transform: none;
	}
}

/* Convivencia con Elementor y temas ---------------------------------- */
.elementor-widget-shortcode .mfp-root,
.elementor-shortcode .mfp-root {
	margin-bottom: 0;
}

.mfp-root .mfp-btn,
.mfp-root .mfp-enlace {
	box-shadow: none;
}

.mfp-root .mfp-btn--primario {
	box-shadow: 0 14px 30px -14px rgba(181, 18, 27, .85);
}