/* ============================================================
   Portada "Expedición" — SOLO se carga en la página de inicio.
   ============================================================
   Principio importante: todo lo que hay aquí debe verse bien
   SIN JavaScript. Los scripts de la portada solo añaden
   movimiento encima de esto; nunca crean el contenido. Así, si
   algo falla al cargar, el visitante ve esta versión y ya.
*/

.exsa-portada {
	background: var(--color-arena);
}

/* Botón ámbar reutilizado varias veces en la portada */
.exsa-boton {
	display: inline-block;
	font-family: var(--fuente-textos);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	padding: 0.85em 1.75em;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.exsa-boton--ambar {
	background: var(--color-ambar);
	color: var(--color-selva-noche);
}

.exsa-boton--ambar:hover,
.exsa-boton--ambar:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(232, 163, 61, 0.35);
}

/* =====================================================================
   Hero + recorrido de ecosistemas comparten un mismo "envoltorio":
   el planeta 3D (o su versión estática de respaldo) vive en una sola
   capa de fondo que se mantiene detrás de todo mientras se hace scroll
   por el hero y las 5 secciones.
   ===================================================================== */

.exsa-experiencia {
	position: relative;
	/* Aísla el z-index del planeta y del hero en su propia capa de
	   apilamiento: así ningún contenedor de Kadence (cabecera, fondo del
	   área de contenido, etc.) puede colarse entre el planeta y el texto
	   por culpa de un z-index ajeno a esta portada. */
	isolation: isolate;
}

/* Capa de fondo con el planeta. Por defecto muestra el degradado
   estático; solo pasa a mostrar el <canvas> del planeta 3D cuando
   portada-planeta.js confirma que ha podido dibujar un fotograma de
   verdad (lo hace portada-init.js añadiendo la clase exsa-3d-activo).
   El fondo oscuro va aquí, en el contenedor, y no solo en la capa
   estática de dentro: así queda SIEMPRE presente, en los tres modos
   (completo/ligero/estático) y aunque el <canvas> sea transparente. */
.exsa-planeta-fijo {
	position: absolute;
	inset: 0;
	/* Ancho explícito además de "inset: 0": cuando GSAP/ScrollTrigger fija
	   ("pin") este elemento durante el recorrido, necesita un ancho real
	   con el que trabajar. Sin esto, en algunos navegadores el elemento se
	   queda con 0 de ancho durante el pin y el <canvas> de dentro (que es
	   width: 100%) se queda invisible aunque todo lo demás funcione. */
	width: 100%;
	height: 100vh;
	z-index: 0;
	overflow: hidden;
	/* !important: esta capa es el ÚNICO fondo de respaldo garantizado del
	   hero y del recorrido (ver más abajo, ambos con fondo transparente o
	   condicional a propósito). Sin !important perdía a veces la pelea de
	   especificidad contra reglas de fondo del propio Kadence. */
	background: var(--color-selva-noche) !important;
}

