/* ==========================================================================
MAIA - DESIGN SYSTEM
Sistema de tokens y componentes base para Mujeres Argentinas en IA
========================================================================== */
/* Las fuentes (Urbanist/Inter) se cargan por en el del
HTML, no por @import acá. @import dentro de un CSS es render-blocking
Y de descubrimiento serial: el navegador primero tiene que bajar y
parsear este archivo entero antes de enterarse de que necesita pedir
fonts.googleapis.com, y recién ahí arranca esa segunda descarga — un
salto extra en la cadena que atrasa la fuente real. Con en el
HTML el navegador la descubre y empieza a pedirla enseguida, en
paralelo con el resto, y además permite usar
para adelantar la conexión a ese dominio. */
:root {
/* 1. BRAND COLORS */
--color-primary: #0c4e91; /* Azul MAIA - Institucional, profundo */
--color-primary-deep: #082f5a; /* Azul MAIA oscuro - hover de botones, fondo de footer */
--color-secondary: #1a9ba1; /* Turquesa MAIA - Innovación, llamadas a la acción */
--color-secondary-deep: #13777c; /* Turquesa oscuro - texto sobre fondo claro (citas) */
--color-secondary-light: #a5f3fc; /* Turquesa claro - stop de degradados de texto */
--color-accent: #faba50; /* Dorado - acento puntual (badge del Hero) */
/* 2. NEUTRAL COLORS */
--color-neutral-0: #ffffff; /* Blanco puro */
--color-neutral-50: #f7f9fc; /* Blanco hueso (fondo de botones sobre banners oscuros) */
--color-neutral-100: #f8fafc; /* Fondo ultraclaro */
--color-neutral-200: #f1f5f9; /* Plata / Gris muy claro (para secciones) */
--color-neutral-300: #e2e8f0; /* Bordes y divisores */
--color-neutral-500: #94a3b8; /* Texto secundario claro / Placeholder */
--color-neutral-700: #475569; /* Texto secundario oscuro / Subtítulos */
--color-neutral-900: #0f172a; /* Texto principal / Azul casi negro para máximo contraste */
/* 3. SEMANTIC COLORS */
--color-success: #10b981;
--color-error: #ef4444;
/* 4. TYPOGRAPHY */
--font-family-primary: 'Urbanist', system-ui, -apple-system, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 2rem; /* 32px */
--font-size-4xl: 2.5rem; /* 40px */
--font-size-5xl: 3.5rem; /* 56px */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-black: 900;
/* 5. SPACING (Escala de 4px a 8px) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
/* 6. BORDER RADIUS */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 9999px;
/* 7. SHADOWS & ELEVATION */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-glow-primary: 0 4px 20px rgba(12, 78, 145, 0.15);
--shadow-glow-secondary: 0 4px 20px rgba(26, 155, 161, 0.3);
/* 8. LAYOUT GRID (12 columnas, alineado a Figma) */
--container-max-width: 1200px;
--grid-columns: 12;
--grid-gutter: var(--space-6); /* 24px */
}
/* ==========================================================================
LAYOUT GRID (12 columnas — contenedor 1200px, gutter 24px)
Uso:
...
Cada .col-N ocupa N de las 12 columnas; en mobile todo colapsa a 1 columna.
========================================================================== */
.grid-12 {
position: relative;
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gutter);
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px) {
.grid-12 { grid-template-columns: 1fr; }
.grid-12 > [class^="col-"],
.grid-12 > [class*=" col-"] { grid-column: span 1; }
}
/* ==========================================================================
RESET & BASE
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* overflow-x:hidden en html+body como red de seguridad genérica contra
scroll horizontal accidental (ej. algún truco de full-bleed 100vw
puede desbordar por el ancho de la scrollbar en Windows). No recorta
elementos position:fixed (navbar, menú mobile, overlay), que se
posicionan contra el viewport, no contra este overflow. */
html {
overflow-x: hidden;
}
body {
font-family: var(--font-family-primary);
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
a {
color: var(--color-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--color-primary);
}
/* ==========================================================================
COMPONENTS
========================================================================== */
/* Botones */
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
/* Hover del ícono/texto: se cruzan suavemente (el ícono pasa al lado
contrario del texto). Un solo ícono por botón, sin destello ni
duplicados — el cruce lo maneja GSAP en animations.js
(initButtonSwapHover), midiendo el ancho real de cada uno en vez de
una distancia fija, así funciona igual en botones de cualquier
largo de texto. Acá solo se declara que ambos son animables. */
.btn-icon,
.btn-text {
display: inline-block;
will-change: transform;
}
.btn-primary-teal {
background-color: var(--color-secondary);
color: var(--color-neutral-0);
box-shadow: var(--shadow-glow-secondary);
}
.btn-primary-teal:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 6px 24px rgba(26, 155, 161, 0.4);
color: var(--color-neutral-0);
}
/* ==========================================================================
ANIMACIONES (GSAP + ScrollTrigger) — ver animations.js
.hide-overflow envuelve cada palabra de un título; .gsap-word es el
span interno que GSAP mueve con yPercent. El estado "oculto" inicial
NO se define acá por CSS estático: GSAP lo aplica vía inline style al
crear cada tween (immediateRender), así que si el script de GSAP no
carga (CDN caído, bloqueado, etc.) el texto queda 100% visible y
normal — nunca se esconde por una clase CSS permanente.
========================================================================== */
/* padding-bottom + margin-bottom negativo (mismo valor, signo opuesto):
le da al overflow:hidden margen vertical de sobra para que no recorte
los descendentes de letras como g/y/j/p/q (ej. "Liderazgo",
"Gobernanza") — los títulos usan line-height:1 (.title-large), más
ajustado que el alto real de esas letras, así que sin este colchón
el propio recorte de la máscara les comía la colita. La suma neta de
padding + margin es 0, así que no mueve nada más en el layout. */
.hide-overflow {
display: inline-block;
overflow: hidden;
padding-bottom: 0.2em;
margin-bottom: -0.2em;
vertical-align: top;
}
.gsap-word {
display: inline-block;
will-change: transform;
}
/* Transición entre páginas — barra de progreso fina arriba (estilo
YouTube/GitHub), no un panel que tapa la pantalla (eso se sentía
pesado y, sin contexto, se leía como un glitch — feedback directo
del usuario). Reposo: 0 de ancho y opacity:0, invisible; si el CDN de
GSAP no carga, la barra nunca aparece y la navegación es la normal
del navegador — no hace falta red de seguridad porque no hay nada
que "liberar" (a diferencia del panel anterior, que empezaba
tapando todo por CSS estático). */
.page-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
opacity: 0;
z-index: 9999;
background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
pointer-events: none;
}
/* ----------------------------------------------------------------
PRELOADER — animación de entrada del logo en la primera carga de
la sesión (no en cada navegación interna: eso ya se descartó con
el panel de transición de arriba por sentirse "pesado"; acá es
distinto, una sola vez, y el usuario lo pidió explícitamente).
Versión minimalista: logo chico + fade + barrita de progreso,
sin glow ni shine (se probaron y se sacaron a pedido). sessionStorage
decide si se muestra; ver el