/**
 * Tokens del sistema visual.
 *
 * Los valores máximos son los del diseño original, medidos sobre un lienzo de
 * 1920 px. Las tipografías y los espacios se interpolan con clamp() usando el
 * porcentaje que ese valor representa del ancho (por ejemplo 77px = 4.0104vw),
 * de modo que a 1920 px la página coincide con el PDF y por debajo escala sin
 * saltos hasta un mínimo legible.
 */

:root {
	/* --- Color ------------------------------------------------------------ */
	--c-black: #000;
	--c-off-white: #f4f4f4;
	--c-white: #fff;
	--c-grey: #d6d6d6;
	--c-grey-mid: #a3a3a3;
	--c-accent: #90ffff;
	--c-accent-soft: #90ffff; /* lavado cian de las fichas del portfolio */

	--c-bg: var(--c-off-white);
	--c-text: var(--c-black);

	/* --- Tipografía ------------------------------------------------------- */
	--font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

	--fw-extralight: 200;
	--fw-light: 300;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* El mínimo de 28px es el mayor que deja entrar en un móvil de 390px las
	   líneas del hero, que llevan salto manual desde el diseño. */
	--fs-display: clamp(1.75rem, 4.0104vw, 4.8125rem); /*  77px  títulos de sección y de proyecto */
	--fs-menu: clamp(1.875rem, 2.5365vw, 3.0438rem);   /*  48.7px items del menú */
	--fs-claim: clamp(1.625rem, 2.5vw, 3rem);          /*  48px  frases destacadas */
	--fs-lg: clamp(1.375rem, 1.875vw, 2.25rem);        /*  36px  título de tarjeta de servicio */
	--fs-md: clamp(1.1875rem, 1.5625vw, 1.875rem);     /*  30px  etiquetas y rótulos */
	--fs-base: clamp(1.0625rem, 1.1719vw, 1.4063rem);  /*  22.5px destacados de párrafo */
	--fs-body: clamp(1rem, 1.0417vw, 1.25rem);         /*  20px  cuerpo de texto */
	--fs-sm: clamp(0.875rem, 0.8958vw, 1.075rem);      /*  17.2px redes y legales */
	--fs-xs: clamp(0.875rem, 0.8594vw, 1.0313rem);     /*  16.5px enlaces secundarios */
	--fs-xxs: clamp(0.6875rem, 0.6771vw, 0.8125rem);   /*  13px  ubicación del pie */
	--fs-reading: clamp(0.9375rem, 0.9375vw, 1.125rem); /* 18px  textos largos: legales, 404 */

	/* Interlineados medidos sobre el diseño. */
	--lh-display: 1.2;
	--lh-display-tight: 0.84; /* Títulos de las fichas de proyecto. */
	--lh-menu: 1.95;
	--lh-body: 1.35;
	--lh-reading: 1.7; /* Párrafos largos: más aire que en las secciones. */

	--ls-wide: 0.02em;

	/* --- Ritmo vertical --------------------------------------------------- */
	--s-1: clamp(0.5rem, 0.5208vw, 0.625rem);    /* 10px */
	--s-2: clamp(0.75rem, 0.8333vw, 1rem);       /* 16px */
	--s-3: clamp(1rem, 1.25vw, 1.5rem);          /* 24px */
	--s-4: clamp(1.5rem, 2.0833vw, 2.5rem);      /* 40px */
	--s-5: clamp(2rem, 3.125vw, 3.75rem);        /* 60px */
	--s-6: clamp(2.5rem, 4.6875vw, 5.625rem);    /* 90px */
	--s-7: clamp(3.5rem, 7.2917vw, 8.75rem);     /* 140px  separación entre secciones */
	--s-8: clamp(4.5rem, 9.375vw, 11.25rem);     /* 180px */

	/* --- Retícula --------------------------------------------------------- */
	/* A 1920 px el contenido ocupa 1280 px con 320 px de margen a cada lado. */
	--pad: clamp(1.25rem, 16.667vw, 20rem);
	--content: 1280px;
	--gap: clamp(1rem, 1.25vw, 1.5rem); /* 24px: separación de la grilla de servicios y portfolio */

	/* Banda clara superior del diseño: 235 px sobre 1920. */
	--header-h: clamp(4.75rem, 12.24vw, 10.6875rem);
	/* Al dejar atrás el hero la banda se compacta: es la altura que de verdad
	   tapa contenido, y por lo tanto la que hay que descontar al saltar a una
	   sección. */
	--header-h-compact: clamp(4.25rem, 5.6vw, 6.75rem);

	/* --- Otros ------------------------------------------------------------ */
	--radius: clamp(0.375rem, 0.42vw, 0.5rem);      /*  8px  tarjetas y fichas */
	--radius-lg: clamp(0.625rem, 0.73vw, 0.875rem); /* 14px  paneles y tarjetas grandes */
	--radius-pill: 999px;
	--rule: rgba(0, 0, 0, 0.45);
	--rule-dark: rgba(255, 255, 255, 0.35);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-fast: 0.2s;
	--t-slow: 0.5s;
	/* El logotipo y el botón del menú quedan visibles por encima del
	   desplegable, como en el diseño. */
	--z-overlay: 200;
	--z-header: 300;
}

/* Por debajo de 1200 px deja de tener sentido conservar el margen proporcional
   del diseño: el contenido quedaría demasiado angosto. */
@media (max-width: 1200px) {
	:root {
		--pad: 5vw;
	}
}

@media (max-width: 768px) {
	:root {
		--pad: 6vw;
		--lh-display-tight: 1.05;
		--lh-menu: 1.6;
	}
}

@media (max-width: 480px) {
	:root {
		--pad: 1.25rem;
	}
}

/* --- Poppins autoalojada -------------------------------------------------- */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/poppins-200-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/poppins-200-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/poppins-300-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/poppins-300-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}