/* ==========================================================================
   MÁSVILLA — Bloques compartidos encima del footer
   1. Tira de Instagram (fondo crema)
   2. Franja de newsletter (fondo verde)
   ========================================================================== */

/* ---------- 1. Instagram ---------- */
.mv-ig {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--c-crema);
}

.mv-ig__titulo {
	margin-bottom: clamp(20px, 2.4vw, 32px);
}
.mv-ig__titulo a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.mv-ig__titulo a:hover,
.mv-ig__titulo a:focus-visible { color: var(--c-naranja); }

.mv-ig__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-ig__item a {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	aspect-ratio: 4 / 5; /* formato vertical de Instagram */
	padding: 20px;
	border: 1px solid rgba(35, 35, 35, .35);
	color: var(--c-crema);
	text-decoration: none;
	overflow: hidden;
	transition: transform .4s var(--ease);
}
.mv-ig__item a:hover,
.mv-ig__item a:focus-visible { transform: translateY(-4px); }

.mv-ig__item--verde a   { background: var(--c-verde); }
.mv-ig__item--azul a    { background: var(--c-azul); }
.mv-ig__item--naranja a { background: var(--c-naranja); }

/* Icono de Instagram en círculo blanco, arriba a la derecha (como en Figma) */
.mv-ig__icono {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-negro);
}
.mv-ig__icono svg { width: 18px; height: 18px; }

.mv-ig__handle {
	font-family: var(--f-museo);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: .06em;
	opacity: .9;
}

/* Feed real (Smash Balloon): limpiar márgenes del plugin */
.mv-ig__feed #sb_instagram { padding: 0 !important; }
.mv-ig__feed #sb_instagram .sbi_header,
.mv-ig__feed #sb_instagram #sbi_load { display: none !important; }

@media (max-width: 700px) {
	.mv-ig__grid {
		grid-template-columns: repeat(3, 72%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.mv-ig__item { scroll-snap-align: start; }
}

/* ---------- 2. Newsletter ---------- */
.mv-news {
	background: var(--c-verde);
	color: var(--c-crema);
	padding-block: clamp(56px, 6vw, 72px);
}

.mv-news__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mv-news__titulo {
	max-width: 900px;
	margin-bottom: clamp(24px, 3vw, 36px);
	color: var(--c-crema);
	text-wrap: balance;
}

.mv-news__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 654px; /* 412 campo + 41 separación + botón */
}

.mv-news__fila {
	display: flex;
	align-items: stretch;
	gap: clamp(16px, 2.7vw, 41px);
	width: 100%;
}

.mv-news__email {
	flex: 1 1 auto;
	min-width: 0;
	height: 55px;
	padding: 0 28px;
	border: 1px solid var(--c-crema);
	border-radius: 0;
	background: transparent;
	color: var(--c-crema);
	font-family: var(--f-raleway);
	font-weight: 400;
	font-size: clamp(16px, 1rem + .25vw, 20px);
	letter-spacing: .02em;
	-webkit-appearance: none;
	appearance: none;
}
.mv-news__email::placeholder { color: var(--c-crema); opacity: .85; }
.mv-news__email:focus { outline: 2px solid var(--c-crema); outline-offset: 2px; }

.mv-news__boton { flex: none; }
/* En fondo verde, el hover del botón naranja pasa a contorno naranja: mejor contorno crema */
.mv-news .btn--naranja:hover,
.mv-news .btn--naranja:focus-visible { border-color: var(--c-crema); color: var(--c-crema); }

/* Casilla legal: cuadrado de 12px con borde crema (Figma) */
.mv-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-family: var(--f-museo);
	font-weight: 300;
	font-size: 12px;
	line-height: 26px;
	letter-spacing: .2em;
	text-align: left;
}
.mv-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.mv-check__caja {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	border: 1px solid currentColor;
}
.mv-check input:checked + .mv-check__caja::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: currentColor;
}
.mv-check input:focus-visible + .mv-check__caja {
	outline: 2px solid var(--c-crema);
	outline-offset: 2px;
}
.mv-check a { color: inherit; }

.mv-news__mensaje {
	min-height: 26px;
	font-family: var(--f-museo);
	font-size: 14px;
	letter-spacing: .04em;
}
.mv-news__mensaje.is-error { color: var(--c-amarillo); }

@media (max-width: 600px) {
	.mv-news__fila { flex-direction: column; gap: 14px; }
	.mv-news__boton { width: 100%; }
}