.exsa-planeta-fijo__fondo-estatico {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease;
	background:
		radial-gradient(circle at 50% 60%, var(--color-musgo) 0%, var(--color-selva-noche) 55%),
		radial-gradient(1.5px 1.5px at 10% 20%, rgba(247, 243, 234, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 80% 15%, rgba(247, 243, 234, 0.5), transparent),
		radial-gradient(1px 1px at 40% 80%, rgba(247, 243, 234, 0.6), transparent),
		radial-gradient(1px 1px at 65% 45%, rgba(247, 243, 234, 0.4), transparent),
		radial-gradient(1.5px 1.5px at 90% 70%, rgba(247, 243, 234, 0.5), transparent);
	background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
	background-size: cover, 180px 180px, 220px 220px, 160px 160px, 200px 200px, 240px 240px;
}

/* El planeta con "continentes" en SVG (ver inc/portada-svg.php), centrado
   sobre el degradado con estrellas de arriba. */
.exsa-planeta-fijo__svg {
	width: min(70vh, 480px);
	height: min(70vh, 480px);
	max-width: 90vw;
	max-height: 90vw;
}

/* Por encima del degradado estático (z-index 1 contra 0) pero siempre
   dentro de la capa aislada de .exsa-experiencia: nunca z-index negativo,
   para que no pueda quedar tapado por accidente. Empieza invisible
   (opacity: 0) y solo se funde a la vista cuando portada-planeta.js
   confirma que ha dibujado un fotograma real (ver portada-init.js: clase
   exsa-3d-activo), nunca antes. */
.exsa-planeta-fijo__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.exsa-experiencia.exsa-3d-activo .exsa-planeta-fijo__canvas {
	opacity: 1;
}

.exsa-experiencia.exsa-3d-activo .exsa-planeta-fijo__fondo-estatico {
	opacity: 0;
}

/* ===== Hero a pantalla completa ===== */

/* SIN fondo propio, a propósito: .exsa-hero y .exsa-planeta-fijo ocupan
   exactamente el mismo hueco (los dos "inset: 0" / 100vh, uno encima del
   otro), y .exsa-hero tiene z-index más alto. Si este bloque tuviera un
   fondo opaco (como tenía antes), ese fondo taparía POR COMPLETO la capa
   del planeta -sea el <canvas> 3D o el SVG estático- pase lo que pase con
   el z-index de sus hijos: un fondo opaco en un elemento con más z-index
   siempre gana, tape lo que tape debajo. El respaldo oscuro ya lo pone
   .exsa-planeta-fijo (con !important), así que aquí basta con dejarlo
   transparente para que se vea lo que haya detrás. */
.exsa-hero {
	position: relative;
	z-index: 1;
	min-height: 100svh; /* svh = alto real de la ventana en móvil, sin el salto al aparecer/ocultarse la barra de direcciones */
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Velo oscuro detrás del texto (no un fondo sólido): en el hueco donde el
   planeta ocupa buena parte de la pantalla (sobre todo en móvil, donde es
   casi tan grande como el propio hero) hay zonas del relieve más claras
   (agua, costas) sobre las que el texto claro pierde contraste. Este
   degradado radial, centrado en el texto y muy suave, garantiza lectura
   sin tapar el planeta como una caja lo haría. Vive en un pseudo-elemento
   (no en el propio fondo de .exsa-hero__contenido) para poder ir más allá
   de los márgenes del texto sin ensanchar la caja real. */
.exsa-hero__contenido {
	position: relative;
	text-align: center;
	max-width: 46rem;
	padding: 1.5rem;
	color: var(--color-arena);
}

.exsa-hero__contenido::before {
	content: '';
	position: absolute;
	inset: -2rem -1.5rem;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(15, 42, 29, 0.55) 0%, rgba(15, 42, 29, 0.28) 55%, transparent 80%);
}

.exsa-hero__titulo,
.exsa-hero__subtitulo {
	text-shadow: 0 2px 18px rgba(8, 25, 17, 0.65);
}

/* El único <h1> de toda la portada. Kadence pone su propio color
   directamente en las etiquetas de título, lo que gana a cualquier color
   heredado del contenedor — por eso el color va aquí explícito, no solo
   en .exsa-hero__contenido. */
.exsa-hero__titulo {
	font-family: var(--fuente-titulos);
	font-weight: 650;
	font-size: clamp(2.3rem, 6vw, 4rem);
	line-height: 1.1;
	color: var(--color-arena);
	margin: 0 0 0.5em;
}

.exsa-hero__subtitulo {
	font-family: var(--fuente-textos);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	color: var(--color-arena);
	opacity: 0.9;
	margin: 0 0 1.75em;
}

/* ===== Recorrido de los 5 ecosistemas ===== */

.exsa-recorrido {
	position: relative;
	z-index: 1;
	/* Respaldo sólido para cuando NO hay canvas 3D detrás (modo ligero o
	   estático): en esos modos .exsa-planeta-fijo no se extiende más allá
	   del hero, así que sin este fondo las franjas semitransparentes de
	   cada sección se verían sobre el fondo claro de la página, no sobre
	   uno oscuro. !important por el mismo motivo que en .exsa-planeta-fijo:
	   nunca debe perder esta pelea de especificidad contra el tema padre
	   Kadence. */
	background: var(--color-selva-noche) !important;
}

/* En modo completo, ScrollTrigger "fija" (pin) .exsa-planeta-fijo y lo
   mantiene a la vista detrás de estas franjas mientras se hace scroll por
   el recorrido (ver portada-scroll.js). Si .exsa-recorrido siguiera con
   fondo opaco aquí, taparía ese planeta fijo entero (mismo problema que
   tenía .exsa-hero): con el planeta activo, el propio .exsa-planeta-fijo
   ya pone el fondo oscuro de respaldo, así que aquí se deja transparente
   para que las franjas de color de cada sección se vean DE VERDAD
   semitransparentes sobre el planeta, no sobre un verde sólido. */
.exsa-experiencia.exsa-3d-activo .exsa-recorrido {
	background: transparent !important;
}

/* Tramo de cierre (ver front-page.php): solo ocupa espacio en modo
   completo, mientras la cámara se aleja y la escena se atenúa (ver
   portada-scroll.js). En modo ligero/estático no hay cámara ni recorrido
   3D que alejar, así que no debe añadir scroll de más. */
.exsa-recorrido-cierre {
	height: 0;
}

.exsa-experiencia.exsa-3d-activo .exsa-recorrido-cierre {
	height: 100vh;
}

/* Las formas decorativas de fondo de cada sección (parallax en CSS) eran
   pensadas para dar algo de vida cuando NO hay planeta 3D detrás; con el
   planeta real de por medio sobran y le restan protagonismo. */
.exsa-experiencia.exsa-3d-activo .exsa-seccion__capa {
	display: none;
}

.exsa-seccion {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	padding: 6rem 1.5rem;
	background-color: var(--exsa-color-seccion, rgba(47, 107, 79, 0.7));
	color: var(--color-arena);
	overflow: hidden;
}

/* Formas decorativas de fondo (parallax en modo completo; quietas en
   el resto de modos, lo cual también queda bien). */
.exsa-seccion__capa {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.35;
	background: var(--color-arena);
	pointer-events: none;
}

.exsa-seccion__capa--1 {
	width: 22rem;
	height: 22rem;
	top: -6rem;
	right: -6rem;
}

.exsa-seccion__capa--2 {
	width: 14rem;
	height: 14rem;
	bottom: -4rem;
	left: -4rem;
	opacity: 0.2;
}

.exsa-seccion__contenido {
	position: relative;
	z-index: 1;
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}

.exsa-seccion__animal {
	width: clamp(72px, 12vw, 110px);
	height: clamp(72px, 12vw, 110px);
	margin: 0 auto 1.25rem;
	color: var(--color-arena);
	opacity: 0.9;
}

.exsa-seccion__animal svg {
	width: 100%;
	height: 100%;
}

.exsa-seccion__titulo {
	font-family: var(--fuente-titulos);
	font-weight: 650;
	font-size: clamp(2.1rem, 4.5vw, 3.1rem);
	color: var(--color-arena);
	margin: 0 0 0.8em;
}

.exsa-seccion__texto {
	font-family: var(--fuente-textos);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-arena);
	opacity: 0.95;
	margin: 0 0 1.5em;
}

