/* ==========================================================================
   Rijo & Asociados — tokens de diseño (MXDEV-265)
   Colores tomados del SVG del logo. Ningún otro archivo define colores sueltos.
   ========================================================================== */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
}

:root {
	/* Marca */
	--rijo-green: #00a867;       /* acentos, íconos */
	--rijo-green-2: #30b568;     /* "& Asociados" */
	--rijo-green-soft: #4fbc84;
	--rijo-green-mist: #76c7a0;
	--rijo-green-pale: #9fd6b8;
	--rijo-action: #007a4b;      /* botones con texto blanco (5.4:1) */
	--rijo-action-hover: #00663f;
	--rijo-teal: #025b5c;
	--rijo-petrol: #013c45;      /* banner, botón oscuro */
	--rijo-petrol-2: #024a52;
	--rijo-ink: #081f22;         /* titulares, footer */

	/* Neutros */
	--rijo-text: #081f22;
	--rijo-text-2: #3e4a4c;
	--rijo-text-3: #525e60;
	--rijo-muted: #8a9794;
	--rijo-border: #e3ece7;
	--rijo-border-2: #cbd9d2;
	--rijo-bg: #ffffff;
	--rijo-bg-soft: #f3f7f5;
	--rijo-bg-tint: #eef6f1;
	--rijo-bg-green: #e3f1e9;
	--rijo-placeholder: #dcede4;
	--rijo-on-dark: #cfe5d9;
	--rijo-on-dark-2: #b7c7c1;
	--rijo-on-dark-3: #8fa5a0;
	--rijo-line-dark: #22393c;
	--rijo-danger: #b42318;

	/* Tipografía */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.875rem); /* 36 → 62 */
	--fs-h1: clamp(2rem, 1.5rem + 2vw, 2.875rem);
	--fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
	--fs-h3: 1.1875rem;
	--fs-lg: 1.125rem;
	--fs-base: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.8125rem;
	--fs-eyebrow: 0.75rem;

	/* Espaciado (base 4) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-14: 3.5rem;
	--sp-16: 4rem;
	--sp-18: 4.5rem;
	--section-y: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

	/* Layout */
	--container: 1200px;
	--gutter: 1rem;
	--header-h: 72px;

	/* Formas */
	--radius-sm: 6px;
	--radius: 8px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--shadow-card: 0 10px 28px rgba(8, 31, 34, 0.06);
	--shadow-float: 0 18px 40px rgba(8, 31, 34, 0.12);
	--shadow-fab: 0 10px 24px rgba(8, 31, 34, 0.25);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--gutter: 1.5rem;
	}
}
@media (min-width: 1200px) {
	:root {
		--header-h: 84px;
	}
}