/* ========================================================================= SCALAR — landing page hero.css — hero: imagen+texto, botones y leyenda rotativa. 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. ========================================================================= */ /* ---------- 2. Hero ---------- */ .hero{ position: relative; min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); overflow: hidden; /* contiene el fondo animado y el recorte diagonal de la imagen */ } /* Fondo animado del hero: mismo mecanismo que .que-hacemos::before más abajo (3 manchas de degradado radial, azules y blureadas, que se desplazan lento en bucle vía "background-position" animado por CSS). Reemplaza al canvas de puntitos que había antes (pintado a mano con JS, recalculando miles de puntos por frame en el hilo principal) — acá todo el trabajo lo hace el motor de animaciones del navegador, normalmente delegado al hilo de composición/GPU, sin tocar JS en cada frame. Mismo criterio de pausado: arranca "paused" y hero-particles.js lo retoma sólo mientras el hero está en pantalla (clase .is-bg-visible). */ .hero::before{ content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle, rgba(63,107,245,0.16) 0%, transparent 65%), radial-gradient(circle, rgba(111,149,255,0.11) 0%, transparent 65%), radial-gradient(circle, rgba(63,107,245,0.09) 0%, transparent 70%); background-repeat: no-repeat; background-size: 55% 55%, 45% 45%, 60% 60%; background-position: 15% 10%, 80% 25%, 35% 80%; filter: blur(70px); animation: heroDrift 36s ease-in-out infinite alternate; animation-play-state: paused; pointer-events: none; } .hero.is-bg-visible::before{ animation-play-state: running; } @keyframes heroDrift{ 0% { background-position: 15% 10%, 80% 25%, 35% 80%; } 50% { background-position: 35% 45%, 60% 55%, 60% 35%; } 100% { background-position: 20% 65%, 75% 10%, 25% 55%; } } @media (prefers-reduced-motion: reduce){ .hero::before{ animation: none; } } /* Fila superior del hero: imagen a la derecha + texto a la izquierda. z-index:1 propio para que quede siempre por encima del fondo animado (.hero::before, z-index:0 más arriba). */ .hero-top{ position: relative; z-index: 1; flex: 1; display: flex; /* stretch (no center): deja que .hero-grid ocupe toda la altura disponible, para poder anclar su contenido "al piso" con precisión en vez de centrarlo (ver .hero-grid). */ align-items: stretch; } .hero-grid{ position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; /* Centrado, no "parado abajo" (así estaba antes, con flex-end): en desktop la navbar mide 84px fija arriba, y para que el aire quede PAREJO entre "donde termina la navbar" y "donde termina la página" el padding-top tiene que ser el padding-bottom + esos 84px — con justify-content:center, flexbox reparte el resto del espacio libre por igual arriba y abajo del contenido, así que esa relación entre paddings alcanza para que el espacio visible quede simétrico sin importar cuánto mida el bloque de texto. Mismo criterio en todos los breakpoints de acá abajo, sólo cambia la altura real de la navbar en cada uno (84px acá, 74px en mobile, 63px en tablet). */ justify-content: center; padding: 148px 64px 64px; pointer-events: none; /* el contenedor no es clickeable... */ } .hero-grid > *{ pointer-events: auto; } /* ...pero sus hijos directos sí */ h1{ font-size: 58px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; } h1 .white{ color: var(--text); } h1 .accent{ color: var(--blue-light); } /* animation: usa @keyframes heroContentIn de shared.css (mismo recurso que .partner-hero-inner en partner-page.css) — fundido + sube 16px al cargar la página, para que entrar a "/" (o volver desde audaces.html/ vesto.html) se sienta con la misma animación de entrada que esas 2 páginas, no un salto seco. "both" para que arranque ya en el estado "from" (opacity:0) y no se vea el h1 completo un instante antes de que la animación corra. */ .hero-copy{ max-width: 620px; animation: heroContentIn .7s var(--ease-smooth) both; } @media (prefers-reduced-motion: reduce){ .hero-copy{ animation: none; } } .hero-sub{ font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 480px; margin-bottom: 36px; } .hero-actions{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* Botón circular "scroll a la siguiente sección" — SACADO del HTML (ver historial): apuntaba a #problema, mismo destino al que ahora apunta "Conocé más" (.hero-actions .btn-link) también, así que quedaban 2 elementos redundantes en el mismo hero. Esta regla queda sin usar a propósito, no se borra, por si se vuelve a necesitar el botón. Oculto por defecto (mobile: ahí el hero ya se resuelve con un simple swipe hacia abajo, no hace falta el botón) y visible desde tablet para arriba (ver @media min-width:768px, más abajo). El ícono rebota suavemente en loop para llamar la atención sin ser invasivo. */ .hero-scroll-btn{ display: none; position: absolute; left: 50%; bottom: 36px; z-index: 2; width: 44px; height: 44px; align-items: center; justify-content: center; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(167,176,196,0.35); color: var(--text-dim); background: rgba(255,255,255,0.04); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; animation: heroScrollBounce 2.2s ease-in-out infinite; } .hero-scroll-btn:hover{ border-color: var(--blue-light); color: var(--blue-light); background: rgba(111,149,255,0.1); } .hero-scroll-btn svg{ width: 20px; height: 20px; } @keyframes heroScrollBounce{ 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* Se muestra desde tablet para arriba: por debajo de 768px se queda con el display:none de la regla base de arriba. */ @media (min-width: 768px){ .hero-scroll-btn{ display: flex; } } /* ---------- 3. Botones y links ---------- */ .btn-primary{ display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 16px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(59,107,245,0.35); transition: transform .15s ease, box-shadow .15s ease; position: relative; z-index: 0; } .btn-primary:hover{ box-shadow: 0 10px 28px rgba(59,107,245,0.45); } .btn-primary .icon{ width: 18px; height: 18px; } /* Anillo de brillo animado detrás del botón: es un pseudo-elemento un poco más grande que el botón (inset:-2px), con blur y z-index:-1, así sólo se ve asomando por el borde. Sólo anima (background-position) mientras está en hover — el resto del tiempo (que es casi siempre) queda pausado con animation-play-state, no sólo invisible con opacity:0. Antes corría siempre, aunque invisible: un degradado con blur animando la posición del fondo obliga a repintar ese pseudo-elemento en cada frame, trabajo continuo de fondo que no se veía en pantalla. Pausado no pierde su lugar en el degradado: al volver a hover retoma desde donde quedó, no reinicia. */ .btn-primary::before{ content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 999px; background: linear-gradient(45deg, #2451d6, #3b6bf5, #5f85f8, #7fa0ff, #5f85f8, #3b6bf5, #2451d6); background-size: 400%; filter: blur(6px); opacity: 0; transition: opacity .3s ease-in-out; animation: btnGlow 18s linear infinite; animation-play-state: paused; } .btn-primary:hover::before{ opacity: 0.45; animation-play-state: running; } .btn-link{ display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--text-dim); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease, gap .2s ease; } .btn-link:hover{ color: var(--blue-light); border-color: var(--blue-light); gap: 12px; } .btn-link .icon-sm{ width: 16px; height: 16px; transition: transform .2s ease; } .btn-link:hover .icon-sm{ transform: translateX(3px); } /* Panel de imagen del hero: ocupa el 68% derecho del hero y se recorta con el definido inline en el HTML (forma de "<" redondeada). El fondo sólido (var(--bg)) es importante: cubre el fondo animado (.hero::before) durante el fundido entre fotos, cuando ambas capas de imagen están momentáneamente semi-transparentes. */ .hero-media{ position: absolute; top: 0; right: 0; bottom: 0; width: 68%; z-index: 0; background: var(--bg); clip-path: url(#heroClip); /* clip-path (el recorte diagonal) + mix-blend-mode (el tinte, ver .hero-media::before más abajo) es una combinación que Chrome, a diferencia de Firefox, no siempre promueve sola a su propia capa de composición — así que puede terminar recalculando el recorte + la mezcla de color en cada frame de scroll mientras el hero está en pantalla, en vez de tratarlo como una capa ya resuelta que sólo se mueve. will-change:transform es la forma estándar de pedirle al navegador que la promueva a su propia capa desde el arranque — no cambia nada visual, sólo cómo se compone internamente. */ will-change: transform; } /* Carrusel de fotos: js/hero-carousel.js mantiene 2 superpuestas (layer-a/layer-b) y va alternando cuál tiene la clase .is-active para hacer un crossfade. Usar sólo 2 capas (en vez de una por foto) evita tener varias imágenes pesadas decodificadas en memoria al mismo tiempo. */ .hero-img{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 6s ease; } .hero-img.is-active{ opacity: 1; transform: scale(1); } /* will-change sólo mientras dura el crossfade (ver hero-carousel.js), no permanente: mantenerlo siempre encendido promueve la capa a composición GPU de forma indefinida (costo de memoria continuo) aunque no haya ninguna transición corriendo la mayor parte del tiempo. */ .hero-img.is-transitioning{ will-change: opacity, transform; /* avisa al navegador para que prepare la capa GPU */ } /* Tinte azul de marca sobre las fotos (mix-blend-mode:color conserva el brillo/contraste original de la imagen y sólo reemplaza el color). */ .hero-media::before{ content: ""; position: absolute; inset: 0; background: var(--blue); opacity: 0.24; mix-blend-mode: color; z-index: 1; } /* ---------- 4. Leyenda rotativa sobre la imagen ---------- */ .hero-caption{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; /* Altura fija = misma altura que la franja oscura del fondo (ver background más abajo), así el texto se puede centrar VERTICALMENTE dentro de esa franja con justify-content, en vez de quedar pegado al padding-top/bottom. */ height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 8px; padding: 0 40px; /* El degradado oscuro cubre toda la altura de esta caja (280px), pegado abajo de la imagen — así el texto siempre cae sobre la parte más oscura, dándole contraste. */ background: linear-gradient(180deg, transparent 0%, rgba(4,7,14,0.55) 45%, rgba(4,7,14,0.92) 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .hero-caption.is-visible{ opacity: 1; transform: translateY(0); } .hero-caption-label{ display: flex; align-items: center; gap: 12px; } .hero-caption-title{ /* clamp() en vez de un tamaño fijo + breakpoints sueltos: escala solo con el ancho real disponible (que varía según cuánto mida .hero-media en cada pantalla), así el texto siempre entra sin necesidad de ir ajustando un valor distinto por cada resolución. */ font-size: clamp(17px, 1.4vw + 12px, 24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); text-align: right; /* % en vez de px fijo: se adapta al ancho real de .hero-caption (que cambia con .hero-media). 60%, no más: con valores más altos el texto se acercaba demasiado al borde izquierdo del recuadro y se veía amontonado/cortado contra el resto de la imagen. */ max-width: 60%; overflow-wrap: break-word; /* red de seguridad: nunca se corta a la mitad de una palabra por desborde */ text-shadow: 0 2px 12px rgba(0,0,0,0.55); /* respaldo de legibilidad sobre fotos con zonas claras */ } /* Viñeta arriba/abajo de la imagen para que se funda mejor con el fondo oscuro del hero en los bordes superior e inferior. */ .hero-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,20,0.85) 0%, transparent 18%, transparent 78%, rgba(6,10,20,0.85) 100%); z-index: 1; }