.exsa-seccion__dato {
	text-align: left;
	font-family: var(--fuente-textos);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--color-arena);
	background: rgba(15, 42, 29, 0.28);
	border-left: 3px solid var(--color-ambar);
	border-radius: 4px;
	padding: 0.85em 1.1em;
	margin: 0 0 1.75em;
}

.exsa-seccion__dato strong {
	display: block;
	color: var(--color-ambar);
	margin-bottom: 0.25em;
}

/* ===== Contenido libre desde el editor (página "Inicio") =====
   Ancho de lectura normal y centrado por defecto; los bloques marcados
   como "ancho completo" (alignfull) rompen ese límite y llegan hasta los
   bordes de la pantalla, con el truco habitual de rejilla de 3 columnas
   (borde / contenido / borde). Fondo arena y texto tinta fijos, para que
   lo que se escriba en el editor se lea siempre igual aquí, sin depender
   de los colores que traiga cada bloque. */

.exsa-contenido-portada {
	background: var(--color-arena);
	color: var(--color-tinta);
	padding-block: 4rem;
	display: grid;
	grid-template-columns: 1fr min(var(--ancho-lectura), calc(100% - 3rem)) 1fr;
}

.exsa-contenido-portada > * {
	grid-column: 2;
}

.exsa-contenido-portada > .alignwide {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
}

