/* ==========================================================================
   Digital Space — Base global (fondo espacial, tema, cortina de transición)
   Se carga en todo el sitio.
   ========================================================================== */

/* Legibilidad: sombra sutil para que el texto no se pierda cuando el
   astronauta (claro) pasa por detrás. Solo en tema oscuro. */
:root[data-theme="dark"] body { text-shadow: 0 1px 9px rgba(5, 2, 12, 0.5); }
/* El texto con degradado no lleva sombra (se vería fantasma). */
.ds-grad, .ds-hero__line--grad, .ds-stat__value, .ds-apstat__value,
.ds-tl__year, .ds-htl__year, .ds-mini b, .ds-about__stat-value { text-shadow: none; }

/* Ocultar el título/encabezado por defecto de Astra en las páginas:
   nuestras secciones ya traen su propio H1 y diseño. */
.page .entry-header,
.page .ast-single-post .entry-header,
.page header.entry-header { display: none !important; }

/* Anular cualquier padding del contenedor de Astra en páginas para que
   nuestras secciones queden realmente a todo el ancho. */
.page #primary,
.page .site-content .ast-container,
.page .ast-page-builder-template .site-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

/* Fondo espacial global: lo más al fondo de todo. */
#ds-space {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

/* Botón de tema (abajo a la izquierda). En WP irá también en el menú. */
.ds-theme-toggle {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	font: 600 0.85rem system-ui, sans-serif;
	color: var(--ds-text, #f3eefb);
	background: var(--ds-glass, rgba(18, 11, 28, 0.82));
	border: 1px solid var(--ds-magenta, #d400ff);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.ds-theme-toggle:hover { transform: translateY(-2px); border-color: var(--ds-magenta, #d400ff); }
.ds-theme-toggle__icon { display: inline-flex; }
.ds-theme-toggle__icon svg { width: 18px; height: 18px; }
/* Oscuro → muestra sol (para encender la luz); Claro → muestra luna. */
.ds-theme-toggle .ds-ico-moon { display: none; }
:root[data-theme="light"] .ds-theme-toggle .ds-ico-sun { display: none; }
:root[data-theme="light"] .ds-theme-toggle .ds-ico-moon { display: inline-flex; }

/* Transición de tema estilo "interruptor de luz" (View Transitions API).
   La luz se expande en círculo desde el botón al encender, y se contrae al
   apagar. Sin cruce de opacidad (evita el flash de paleta morada). */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

/* ENCENDER (→ claro): el nuevo tema crece desde el punto del botón. */
html[data-vt="on"]::view-transition-new(root) {
	z-index: 9999;
	animation: ds-light-in 0.6s ease-out forwards;
}
html[data-vt="on"]::view-transition-old(root) { z-index: 1; }

/* APAGAR (→ oscuro): el tema claro se contrae hacia el botón. */
html[data-vt="off"]::view-transition-old(root) {
	z-index: 9999;
	animation: ds-light-out 0.6s ease-in forwards;
}
html[data-vt="off"]::view-transition-new(root) { z-index: 1; }

@keyframes ds-light-in {
	from { clip-path: circle(0% at var(--ds-tx, 50%) var(--ds-ty, 100%)); }
	to   { clip-path: circle(150% at var(--ds-tx, 50%) var(--ds-ty, 100%)); }
}
@keyframes ds-light-out {
	from { clip-path: circle(150% at var(--ds-tx, 50%) var(--ds-ty, 100%)); }
	to   { clip-path: circle(0% at var(--ds-tx, 50%) var(--ds-ty, 100%)); }
}