/* ========================================================================= SCALAR — landing page por-que-elegirnos.css — sección "Por qué elegirnos" (fondo claro, 4 columnas centradas). 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. por-que-elegirnos.css — sección "Por qué elegirnos" (fondo claro, 4 cols) 11. 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/ esta sección), 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. ========================================================================= */ /* ---------- 10. Sección "Por qué elegirnos" ---------- Vuelve a fondo claro después de "Qué hacemos" (oscuro) — mismo #f5f7fb que "La solución", para que se sienta como parte del mismo par de secciones claras y no una tercera variante de color nueva. Mismo padding vertical (120px desktop) que "Qué hacemos", por la misma lógica de consistencia entre secciones que ya se aplicó en mobile (ver responsive.css: las 4 secciones comparten 122px/48px ahí). */ .por-que-elegirnos{ background: #f5f7fb; padding: 88px 64px; text-align: center; } .pqe-inner{ max-width: 1440px; margin: 0 auto; } /* Eyebrow centrado con línea a los DOS lados (a diferencia de .problema-eyebrow/.que-hacemos-eyebrow en shared.css, que sólo tienen línea a la izquierda porque esas secciones son de 2 columnas alineadas a la izquierda) — acá toda la sección está centrada, así que el eyebrow sigue el mismo criterio. Usa .divider-line (ver shared.css) dos veces en vez de crear una clase nueva sólo para el ancho. */ .pqe-eyebrow{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; } .pqe-eyebrow .divider-line{ width: 20px; } .pqe-eyebrow span:not(.divider-line){ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); } /* Mismo tamaño/peso que .que-hacemos-title (34px/800), pero centrado y en --ink (fondo claro) en vez de --text (fondo oscuro). */ .pqe-title{ font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); max-width: 640px; margin: 0 auto 72px; } .pqe-title .accent{ color: var(--blue); } .pqe-grid{ display: grid; grid-template-columns: repeat(4, 1fr); } /* Separador vertical fino ENTRE columnas (no alrededor): pseudo-elemento en todos menos el primer item, con position:relative en el padre para anclarlo. top/bottom en vez de height:100% para que no toque los bordes del grid (mismo criterio "de aire" que separa contenido de los límites de la sección en el resto del sitio). */ .pqe-item{ position: relative; padding: 0 28px; } .pqe-item:not(:first-child)::before{ content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--surface-border); } /* Mismo círculo con ícono que .problema-icon (fondo --icon-bg, ícono --blue), pero un poco más grande (64px, como .que-hacemos-node) porque acá es el elemento principal de cada columna, no un acento secundario dentro de una tarjeta. */ .pqe-icon{ width: 64px; height: 64px; border-radius: 50%; background: var(--icon-bg); color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .pqe-icon svg{ width: 26px; height: 26px; } /* "01"/"02"/"03"/"04": sólo existe visualmente en el layout de tarjetas de mobile (ver responsive.css) — en desktop/tablet cada columna ya se distingue por posición, un número ahí sería ruido. Oculto acá por defecto, .pqe-item-body no le agrega ningún estilo propio en este ancho (ver comentario en el HTML), así que el resto del item se ve idéntico a antes de agregar este wrapper. */ .pqe-num{ display: none; } .pqe-item h3{ font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); } /* Usa .divider-line (ver shared.css); acá sólo ancho/margen propios, centrado (margin auto en vez de sólo margin-top) porque todo el item está centrado, a diferencia de .problema-item-divider. */ .pqe-item-divider{ width: 22px; margin: 12px auto 14px; } .pqe-item p{ font-size: 14.5px; line-height: 1.65; color: var(--text-muted); max-width: 230px; margin: 0 auto; }