/* Spotlight overlay. Clicks pass through to the page. */

.spotlight-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	opacity: 1;
	pointer-events: none;
	transition: opacity 120ms ease;
}

.spotlight-cursor.is-hidden {
	opacity: 0;
}

/* The ambient background stylesheet gives <main> its own stacking context.
   Release it on WordPress pages so text can sit above this fixed overlay while
   section backgrounds remain below it. */
body.page > main,
body.page > footer {
	z-index: auto;
}

/* Keep readable page content above the light while the transparent space
   around it still lets the spotlight illuminate backgrounds and media. */
body.page #primary :where(h1, h2, h3, h4, h5, h6, p, a, button, label, li, dt, dd, figcaption, blockquote, legend, summary, small, strong, em, b, span, input, textarea, select),
body.page > footer :where(h1, h2, h3, h4, h5, h6, p, a, button, label, li, dt, dd, figcaption, blockquote, legend, summary, small, strong, em, b, span, input, textarea, select) {
	position: relative;
	z-index: 21;
}

/* The FAQ control is a positioned UI element, not inline text. Preserve its
   right-aligned placement while keeping it above the spotlight. */
body.page #primary .home-faq .home-faq__toggle-icon {
	position: absolute;
	z-index: 22;
}

/* Internal consulting templates use isolated artwork and positioned wrappers.
   Flatten the artwork context, then raise cards and FAQ controls above the
   spotlight without lifting the dark section backgrounds themselves. */
body.page:not(.front-page) .consulting-intro {
	isolation: auto;
}

body.page:not(.front-page) .consulting-intro > [aria-hidden="true"] {
	z-index: 0 !important;
}

body.page:not(.front-page) :where(.consulting-deliverables__card, .consulting-team__level) {
	position: relative;
	z-index: 21;
}

body.page:not(.front-page) .consulting-faq > div {
	z-index: 21 !important;
}

/* Tailwind's `isolate`, the hero copy layers and sticky positioning create
   nested stacking contexts. Flatten/raise those specific contexts so their
   text is not tinted when the spotlight passes underneath. */
body.front-page .home-hero {
	isolation: auto;
}

body.front-page .home-hero__background {
	z-index: 0 !important;
}

body.front-page .home-hero__copy {
	isolation: auto;
}

body.front-page .home-hero__copy > :not(.home-hero__copy-glow),
body.front-page .home-hero__metrics {
	position: relative;
	z-index: 21;
}

body.front-page #soluciones > div > .sticky {
	z-index: 21;
}

body.front-page #soluciones .practice-card-list {
	position: relative;
	z-index: 21;
}

body.front-page #soluciones [data-practice-card-tilt] {
	z-index: 21 !important;
}

body.front-page #soluciones [data-practice-card-tilt]:hover,
body.front-page #soluciones [data-practice-card-tilt].is-tilting {
	z-index: 23 !important;
}

.spotlight-cursor canvas {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}