.exsa-contenido-portada > .alignfull {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
}

/* ===== Últimas entradas / categorías / en peligro (siempre sin JS) ===== */

.exsa-portada-seccion {
	max-width: 1180px;
	margin-inline: auto;
	padding: 4rem 1.5rem;
}

.exsa-portada-seccion__titulo {
	font-family: var(--fuente-titulos);
	color: var(--color-selva-noche);
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	text-align: center;
	margin: 0 0 1.75rem;
}

.exsa-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.exsa-categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	text-decoration: none;
	padding: 2rem 1.25rem;
	border-radius: var(--radio-borde);
	background: #fff;
	color: var(--color-selva-noche);
	box-shadow: var(--sombra-tarjeta);
	font-family: var(--fuente-titulos);
	font-size: 1.15rem;
	font-weight: 650;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.exsa-categoria:hover,
.exsa-categoria:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--sombra-tarjeta-hover);
}

.exsa-categoria--destacada {
	background: var(--color-ambar);
	color: var(--color-selva-noche);
	font-size: 1.35rem;
}

@media (min-width: 640px) {
	.exsa-categoria--destacada {
		grid-column: span 2;
	}
}

.exsa-en-peligro {
	background: var(--color-selva-noche);
	color: var(--color-arena);
}

.exsa-en-peligro .exsa-portada-seccion__titulo {
	color: var(--color-arena);
}

.exsa-en-peligro__intro {
	text-align: center;
	max-width: var(--ancho-lectura);
	margin: 0 auto 2rem;
	opacity: 0.9;
}

.exsa-en-peligro__ver-todas {
	display: block;
	text-align: center;
	margin-top: 2rem;
	color: var(--color-arena);
	font-weight: 700;
}

/* =====================================================================
   Cabecera transparente de Kadence, SOLO en la portada (body.home): la
   activas tú desde el editor de la página "Inicio" (Ajustes de página →
   Transparent Header → Activar). Kadence solo pone el menú y el logo en
   color claro si rellenas sus propios ajustes de color en Personalizar
   → Cabecera → Transparent Header; para que se lea bien sin tener que
   rellenar esos ajustes, lo forzamos aquí con las clases que Kadence ya
   añade al body. El !important es necesario porque compite con el CSS
   que el propio Kadence genera dinámicamente según esos ajustes.
   ===================================================================== */

body.home.transparent-header #main-header .site-branding .site-title,
body.home.transparent-header #main-header .site-branding .site-description,
body.home.transparent-header .site-branding a.brand .logo-icon,
body.home.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a,
body.home.mobile-transparent-header #mobile-header .site-branding .site-title,
body.home.mobile-transparent-header #mobile-header .site-branding .site-description {
	color: var(--color-arena) !important;
}

body.home.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
body.home.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:focus,
body.home.transparent-header .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--color-ambar) !important;
}

/* ===== "Reducir movimiento": quitamos cualquier resto de transición ===== */

@media (prefers-reduced-motion: reduce) {
	.exsa-boton,
	.exsa-categoria {
		transition: none;
	}
}