/* ---------------------------------------------------------
   Datio — base plana (sin 3D). Esta es a la vez la versión
   normal y el fallback para prefers-reduced-motion / mobile
   flojo una vez que se agregue la capa WebGL.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Rediseño "interfaz de producto premium" (2026-08-22) — fondo oscuro
   dominante, colores de marca como ACENTO (regla 70/20/10: 70% fondo
   oscuro/neutro, 20% color de marca, 10% highlights de interacción), sin
   glassmorphism/gradientes/blobs. Ver el prompt de diseño completo en la
   memoria de la sesión — esto no es una paleta genérica, son los valores
   exactos que pidió Omar. --datio-purple-* quedan pisadas por lo nuevo
   pero no se borran todavía por si algo viejo las sigue usando. */
/* View Transitions entre páginas (cross-document) — habilita que un
   elemento con el mismo view-transition-name en la página de origen y en
   la de destino se "morphee" entre las dos en vez de un salto seco. Se
   usa para Academia: la tarjeta del home crece hasta transformarse en la
   página /cursos/, y al cerrar hace el camino inverso. Solo Chromium por
   ahora — en navegadores sin soporte esto no hace nada, la navegación
   sigue siendo la de toda la vida. Respeta prefers-reduced-motion solo
   (el propio navegador la saltea). */
@view-transition {
	navigation: auto;
}

::view-transition-group(academia-panel) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
	--datio-bg: #0b0812;
	--datio-bg-alt: #15111e;
	--datio-surface: #15111e;
	--datio-surface-2: #1c1728;
	--datio-border: rgba(255, 255, 255, 0.08);
	--datio-text: #f3efe6;
	--datio-text-dim: #a8a3b2;

	--datio-purple-700: #3d1a5b;
	--datio-purple-500: #6b2fa0;
	--datio-purple-300: #a370d6;
	--datio-glow: #b98cf0;

	/* Una sola familia para todo (título y texto) — Space Grotesk, sin
	   serif. Los roles de peso se aplican en cada regla puntual:
	   400 texto, 500 nav/labels, 600 títulos, 700 titulares grandes. */
	--datio-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
	--datio-font-titulo: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
	--datio-container: 1200px;

	/* Colores de marca — ahora usados como acento (halos, íconos, bordes),
	   no como fondos sólidos de tarjeta completa. */
	--datio-brand-red: #ff4b3f;
	--datio-brand-teal: #18c5bf;
	--datio-brand-yellow: #ffc400;
	--datio-brand-white: #ffffff;

	/* Versiones translúcidas para halos/glow radiales. */
	--datio-glow-yellow: rgba(255, 196, 0, 0.16);
	--datio-glow-red: rgba(255, 75, 63, 0.18);
	--datio-glow-teal: rgba(24, 197, 191, 0.18);

	--datio-radius: 26px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Bloque abierto a pantalla completa — corta el scroll de la página de
   fondo (ver abrirBloque en bloques.js). Sin esto, la scrollbar nativa
   del documento (posible desde que el home puede ser más alto que
   100vh) queda superpuesta a la del panel interno y termina siendo la
   única alcanzable, aunque el panel de adentro sí tenga overflow. */
html.datio-bloque-abierto {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--datio-bg);
	color: var(--datio-text);
	font-family: var(--datio-font-display);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Lenis (smooth scroll) */
html.lenis, html.lenis body {
	height: auto;
}

html.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
	overflow: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

.datio-container {
	max-width: var(--datio-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	background: var(--datio-purple-500);
	color: var(--datio-text);
	padding: 8px 16px;
	border-radius: 4px;
	z-index: 1000;
}

/* Spotlight que sigue el cursor — "prácticamente imperceptible hasta que
   uno nota que la interfaz responde", nunca una linterna. mix-blend-mode
   en vez de un círculo opaco: ilumina lo que hay debajo, no lo tapa. Se
   activa recién con el primer mousemove real (evita un glow fantasma
   centrado en 50%/50% antes de que el visitante mueva el mouse). */
.datio-spotlight {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(560px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.05), transparent 62%);
	mix-blend-mode: screen;
}

.datio-spotlight.is-activo {
	opacity: 1;
	transition: opacity 0.6s ease;
}

/* Grano muy sutil — evita que las superficies planas oscuras se sientan
   "demasiado digitales". opacity 0.03, no más — si se nota como textura
   consciente ya es demasiado. */
.datio-grain {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.03;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.datio-spotlight {
		display: none;
	}
}

/* Pie de página — chico y discreto, no compite con el grid de arriba. */
.datio-footer {
	max-width: var(--datio-container);
	margin: 0 auto;
	padding: 18px 24px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.datio-footer p {
	margin: 0;
	font-size: 0.72rem;
	color: var(--datio-text-dim);
	display: flex;
	align-items: center;
	gap: 6px;
}

.datio-footer__sol {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Margen a la derecha para que el globo de WhatsApp (fixed, abajo a la
   derecha, ver .datio-whatsapp-float) no tape el texto — pedido
   explícito. */
.datio-footer__made {
	margin-right: 90px;
}