/*
 * La portada (11 E1, inc/portada.php y assets/js/portada.js).
 *
 * La del prototipo que eligió el usuario: foto de campaña y, debajo, valor,
 * producto e imagen alternados. Letra de la marca en los títulos, Montserrat
 * en lo demás; sin radios.
 */

/*
 * Medidas comunes en toda la página, no solo en la portada: los bloques se
 * usan también en «Diseñadores» y «Cómo funciona», y ahí, sin ellas, el
 * bloque perdía sus márgenes laterales (visto en staging).
 */
/* En `body`: la variable de margen de WordPress se define ahí, no en `:root` (con `:root` salía siempre el valor por defecto). */
body {
	--vl-linea: color-mix(in srgb, var(--wp--preset--color--custom-negro) 12%, transparent);
	--vl-gris: var(--wp--preset--color--custom-gris-texto);
	--vl-lado: var(--wp--style--root--padding-left, 20px);
}

.vl-portada {
	margin-top: 0 !important;
}

/* Los grupos «de flujo» de WordPress meten su margen entre bloques: aquí cada sección lleva el suyo. */
.vl-portada > * {
	margin-block: 0 !important;
}

/* El mismo borde que el contenido ancho y la cabecera (`--vl-borde`, main.css). */
.vl-portada__ancho {
	padding-inline: var(--vl-borde);
}

.vl-portada__seccion {
	padding-block: 56px;
}

@media (min-width: 900px) {
	.vl-portada__seccion {
		padding-block: 88px;
	}
}

.vl-portada__seccion + .vl-portada__seccion {
	padding-top: 0;
}

.vl-portada__caps {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vl-portada__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.vl-portada__tema {
	display: grid;
	gap: 6px;
}

.vl-portada__tema p {
	max-width: 52ch;
	margin: 0;
	color: var(--vl-gris);
}

.vl-portada__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.625rem, 3vw, 2.375rem);
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}

.vl-portada__enlace {
	color: inherit;
	font-size: 0.8125rem;
	text-underline-offset: 4px;
	white-space: nowrap;
}

/* `.vl-boton-claro` está en main.css: lo usan también las láminas de la tienda. */

/* ── Foto de campaña ───────────────────────────────────────────────────── */

/*
 * La foto empieza arriba del todo, debajo de la cabecera flotante. En el
 * ordenador la página deja 60 px bajo la cabecera (main.css, para que no tape
 * migas ni títulos); aquí la foto los recupera: si no, la foto empezaba a
 * mitad de la cabecera y cortaba el logo (visto en la tienda real).
 */
@media (min-width: 782px) {
	.vl-portada > .vl-heroe:first-child {
		margin-top: calc(-1 * var(--vl-hueco-cabecera)) !important;
	}
}

.vl-heroe {
	position: relative;
	display: grid;
	align-items: end;
	/*
	 * La pantalla entera, sin asomar el bloque siguiente (usuario, 2026-10-06:
	 * al 86 % del alto y con tope de 820 px se veía cortado). `svh` en el móvil: el alto
	 * con la barra del navegador a la vista, para que no quede tapada.
	 */
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--custom-negro);
}

.vl-heroe .vl-heroe__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.vl-heroe__pie {
	position: relative;
	padding-block: var(--vl-velo-aire) 40px;
	background: var(--vl-velo);
	color: var(--wp--preset--color--custom-blanco);
}

.vl-heroe__pie .vl-portada__ancho {
	display: grid;
	justify-items: start;
	gap: 16px;
}

.vl-heroe__titulo {
	max-width: 13ch;
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(2.5rem, 6.4vw, 5.75rem);
	font-weight: 400;
	line-height: 1;
	text-wrap: balance;
}

.vl-heroe__texto {
	max-width: 46ch;
	margin: 0;
}

.vl-heroe__credito {
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 0.875rem;
	font-style: italic;
	opacity: 0.85;
}

/* ── Estancias ─────────────────────────────────────────────────────────── */

.vl-estancias {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.vl-estancias {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}

.vl-estancia {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	max-width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--custom-beige);
	color: var(--wp--preset--color--custom-blanco);
	text-decoration: none;
}

.vl-estancia::after {
	content: "";
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(transparent, color-mix(in srgb, var(--wp--preset--color--custom-negro) 45%, transparent));
}

.vl-estancia .vl-estancia__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
	.vl-estancia:hover .vl-estancia__img {
		transform: scale(1.04);
	}
}

.vl-estancia__nombre {
	position: absolute;
	z-index: 1;
	bottom: 12px;
	left: 14px;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1;
}

.vl-estancia:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-primario);
	outline-offset: 3px;
}

