/* ============================================================================
   CORTADE — FONDO 3D · CSS de capas y legibilidad
   ----------------------------------------------------------------------------
   Versión: 1.0.0
   Para: cortade.tech/qr-interactivo/

   Implementa las 3 capas del sistema:
     · #cortade-3d-canvas (z:0) — canvas WebGL del cubo QR
     · .cortade-3d-scrim  (z:1) — degradado oscuro para legibilidad del texto
     · .cortade-3d-vignette (z:1) — viñeta sutil en los bordes

   El contenido normal de la página (z:3+) queda por encima.

   Encolado SOLO en la página /qr-interactivo/ desde functions.php.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CANVAS WEBGL (fondo 3D)
   El canvas es fixed para que el fondo no se mueva con el scroll,
   pero el contenido sí. pointer-events:none para que los clicks
   sigan llegando al contenido.
   ---------------------------------------------------------------------------- */
#cortade-3d-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/* ----------------------------------------------------------------------------
   2. SCRIM DE LEGIBILIDAD
   Capa oscura semitransparente sobre el canvas. Hace que el texto blanco
   de tus secciones se lea bien sin importar qué color tenga la nebulosa
   detrás en cada momento.
   Degradado diagonal para que la zona del texto principal (izquierda)
   esté más oscura y la del cubo (derecha) deje ver más el 3D.
   ---------------------------------------------------------------------------- */
.cortade-3d-scrim {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(100deg,
			rgba(2, 5, 14, 0.86) 0%,
			rgba(2, 5, 14, 0.55) 42%,
			rgba(2, 5, 14, 0.18) 100%),
		radial-gradient(120% 90% at 50% 120%,
			rgba(2, 5, 14, 0.7) 0%,
			rgba(2, 5, 14, 0) 55%);
}

/* ----------------------------------------------------------------------------
   3. VIÑETA EN LOS BORDES
   Box-shadow inset que oscurece sutilmente los bordes de la pantalla.
   Refuerza la sensación cinematográfica.
   ---------------------------------------------------------------------------- */
.cortade-3d-vignette {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, 0.75);
}

/* ----------------------------------------------------------------------------
   4. AJUSTES AL CONTENIDO PARA QUE SE VEA ENCIMA DEL FONDO 3D
   ----------------------------------------------------------------------------
   Cuando el fondo 3D está activo (clase .has-3d-bg en body), las secciones
   tienen que ser transparentes para que se vea el canvas detrás.
   El body ya es oscuro, pero las secciones individuales pintaban encima
   con var(--bg). Las hacemos transparentes.
   ---------------------------------------------------------------------------- */
body.has-3d-bg {
	background: transparent !important;
}

body.has-3d-bg .qr-page-section,
body.has-3d-bg .qr-sectores-section,
body.has-3d-bg .qr-features-section,
body.has-3d-bg .qr-system,
body.has-3d-bg .qr-trust-section,
body.has-3d-bg .qr-waitlist-section,
body.has-3d-bg .qr-tipos-section {
	background: transparent;
	position: relative;
	z-index: 3;
}

/* El nav DEBE quedarse fijo arriba mientras se hace scroll por la página.
   Forzamos position:fixed con !important por si alguna regla en otro
   archivo CSS lo está pisando. */
body.has-3d-bg .site-nav {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100 !important;
}

/* El footer mantiene su posición normal; solo nos aseguramos de que
   también quede por encima del fondo 3D al hacer scroll. */
body.has-3d-bg .site-footer {
	position: relative;
	z-index: 10;
}

/* Las tarjetas de las secciones (sectores, tipos, features, planes)
   sí mantienen un fondo semitransparente para no flotar perdidas
   sobre el 3D. Mejor contraste y legibilidad. */
body.has-3d-bg .sector-card,
body.has-3d-bg .tipo-card,
body.has-3d-bg .qr-feature,
body.has-3d-bg .qr-plan {
	background: rgba(6, 10, 24, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* La sección 05 (vídeo del sistema) NO debe ser transparente:
   tiene su propio vídeo del cubo en bucle que va detrás. */
body.has-3d-bg .qr-system {
	background: var(--bg);
	z-index: 5;
}

/* Refuerzo de legibilidad: el texto sobre el fondo 3D necesita un
   sutil text-shadow para destacar sobre cualquier color de la nebulosa */
body.has-3d-bg .hero-h1,
body.has-3d-bg .hero-sub,
body.has-3d-bg .qr-intro-text,
body.has-3d-bg .qr-waitlist-title,
body.has-3d-bg .qr-waitlist-sub,
body.has-3d-bg .qr-system-text {
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

/* ----------------------------------------------------------------------------
   5. RESPETO A 'reducir movimiento'
   Si el usuario tiene activado este ajuste del sistema, el JS ya baja
   densidad de partículas. Por CSS no hacemos nada porque el canvas
   sigue siendo válido.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* El JS ya gestiona esto bajando la cantidad de partículas y elementos */
}

/* ----------------------------------------------------------------------------
   6. FALLBACK SI WEBGL NO ESTÁ DISPONIBLE
   El JS falla silenciosamente, pero el body sigue teniendo .has-3d-bg.
   Para evitar fondo transparente sin canvas, restablecemos color base.
   ---------------------------------------------------------------------------- */
body.has-3d-bg.no-webgl {
	background: var(--bg) !important;
}
body.has-3d-bg.no-webgl #cortade-3d-canvas,
body.has-3d-bg.no-webgl .cortade-3d-scrim,
body.has-3d-bg.no-webgl .cortade-3d-vignette {
	display: none;
}