/* ========================================================================= SCALAR — landing page responsive.css — tablet, mobile y celulares chicos. 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. ========================================================================= */ /* ---------- 8. Tablet / laptop chico (sigue siendo el layout de desktop, sólo más ajustado) ---------- Breakpoints alineados a la escala estándar: Tablet 768px, Tablet L 1024px, Desktop recién a partir de 1439px. Pantallas como iPad Pro (1024px) o notebooks chicas usaban antes exactamente los mismos tamaños que un monitor grande, y el título/párrafo/grillas quedaban apretados o desproporcionados. Este bloque NO cambia el layout (sigue siendo el hero con imagen recortada + navbar píldora, no el apilado de mobile): sólo reduce paddings, tipografía y gaps para que ese mismo diseño respire bien en este rango intermedio. */ @media (min-width: 768px) and (max-width: 1439px){ /* El nav completo (logo wordmark + 4 links + CTA) no entra en 768px de ancho con las medidas de desktop: el botón "Contactanos" quedaba cortado fuera de pantalla. Se achica el logo (mismo tamaño que usa .is-compact en desktop al scrollear) y se ajustan links/CTA más angostos para que todo el conjunto entre con margen en todo el rango. */ .navbar-logo{ padding: 14px 18px; } .navbar-logo-mark{ height: 26px; } .navbar-logo-full{ height: 26px; } .navbar-logo-icon{ height: 26px; } .navbar-links{ gap: 0; } .navbar-links a{ padding: 8px 10px; font-size: 13px; } .navbar-cta{ padding: 11px 18px; font-size: 13px; margin: 12px 8px 12px 0; } /* .navbar.is-compact (ver bloque de más arriba) pesa más en especificidad que las reglas de acá arriba (tiene la clase .is-compact de más), así que al activarse en este rango terminaba GANÁNDOLE a este ajuste y agrandando de nuevo el link/CTA a sus medidas de "compacto de desktop" (pensadas para partir de un nav grande) — el conjunto volvía a no entrar en el ancho de tablet. Estas reglas repiten los mismos selectores con la clase .is-compact para igualar esa especificidad y que el nav sí seguga viéndose chico (y hasta un poco más, para que se note el efecto de "achicarse") en vez de crecer al activarse. */ .navbar.is-compact{ width: calc(100% - 48px); max-width: 900px; } .navbar.is-compact .navbar-logo{ padding: 10px 14px; } .navbar.is-compact .navbar-logo-mark{ height: 22px; } .navbar.is-compact .navbar-logo-full{ height: 22px; } .navbar.is-compact .navbar-logo-icon{ height: 22px; } .navbar.is-compact .navbar-links a{ padding: 7px 9px; font-size: 12px; } .navbar.is-compact .navbar-cta{ padding: 9px 15px; font-size: 12px; margin: 9px 6px 9px 0; } /* Al comprimirse, los links quedan centrados respecto del DISPOSITIVO (viewport), no del espacio libre entre logo y CTA — que casi nunca es lo mismo, porque el logo (ícono chico) y el CTA (botón con texto) no pesan igual. Sacar los links del flujo flex y centrarlos por posición absoluta respecto de .navbar (que ya es position:fixed, sirve de referencia) logra ese centrado real; logo y CTA quedan solos en el flex y space-between los manda cada uno a su punta. */ .navbar.is-compact .navbar-links{ position: absolute; left: 50%; transform: translateX(-50%); } /* .split-view: al reordenar "El problema" en vertical (texto arriba, tarjetas abajo, ver más abajo) su contenido pasa a ser más alto que antes, y ya no siempre entra en la mitad de pantalla que le fuerza .split-view — con overflow:hidden en .problema (por los círculos decorativos) eso cortaría la fila de tarjetas. Se desactiva acá (mismo criterio que en mobile): cada sección vuelve a su alto natural. */ .split-view{ height: auto; display: block; } .split-view > section{ display: block; } .split-view > section > *{ width: auto; } /* navH acá = 63px (justify-content:center ya viene heredado de la regla base): 56 + 63 = 119. */ .hero-grid{ padding: 119px 40px 56px; } h1{ font-size: 44px; } .hero-copy{ max-width: 480px; } .hero-sub{ font-size: 16px; max-width: 400px; margin-bottom: 28px; } /* "Conocé más" al lado del botón quedaba muy pegado/desalineado en este ancho (el link es más chico y su subrayado no calza bien en la misma fila que el botón píldora). Se apila debajo en vez de al lado. */ .hero-actions{ flex-direction: column; align-items: flex-start; gap: 18px; } /* .problema y .solucion ya no reciben su alto vertical de .split-view (desactivado arriba), así que necesitan su propio padding vertical. Acá .problema NO tiene min-height ni centrado por flex (a diferencia del hero o de la versión mobile/landscape de esta misma sección): es simplemente una caja con padding fijo arriba y abajo, así que "verse centrado" es directamente que ese padding sea IGUAL en los dos lados — no hace falta compensar por la navbar acá (eso sólo importa cuando hay una altura fija de la que repartir espacio de sobra, como en el hero). Antes tenía 110/72 y después 135/72 (buscando compensar la navbar), pero eso deja el padding-top más grande a simple vista — inspeccionando la caja se nota enseguida que no es parejo. 96/96, igual en ambos lados. */ .problema{ padding: 96px 40px; } .solucion{ padding: 72px 40px; } .problema-deco{ width: 340px; height: 340px; } /* "El problema" acá NO cambia de diseño respecto a desktop (intro a la izquierda + tarjetas a la derecha, .problema-inner en 1.4fr/2.7fr, .problema-cards como grid de 3 columnas — todo heredado tal cual de la regla base): sólo se achican tipografía/paddings, que es lo único que hacía falta para que respire bien en este rango. La versión "Tablet chica" (768–1023px, ver el media query de más abajo) sí cambia de diseño — ahí se pisa .problema-inner con 2 columnas (texto | carrusel de una tarjeta) —, pero "Tablet grande" (1024–1439px) queda con el mismo diseño de desktop, como corresponde. */ .problema-intro h2{ font-size: 26px; } .problema-intro p{ font-size: 14px; } .problema-item{ padding: 24px 18px 20px; } .problema-icon{ width: 44px; height: 44px; margin-bottom: 18px; } .problema-icon svg{ width: 20px; height: 20px; } .problema-item h3{ font-size: 15px; } .problema-item p{ font-size: 13px; } .solucion-inner{ gap: 28px; } /* 26px, no 24px: mismo tamaño de h2 que el resto de las secciones en tablet (.problema-intro h2/.que-hacemos-title/.pqe-title/ .segmentos-title/.cta-final h2, todas 26px acá) — escala unificada. */ .solucion-title h2{ font-size: 26px; } .solucion-copy p{ font-size: 14px; } .solucion-visual{ min-height: 160px; padding: 20px 16px; } .solucion-flow-step{ width: 72px; } .solucion-flow-icon{ width: 38px; height: 38px; } .solucion-flow-icon svg{ width: 17px; height: 17px; } .solucion-flow-step span{ font-size: 11px; } .solucion-flow-result{ font-size: 13px; padding: 10px 18px; } /* "Qué hacemos": mismo diseño de desktop (grid de 4 columnas), sólo más compacto — padding, tipografía, ícono y conector más chicos para que las 4 columnas respiren en este ancho intermedio. */ .que-hacemos{ padding: 88px 40px; } .que-hacemos-title{ font-size: 26px; margin-bottom: 56px; } .que-hacemos-timeline{ column-gap: 18px; } .que-hacemos-timeline::before{ top: 26px; } .que-hacemos-timeline-dot{ top: 26px; } .que-hacemos-node{ width: 52px; height: 52px; } .que-hacemos-node svg{ width: 22px; height: 22px; } .que-hacemos-connector{ height: 40px; } .que-hacemos-card{ padding: 20px 16px; } .que-hacemos-card h3{ font-size: 15px; } .que-hacemos-card p{ font-size: 13px; } /* "Por qué elegirnos": mismo grid de 4 columnas de desktop, sólo más compacto (mismo criterio que "Qué hacemos" arriba). */ .por-que-elegirnos{ padding: 88px 40px; } .pqe-title{ font-size: 26px; margin-bottom: 56px; } .pqe-icon{ width: 52px; height: 52px; } .pqe-icon svg{ width: 22px; height: 22px; } .pqe-item{ padding: 0 18px; } /* 13px, no 13.5px: mismo tamaño de "párrafo de tarjeta" en tablet que .problema-item p/.que-hacemos-card p (ambas 13px acá). */ .pqe-item p{ font-size: 13px; } /* "Para cada etapa de tu negocio" (variante experimental "barra única", ver segmentos.css): la barra sigue siendo una sola fila (display:flex) en vez de volver a un grid de varias filas — acá sólo se achica tipografía/padding para que los 6 labels (algunos de 2 líneas) entren cómodos en este ancho intermedio. */ .segmentos{ padding: 64px 40px 0; } /* Mismo criterio que en desktop (ver .marcas-panel en segmentos.css): márgenes negativos que igualan el padding lateral de .segmentos en este ancho (40px acá, 64px en desktop) para que el panel siga llegando exacto a los 2 bordes de la sección. */ .marcas-panel{ margin: 32px -40px 0; padding: 20px 40px 26px; } .segmentos-title{ font-size: 26px; margin-bottom: 32px; } .segmento-icon svg{ width: 26px; height: 26px; } .segmento-label{ font-size: 13px; } /* 14px, no 15px: mismo tamaño de "párrafo de intro" que el resto de las secciones en tablet (.problema-intro p/.solucion-copy p/.cta-final-sub, todas 14px acá) — antes no tenía override y quedaba en su tamaño de desktop (15px), un poco grande respecto de sus vecinas. */ .segmentos-note{ margin-top: 28px; padding-top: 24px; font-size: 14px; } /* CTA final: antes sólo achicaba el padding lateral acá y el h2/copy se quedaban en su tamaño de desktop (34px/16px) — mucho más grandes que el resto de los h2/párrafos de intro en tablet (26px/14px). Se agrega la misma pareja de tamaños que usa el resto de las secciones. */ .cta-final{ padding: 80px 40px; } .cta-final h2{ font-size: 26px; } .cta-final-sub{ font-size: 14px; } /* Footer: el panel sigue pegado a los 2 bordes laterales (ver css/footer.css, .footer no tiene padding lateral a propósito) — acá sólo se achica el padding INTERNO del panel y el gap entre columnas para que la fila de contacto/acciones/navegación siga entrando cómoda. */ .footer-panel{ padding: 48px 40px 28px; } .footer-row{ gap: 20px; } /* En tablet no hay mouse real, así que ":hover" se dispara con un tap (sticky hover) — igual que se resolvió en mobile, eso hacía fácil "trabar" una tarjeta encendida con el dedo, compitiendo con el efecto automático de acá abajo (ver js/que-hacemos-scroll.js, bloque 8) y dejando 2 a la vez. Se anula el :hover completo (color, glow, lift) salvo que coincida con la tarjeta que el auto-highlight ya encendió (.is-inview) — mismo criterio que en mobile, mismos valores base de .que-hacemos-node/.que-hacemos-card/.que-hacemos-connector (ver que-hacemos.css) para "apagar" del todo si no coincide. */ .que-hacemos-item:hover:not(.is-inview) .que-hacemos-node{ transform: none; border-color: rgba(111,149,255,0.35); background: var(--bg); box-shadow: none; } .que-hacemos-item:hover:not(.is-inview) .que-hacemos-card{ transform: none; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } .que-hacemos-item:hover:not(.is-inview) .que-hacemos-connector{ opacity: 0.8; transform: none; } .que-hacemos-item:hover:not(.is-inview) .que-hacemos-connector::after{ transform: translateX(-50%) scale(1); } /* Auto-highlight (sólo tablet): cada 5s se enciende un punto de la timeline a la vez (ver js/que-hacemos-scroll.js, bloque 8), reusando la misma clase ".is-inview" que ya usa mobile — el nodo ya comparte regla con ":hover" en la base (que-hacemos.css). Acá, a diferencia de mobile, SÍ se replica el efecto completo de desktop (tarjeta+conector se levantan 6px, punto del conector se agranda): en tablet hay más espacio y el layout es horizontal como desktop, así que el mismo movimiento que da el :hover de mouse se siente natural disparado solo por el temporizador — no es el caso de mobile, donde la tarjeta ocupa todo el ancho apilada verticalmente y ese lift se veía raro. */ .que-hacemos-item.is-inview .que-hacemos-connector{ opacity: 1; transform: translateY(-6px); } .que-hacemos-item.is-inview .que-hacemos-connector::after{ transform: translateX(-50%) scale(1.25); } .que-hacemos-item.is-inview .que-hacemos-card{ transform: translateY(-6px); border-color: rgba(111,149,255,0.4); background: rgba(255,255,255,0.05); } } /* Sólo "Tablet" (768–1023px), no "Tablet grande" (1024–1439px): acá el hero-sub va más angosto para que las líneas corten mejor con este ancho más chico de columna de texto. "El problema" también cambia de diseño SÓLO acá: en vez del layout de desktop (heredado tal cual en "Tablet grande", ver el media query de arriba), pasa a 2 columnas parejas — texto a la izquierda, carrusel de una tarjeta a la vez a la derecha — mismo patrón que ya se usa en celulares acostados (ver el bloque de "orientation:landscape" más abajo), sólo que acá aplica en cualquier orientación (a este ancho hay lugar de sobra para 2 columnas, con o sin mucha altura). */ @media (min-width: 768px) and (max-width: 1023px){ .hero-sub{ max-width: 355px; } .problema-inner{ grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .problema-intro p{ max-width: none; } /* Mismo trío de fixes que en el resto de los carruseles (ver el comentario largo en el media query de mobile vertical, más abajo, para el detalle de cada uno): 1) el overflow:hidden del carril vive en .problema-cards-window, no en .problema-cards ni en los puntitos (así no recorta nada). 2) ese padding es sólo vertical, nunca horizontal (si no, asoma un pedacito de la tarjeta de al lado). 3) min-width:0 en .problema-cards, porque es un item de grid y si no el carril con flex-shrink:0 le fuerza un ancho mínimo enorme y desborda la columna. Las reglas que activan el carrusel en sí (display, overflow, etc.) están agrupadas en la sección 6 ("Activación compartida del carrusel"); acá sólo quedan los valores propios de este breakpoint. */ .problema-dots{ justify-content: center; margin-top: 18px; } .problema-item{ gap: 20px; padding: 28px 22px; min-height: 180px; } .problema-icon{ width: 48px; height: 48px; } .problema-icon svg{ width: 22px; height: 22px; } .problema-item-divider{ margin: 10px 0; } } /* Tablets en VERTICAL (ej. iPad Pro 1024x1366) dentro del rango de arriba: el centrado nav-compensado ya lo hace bien la regla general de tablet de arriba (no hace falta repetirlo acá) — esta regla sólo ajusta la imagen, que con tanto alto de pantalla se ve mejor un poco más angosta. */ @media (min-width: 768px) and (max-width: 1439px) and (orientation: portrait){ /* La imagen se angosta un poco y se corre levemente hacia la derecha (menos que antes) para darle aire al bloque de texto, ahora que está centrado y no "pegado" al piso de la imagen. */ .hero-media{ width: 58%; right: -16px; } .hero-caption{ padding: 0 32px; } } /* Tablets en HORIZONTAL de poca altura (ej. 1024x768, "Tablet" en landscape): la regla general de tablet (119px/56px, arriba) ya centra bien parejo, pero con menos alto disponible ese padding de sobra achica demasiado el margen de maniobra — acá se usa un gap más chico (32px en vez de 56px) para que el bloque de texto tenga más lugar, manteniendo la misma simetría nav-compensada (32 + 63 de navbar = 95). "Tablet grande" en landscape (1366x1024, más alto que 860px) no entra acá y sigue usando la regla general de arriba. */ @media (min-width: 768px) and (max-width: 1439px) and (orientation: landscape) and (max-height: 860px){ .hero-grid{ padding: 95px 40px 32px; } } /* Celulares acostados (ej. 844x390, 932x430): entran en el rango de ancho de "tablet" de arriba (por eso heredan navbar/imagen diagonal de tablet, que acá se ve bien y no se toca), pero con MUY poca altura — mucha menos que cualquier tablet real en landscape. Con el tamaño de texto de tablet (pensado para 768px+ de alto) el título y el copy se comían casi toda la pantalla y quedaba todo apretado. Acá se achica todo un escalón más, sólo para este rango de altura bien angosto. */ @media (min-width: 768px) and (max-width: 1439px) and (orientation: landscape) and (max-height: 500px){ /* justify-content:center (heredado de la regla de arriba) centra el bloque de texto en el alto TOTAL del hero — pero la navbar fija tapa buena parte de ese espacio arriba, así que visualmente quedaba mucho más pegado a la navbar que al piso de la pantalla. Para que el aire sea igual de arriba (desde donde termina la navbar) que de abajo (hasta el final de la página), el padding-top tiene que ser el padding-bottom + la altura de la navbar (63px fija en este rango, no cambia con el ancho) — así el centrado matemático de flexbox termina dando un espacio visual simétrico real, no sólo simétrico en el papel. */ .hero-grid{ padding: 87px 40px 24px; } .hero-copy{ max-width: 380px; } h1{ font-size: 30px; margin-bottom: 12px; } .hero-sub{ font-size: 13px; line-height: 1.5; max-width: 340px; margin-bottom: 16px; } .hero-actions{ gap: 16px; } .btn-primary{ padding: 10px 18px; font-size: 13px; } .btn-link{ font-size: 13px; } /* "El problema" en este mismo rango (celular acostado, poca altura): mismo criterio de pantalla completa que en mobile vertical (min-height:100vh + centrado nav-compensado, navH=63px acá => padding-top = padding-bottom + 63 = 24+63=87, igual que .hero-grid arriba), pero en 2 columnas lado a lado (texto | tarjeta) en vez de apiladas: hay ancho de sobra y muy poca altura, así que apilar (como en mobile vertical) no entraría cómodo. La columna derecha reutiliza el mismo carrusel de una tarjeta a la vez que mobile vertical (ver sección 6 y el bloque 5 del