/* ── Carriles de piezas ────────────────────────────────────────────────── */

.vl-carril {
	display: grid;
	grid-auto-columns: 62%;
	grid-auto-flow: column;
	gap: 10px;
	margin: 0 calc(var(--vl-lado) * -1);
	padding: 0 var(--vl-lado);
	list-style: none;
	overflow-x: auto;
	scroll-padding-inline: var(--vl-lado);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vl-carril::-webkit-scrollbar {
	display: none;
}

.vl-carril > li {
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.vl-carril {
		grid-auto-columns: calc((100% - 3 * 18px - 2 * var(--vl-lado)) / 4.4);
		gap: 18px;
	}
}

/*
 * Flechas del carrusel (portada.js), junto al enlace: finas, como las de las
 * láminas. Solo en el ordenador; en el móvil se desliza con el dedo.
 */
.vl-carril__mandos {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	align-self: center;
}

.vl-carril__mandos[hidden] {
	display: none;
}

.vl-portada__cabeza > .vl-portada__enlace {
	margin-left: auto;
}

.vl-carril__flecha {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--vl-linea);
	background: none;
	color: var(--wp--preset--color--custom-negro);
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.2s;
}

.vl-carril__flecha:hover:not(:disabled) {
	border-color: currentColor;
}

.vl-carril__flecha:disabled {
	cursor: default;
	opacity: 0.3;
}

.vl-carril__flecha svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

.vl-carril__flecha--antes svg {
	transform: scaleX(-1);
}

@media (max-width: 899px) {
	.vl-carril__mandos {
		display: none;
	}
}

/* ── Se fabrica para ti ───────────────────────────────────────────────── */

.vl-como {
	padding-block: 56px;
	background: var(--wp--preset--color--custom-beige);
}

@media (min-width: 900px) {
	.vl-como {
		padding-block: 88px;
	}
}

.vl-como__dentro {
	display: grid;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	.vl-como__dentro {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 72px;
	}
}

.vl-como__foto {
	aspect-ratio: 4 / 3;
	max-width: 100%;
	overflow: hidden;
}

.vl-como .vl-como__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vl-como__copia {
	display: grid;
	justify-items: start;
	gap: 18px;
	max-width: 520px;
}

.vl-como__copia .vl-portada__caps {
	color: var(--vl-gris);
}

.vl-como__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}

.vl-como__pasos {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.vl-como__pasos li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 6px;
	padding-block: 14px;
	border-top: 1px solid var(--vl-linea);
	font-size: 0.875rem;
}

.vl-como__pasos li::before {
	content: counter(paso);
	counter-increment: paso;
	color: var(--wp--preset--color--custom-primario);
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1;
}

.vl-como__pasos b {
	font-weight: 500;
}

/* ── Láminas a todo el ancho ───────────────────────────────────────────── */

.vl-laminas {
	position: relative;
	background: var(--wp--preset--color--custom-negro);
}

.vl-laminas__pista {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vl-laminas__pista::-webkit-scrollbar {
	display: none;
}

.vl-laminas__lamina {
	position: relative;
	display: grid;
	flex: 0 0 100%;
	align-items: end;
	min-height: min(78vh, 760px);
	overflow: hidden;
	scroll-snap-align: start;
}

.vl-laminas .vl-laminas__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vl-laminas__pie {
	position: relative;
	padding-block: var(--vl-velo-aire) 80px;
	background: var(--vl-velo);
	color: var(--wp--preset--color--custom-blanco);
}

.vl-laminas__pie .vl-portada__ancho {
	display: grid;
	justify-items: start;
	gap: 12px;
}

.vl-laminas__frase {
	max-width: 16ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.875rem, 4.4vw, 3.75rem);
	line-height: 1.04;
	text-wrap: balance;
}

/* Puntos y flechas: los pone portada.js. */
.vl-laminas__mandos {
	position: absolute;
	right: 0;
	bottom: 22px;
	left: 0;
	pointer-events: none;
}

.vl-laminas__mandos .vl-portada__ancho {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--custom-blanco);
}

.vl-laminas__puntos {
	display: flex;
	gap: 8px;
	margin-right: auto;
}

.vl-laminas__puntos i {
	width: 26px;
	height: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--custom-blanco) 40%, transparent);
	transition: background-color 0.3s;
}

.vl-laminas__puntos i.is-activa {
	background: var(--wp--preset--color--custom-blanco);
}

.vl-laminas__flecha {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-blanco) 50%, transparent);
	background: none;
	color: inherit;
	cursor: pointer;
	pointer-events: auto;
}

.vl-laminas__flecha svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

.vl-laminas__flecha--antes svg {
	transform: scaleX(-1);
}

