/* ==========================================================================
   Vilasecom — plantilla «En construcción»
   Capas (de atrás a delante): lienzo WebGL (0) → viñeta (1) → contenido (2)
   → barra y metro (20) → pantalla de carga (100).
   ========================================================================== */

html.vc-cargando { overflow: hidden; }

/* La pista de la galería es más ancha que la pantalla: sin este recorte, los
   móviles alejan el zoom para que quepa y se descuadra toda la escena. */
html:has(.vc-body),
.vc-body { overflow-x: clip; }

.vc-body {
	background: var(--noche);
	color: var(--crema);
}

/* ---------- Lienzo 3D y viñeta ---------- */
.vc-lienzo {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100vw;
	height: 100vh;
}
.vc-velo {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(8 5 3 / 0.65) 100%);
}

/* Sin WebGL: vetas de rodaja en CSS como respaldo */
.vc-sin-webgl .vc-lienzo { display: none; }
.vc-sin-webgl .vc-body {
	background:
		repeating-radial-gradient(circle at 78% 42%, rgb(200 145 79 / 0.08) 0 2px, transparent 2px 22px),
		var(--noche);
	background-attachment: fixed;
}

/* ---------- Contenido ---------- */
.vc-main { position: relative; z-index: 2; }

.vc-seccion {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 7rem var(--margen) 5rem;
}
.vc-texto { max-width: 31rem; text-shadow: 0 2px 28px rgb(21 16 11 / 0.9); }
.vc-seccion--izq .vc-texto { margin-right: auto; margin-left: clamp(0rem, 4vw, 4rem); }
.vc-seccion--der .vc-texto { margin-left: auto; margin-right: clamp(2rem, 6vw, 6rem); }

.vc-etiqueta {
	margin: 0 0 1.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--miel);
}
.vc-titulo { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 450; margin-bottom: 0.45em; }
.vc-texto p:not(.vc-etiqueta) { color: rgb(243 230 208 / 0.82); font-size: 1.08rem; }
.vc-pie-foto {
	margin-top: 2rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgb(243 230 208 / 0.18);
	font-size: 0.8rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Portada */
.vc-portada .vc-texto { max-width: 44rem; margin-left: clamp(0rem, 4vw, 4rem); }
.vc-titulo-grande {
	margin: 0 0 0.3em;
	font-size: clamp(2.6rem, 7.5vw, 7rem);
	white-space: nowrap;
	font-weight: 500;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}
.vc-letra { display: inline-block; will-change: transform; }
.vc-entrada { max-width: 30rem; }

.vc-desliza {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgb(243 230 208 / 0.6);
}
.vc-desliza i {
	width: 1px;
	height: 48px;
	background: linear-gradient(var(--miel), transparent);
	animation: vc-gota 1.8s ease-in-out infinite;
	transform-origin: top;
}
@keyframes vc-gota {
	0% { transform: scaleY(0); opacity: 1; }
	60% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Final */
.vc-final { justify-content: center; align-items: flex-end; text-align: center; padding-bottom: 8vh; }
.vc-final .vc-texto { max-width: 40rem; margin: 0 auto; }
.vc-final .vc-titulo { font-size: clamp(2rem, 4.4vw, 3.6rem); }

.vc-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.vc-contacto__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.8em 1.35em;
	border-radius: 999px;
	background: var(--crema);
	color: var(--noche);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	text-shadow: none;
	transition: transform 0.2s, background 0.2s;
}
.vc-contacto__enlace:hover { background: var(--miel); color: var(--noche); transform: translateY(-2px); }
.vc-datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: rgb(243 230 208 / 0.75);
}
.vc-datos li { display: inline-flex; align-items: center; gap: 0.45em; }
.vc-datos .icono { flex: none; color: var(--miel); }
.vc-final .aviso-admin { display: inline-block; margin-top: 2rem; text-shadow: none; }
.vc-final .aviso-admin a { color: var(--miel); }

/* ---------- Galería horizontal ---------- */
.vc-galeria {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 6rem 0 3rem;
}
.vc-galeria__cabecera { padding: 0 var(--margen); margin: 0 0 2rem clamp(0rem, 4vw, 4rem); }
.vc-galeria__cabecera .vc-titulo { margin: 0; }

