/* ========================================================================= SCALAR — landing page problema.css — sección "El problema" (fondo claro). 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. segmentos.css — sección "Para cada etapa de tu negocio" (fondo oscuro) 12. 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/ por-que-elegirnos/segmentos), 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. ========================================================================= */ /* ---------- 6. Sección "El problema" ---------- Primera sección de fondo claro del sitio (todo lo anterior es oscuro): marca el contraste entre el hero y el resto del contenido. Colores propios acá (no usa las variables --text/--text-dim, pensadas para fondo oscuro). */ .problema{ position: relative; overflow: hidden; /* contiene los círculos decorativos (.problema-deco) */ background: #fdfdfd; color: var(--ink); /* Sin padding-top reservado para la navbar: eso volvía la caja asimétrica (más aire arriba del contenido que abajo, porque el padding-top se restaba del área que centra .split-view). El contenido queda centrado de verdad, parejo arriba y abajo, dentro de su mitad de 100vh. La navbar (semi-transparente, con blur) puede superponerse un instante al borde superior mientras se hace scroll de transición — es un solape breve y normal, no un problema de legibilidad. */ padding: 0 64px; } /* Círculos concéntricos punteados, decorativos, arriba a la derecha — puro detalle visual, por eso aria-hidden y sin interacción. */ .problema-deco{ position: absolute; top: -140px; right: -60px; width: 480px; height: 480px; fill: none; stroke: rgba(59,107,245,0.18); stroke-width: 1; stroke-dasharray: 3 6; pointer-events: none; } /* Versión clara del "wash" de color que ya usan .que-hacemos::before y .segmentos-bg (manchas de degradado radial, blureadas, en movimiento lento) — acá en tonos pastel/celestes, muy tenues, porque el fondo es blanco/casi blanco (#fdfdfd) en vez de oscuro. Sin esto, el backdrop-filter de las tarjetas (ver .problema-item más abajo) no tenía nada de color real detrás para desenfocar — quedaba "vidrio" sólo de nombre, sin efecto visible. Sesgado hacia la derecha (donde están las 3 tarjetas, ver .problema-inner: grid 1.4fr/2.7fr) para que el color se note específicamente ahí, no desperdiciado del lado de la intro. */ .problema::before{ content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle, rgba(59,107,245,0.11) 0%, transparent 60%), radial-gradient(circle, rgba(111,149,255,0.09) 0%, transparent 65%); background-repeat: no-repeat; background-size: 50% 70%, 42% 60%; background-position: 78% 15%, 62% 85%; filter: blur(65px); animation: problemaGlow 34s ease-in-out infinite alternate; /* Pausado por defecto; problema-carousel.js lo retoma sólo mientras la sección está en pantalla (clase .is-bg-visible en .problema) — mismo criterio de performance que .hero::before/.que-hacemos::before/ .segmentos-grid: un blur(65px) animando en loop infinito no debe correr para siempre desde que carga la página si el usuario nunca llegó a ver esta sección (o ya la scrolleó y quedó atrás). */ animation-play-state: paused; pointer-events: none; } .problema.is-bg-visible::before{ animation-play-state: running; } @keyframes problemaGlow{ 0% { background-position: 78% 15%, 62% 85%; } 50% { background-position: 60% 40%, 78% 55%; } 100% { background-position: 70% 65%, 55% 30%; } } @media (prefers-reduced-motion: reduce){ .problema::before{ animation: none; } } .problema-inner{ position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; display: grid; /* 2 columnas nada más: intro | grupo de tarjetas (ver .problema-cards). Antes eran 4 columnas (intro + 3 tarjetas sueltas), pero así cada tarjeta sólo podía igualar altura con .problema-intro (mucho más alta por el párrafo), nunca entre ellas. */ grid-template-columns: 1.4fr 2.7fr; gap: 40px; /* center: la columna de tarjetas no se estira para igualar el alto de .problema-intro (que suele ser más alta, por el párrafo+cita) — mantiene su alto natural, pero centrada contra la intro en vez de quedar pegada arriba (que dejaba un hueco vacío abajo cuando la intro es bastante más alta que las tarjetas). */ align-items: center; } .problema-intro{ padding-right: 24px; } /* Grupo de las 3 tarjetas: grid propio con stretch (default), así SÍ se igualan en altura entre ellas — la más alta (por el título o la descripción más larga) marca el alto de las 3. */ .problema-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* En desktop/tablet este envoltorio no debe existir "para el layout": sus 3 .problema-item hijos tienen que caer directo como celdas del grid de arriba, como si .problema-cards-track no estuviera. display:contents hace exactamente eso (el elemento desaparece visualmente pero sus hijos siguen en el DOM). En mobile se vuelve el carril real del carrusel — ver el media query de mobile más abajo. */ .problema-cards-window{ display: contents; } .problema-cards-track{ display: contents; } /* Puntitos del carrusel de mobile: ocultos acá por defecto (display:none), sólo se muestran en el media query de mobile de más abajo. */ .problema-dots{ display: none; justify-content: center; gap: 10px; } .problema-dots button{ width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(59,107,245,0.25); cursor: pointer; transition: background .25s ease, transform .25s ease; } .problema-dots button.is-active{ background: var(--blue); transform: scale(1.25); } /* 32px, no 34px como el resto de los h2 del sitio (.que-hacemos-title/ .pqe-title/.segmentos-title/.cta-final h2): esta sección y "La solución" (.solucion-title h2, mismo tamaño, ver solucion.css) comparten un mismo .split-view a media altura de sección, con menos aire que las demás — por eso el par queda un escalón más chico, a propósito. */ .problema-intro h2{ font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; } .problema-intro h2 .accent{ color: var(--blue); } /* Línea corta entre el título y el copy, mismo lenguaje visual que el eyebrow de arriba y que la línea de cada tarjeta (.problema-item-divider). Usa .divider-line (ver sección 1); acá sólo el ancho y el margen propios. */ .problema-divider{ width: 28px; margin: 24px 0; } /* 15px, no 16px: mismo tamaño de "párrafo de intro" que usan el resto de las secciones (.solucion-copy p, .cta-final-sub, .segmentos-note) — antes este era el único en 16px, sin ningún motivo estructural para diferir. */ .problema-intro p{ font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 420px; } /* Cita agregada abajo del párrafo de intro (pedido puntual, no forma parte del copy original): borde izquierdo de color para diferenciarla como cita en vez de texto corrido, itálica y un pelín más chica/atenuada que el párrafo de arriba. Sin atribución de autor porque la frase circula parafraseada de varias formas y no hay una fuente confirmada. */ .problema-quote{ max-width: 420px; margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--blue); font-size: 14.5px; font-style: italic; line-height: 1.6; color: var(--text-muted); } /* Los 3 puntos del problema, ahora como tarjetas propias (fondo blanco, sombra suave, borde superior de color) en vez de columnas separadas por líneas — más presencia visual, se sienten como piezas independientes. */ /* Antes tenían box-shadow para dar profundidad, pero en mobile/landscape (carrusel con overflow:hidden alrededor, ver .problema-cards-window) la sombra se salía de la tarjeta y quedaba recortada contra el borde de la ventana — se notaba como un corte feo. Un borde fino (en vez de sombra) da esa misma sensación de "tarjeta propia" sin nada que pueda salirse de su propia caja y sufrir ese recorte. */ .problema-item{ position: relative; overflow: hidden; /* Blanco semitransparente + blur (en vez de #fff sólido): deja pasar el wash de color de .problema::before "a través" de la tarjeta, mismo lenguaje que .que-hacemos-card pero en versión clara — acá el vidrio es blanco/perla en vez de oscuro. */ background: rgba(255,255,255,0.58); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--surface-border); border-radius: 14px; padding: 32px 24px 28px; /* Bisel claro: highlight blanco arriba, sombra celeste tenue abajo — el mismo par inset que .que-hacemos-card, pero con colores invertidos (blanco/azul en vez de blanco/negro) porque acá el "vidrio" es claro. Sin box-shadow exterior a propósito: en el carrusel de mobile/tablet (.problema-cards-window, overflow:hidden) una sombra hacia afuera terminaba recortada contra el borde de la ventana — por eso el efecto de profundidad viene sólo de adentro, nunca se sale de la propia caja. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(59,107,245,0.1); transition: transform .25s var(--ease-smooth), box-shadow .25s ease; } /* Brillo diagonal recorriendo cada tarjeta, mismo mecanismo que .que-hacemos-card::before (segmentBarSheen/queHacemosCardSheen) pero en blanco→celeste en vez de blanco→azul-oscuro, y con un delay distinto por tarjeta (nth-of-type) para que no brillen las 3 juntas. */ .problema-item::before{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(255,255,255,0.55) 0%, transparent 30%, transparent 70%, rgba(59,107,245,0.12) 100%); background-size: 250% 100%; background-position: 0% 0%; pointer-events: none; animation: problemaCardSheen 20s ease-in-out infinite alternate; /* Mismo criterio que .que-hacemos-card::before: pausado por defecto, problema-carousel.js lo retoma sólo mientras "El problema" está en pantalla (.is-bg-visible en .problema). */ animation-play-state: paused; } .problema.is-bg-visible .problema-item::before{ animation-play-state: running; } .problema-item:nth-of-type(2)::before{ animation-delay: -6s; } .problema-item:nth-of-type(3)::before{ animation-delay: -12s; } @keyframes problemaCardSheen{ 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } @media (prefers-reduced-motion: reduce){ .problema-item::before{ animation: none; } } /* El brillo (::before, position:absolute) pinta por encima del ícono/texto si no se los sube de capa — mismo ajuste que .que-hacemos-card > *. */ .problema-item > *{ position: relative; z-index: 1; } /* Lift sutil en hover, sólo con mouse real (pointer:fine): en el carrusel táctil de mobile/tablet un :hover sin este guard puede quedar "pegado" después de un tap, mismo criterio que evita ese problema en otras partes del sitio. */ @media (hover: hover) and (pointer: fine){ .problema-item:hover{ transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(59,107,245,0.16); } } .problema-icon{ width: 52px; height: 52px; border-radius: 50%; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; color: var(--blue); /* Centrado horizontal dentro de la tarjeta (el título y el texto de abajo quedan alineados a la izquierda, sólo el ícono se centra). */ margin: 0 auto 24px; } .problema-icon svg{ width: 24px; height: 24px; } .problema-item h3{ font-size: 16px; font-weight: 700; line-height: 1.3; } /* Usa .divider-line (ver sección 1); acá sólo el ancho y el margen propios. */ .problema-item-divider{ width: 22px; margin: 12px 0 14px; } /* 14.5px, no 14px: mismo tamaño de "párrafo de tarjeta" que usan .que-hacemos-card p y .pqe-item p — antes era el único distinto. */ .problema-item p{ font-size: 14.5px; line-height: 1.6; color: var(--text-muted); } /* Activación compartida del carrusel de "El problema": en los 3 rangos donde el carril deja de ser display:contents (grid de desktop) y pasa a comportarse como carrusel real — Tablet chica (768–1023px), celulares/ tablets acostados de poca altura (1024–1439px landscape, max-height 500px) y mobile vertical (≤767px) — estas reglas son idénticas, así que viven acá agrupadas en un único media query en vez de repetidas 3 veces. Lo que sí varía entre esos 3 rangos (paddings, gaps, tamaños de ícono/texto, margin de los puntitos) queda en cada media query individual más abajo (secciones 8 y 9), que ahora sólo tienen esos valores puntuales. */ @media (min-width: 768px) and (max-width: 1023px), (min-width: 1024px) and (max-width: 1439px) and (orientation: landscape) and (max-height: 500px), (max-width: 767px){ .problema-cards{ display: block; min-width: 0; } .problema-cards-window{ display: block; overflow: hidden; position: relative; } .problema-cards-track{ display: flex; transition: transform .5s var(--ease-smooth); } .problema-dots{ display: flex; } .problema-item{ display: flex; align-items: center; flex: 0 0 100%; width: 100%; } .problema-icon{ flex: none; margin: 0; } }