.vl-laminas__flecha:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-blanco);
	outline-offset: 2px;
}

/* En el móvil se pasa deslizando: las flechas, fuera. */
@media (max-width: 899px) {
	.vl-laminas__flecha {
		display: none;
	}
}

/* ── Con nombre propio ─────────────────────────────────────────────────── */

.vl-firmadas {
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.vl-firmadas {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 18px;
	}

	.vl-firmadas > li:first-child {
		grid-row: 1 / span 2;
	}

	.vl-firmadas > li:first-child .vl-firmada {
		height: 100%;
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.vl-firmadas > li:first-child .vl-firmada__foto {
		height: 100%;
		aspect-ratio: auto;
	}
}

.vl-firmada {
	display: grid;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.vl-firmada__foto {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	max-width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--custom-beige);
}

.vl-firmada .vl-firmada__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vl-firmada__pie {
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 1.1875rem;
	line-height: 1.3;
}

.vl-firmada__pie span {
	display: block;
	margin-top: 4px;
	color: var(--vl-gris);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vl-firmada:hover .vl-firmada__pie {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* ── Promesas ──────────────────────────────────────────────────────────── */

.vl-promesas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vl-linea);
	list-style: none;
}

.vl-promesas li {
	padding: 18px 14px 18px 0;
	border-bottom: 1px solid var(--vl-linea);
	color: var(--vl-gris);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.vl-promesas b {
	display: block;
	margin-bottom: 3px;
	color: var(--wp--preset--color--custom-negro);
	font-weight: 500;
}

@media (min-width: 900px) {
	.vl-promesas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vl-promesas li {
		padding-right: 24px;
	}
}

/* ── Editores ──────────────────────────────────────────────────────────── */

.vl-portada__seccion > .vl-portada__caps {
	display: block;
	margin-bottom: 22px;
	color: var(--vl-gris);
}

.vl-editores {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.25rem, 2.3vw, 1.875rem);
	line-height: 1.3;
}

.vl-editores a {
	color: inherit;
	/* El estilo global de los enlaces pone Montserrat: aquí, la letra de la marca. */
	font: inherit;
	text-decoration: none;
}

.vl-editores a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.vl-estancia .vl-estancia__img,
	.vl-laminas__puntos i {
		transition: none;
	}
}

/* ── Quién las diseña (índice y adelanto en la portada) ────────────────── */

.vl-disenadores {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vl-linea);
	list-style: none;
}

/* Se llega a cada uno desde la banda de su editor: que la cabecera no lo tape. */
.vl-disenador {
	display: grid;
	gap: 12px;
	padding-block: 18px;
	border-bottom: 1px solid var(--vl-linea);
	scroll-margin-top: 120px;
}

@media (min-width: 900px) {
	.vl-disenador {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 32px;
		align-items: center;
	}
}

.vl-disenador__quien {
	display: grid;
	gap: 4px;
}

.vl-disenador__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: clamp(1.375rem, 2.6vw, 2.125rem);
	font-weight: 400;
	line-height: 1.05;
}

.vl-disenador__editor {
	color: var(--wp--preset--color--custom-gris-texto);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vl-disenador__piezas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vl-disenador__pieza {
	display: grid;
	gap: 6px;
	width: 84px;
	color: inherit;
	text-decoration: none;
}

.vl-disenador__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	max-width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--custom-beige);
}

/* Con `.vl-disenador` delante: WooCommerce pone `height: auto` a sus imágenes. */
.vl-disenador .vl-disenador__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vl-disenador__nombre-pieza {
	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 0.875rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/*
 * En el móvil, en una fila (opción A del usuario, 2026-10-13, con las cuatro
 * pintadas sobre la página real): el nombre a la izquierda y sus piezas a la
 * derecha, en pequeño. Con la foto encima y el nombre de cada pieza debajo,
 * los 24 diseñadores ocupaban 6,6 pantallas; así, 2,9. El nombre de la pieza
 * se queda para quien no ve la foto (lector de pantalla), y el enlace mide
 * 56 × 70 px: cabe un dedo.
 */
@media (max-width: 899px) {
	.vl-disenador {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 16px;
		align-items: center;
		padding-block: 14px;
	}

	.vl-disenador__piezas {
		justify-content: flex-end;
		gap: 6px;
		max-width: 190px;
	}

	.vl-disenador__pieza {
		width: 56px;
		gap: 0;
	}

	.vl-disenador__nombre-pieza {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.vl-disenador__pieza:hover .vl-disenador__nombre-pieza,
.vl-disenador__pieza:focus-visible .vl-disenador__nombre-pieza {
	text-decoration: underline;
	text-underline-offset: 4px;
}