/* ==========================================================================
   Humano — Tokens de diseño (spec §1)
   Variables de marca, tipografía y formas. Cargado en front y en el editor.
   ========================================================================== */

/* --- Satoshi auto-alojada ---------------------------------------------------
   Ficheros en assets/fonts/ (woff2 + woff). woff2 primero por compresión;
   woff de respaldo para navegadores antiguos. font-display: swap deja que el
   stack de sistema tome el relevo mientras la fuente carga. */
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Light.woff2") format("woff2"),
	     url("../fonts/Satoshi-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Regular.woff2") format("woff2"),
	     url("../fonts/Satoshi-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Medium.woff2") format("woff2"),
	     url("../fonts/Satoshi-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Bold.woff2") format("woff2"),
	     url("../fonts/Satoshi-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Color (spec §1) */
	--verde: #00E0A8;
	--verde-brillo: #00F0B8;
	--verde-oscuro: #00291F;
	--ink: #0A1A14;
	--gris-texto: #5B6B66;
	--blanco: #FFFFFF;
	--gris-fondo: #F5F7F6;
	--borde: #E5EAE8;

	/* Tipografía */
	--font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

	--fs-display: clamp(2.5rem, 5vw, 4.25rem);
	--fs-h2: clamp(2rem, 4vw, 3.25rem);
	--fs-h3: 1.5rem;
	--fs-body-lg: 1.125rem;
	--fs-body: 1rem;
	--fs-eyebrow: 0.875rem;
	--fs-caption: 0.8125rem;

	/* Pesos Satoshi (spec §1): Light 300 · Regular 400 · Medium 500 · Bold 700 */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* Tracking e interlineado de titulares — ceñidos como la referencia */
	--tracking-display: -0.03em;
	--tracking-h2: -0.025em;
	--tracking-h3: -0.015em;
	--lh-display: 1.05;
	--lh-h2: 1.1;

	/* Medida de lectura (que los titulares no queden ni apretados ni sueltos) */
	--measure-title: 18ch;
	--measure-text: 62ch;

	/* Layout y ritmo */
	--container: 1200px;
	--gutter: 24px;
	--gutter-mobile: 16px;
	--section-pad: clamp(64px, 9vw, 120px);

	/* Formas */
	--radius-pill: 999px;
	--radius-card: 24px;
	--radius-card-sm: 20px;
	--radius-chip: 12px;

	/* Sombras suaves estilo glass + halos */
	--shadow-soft: 0 18px 50px -20px rgba(0, 41, 31, 0.18);
	--shadow-card: 0 1px 2px rgba(0, 41, 31, 0.05), 0 14px 36px -18px rgba(0, 41, 31, 0.18);
	--shadow-glass: 0 24px 80px -28px rgba(0, 224, 168, 0.35);
	/* Borde/halo claro para tarjetas tipo glass */
	--ring-claro: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	--ring-verde: inset 0 0 0 1px rgba(0, 224, 168, 0.22);
	/* Glow verde reutilizable detrás de elementos clave */
	--glow-verde: 0 0 70px -8px rgba(0, 224, 168, 0.5);
	--glow-verde-fuerte: 0 0 90px -4px rgba(0, 240, 184, 0.65);

	/* Degradados de marca — direccionales y con profundidad (no planos) */
	--grad-verde: radial-gradient(120% 120% at 70% 20%, var(--verde-brillo) 0%, var(--verde) 45%, transparent 80%);
	--grad-verde-rico: radial-gradient(135% 130% at 72% 12%, #5BFFD6 0%, var(--verde-brillo) 26%, var(--verde) 52%, #00B488 76%, transparent 94%);
	--grad-verde-suave: linear-gradient(135deg, rgba(0, 240, 184, 0.18), rgba(0, 224, 168, 0.04));
	/* Fondo oscuro direccional con luz verde — para secciones verde-oscuro */
	--grad-oscuro: radial-gradient(120% 95% at 82% 0%, #0B5240 0%, var(--verde-oscuro) 52%, #001B14 100%);
	--grad-oscuro-glow: radial-gradient(90% 80% at 85% 10%, rgba(0, 224, 168, 0.28), transparent 60%);
}