/*
 * CapFat — fondo base común + capa de gráficos SVG.
 *
 * Se carga después de front-page.css. Todo lo relativo al nuevo sistema
 * de fondos vive aquí para que sea fácil de revisar y de revertir
 * (basta con dejar de encolar este archivo y quitar capfat_render_decor()).
 */

:root {
	/* Fondo base de las pantallas 2-8, igualado al tono del enlucido del bloque 1 (Inicio). */
	--capfat-fondo-base: url('../img/capfat-fondo-base-v2.webp');
	--capfat-fondo-base-color: #e9dddc;
}

/* ---------- Capa decorativa genérica ---------- */

/* La pantalla que aloja la capa crea su propio contexto de apilado:
 * fondo base → gráficos (z-index -1) → contenido. */
[data-decor-host] {
	position: relative;
	isolation: isolate;
}

.capfat-decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
	user-select: none;
}

/* Lienzo 1920 × 900 escalado como background-size: cover y centrado. */
.capfat-decor__canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, calc(100cqh * 1920 / 900));
	aspect-ratio: 1920 / 900;
	transform: translate(-50%, -50%);
}

.capfat-decor__piece {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	opacity: 1;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

/* Protocolo antichoque (decor-guard.js). */
.capfat-decor__piece.is-decor-reduced {
	transform: scale(0.82);
}

.capfat-decor__piece.is-decor-hidden,
.capfat-decor__piece.is-decor-off {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

@media (prefers-reduced-motion: reduce) {
	.capfat-decor__piece,
	.capfat-decor__piece.is-decor-hidden,
	.capfat-decor__piece.is-decor-off {
		transition: none;
	}
}

/* Modo depuración: añade ?decor-debug a la URL. */
.capfat-decor-debug .capfat-decor__piece {
	outline: 1px dashed rgba(0, 120, 255, 0.7);
}

.capfat-decor-debug .capfat-decor__piece.is-decor-hidden {
	visibility: visible;
	opacity: 0.18;
	outline-color: rgba(255, 0, 0, 0.9);
}

.capfat-decor-debug .capfat-decor__piece.is-decor-off {
	visibility: hidden;
	opacity: 0;
}

.capfat-decor-debug .capfat-decor__piece.is-decor-reduced {
	outline-color: rgba(255, 150, 0, 0.9);
}

/* ---------- Logo ---------- */

body.capfat-front-page .site-branding__logo[src$='.svg'] {
	aspect-ratio: 1575 / 546;
}

/* ---------- Pantalla 02 · Servicios ---------- */

body.capfat-front-page .capfat-services-screen,
html.capfat-horizontal-ready body.capfat-front-page .capfat-services-screen {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

body.capfat-front-page .capfat-services-screen .capfat-services-viewport,
body.capfat-front-page .capfat-services-screen .capfat-services-scaler,
body.capfat-front-page .capfat-services-screen .capfat-services-stage {
	background: transparent;
}

/* Sin carrusel (< 1024px) la sección crece con sus subpantallas: la capa
 * se limita a la primera pantalla, como el fondo anterior. */
html:not(.capfat-horizontal-ready) body.capfat-front-page .capfat-services-screen > .capfat-decor {
	bottom: auto;
	height: calc(calc(100 * var(--capfat-svh)) - var(--capfat-header-height));
}

/* ---------- Pantalla 03 · Trabajos ---------- */

body.capfat-front-page .capfat-works-screen,
html.capfat-horizontal-ready body.capfat-front-page .capfat-works-screen {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

body.capfat-front-page .capfat-works-screen .capfat-works-viewport,
body.capfat-front-page .capfat-works-screen .capfat-works-scaler,
body.capfat-front-page .capfat-works-screen .capfat-works-stage {
	background: transparent;
}

/* ---------- Pantalla 03 · Proceso ---------- */

body.capfat-front-page .capfat-process-screen,
html.capfat-horizontal-ready body.capfat-front-page .capfat-process-screen {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

body.capfat-front-page .capfat-process-screen .capfat-process-viewport,
body.capfat-front-page .capfat-process-screen .capfat-process-scaler,
body.capfat-front-page .capfat-process-screen .capfat-process-stage {
	background: transparent;
}

/* ---------- Pantalla 03 · Especiales ---------- */

body.capfat-front-page .capfat-special-screen,
html.capfat-horizontal-ready body.capfat-front-page .capfat-special-screen {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

body.capfat-front-page .capfat-special-screen .capfat-special-viewport,
body.capfat-front-page .capfat-special-screen .capfat-special-scaler,
body.capfat-front-page .capfat-special-screen .capfat-special-stage {
	background: transparent;
}

/* ---------- Pantalla 04 · Sobre DIME ---------- */

/* El fondo pasa de cada subpantalla a la sección: queda fijo y la capa
 * decorativa no se mueve al pasar de «Sobre DIME» a «Mi historia». */
body.capfat-front-page .about-hero,
html.capfat-horizontal-ready body.capfat-front-page .about-hero {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

body.capfat-front-page .about-hero .vertical-panel {
	background: transparent;
}

html:not(.capfat-horizontal-ready) body.capfat-front-page .about-hero > .capfat-decor {
	bottom: auto;
	height: calc(calc(100 * var(--capfat-svh)) - var(--capfat-header-height));
}

/* ---------- Pantalla 05 · Cuéntame tu idea ---------- */

/* El personaje naranja ahora es una pieza de la capa decorativa
 * (assets/img/capfat-personaje-cuentame.webp) en su misma posición. */
body.capfat-front-page .cta-final {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}

/* En escritorio el fondo original iba anclado arriba (background-position:
 * center top): el lienzo de esta pantalla también, para que el personaje
 * quede exactamente donde estaba. */
@media (min-width: 1024px) {
	.capfat-decor--cuentame .capfat-decor__canvas {
		top: 0;
		transform: translate(-50%, 0);
	}
}

/* ---------- Pantalla FAQ ---------- */

/* Fondo limpio: solo dos acentos en esquinas opuestas, sin spray de relleno. */
body.capfat-front-page .faq-preview {
	background: var(--capfat-fondo-base-color) var(--capfat-fondo-base) center / cover no-repeat;
}