/* ========================================================================= SCALAR — landing page navbar.css — navbar fija (logo, links, cta, versión compacta). 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. ========================================================================= */ /* ---------- 1.5 Navbar ---------- */ /* Degradado oscuro fijo, siempre pegado arriba de la ventana (independiente del scroll), detrás del navbar (z-index menor). Da contraste constante a la tarjeta del navbar sin importar qué haya debajo (imágenes claras, etc). */ .nav-scrim{ position: fixed; top: 0; left: 0; right: 0; height: 260px; z-index: 90; pointer-events: none; /* Múltiples paradas (en vez de sólo 2-3) para que el desvanecimiento sea gradual tipo "easing" y no se note un corte/línea donde termina. */ background: linear-gradient(180deg, rgba(2,4,10,0.70) 0%, rgba(2,4,10,0.62) 20%, rgba(2,4,10,0.48) 38%, rgba(2,4,10,0.32) 54%, rgba(2,4,10,0.18) 68%, rgba(2,4,10,0.08) 82%, rgba(2,4,10,0.02) 92%, transparent 100%); } /* Oscurece el resto de la página (por detrás del navbar) mientras el menú mobile está desplegado. Invisible y sin click por defecto; el JS del navbar le agrega body.menu-open al abrir el menú hamburguesa. */ .menu-overlay{ position: fixed; inset: 0; z-index: 95; background: rgba(2,4,10,0.4); opacity: 0; pointer-events: none; transition: opacity .3s ease; } body.menu-open .menu-overlay{ opacity: 1; pointer-events: auto; } /* Tarjeta pegada al borde superior de la ventana: nace del top (top:0, sin separación ni bordes redondeados arriba) y "emerge" hacia abajo, con las esquinas inferiores redondeadas. Es un único bloque continuo (no 3 cápsulas sueltas) que agrupa logo + links + cta. Fija (position:fixed): acompaña todo el scroll de la página. En desktop, una vez que el hero sale de la pantalla, el JS le agrega .is-compact (ver más abajo) y se achica/simplifica; en mobile se queda siempre con este tamaño completo. */ .navbar{ position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 100; width: calc(100% - 40px); max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-radius: 0 0 32px 32px; /* Mismo vidrio que las tarjetas del sitio (.que-hacemos-card, .problema-item, .segmentos-grid/.marcas-panel: fondo translúcido + blur + bisel + brillo diagonal en loop) — pedido puntual de unificar el navbar con ese tratamiento. El brillo es una capa MÁS del propio background (igual que en .segmentos-grid), no un pseudo-elemento aparte: como acá no hay nada que necesite ir "encima" del brillo aparte del contenido normal del navbar (logo/links/cta), no hace falta el truco de z-index que sí usan las tarjetas con ::before. */ background: linear-gradient(120deg, rgba(255,255,255,0.1) 0%, transparent 35%, transparent 65%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 55%), rgba(4,7,14,0.4); background-size: 250% 100%, 100% 100%, 100% 100%; background-position: 0% 0%, 0 0, 0 0; animation: navbarSheen 26s ease-in-out infinite alternate; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08), 0 24px 48px -20px rgba(2,4,12,0.6); /* OJO — costo de performance: backdrop-filter en un elemento fixed que está SIEMPRE en pantalla se recalcula en cada frame de scroll, más caro que en las tarjetas (que pausan/paran de existir en pantalla). Antes estaba en 1.5px (mínimo, casi placebo) por esta razón; subirlo a 8px para igualar el vidrio de las tarjetas es un pedido explícito así que se acepta el costo extra — si el scroll se siente pesado después de probarlo, esta es la primera propiedad a bajar (o sacar del todo). */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Sólo width/max-width cambian de verdad entre .navbar y .navbar.is-compact (ver más abajo) — box-shadow y backdrop-filter NUNCA se pisan en ningún lado, así que no hace falta (ni conviene) listarlos acá: una propiedad cara como backdrop-filter en `transition`, aunque nunca dispare una animación real, puede hacer que Chrome mantenga este elemento promovido a su propia capa de composición todo el tiempo "por si acaso" — costo de GPU sostenido sin ningún beneficio, porque ese cambio nunca ocurre. */ transition: width .45s var(--ease-smooth), max-width .45s var(--ease-smooth); } @keyframes navbarSheen{ 0% { background-position: 0% 0%, 0 0, 0 0; } 100% { background-position: 100% 0%, 0 0, 0 0; } } @media (prefers-reduced-motion: reduce){ .navbar{ animation: none; } } /* logo/links/toggle no tienen fondo ni sombra propios: quedan "sueltos" dentro de la tarjeta única del .navbar (ver arriba). */ .navbar-logo, .navbar-links, .navbar-toggle{ background: none; box-shadow: none; } .navbar-logo{ display: flex; align-items: center; flex: none; padding: 24px 18px; pointer-events: none; /* decorativo: no reacciona al mouse ni al toque */ transition: padding .45s var(--ease-smooth); } /* Envoltorio que superpone las 2 imágenes del logo (ver comentario en el HTML): el logo completo queda en flujo normal (define el ancho de este envoltorio) y el ícono se posiciona absoluto encima suyo, ambos con opacity animable — así el cambio entre uno y otro es un fundido, no un salto brusco de display:none a block. */ .navbar-logo-mark{ position: relative; display: flex; align-items: center; height: 36px; transition: height .45s var(--ease-smooth); } .navbar-logo-full{ height: 36px; width: auto; display: block; opacity: 1; transition: opacity .35s var(--ease-smooth), height .45s var(--ease-smooth); } .navbar-logo-icon{ position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(.7); height: 36px; width: auto; display: block; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth), height .45s var(--ease-smooth); } .navbar-links{ display: flex; align-items: center; gap: 2px; padding: 8px; border-radius: 999px; } .navbar-links a{ position: relative; color: var(--text-dim); text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 999px; transition: color .2s ease, background .2s ease, padding .45s var(--ease-smooth), font-size .45s var(--ease-smooth); white-space: nowrap; } .navbar-links a:hover{ color: var(--text); background: rgba(255,255,255,0.08); } /* Ícono de cada link: sólo se usa en el menú desplegable de mobile (ver responsive); en desktop el nav es una píldora de solo texto. */ .navbar-link-icon{ display: none; width: 18px; height: 18px; flex: none; } /* Puntito indicador debajo del link activo (sección en la que estamos) */ .navbar-links a.is-active{ color: var(--text); } .navbar-links a.is-active::after{ content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--blue-light); } .navbar-cta{ position: relative; z-index: 0; flex: none; margin: 16px 12px 16px 0; background: #fff; color: var(--bg); text-decoration: none; font-weight: 700; font-size: 15px; padding: 16px 30px; border-radius: 999px; /* transform NO está en esta lista a propósito: no hay ninguna regla en todo el archivo que cambie el transform de .navbar-cta (ni en :hover ni en .is-compact) — quedaba en el transition sin que nada lo usara. box-shadow sí cambia (ver :hover abajo); padding/font-size/margin sí cambian con .is-compact (ver esa sección). */ transition: box-shadow .15s ease, padding .45s var(--ease-smooth), font-size .45s var(--ease-smooth), margin .45s var(--ease-smooth); } .navbar-cta:hover{ box-shadow: 0 8px 20px rgba(255,255,255,0.18); } /* Mismo anillo de brillo animado que .btn-primary (ver sección 3, Botones y links), en versión píldora para que combine con la forma redonda del navbar. Pausado por defecto (animation-play-state) y sólo corriendo en hover — acá pesa más que en el botón del hero, porque el navbar es fixed y siempre está en pantalla: sin pausar, este degradado con blur se repintaba en cada frame durante TODA la visita, no sólo cuando el hero estaba a la vista. */ .navbar-cta::before{ content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 999px; background: linear-gradient(45deg, #c9d3e8, #ffffff, #eef2fb, #ffffff, #c9d3e8, #ffffff, #c9d3e8); background-size: 400%; filter: blur(6px); opacity: 0; transition: opacity .3s ease-in-out; animation: btnGlow 18s linear infinite; animation-play-state: paused; } .navbar-cta:hover::before{ opacity: 0.45; animation-play-state: running; } /* Botón hamburguesa: oculto en desktop, aparece en mobile (ver media query). Animación con "rebote" (basada en una referencia del usuario hecha con jQuery + Velocity.js): acá se logra el mismo efecto de resorte sólo con CSS, usando un cubic-bezier con overshoot en vez de esas librerías, que el sitio no usa. Además de las 3 líneas formando la X, el botón entero gira un poco de más, dándole ese giro "de más" característico. */ .navbar-toggle{ display: none; flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: none; outline: none; -webkit-tap-highlight-color: transparent; /* saca el recuadro celeste que agrega el navegador al tocar en mobile */ transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } /* Sin outline por defecto (para que no quede el recuadro cuadrado del navegador rompiendo el círculo del botón), pero SÍ se restituye un anillo de foco prolijo para quien navega con teclado (:focus-visible), por accesibilidad. Con el mouse/dedo no se activa. */ .navbar-toggle:focus-visible{ outline: 2px solid var(--blue-light); outline-offset: 3px; } .navbar.is-open .navbar-toggle{ transform: rotate(90deg); } .navbar-toggle span{ display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; } /* Transforma el ícono de 3 líneas en una X cuando el menú mobile está abierto. Los delays escalonados imitan la secuencia de la animación de referencia (las barras se juntan al centro antes de que gire todo el conjunto). */ .navbar.is-open .navbar-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); transition-delay: .05s; } .navbar.is-open .navbar-toggle span:nth-child(2){ opacity: 0; transform: scaleX(0); } .navbar.is-open .navbar-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); transition-delay: .05s; } /* Navbar "compacta": el JS (bloque 4 del