/* ========================================================================= SCALAR — landing page variables.css — paleta de colores y tokens compartidos. Es parte de la hoja de estilos, dividida en varios módulos (ver /css). IMPORTANTE — orden de carga: el ORDEN en que estos archivos se linkean en el de index.html importa, mantiene el mismo orden de cascada que tenía todo en un único styles.css. Si se agrega un archivo nuevo hay que linkearlo en el lugar que corresponda: 1. variables.css — paleta de colores y tokens (:root) 2. base.css — reset y estilos base de html/body 3. shared.css — componentes reutilizados entre 2+ secciones (línea divisoria, eyebrow, keyframe de brillo) 4. navbar.css — navbar fija (logo, links, cta, versión compacta) 5. hero.css — hero (imagen, texto, botones, leyenda rotativa) 6. layout.css — .split-view ("El problema" + "La solución" juntas) 7. problema.css — sección "El problema" (fondo claro) 8. solucion.css — sección "La solución" (fondo claro) 9. que-hacemos.css — sección "Qué hacemos" (fondo oscuro, timeline) 10. responsive.css — ajustes de tablet, mobile y celulares chicos shared.css (3) va TEMPRANO a propósito: junta reglas que usan 2 o más secciones (ej. .divider-line lo usan hero/problema/solucion/que-hacemos), así que no puede vivir adentro del archivo de una sola sección — si agregás un componente nuevo usado por 2+ secciones, va ahí, no repetido en cada una. ========================================================================= */ :root{ /* Paleta de marca, centralizada acá para reutilizar en todo el sitio */ --bg: #060a14; --bg-2: #0a1122; --blue: #3b6bf5; --blue-light: #6f95ff; --text: #f2f4f9; --text-dim: #a7b0c4; /* Paleta de las secciones de fondo claro ("El problema" / "La solución"): no reutiliza --text/--text-dim (pensadas para fondo oscuro), así que tiene sus propios tokens acá, en vez de repetir los mismos literales en cada regla. */ --ink: #0b1220; /* texto principal sobre fondo claro */ --text-muted: #5b6472; /* copy secundario sobre fondo claro */ --text-faint: #c7ccd9; /* separadores/íconos apagados (+, flecha) */ --surface-border: #e7e9f0; /* borde sutil de tarjetas/paneles blancos */ --icon-bg: rgba(59,107,245,0.08); /* fondo tenue de los círculos de ícono */ /* Curva de easing tipo "material" (arranca rápido, frena suave): la usa el navbar al pasar a .is-compact, se siente más premium que un ease genérico para una transición de tamaño/layout. */ --ease-smooth: cubic-bezier(.4, 0, .2, 1); }