/* Sin JS (o con movimiento reducido) la galería se desliza con el dedo/trackpad */
.vc-galeria__ventana { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vc-galeria__ventana::-webkit-scrollbar { display: none; }
.vc-galeria--fijada .vc-galeria__ventana { overflow: visible; scroll-snap-type: none; }

.vc-galeria__pista {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	width: max-content;
	margin: 0;
	padding: 0 var(--margen) 0 calc(var(--margen) + clamp(0rem, 4vw, 4rem));
	list-style: none;
	will-change: transform;
}

.vc-madera {
	position: relative;
	flex: none;
	height: min(58vh, 540px);
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.vc-madera__veta {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.08);
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vc-madera:hover .vc-madera__veta { transform: scale(1.14) rotate(0.5deg); }
.vc-madera--roble .vc-madera__veta { background-color: #b98549; }
.vc-madera--nogal .vc-madera__veta { background-color: #4f321d; }
.vc-madera--pino .vc-madera__veta { background-color: #d9b27a; }
.vc-madera--haya .vc-madera__veta { background-color: #c99668; }
.vc-madera--cerezo .vc-madera__veta { background-color: #954d2c; }

.vc-madera__texto {
	position: absolute;
	inset: auto 0 0;
	padding: 4rem 1.5rem 1.5rem;
	background: linear-gradient(to top, rgb(15 10 6 / 0.92), rgb(15 10 6 / 0.55) 60%, transparent);
}
.vc-madera__num { font-size: 0.75rem; letter-spacing: 0.25em; color: var(--miel); }
.vc-madera__nombre { margin: 0.2em 0 0.35em; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 500; }
.vc-madera__texto p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: rgb(243 230 208 / 0.85); }

/* ---------- Metro de carpintero (progreso del scroll) ---------- */
.vc-metro {
	position: fixed;
	top: 50%;
	right: 18px;
	z-index: 20;
	width: 20px;
	height: 58vh;
	transform: translateY(-50%);
	pointer-events: none;
}
.vc-metro__cinta {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	opacity: 0.9;
	background:
		repeating-linear-gradient(to bottom, #2a1d13 0 1.5px, transparent 1.5px 10%) left / 70% 100% no-repeat,
		repeating-linear-gradient(to bottom, #2a1d13 0 1px, transparent 1px 2%) left / 35% 100% no-repeat,
		linear-gradient(to bottom, #d8a93a 0 19.6%, #a87f22 19.6% 20.4%, #d8a93a 20.4% 39.6%, #a87f22 39.6% 40.4%, #d8a93a 40.4% 59.6%, #a87f22 59.6% 60.4%, #d8a93a 60.4% 79.6%, #a87f22 79.6% 80.4%, #d8a93a 80.4%);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
}
.vc-metro__marca {
	position: absolute;
	left: -7px;
	right: -7px;
	top: calc(var(--p, 0) * 100%);
	height: 2px;
	background: #e2553b;
	box-shadow: 0 0 8px rgb(226 85 59 / 0.8);
}
.vc-metro__cm {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: var(--crema);
	font-variant-numeric: tabular-nums;
}

/* ---------- Pantalla de carga ---------- */
.vc-cargador {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: var(--noche);
	color: var(--crema);
}
.vc-listo .vc-cargador { display: none; }
.vc-cargador__sierra { width: clamp(90px, 14vw, 130px); height: auto; }
.vc-cargador__hoja {
	fill: #bdb6ac;
	transform-box: fill-box;
	transform-origin: center;
	animation: vc-girar 1.1s linear infinite;
}
.vc-cargador__eje { fill: var(--noche); }
.vc-cargador__ranura { stroke: var(--noche); stroke-width: 3; stroke-linecap: round; fill: none; }
.vc-cargador__pct { margin: 0.6rem 0 0; font: 500 2.2rem/1 var(--fuente-titulos); font-variant-numeric: tabular-nums; }
.vc-cargador__texto { margin: 0; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--miel); }
@keyframes vc-girar { to { transform: rotate(360deg); } }

/* ---------- Pie ---------- */
.vc-pie {
	position: relative;
	z-index: 2;
	padding: 1.5rem var(--margen) 2rem;
	text-align: center;
	font-size: 0.8rem;
	color: rgb(243 230 208 / 0.5);
}
.vc-pie p { margin: 0; }

/* ---------- Móvil: texto abajo, figura arriba ---------- */
@media (max-width: 760px) {
	.vc-seccion { align-items: flex-end; padding-bottom: 3.5rem; }
	.vc-seccion--izq .vc-texto,
	.vc-seccion--der .vc-texto,
	.vc-portada .vc-texto { margin: 0; }
	.vc-texto {
		padding: 1.25rem 0 0;
		background: linear-gradient(to top, rgb(21 16 11 / 0.85) 55%, transparent);
	}
	.vc-portada .vc-texto { background: none; }
	.vc-portada { align-items: flex-end; padding-bottom: 7rem; }
	.vc-metro { display: none; }
	.vc-galeria__cabecera { margin-left: 0; }
	.vc-galeria__pista { padding-left: var(--margen); }
	.vc-madera { height: min(56vh, 460px); }
	.vc-final { padding-bottom: 4rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	.vc-cargador__hoja, .vc-desliza i { animation: none; }
	.vc-madera__veta { transition: none; }
}