/* Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-red: #e30613; /* Color principal de marca. Úsalo en fondos de portadas y separadores de sección, en bloques destacados, en los bullets cuadrados de las listas, como resaltado detrás de palabras clave de un titular y en etiquetas tipo píldora. Encima de este rojo, el texto siempre va en blanco. No lo mezcles con otros colores saturados. */
  --brand-red-soft: #fdb9bd; /* Rosa suave de apoyo. Úsalo en el nivel intermedio de las jerarquías (gris claro → rosa → rojo) y en tarjetas secundarias. Encima, el texto va en negro. Nunca como color principal ni en fondos grandes. */
  --brand-neutral-white: #ffffff; /* Fondo principal de páginas y slides de contenido, y color del texto sobre rojo o negro. Deja mucho espacio en blanco. */
  --brand-neutral-100: #f3f3f3; /* Gris muy claro para tarjetas, bloques alternos y el primer nivel de las jerarquías. Sirve para separar zonas sin usar bordes. */
  --brand-neutral-black: #000000; /* Solo para texto: titulares, cuerpo de texto, números grandes y bordes finos de las píldoras sobre fondo blanco o neutral-100. No lo uses como color de fondo; para fondos oscuros usa neutral-950. */
  --brand-neutral-950: #0a0a0a; /* Solo para fondos oscuros: separadores de sección alternativos al rojo, tarjetas destacadas y bloques oscuros en web. Encima, el texto va siempre en blanco (neutral-white). No lo uses para texto. */
  --brand-neutral-500: #595959; /* Texto secundario, pies de foto y metadatos. Solo sobre fondo blanco o neutral-100. */
  --brand-neutral-300: #dfdfdf; /* Divisores y bordes de campos de formulario en web. */
  --brand-neutral-studio: #ced4d4; /* Fondo gris de estudio detrás de los retratos recortados de personas. Solo para PersonCard y para huecos de foto pendientes. */
  --shadow-none: 0 0 0 #00000000; /* La marca no usa sombras en ningún caso, ni en slides ni en web. La profundidad y la jerarquía se crean con bloques de color plano (rojo, negro, gris claro, blanco), con el tamaño de la tipografía y con el espacio. Nunca añadas sombras a tarjetas, botones, fotos ni menús. Para destacar algo o marcar que se ha pasado el ratón por encima, cambia el color de fondo, no añadas sombra. */
}
:root {
  --space-slides-xs: 8px; /* Separación mínima: entre el nombre y el cargo de una persona, o entre líneas de datos de contacto. */
  --space-slides-sm: 16px; /* Entre elementos muy relacionados: el icono de flecha y su píldora, o una etiqueta y el texto que la sigue. */
  --space-slides-md: 24px; /* Del título de una tarjeta a su descripción, del bullet cuadrado rojo a su texto, y hueco entre tarjetas o fotos colocadas en fila. */
  --space-slides-lg: 40px; /* Relleno interior de las tarjetas y separación entre los elementos de una lista. */
  --space-slides-xl: 64px; /* Entre bloques de contenido distintos dentro de una misma slide, por ejemplo entre un programa y el siguiente. */
  --space-slides-2xl: 96px; /* Margen exterior de la slide en los cuatro lados. El logo, los títulos y las píldoras se alinean siempre a este margen. */
  --space-slides-3xl: 128px; /* Del título de la slide (heading-1) al inicio del contenido. Deja respirar el título. */
  --space-web-xs: 8px; /* Entre un icono y su texto, y entre etiquetas o píldoras seguidas. */
  --space-web-sm: 12px; /* Entre botones colocados uno al lado del otro, y del título de una tarjeta a su descripción. */
  --space-web-md: 16px; /* Hueco entre tarjetas de una misma rejilla. */
  --space-web-lg: 32px; /* Relleno interior de las tarjetas. En móvil, 24. */
  --space-web-xl: 48px; /* Del título de sección (y su descripción) al contenido de esa sección. */
  --space-web-2xl: 96px; /* Espacio vertical arriba y abajo de cada sección de la página. En móvil, 56. */
  --space-web-gutter: 24px; /* Margen lateral de la página en móvil. El contenido nunca pasa de 1200 px de ancho y se centra en pantallas grandes. */
  --radius-none: 0px; /* Regla de la marca: las superficies son rectas, aunque se puedan pulsar; los controles y las etiquetas son redondos. Úsalo en tarjetas (también las clicables), bloques de color, secciones, fotos y la caja roja de resaltado de palabras, en slides y en web. Una tarjeta clicable se señala con el círculo con flecha (radius-full) en una esquina y, al pasar el ratón, cambia de fondo, nunca de forma. */
  --radius-sm: 4px; /* Solo para campos de formulario en web: inputs, selects y áreas de texto. Nunca en tarjetas ni en imágenes. */
  --radius-full: 999px; /* Controles y etiquetas: botones, píldoras, filtros y el círculo con flecha que marca una tarjeta clicable. En slides, borde de 1,5 px (blanco sobre rojo o negro, negro sobre blanco) o relleno rojo o blanco. En web, borde de 1 px. */
  --font-inter-tight-variable-font-wght: 'Inter Tight Variable Font wght', sans-serif;
  --text-display-number: 400 480px/0.9 var(--font-inter-tight-variable-font-wght); /* Un número solo en un separador de sección ("01", "02"), arriba a la derecha, en blanco sobre rojo o negro. */
  --text-display-word: 400 312px/0.9 var(--font-inter-tight-variable-font-wght); /* Una sola palabra gigante como título de concepto ("Misión", "Visión"). Máximo una palabra, abajo a la izquierda. */
  --text-display-index: 400 254px/0.9 var(--font-inter-tight-variable-font-wght); /* Números de índice con punto final ("01.", "02.", "03.") en páginas de índice con varias columnas, abajo a la izquierda de cada columna. */
  --text-display: 400 200px/0.95 var(--font-inter-tight-variable-font-wght); /* Titular de portadas, separadores y cierre ("Qué hacemos", "Por qué nosotros", "Lets Talk"). Abajo a la izquierda, sobre rojo o negro. Si el titular no cabe en 200, usa display-sm. */
  --text-display-sm: 400 172px/0.95 var(--font-inter-tight-variable-font-wght); /* Titular de portada o separador cuando es largo y no cabe en 200 ("Quiénes te acompañaremos", "Oferta Empresas" junto a un bloque de contenido). Mismo uso que display. */
  --text-number-step: 400 164px/0.9 var(--font-inter-tight-variable-font-wght); /* Números de pasos en una lista vertical de 3 (1, 2, 3). Con 4 o más en rejilla, usa heading-1 (88) en rojo. */
  --text-heading-block: 400 96px/1.05 var(--font-inter-tight-variable-font-wght); /* Título dentro de un bloque de color (rojo o negro), abajo a la izquierda. Solo en bloques de color; en slides normales se usa heading-1. */
  --text-heading-1: 400 88px/1.05 var(--font-inter-tight-variable-font-wght); /* Título de toda slide de contenido, con o sin píldora encima, arriba a la izquierda. También los números en rejilla (1-4) en rojo. */
  --text-heading-statement: 400 80px/1.1 var(--font-inter-tight-variable-font-wght); /* Frases manifiesto de 2-4 líneas (con o sin palabras resaltadas en rojo) y títulos largos sobre foto. Más pequeño que heading-1 porque es una frase, no un título. */
  --text-heading-2: 400 48px/1.25 var(--font-inter-tight-variable-font-wght); /* Párrafo de entrada destacado: 2-3 frases que abren una slide, en texto grande. */
  --text-heading-3: 600 40px/1.2 var(--font-inter-tight-variable-font-wght); /* Título en densidad estándar: tarjetas y bloques que ocupan la slide. Va con body (30) debajo. */
  --text-index-title: 400 40px/1.2 var(--font-inter-tight-variable-font-wght); /* Títulos de columna en páginas de índice, nombres de persona y títulos de LinkCard pequeñas (4 o más en fila). En Regular, no en Semibold. */
  --text-heading-4: 600 32px/1.2 var(--font-inter-tight-variable-font-wght); /* Título en densidad compacta: pasos, niveles y listas junto a una foto o un titular grande. Va con body-sm (26) debajo. */
  --text-body-xl: 400 36px/1.35 var(--font-inter-tight-variable-font-wght); /* Texto de cuerpo principal en slides de texto con mucho aire, y listas con bullet cuadrado cuando son protagonistas. */
  --text-body-lg: 400 32px/1.35 var(--font-inter-tight-variable-font-wght); /* Listas y textos en composiciones con más elementos, como la lista de la portada o el texto de una tarjeta gris. */
  --text-body: 400 30px/1.35 var(--font-inter-tight-variable-font-wght); /* Descripción en densidad estándar, bajo un heading-3 (40), y párrafos en slides con mucho texto. */
  --text-body-sm: 400 26px/1.35 var(--font-inter-tight-variable-font-wght); /* Descripción en densidad compacta, siempre bajo un heading-4 (32). */
  --text-caption: 400 24px/1.35 var(--font-inter-tight-variable-font-wght); /* Notas laterales pequeñas, pies de foto, cargos y datos de contacto. Los cargos van en cursiva, con el archivo Inter Tight Italic. Las etiquetas de nivel pueden ir en Semibold. */
  --text-label: 400 32px/1 var(--font-inter-tight-variable-font-wght); /* Píldora sola arriba de la página, alineada al margen superior ("Nuestro enfoque", "Tus profesores"). */
  --text-label-sm: 400 24px/1 var(--font-inter-tight-variable-font-wght); /* Píldora pequeña pegada a un título ("Q4 2026", "PRÓXIMOS PASOS"). Nunca sola arriba de la página. */
  --text-web-display: 400 96px/0.95 var(--font-inter-tight-variable-font-wght); /* Titular del hero. Uno por página. Se puede resaltar una palabra con fondo rojo y texto blanco, como en las slides. En móvil, 44 px. */
  --text-web-heading-1: 400 64px/1.05 var(--font-inter-tight-variable-font-wght); /* Títulos de sección de una landing y títulos de página interior (Programas, Equipo). En móvil, 36 px. */
  --text-web-heading-2: 400 40px/1.1 var(--font-inter-tight-variable-font-wght); /* Titulares dentro de bloques grandes o tarjetas destacadas (tarjetas oscuras o rojas a media página). En móvil, 28 px. */
  --text-web-heading-3: 600 22px/1.2 var(--font-inter-tight-variable-font-wght); /* Títulos de tarjetas pequeñas, módulos de temario y preguntas de FAQ. */
  --text-web-number: 400 160px/0.85 var(--font-inter-tight-variable-font-wght); /* Números gigantes: precios, cifras destacadas y numeración de bloques (01, 02). Es el equivalente web de display-number de slides. En móvil, 80 px. */
  --text-web-body-lg: 400 18px/1.45 var(--font-inter-tight-variable-font-wght); /* Subtítulo del hero y la descripción bajo cada título de sección. Máximo unas 60 letras por línea. */
  --text-web-body: 400 16px/1.5 var(--font-inter-tight-variable-font-wght); /* Texto de párrafos, tarjetas y listas. Para destacar una palabra, usa Semibold. */
  --text-web-small: 400 14px/1.4 var(--font-inter-tight-variable-font-wght); /* Textos de apoyo, metadatos (fecha, lugar) y pies de foto. Los cargos van en cursiva. */
  --text-web-label: 500 13px/1 var(--font-inter-tight-variable-font-wght); /* Texto de píldoras y etiquetas. Puede ir en mayúsculas. */
  --text-web-button: 600 15px/1 var(--font-inter-tight-variable-font-wght); /* Texto de botones y del enlace principal del menú. */
}
.display-number {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 480px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.display-word {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 312px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0em;
}
.display-index {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 254px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0em;
}
.display {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 200px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0em;
}
.display-sm {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 172px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0em;
}
.number-step {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 164px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.heading-block {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 96px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.heading-1 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 88px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.heading-statement {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 80px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.heading-2 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 48px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.heading-3 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.index-title {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.heading-4 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.body-xl {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 36px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.body-lg {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 32px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0em;
}
.body {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 30px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0em;
}
.body-sm {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 26px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0em;
}
.caption {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0em;
}
.label {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0em;
}
.label-sm {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-display {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 96px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.web-heading-1 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.web-heading-2 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.web-heading-3 {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.web-number {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 160px;
  line-height: 0.85;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.web-body-lg {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-body {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-small {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0em;
}
.web-label {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.web-button {
  font-family: var(--font-inter-tight-variable-font-wght);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0em;
}
@font-face {
  font-family: "Inter Tight Variable Font wght";
  src: url("fonts/InterTight-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight Variable Font wght";
  src: url("fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}