/* ========================================================================= SCALAR — landing page layout.css — .split-view (envoltorio "El problema"+"La solución"). 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. ========================================================================= */ /* ---------- 5. .split-view (envoltorio de "El problema" + "La solución") ---------- En desktop obliga a que ambas secciones entren juntas en una sola pantalla: el envoltorio mide 100vh (mismo alto que el hero, para mantener el mismo "ritmo" de scroll entre secciones) y lo reparte mitad y mitad entre las 2 secciones (flex:1 en cada una) sin importar cuánto contenido tenga cada una. Se desactiva en mobile (ver @media 767px) porque ahí no entra todo el contenido cómodo en medio viewport. */ .split-view{ height: 100vh; display: flex; flex-direction: column; } .split-view > section{ flex: 1; min-height: 0; /* permite que la sección se achique por debajo de su alto de contenido si hiciera falta, en vez de desbordar el flex:1 */ display: flex; align-items: center; /* centra el contenido de la sección verticalmente dentro de su mitad */ } .split-view > section > *{ width: 100%; } /* el grid interno (.problema-inner/.solucion-inner) ocupa todo el ancho disponible como hijo flex */