/* =========================================================================
SCALAR — landing page
base.css — reset y estilos base de html/body.
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.
========================================================================= */
/* La fuente (DM Sans) se carga desde en el de index.html, no
con @import acá: @import es render-blocking en serie (el navegador
descarga y parsea todo este archivo antes de siquiera pedir la hoja de
Google Fonts). Con el link en el HTML, ambas hojas se piden en paralelo
desde el arranque. */
/* ---------- 1. Reset y base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html{
scroll-behavior: smooth; /* permite que los links con # (ej. el botón de scroll del hero) se desplacen suavemente */
overflow-x: hidden; /* evita scroll horizontal accidental en mobile */
/* Reserva el espacio de la scrollbar vertical SIEMPRE, esté visible o no.
Sin esto, al abrir el menú mobile (que pone overflow:hidden en html/body
para bloquear el scroll de fondo) la scrollbar desaparece de golpe, el
ancho útil de la página crece esos ~15px, y todo lo centrado/fijo
(navbar, hero) se corre un poquito — el "salto" que se veía al abrir
y cerrar el menú. */
scrollbar-gutter: stable;
}
body{
font-family: 'DM Sans', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
max-width: 100vw;
}
/* JS agrega esta clase al body mientras el menú mobile está desplegado.
Ya no toca overflow ni position (ver bloque 3 del