/* ============================================================ CRÉCIMA — Home Estructura fiel al frame "Home — Desktop 1440". ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Red de seguridad: nada puede arrastrar la página hacia el costado. Va `clip` y no `hidden` a propósito — hidden acá convierte al documento en contenedor de scroll y con eso se caen el sticky del hero y los pines de ScrollTrigger. Esto tapa el síntoma, no la causa: si algo se corta de más, el ancho de ese bloque es lo que hay que corregir. */ html { overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg-hero); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; padding: 0; } /* ------------------------------------------------------------ AROS Y CHISPAS ------------------------------------------------------------ La firma visual del sitio: círculos concéntricos de los que sólo se ve un arco, con puntos de luz encima. Vive acá y no en cada página porque ya está en el hero de Proyectos y ahora en el menú, y antes de esto cada uno tenía su propia copia. Quien lo use define dos valores: --aro el diámetro del más grande (px o %) --aro-y dónde queda el centro, medido desde arriba Los otros dos salen solos: siempre miden 74,7 % y 49,8 % del mayor, que es la proporción del diseño y no cambia nunca. ------------------------------------------------------------ */ .aros { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .aro { position: absolute; left: 50%; top: var(--aro-y); translate: -50% -50%; width: var(--aro); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; } .aro--2 { width: calc(var(--aro) * 0.747); } .aro--3 { width: calc(var(--aro) * 0.498); } /* Punto de luz. El borde va difuso con un degradado radial y no con `filter: blur`, que obliga al navegador a rasterizar y repintar en cada cuadro cuando la chispa flota. */ .chispa { position: absolute; left: var(--x); top: var(--y); width: var(--tam, 34px); height: var(--tam, 34px); border-radius: 50%; /* La parada final va con `transparent` para que el color lo decida `--c` entero y el degradado no se apague hacia un gris que no eligió nadie. */ background: radial-gradient(circle, var(--c, #cfd6e4) 0%, transparent 68%); } /* Una chispa tiene dos formas de ubicarse: suelta en .aros → con --x/--y, porcentajes del contenedor. Con `data-float` sube y baja en el lugar. colgada de .aro → con --px/--py, porcentajes del propio aro. Si el aro lleva `data-orbit`, gira con él y la chispa recorre la circunferencia. Por defecto se apoya arriba del aro; --px/--py la corren a otro punto para que las de distintos aros no arranquen todas alineadas. Es el mismo recurso que los satélites de Nosotros. */ .aro > .chispa { left: var(--px, 50%); top: var(--py, 0%); translate: -50% -50%; } /* El movimiento de las chispas que cuelgan de un aro. Son DOS movimientos encimados y con periodos distintos: la deriva el aro se corre unos grados y vuelve, así la chispa recorre un tramo de su circunferencia. la respiración la chispa además sube y baja unos píxeles. Van encimados a propósito. Un vaivén solo frena hasta parar en cada punta, y con ciclos largos eso se lee como una chispa quieta y mal puesta. Con dos periodos que no son múltiplos —11s contra 6s, por ejemplo— las puntas nunca coinciden: cuando uno frena el otro está en lo mejor de su recorrido, y el conjunto no se detiene nunca. La curva es casi un seno: acelera y frena de forma pareja, sin el frenazo largo de las curvas de interfaz. Por eso no usa --ease-io, que para esto frena demasiado. Y al no dar nunca la vuelta entera, la chispa no se va del arco que asoma dentro del hero. */ @keyframes aro-deriva { to { rotate: var(--deriva, 5deg); } } @keyframes chispa-respira { to { translate: -50% calc(-50% + var(--respira, 7px)); } } .aro--deriva { rotate: calc(var(--deriva, 5deg) * -1); animation: aro-deriva var(--deriva-dur, 11s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; } .aro--deriva > .chispa { animation: chispa-respira var(--respira-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; } @media (prefers-reduced-motion: reduce) { .aro--deriva, .aro--deriva > .chispa { animation: none; rotate: none; } } /* ------------------------------------------------------------ ENTRADA DE PÁGINA ------------------------------------------------------------ Un velo del color de la página que se retira al cargar. Es CSS solo, sin JavaScript, y a propósito se va el velo en vez de aparecer el contenido: si algo fallara, lo peor que puede pasar es que no haya transición — nunca que la página quede invisible. `background: inherit` le toma el color al , que cambia según la página: en Proyectos arranca oscuro y en Contacto lavanda, sin una regla por página. ------------------------------------------------------------ */ .velo { position: fixed; inset: 0; z-index: 300; background: inherit; pointer-events: none; animation: velo-sale 0.7s var(--ease-out) forwards; } @keyframes velo-sale { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .velo { display: none; } } /* ------------------------------------------------------------ CORTINA — el pasaje de una página a otra ------------------------------------------------------------ Una sola tela con el violeta de la marca, el mismo degradado del menú. Sube desde abajo hasta tapar la pantalla, se navega, y en la página que llega sigue subiendo hasta salir por arriba. Entra por abajo, tapa, sale por arriba: un solo movimiento partido en dos páginas. Es la pieza que reemplaza al zoom de la tarjeta. El zoom dependía de la geometría —una foto creciendo dentro de un marco chico, en el medio de la grilla— y por eso no se leía como entrar a ningún lado. La cortina no depende de nada: se ve igual desde cualquier tarjeta y con cualquier foto. La mitad de salida la pone el JS; la de entrada es el velo, que ya está en todas las páginas. ------------------------------------------------------------ */ .cortina { position: fixed; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(180deg, #a376f9 0%, #4d399d 100%); translate: 0 100%; } .cortina.is-puesta { translate: 0 0; transition: translate 0.5s var(--ease-io); } ul, ol { list-style: none; } img { max-width: 100%; display: block; } /* El atributo `hidden` del HTML lo pisa cualquier regla que declare `display`, porque la del navegador tiene menos peso que las nuestras. Se refuerza acá una sola vez en vez de tener que acordarse elemento por elemento — que es exactamente el olvido que esconde bugs raros. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); } /* .w--soft lo aplica el splitter a las palabras que estaban dentro de un .soft, porque al reagrupar por líneas las palabras salen de su etiqueta original. */ .soft, .w--soft { color: var(--text-soft); } /* Paneles: cada sección grande se apoya sobre la anterior con las esquinas superiores redondeadas, como en el diseño. */ .panel { position: relative; z-index: 1; border-radius: var(--radius-panel) var(--radius-panel) 0 0; } /* Los paneles con esquinas redondeadas se montan sobre la sección anterior: así, por fuera del radio, se ve el color de arriba y no el fondo del body. El padding compensa el corrimiento. */ .panel--dark.proy-intro-sec, .panel--navy { margin-top: calc(-1 * var(--radius-panel)); } /* El de marcas compensa con padding; la intro de proyectos ya define un padding propio, más grande, más abajo. */ .panel--navy { padding-top: var(--radius-panel); } .panel--light { background: var(--bg-light); } .panel--dark { background: var(--bg-dark); color: var(--text-invert); } .panel--navy { background: var(--bg-navy); color: var(--text-invert); } .panel--dark h1, .panel--dark h2, .panel--dark h3, .panel--navy h1, .panel--navy h2, .panel--navy h3 { color: var(--text-invert); } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ /* ------------------------------------------------------------ HEADER — dos temas ------------------------------------------------------------ Todo el color del header sale de estas variables. La versión oscura es la de base (fondo oscuro debajo) y .header--claro la invierte. Cambiar de tema es cambiar una clase: no hay reglas duplicadas por variante. Valores medidos del tablero de opciones del Figma. ------------------------------------------------------------ */ .header { --nav-fondo: #2c2050; --nav-texto: #ffffff; --nav-hover: rgba(255, 255, 255, 0.14); --menu-fondo: #2c2050; --menu-texto: #ffffff; --menu-sombra: none; --fijo-fondo: rgba(24, 15, 52, 0.82); position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: var(--space-lg); transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .header--claro { --nav-fondo: #f6f7fc; --nav-texto: var(--text); --nav-hover: rgba(24, 15, 52, 0.07); --menu-fondo: #f6f7fc; --menu-texto: var(--text); --menu-sombra: 0 10px 30px -18px rgba(24, 15, 52, 0.55); --fijo-fondo: rgba(233, 235, 248, 0.86); } /* Al bajar se va; al subir vuelve. Así no tapa el contenido mientras se recorre la página. */ .header.is-hidden { transform: translateY(-100%); } /* Al scrollear, el header se compacta y gana fondo */ .header.is-stuck { padding-block: var(--space-sm); background: var(--fijo-fondo); backdrop-filter: blur(14px); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-inline: 40px; } /* Dos archivos, uno por tema. Se cambian por CSS y no por JS para que el intercambio sea instantáneo: si lo hiciera el script cambiando el src, se vería el parpadeo de la carga. */ .header__logo { display: block; line-height: 0; } .header__logo img { width: 158px; /* medido del tablero; 157 en tu Figma */ height: auto; transition: width var(--dur-base) var(--ease-out); } .header__logo--color { display: none; } .header--claro .header__logo--blanco { display: none; } .header--claro .header__logo--color { display: block; } .header__nav { display: flex; gap: var(--space-xs); padding: 6px; border-radius: var(--radius-pill); background: var(--nav-fondo); transition: background var(--dur-base) var(--ease-out); } .header__nav a { padding: 0.55em 1.05em; border-radius: var(--radius-pill); color: var(--nav-texto); font-size: var(--fs-body); /* El interlineado del body dejaba la píldora en 54; el tablero la mide en 49. */ line-height: 1.2; transition: background var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out); } .header__nav a:hover { background: var(--nav-hover); } @media (max-width: 900px) { .header__nav { display: none; } .header__inner { padding-inline: var(--gutter); } .header__logo img { width: 130px; } } @media (max-width: 640px) { .header__logo img { width: 120px; } } /* ------------------------------------------------------------ HERO El hero queda pegado arriba y el panel claro sube por encima: eso produce el efecto parallax entre las dos secciones. ------------------------------------------------------------ */ .hero { position: sticky; top: 0; z-index: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #180f34 0%, #1c1340 34%, #2c1d55 62%, #3f2469 84%, #4a2a72 100%); color: var(--text-invert); padding-block: 8rem 3rem; } /* Halo difuso detrás del título */ .hero__glow { position: absolute; left: 50%; top: 34%; width: 118vw; height: 74vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(216, 200, 255, 0.40) 0%, rgba(150, 110, 235, 0.22) 34%, rgba(24, 15, 52, 0) 68%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; text-align: center; padding-inline: var(--gutter); margin-block: auto; } .hero__eyebrow { font-size: var(--fs-lead); color: var(--text-invert-soft); margin-bottom: var(--space-lg); } .hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); font-weight: 400; letter-spacing: -0.015em; } .hero__title em, .hero__title .w--em { font-style: normal; font-weight: 700; color: #c9a9ff; } .hero__brands { position: relative; z-index: 1; margin-top: auto; } .hero__brands-label { text-align: center; font-size: var(--fs-body); color: var(--text-invert-soft); margin-bottom: var(--space-lg); } /* Marquee de logos. El degradé lateral hace que los logos entren y salgan sin cortarse de golpe. El fondo lo pone el hero: los PNG van transparentes. */ /* La máscara baja a 60% en los laterales y llega a 100% en el centro: los logos se funden con el fondo del hero al entrar y al salir, en vez de cortarse contra el borde. */ .marquee { overflow: hidden; --fusion: rgba(0, 0, 0, 0.6); -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--fusion) 5%, #000 24%, #000 76%, var(--fusion) 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, var(--fusion) 5%, #000 24%, #000 76%, var(--fusion) 95%, transparent 100%); } .marquee__track { display: flex; width: max-content; will-change: transform; } .marquee__set { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.75rem); padding-inline: clamp(1rem, 2vw, 1.875rem); } .marquee__set img { height: 66px; width: auto; max-width: none; flex: none; } /* ------------------------------------------------------------ INTRO ------------------------------------------------------------ */ .intro { padding-block: var(--space-4xl) var(--space-3xl); text-align: center; } .intro__kicker { font-size: clamp(1.1rem, 1.8vw, 1.625rem); color: var(--brand-link); margin-bottom: var(--space-lg); } .intro__text { font-size: var(--fs-intro); line-height: var(--lh-snug); font-weight: 500; letter-spacing: -0.015em; max-width: 1130px; margin-inline: auto; } /* ------------------------------------------------------------ SERVICIOS — las tarjetas se apilan y el grupo queda fijo ------------------------------------------------------------ La sección se "pinea" con ScrollTrigger: mientras dura el pin, las tarjetas suben una a una y se apilan. Una vez agrupadas, el grupo queda quieto hasta que termina el pin, y recién ahí la página sigue bajando. Así ninguna tarjeta pasa por encima de las otras al entrar en tiendanube. ------------------------------------------------------------ */ .servicios { --strip: clamp(86px, 13vh, 117px); /* franja visible por tarjeta */ --tab-h: 19px; /* alto de la pestaña */ --tab-w: 216px; /* ancho de la pestaña */ --cardh: clamp(320px, 47.4vh, 427px); /* alto de la tarjeta abierta */ --n: 4; /* cantidad de servicios */ padding-bottom: var(--space-4xl); } .srv-pin { position: relative; min-height: 100svh; display: flex; align-items: center; } .servicios__wrap { position: relative; width: 100%; } /* Rail lateral: ocupa todo el alto del bloque y mantiene los puntos centrados mientras las tarjetas se apilan. */ /* El rail va por fuera del contenedor. Cuando la ventana no da para 84px de margen, se acerca progresivamente en lugar de desaparecer: antes se ocultaba entero por debajo de 1360px. */ /* Medido del diseño: con 1440 de ancho las tarjetas arrancan en 136 y los puntos en 74, o sea 62px a la izquierda. Si la ventana no da, se apoyan contra el borde en vez de irse fuera. */ .rail { position: absolute; left: max(10px, calc((100vw - var(--container)) / 2 - 62px)); top: 0; bottom: 0; width: 22px; z-index: 2; } /* Absolutos, no sticky: durante el pin el bloque entero ya está quieto, y el sticky los hacía derivar hacia abajo al soltarlo. */ .dots { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 13px; } .dots li { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--c); opacity: 0.34; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* Activo: crece y se abre en anillo, como el rail de Infracommerce */ .dots li.is-active { opacity: 1; transform: scale(1.45); } .dots li.is-active::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--bg-light); } /* Debajo de 900px no hay margen lateral para el rail: los puntos pasan a una fila horizontal encima de las tarjetas, como en el diseño móvil. Siguen marcando en qué servicio estás. */ @media (max-width: 900px) { .srv-pin { flex-direction: column; justify-content: flex-start; padding-top: clamp(112px, 16svh, 140px); } .rail { position: static; width: auto; display: flex; justify-content: center; margin-bottom: 60px; } .dots { position: static; transform: none; flex-direction: row; gap: 14px; } .dots li { width: 10px; height: 10px; } } /* Las tarjetas se posicionan absolutas dentro del stack: cada una descansa a --i * --strip del tope. */ .srv { position: relative; height: calc(var(--cardh) + (var(--n) - 1) * var(--strip)); } /* Cada tarjeta es una carpeta: cuerpo + pestaña arriba a la izquierda. El ángulo superior izquierdo va recto para que la pestaña y el cuerpo se lean como una sola pieza. */ .srv__card { position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--strip)); height: var(--cardh); background: var(--c); border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card); color: var(--text-invert); box-shadow: 0 -20px 44px -30px rgba(24, 15, 52, 0.5); will-change: transform; } .srv__tab { position: absolute; left: 0; top: calc(-1 * var(--tab-h)); width: var(--tab-w); height: calc(var(--tab-h) + var(--radius-card)); background: var(--c); border-radius: 8px 8px 0 0; z-index: -1; /* detrás del cuerpo: no se ve la costura */ } /* Sin rótulo: sólo el título, centrado en la franja visible. */ .srv__bar { padding: 30px 60px 0; } /* Medido del diseño: cap height 28px sobre Figtree (cuya mayúscula es el 70% del cuerpo) → 40px. El ancho del título confirma un tracking de -0.03em. */ .srv__name { font-size: clamp(30px, 2.78vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } /* El texto arranca a 131px del tope, por debajo de la franja visible (117px): así, cuando la tarjeta queda tapada, sólo se lee el título y no asoma media descripción. */ .srv__body { padding: 60px 60px 44px; } /* 22px con interlineado de 30px, medidos del diseño */ .srv__desc { font-size: clamp(18px, 1.53vw, 22px); line-height: 1.364; color: rgba(255, 255, 255, 0.92); /* 520px sobre el ancho de tarjeta del diseño. El 50% mantiene esa proporción cuando la tarjeta se achica, y el mínimo evita que crezca de más en pantallas grandes. */ max-width: min(520px, 50%); } .srv__desc b, .srv__desc .w--b { font-weight: 700; color: #fff; } /* Móvil: el apilado es el mismo, con las medidas del frame de 390. Franja de 84px y título de 20px, medidos del diseño. */ @media (max-width: 820px) { .servicios { --strip: 84px; --tab-h: 14px; --tab-w: 150px; --cardh: 240px; } /* La barra ocupa exactamente la franja visible: así la descripción siempre queda tapada por la tarjeta de arriba, sin depender de cuántas líneas tenga el título. */ .srv__bar { padding: 20px 22px 0; min-height: var(--strip); } .srv__name { font-size: 20px; line-height: 1.2; } .srv__body { padding: 4px 22px 24px; } .srv__desc { font-size: 15px; line-height: 1.4; max-width: 100%; } } /* ------------------------------------------------------------ TIENDANUBE ------------------------------------------------------------ Proporciones tomadas del frame: la sección mide 1269px de alto sobre 1440 de ancho, y el contenido arranca recién a la mitad. Todo ese aire de arriba es la rampa del degradé, no espacio vacío: es donde "se atraviesa la nube". ------------------------------------------------------------ */ .tn { position: relative; z-index: 1; overflow: hidden; background-color: var(--grad-tn-base); padding-top: clamp(200px, 43.75vw, 630px); padding-bottom: clamp(120px, 16.05vw, 231px); text-align: center; color: #fff; } /* Capa de azul. El es más alto que la sección y arranca desplazado hacia abajo; al scrollear sube hasta su lugar. La máscara le da el borde ondulado en lugar de una línea recta. */ .tn__azul { position: absolute; inset: 0; overflow: hidden; pointer-events: none; /* Segundo velo, sobre el contenedor: garantiza que el borde superior nunca pueda aparecer como una línea, pase lo que pase con la capa que se mueve adentro. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%); mask-image: linear-gradient(180deg, transparent 0%, #000 9%); } .tn__azul span { position: absolute; left: 0; right: 0; bottom: 0; height: 160%; background: linear-gradient(180deg, #8ab2eb 0%, #6da0e5 8%, #5e97e3 14%, #4e8ddf 22%, #4d8bdf 55%, #4884da 80%, #407cd6 100%); -webkit-mask-image: url("data:image/webp;base64,UklGRr4nAABXRUJQVlA4TLInAAAvz8KGEM0obRtJUrj7b3jvYYsj+j8BLRPx50QxGNEnxs45itu2caT9x065fu+ImAAebUzsOArOnWaGqPST/6XgNpIkSdL/Pz13hrmZR3RWzOx6BIGkzff+nZUF22pVSYzaSCCeIOcmrfP+9C1JkiVJkm3x//90AaSrEJOIZfbMYwSCtm1Tf+dPObRo26lDKxHaEALdedGec9Whv8Su84/xX8Z/Gf9l/JfxX8Z/Gf9l/JfxX8Z/Gf9l/JfxX8Z/Gf9l/JfxX8Z/Gf9l/JfxX8Z/Gf9l/Jf/ssu3BMFt5U0AKW4pexJXuZJtPbq7hrHtQu9eW+vuLpxll+7uoIW6sQO3zkLdP/lx0Sy004oG90ujLdfpuFYWypILcabgMmnUqyHqeq8s1LgfOFxvj8USS0neIOd6aXYqc6pPv0g1XRdLDYXbCBGMCZzB9c5oVACU0Ouh96fpWwaLfJXaFz85YHE1hF4MTbZEVAN/bpPrf9YSicBu9+33Dfq53gRNSg4AlIoSSb1b65ki0Pj9fPhF6weyLzkDoOueaH2hix4zhBUhfY4/Yfw/t/rx1dTJSQ+76/kKGB+Eh9Lf7WS3vJ5z8sqz7Pnor/KfU06C6A/oqpuD/QhA0vVAV3n9WpUsBJU5S6rNdqhBq7hegdD/iO/1BWcFIbe+zaXkHxCaIbqWbvyNhYF3r4UUxK3wYJ8lewqulhkiXr2006c+XvN3n0p/y0Rl92rr8gm5nqZEYQ19vcv1JdcA9PYByZ2irucpUQSANpuo8HV7LPdujEGCr5JvCX1c27+WVGads57xVT/mjoW+aG3rO/GOoq6OkkHdqXWl4o0+4PlP9g23l/dtfFomhOBImCKsrnp94EBVivf46PI/2T1XANTicVPdFBezul5TA9celUItShGHrV0c9VfWfsA5edtvo5DFidJKtzZPiHwUSwHmUqHOpYjzVi5O97vR3HJhGCExJDkCkbrCpnBCro7Qxs7JBwfR2qVt2YDj/iZhJfc115uoqL4tBF/GRe29Io2HUTXXxyo4wXscHKU0cfDQb9UrZcl1+W5UdkIDdlHRvAIg4/pn6O4HGLDhyCsZ7Pq7Q3stW643XVD6FjtNVT8NXRm2P8DDuBO/a9rmN+yPWywXmkyf3CIZu5rdT7SbXEtXah8GDUiBzcYR0NFe+GP/P3QiKopzrtCaGVlwNmuyKwCqroUiDvImZCpt96uhxMHmAOzT9K3k0nMl6ed5lDZpp0eqldnKJGMk1JNrZYd007t4HegWujvHKfqwBPk/+sdeEHtJvVBRmJrhnUCPOJSTmSqvSG/FmV0havmTFr566FmmAnRgCep/ZFXL/mp6dy5qW+oCDtUCklAPbV/1FHBVQgMFTLarVDsKbWJod484Z8Kh6GmhEiAn4XM8WuuVAxBMv2ol1ze6NVe9DcpereEG3SWXbWUEagrKcGhD2iAaiibkKcNqIJqEmMJtKFxN8WjbUu2ueMquXvfHG9zXLBH2EUBx/DiGjjjNmpDHBq5oKRyNeL+D69D7jNR+kquyCa5iaOHWw3ADyV2gJQ0a1TY65KmD1q6UxBcCQbx6mtO0F7xTr4+WpCoDDld1cwt8d5SsUvPY0GgnjwdJoybqADIMhkCmtl4+WD0Kwm9dVe0UIonMfg/yOwbhKpqmbbp4bj4Jktml7gop2HttAwcUeLBm2eLHTGsURsLyd10js9a8IBq1HtXnJePL1Io+bleG5+0ogjWrPDXbpTQRp48zQwi1KWD9FcHp3RgYTdqs5akFtalsI7WVk3NdbAnJnpSlomEjN3t/8HArm7/4BFcoDIEMwEjeqkiRxk4/vSw9eg7sg+9BNzE4d5PeOyJ4DWkx7DX1tToDDI+RQrXNpUOK0zCmCyr147n0zw7S5X47fOdLKfuQtqKocyyZZQH18ZTNvP6BwOWTYiKUNQf9Mac6ICGDbVYfJYJWZQeh6uRAUvUEcxOofXQX1qRCBYrjbgq82VywA5K8T4+nqNXLmhWQEEwcGP1rrF/XmqLLxln9cmH9nkoj3Uik51Tr3LwgJ5Zq5lg/9nvItYuli5x1NPeYDr4sm3Q45cril3t3AbdFeYy6GHNuNLO/3YjJEhudOsMtUuEWkgcBWs2XLqEM/jJb41rJr3P0YR7SNm1puzZ9IKYAptjzWTQe0oZrouz9VkYtN/g2UUI8rwP9y9yU/9a9hhW9Wp6iqGopp6L7NROb5aeyJCDgOtX9WweNEa0r56CsOnDKJzDW2dB0nzmkokt5THs/yNQ+DI8QP1lOlwm1ZxaOxJxQjSTeEcBgJ44kRvCBbpxJd80Q9mZb0mB05UjJDQBc/3f4K86lOAeNLpC9hOBN3qcm6PZHoNtEiSJ15xyHUSTCCyYwgEWggMHR4EQGSx+4+MXqfNocs7Z8du0fowWGVaUcAakYzi+fauCcIZ7CY/ophne9qZ5RLdReEM+Fi64OWn8b4U1FgHMCAJi16JDSd2kbOnpf3Lft8xvV29e0RdAf0OeWqh95TB5mm4QoGqRXCI/ed05VQ4rWhpza+yIojRzSswxGjz10KQIEAi4R7INe9FTSuafNVdSao112Sklj/r5Gnh7PKe05jYoM3XkmQJ5t3MO0RjVjZ8viTdLngK9S1WAuG9woq+mNlk8wevRiAuZWimanmpoZE0OWWvKKpN3ts0wKPVv1OoDE6DrTv6PEdF8+y5r6nA8B5CQXeJ0gSE1qtH6kN+rOdb8ym/Ixeq8DLeD9WVRjlsoIJKsrmow+qMT2jJ26QEQ9bqZuJIqzIEo2UhL6+jM36XZdPxsQ1ihqsFoPiyE8zZ0CYdKpW8517AN3etYpJjHOVL1ZO6X+xDrVpYAKHbwEftKUOIFL0hxIFXPRZeEIMDIXLQmxQEoHy5MBYKmA0ICSMGZb+vZVjc0IQTHlNKJsfeegLv64plRl4gf8UFXmrYEfAMAdXiVlM+9nAbaa3b8nUPVBr6in8SJZ1X4umhe7+Q7O0Uz79zjpYn1yZHy68Fm6uIh44ghFrGns9PTa/oCYdcGp3Q1M8IBRLW8FHkWYE31mu9N/BDeqWdpQqqmrU9Ts55hVL1XDpcNyKThTpTbnSTCXaxmH8x26KGiwrdKmI9iRuq/ui8HYmNCSNASzYz289XdJHSeYsFU1tw31xNrGLjQxcHdned1JOEHgt/ZHevwKRxIPULqCnJ7iEllH4b6viQTAzEP44aljfQkzE6li8UHeczHsSWXPWyCHquMGekeUFnFcUJwosWfbTgKZyWFmcEjqWtc3SQ5QNce6yTAZaBKd1z1y00cjXhTBi6sZTm4raNV+F1TXAuJD1WxeSQ9HC9LBsz0uHljkZHPZqSaq90W5HMnk5K1KC0Fa6HlQxRDtFhKTuaDb/puD0WzIP94IrAJoMlQxQASxJL6lFHY2RQdQdUeR05X1KHUVbcMYB91mYZI7ERCRkn/hjJbM+35OVc0KgDWJPEmLPcUuFQLkpU8AM0lnZQywaRtV4hb7RdrTDPYGfBEAkgmj9TStuW2x73GQqqnL+6jspPL2MR/FwVL2t23YSLReWoNg1QniG3II7AOC9AbX25OL4kzXLUS44v6s2lAvqFE+DOWtnrK8NDLmQWAyV5l5y0XLU5V5nhLmn0D7R0aMJ30sAoIsl0VRKeyWjLsHEH1dNKa0ma/K2g4nKW9I0L+vpnRIIVVtYdXl4jLtwVGL9tkjoqn6sUiu3Yh2Em6A0VbNhEWR6k5n+xlHJUHGKklKSGKn4TlkRAtheiSEcBA6mNqMA4JYEupHA8/7Cb5WHUBY1VwAwByJgKc7jbhxd9Yzzow07TjPR2tVU1Yls64KnBwhKGRsydiJDB8BW42eCVw/heMRXi/2DoxDbHW12zhqLb96Du3NMqop/eQ/M14ME0LPXQo2IoizqW/uDYUk7HlDEkW16zdch+ADmUrPyHrJRfFs9Av3lA3VT8TC2vTK0fcje4uLrhJAtkcP6Eg1Bf9w2u8kIbtaNtikXVXP8rLmFIR/llRHCF7ediIgFaaxgv+WOq/Fq1pJaVEF4bIEvzx47WMpQKh3Oe1ijfnVKdIDdegtKqr9cPpI+3Xo9ciDkakG1ElKSLXYca/Rxfg2MpTRyNC+ouY0zgi9UxK+XRBZ2pTqaiqqHrUpQDLrhcWJAEyYPZdbMbiVIucgzTTSrmq3gdtrRWKTPr9EjblN0p6AZLEBsUg/906+aEWsZ3yQhBM9jiRQayKh/W5fy8yGnKAJPJV8cbqpNv0Ta8JKWN+4+rR0q/qHhHAaxkFX+Q+FYvYtcV6PMaPmOq3XQKIDYNcMyka3WN3lY6fVyIArcYUsr1/tdA7qBxICRobmb/WI6damF0CaT+ESo6dM/BPC6P1miUBWGBdFpeamQWnmdgv1Mb8fYDKhQ60egGupXFVIa6sbdu0vmAOEAvuzjvsvEgfBZ71AUlz8yXjUjczyT6thxDRfTY9qU+2NCM8y21UPqPyCZWKB+FMKLfM1tG6s5smwmWlCT6TgUSN7eCog2k5Vr3msBKiShVBgFkNG6FyHqFH3KfDCsBLm/tCf9krU5/OsnnL6J+WkXX1F/ygokZkWl++bQ9mkqj5squEuqZYWoXVNHTHWl82hqWIwjkhTt+dJcuuKzcUNdlT8t3Pg1OOxZ4NmXdVbE+mlbMhLiGgO9WTBGCT8gOiyFhpAPZj5C5nnAd2Obt+COPol0CVve6H08IlSU98RPQ+rU4UT2A/pZqAXZPWQerWz91mOjgPfdQgdRBtVi0inOgmxm4YQNiTGIP7hsitE22wHAErGRwluCddLux9fIyEEVbYLcjGfejLCMnyLjDUERoLF7FrjhpLXyoTX61D12F24Ux11Eg5c+DCvuMhrHOkaankHKPAEjuyRs9XT/YF7QnM3QuDObt0gJJHWqxfOu/+bsFwKLiKJbdfFb+GD/5xpghpRjqxGOy4u+lfb4YIbJx+MWnAx4eqR+o46k5aDEIEWxUN6bioy8tGsnxlVjOeIupRuv84XuT7T3VARTNjAIG619ky1pnZTPVoYN7SwhadwKYTyTcDnAW4zeSLblGOY+/mAuJkzOz/+0Zt9wier8txhsGiXRDuRk35XbMilH76gSMTYadWOt5+hFVQxVtWKwgC7vm+8GB+RNg2MQ91h9YuAjtSgrPf1Qd5LJISguDe5LDdhhHfvOASqNRHbtieDIJogK/3BMYobuRCuQghTbqrkIpv3xKg5eq1srKQAPawp3f4OyvRjSh3PHCzYwTqfJNJrD0jAYWqWOM5gbhg0gS6xc18jDDfprfqolzQ981s7L42bRUbtXqpqwtJvv6n3Q9dhtrUIwUqG7v8GgpoRU3OndzRj/uKpnhe+Iy1Z+n4l6MygH6iJo6kEV5wKaMYBhYuzX8vc3GnMYSyzgIAO7k3n6ZUYQTidu7ph/FAwQlbLojxAV8rBz6t/CUVPhmSaKygJpPOxMIM6mAlE6h1GcNCWE5YFA0aLI/uwZNNLF10EmxBIATBc7QMc9X7+t7X/BkFsmJGqMPJSjrVFkO0XbrvI9zQdcsmk4AzErmAnHYKtgfSEoCRA8OVdOq67qNFZUJIpy538GB061mKtYIaHht7rtN5TDQ4VV5cf/CZO4F/Q5GqUuqRDEqoIcKFRqm7ZVTht/qa5085eH6q1BeuRrunsG0fTFVHPEnSo8tEXV30ycmVuNoqFalxwvWXDHcNtg8mW5XFWNilOVQRd/Tyg0LyqVCCIMdLKhKt7pbD5mj6MVorWnd5k+ppEd3OzfDKqn2xXPgzih6Ck0CT2kNPgGOvi4bV1p+GikvgDSqmC6cZlaUxUEowssQ2B+ykwM9PrA1rZFFSFYeCI9aC6oquGifSGIqH9mG+9oPfpLyvSZhJUtfJUmHizMZO9VBQVl6NkxTXCLPBcZIZ7wYB/3nWY7JTwYPtNq8gRRbHKVNd0PAbydD0+RaM6MeKPbz7pi4b249zBP4upukFtI6nEHt2AkrZd1iTd0kZVHD6+LtReXkbDDxxFTvjuwtsMeM++AYhKSyxtsWVKxaZF/WDlCFU4uUoWRxp4qhGT0ekZFF2O/LI58/anwyVJey+BaKdw2TKiV3fi60M4moNY3khvz0RFMEpm1ru+h0jm7fAAFZRqcIgxkoPpEfzgx9ICg+YYi8h02Z1ez4goSZ8YBRybR5JLejjvKiWRUvTrmxQDA/Vm6RCcX0ztOInneul8+bPn4oNnen1ygDFM6iViYkZwa1kkVVeMBwJMOGb9YJuOAI+0XgKrExm9eFEhd2KnzTEC1HUkEISMNrYXRUada61wpBIXd7GfbojgvmZWRdKW6j78P1ux24Uz3b15lKRlMKBZIDCBJW6sU/EVWVHzNBKMwM5Is3yF/doZqLc+7VEpkoFlGfieSX/0Wv+Z0FruitcSrB4xBYRHLufp37PtWy7oajjrM2BqVGEE+zaHXElckkKMLeYQmbNZi2FfzO9c83LVE5EsTIhWUQwKr9sQgFBJ2bjeMuqRRiMSh4FlFi3mU0jS6IvaMWDZrdXXr60pquOz6IaWwE7/vzbQtRp4WlSteCakgWrkdGFEfBd9rUlVmm43eLGWpL4/l4RmU1FdUoaHIEd/goB8ettwtGhuEPX16+ewckhSR1//naUsEY288qsa9HBMtz/+vLhxsSKKK1XlLKgrXXD62GqRPVtWLaG6sp6Ya03a+7RCLpJsKtxAwlrFcRoFAhm43rV8WctcdGvx7CThy+VIwzr3McYPZvuTLuy2BMlXOlXlRLx5H+my8o5tSR2J24KverXSVL4mtgrrhdYpTxCUkv/PiESiazsrLFolzPuegyLsItrUUqh2IFZztXiWtKwdEeOT+hrJ0zCkkU2zHLL9hTxP+/3ktN0XtZOB2SZZW8sSxVlSNG76zzUwjwOHYJwnxigLQO598O3pC/WUhDK/x0yq0ik5sFB7O+r1jUSrej3YS3p8fsDA3F79qZeaSy+a6eanY56oQPdYzrKZTIaqiITK6s5rwwGvw/Uy2SdtsjcBgWGLsK4jX95IqUdDmJprUy3sFDbju9bqdk9qvMxsWVqp/B20jim4L0tbL756zJTbrBzuYAyGWMVzIoUrqjLXTqyTjEUEOtU77/R08iZaB7WKNS0sZNMRaAz8di2gJhHwoXfwqdvDPLkpqD37oxJ76rWjaCCQFKkdoCbd7Fzx16sLwRlOfBGMqsHDBbPFJl8aYR1r36rxqlzLd6qLLF5na6geC+3tGfW7EgKymx+QCFNnqgKB5jp1wRsLHx4l4aUp2r97cw5iQSKo0TGI6ulkqoaSvCZWa2rulxMUpdePw46JJNHhVzLQBRfaWCpVAQJW1Mf/QNd0tIhv7Td09b212IjT3qP5XBYtUcQp7Jd/XzLpAgi4Dr0VifCuaDEaad0DusQhDmD2IjgjTY8QR8kEli3aoBgtWwkymBOqCOdSo4bZUi8x5cHhbWvYeqMXbEt/9eNf1jRl39Qo1ROg5M/ro2VlAaXXjgN69SQ1wYulj5ybvvqb3tPjFFa9zySKa2vZUtDnXiQHxQNe3rIBD6hUQr+4XUYyBMavllHup0GVqSGYvoDUwbVHSYkSoPhCJYygg3hKbural+wiCbh4HmdNLyR94L6jSMNKNGl/Q/AD+0611hRAWOSu9eyCIjun3RtgyovtGCZ4H7i1ZmHCJfd/bE306uVvPteQAMCVAJkEgT3T7dk5d+oxnDVg02BAdlTjOkuR/LAXoGqdS2EN/8eoBJWXbnIWBu1xNyhH7aWZhJ8yWWNyC9f1wDq56G/5IHEM61LI3oWLoqxlfFMXzZBtSRN3EexVn+opqrOgpKUP0K8pi3VfvpcKxzEakNxhAiyDO3GAAYCgkfk1xOQdctAyp1K5/qF1b7qTxE69riZzW+rDjczQ2oYoAWPMSsHNpl8lTitQbdu16kFVMm4yKbrFZ9TC+6xb09rA3VujN59WycSmoaRyqabNYM4vKSM66WXqUPAgMd+TWyfBSYEoEAP6RcMfSUxZ7T4qVY8kQll8pFUrHDB+V8/LH5Mo2qXK9McEGvbdFDQhlelVEU6xLVVB1ocahqi4PUW26z9CQYXhRzMrIy08pLIthawfDbvk9AMfm8GfSngDRtauSKX4naqw3jCMMGVhqbcGyx/A1Wo030Zrnf5/3DCHXlWqHlLRbeGsHpqhf3P27kK+WXaunUkkUCDKA/j6/DvUYbQ62ZIOWjseyn9bN5u/At3CyiOhVwAgEH3lneao5dWajb4UAYqOXmOLAQI7qHl2yAXFxisPWq0jTyrEk2htpLlTpLL08q9vfu9dduLMNaOpF9mC6qt6WTXV3Q+p/0L0kofKhiSyEMJaaexUAGgYDSkbMuTKizXEYukicTE52VvdHRf0T/ze2xC7KpJPqYYH5Ou3Xf7FD0ZcM3KOQTypzBLIb0u+dPBcyMwrkOpO30OGnKPrwzsfQHptp3otEL7oNcg3zZ8F3jkVzzWFr1W+swz12K5+QH5HBcwAsbv0jXpgW2/1Y1DUET1gYojIGs1P3CwgAPVl8fNm6HdEGvdiWkvFKlNcy0VDi506CKFHRlW3zWSRTLSQI8TdsPmpQ/iniR1U/FSIP210YTGGdx1gJDjbZVWP5WInBYL03qsS1h/RstipBSABuFKG3nITPrw1yJnKwbaTxjFHaNTJbzCirwvMXMtiZgr/SOf8q4SGKsLfUywO/3JfAWIK5bxKSjDIji6IfwWShqGpOyDZ3wXWG+q9cnCjCPIJUzKv6smdKkq2Bm3djs06kbwAv3HVZgkAR/czi9uYMXuCynDfM4wjUv+KnxgaWFq27bNgsKRwp4FAUWSd1DLkkqqegGi3DyCwaJgXYD3m5i7QXS5H8wFVb4WBRyRH5yWZpj3Mu7xlW1LWfGR26i4UzgAEsVJJdGSC20kf/RZHpIopEv6W8YNlLDcQaORowT532PKFncjiZFxb3yR4YctlxIclqyD70XyA0zOoYDTkbO/uY0KuQw8W6D43iy8Se+nFKNxhqlvfHpWqVlQPqdXUwVd8JAcy3x8DJbQkH5nayCF4YUwy11fvhxIED+b0Qk/T7tT2YcFP4bHhtYwNV8FehxkjvRilrFKBo0AW89CFaf8yLlC2M6+B0iO8E4yEQ5pPnEfEBNDCsjipineK9ZpuS8uo1n+u/KRPOe2EYOToj16lOpGyV/7Hr++6d6fhKfGQ0un66mVBDjpsU47x9qOp5x/AI5YvxS7YNPfBMEvsn41HsiS4hUI1DdvuQzogxQf1E0niEqT7j4oc92s7WYJEn1f8PIE/Gv75NX6efdbhTkk85Ifo7dSKJ5oTTbIk32rE5QgfoCAAYLSk2s2ODH0TGaw/j5WDhJ5wCUDuXrhSNzn2jtHAWM1cslP8uW7QvGDGHhNEWSZjGn4qsnMy97caHp9kQ/44N3p0E30QweiHN9AkckaP/Cethd2MBAoxKmnUDV//uBcVzEYj684pD6hIECRi3y60GpL1SgmnCF9AZr1Lr798xObbv2/kL6JHD690w4P+B+2nlzLQq1Nl7kEFVtyTbCbREuWpGTUsDmRvVxyhOfzj1bFTd0pxT4PYXlVVtsVQN+ouI5SZ8vlyu0L+jcsUmSK507vOkOmJ1rmXGv7m5UVIajA4IrYm+VjXXKvZl0QuzER1VJpM2OqguhPQsllvzAc47zRfpI3sg0Fan1MtNGmUzI57MsyXjfmRNOxGZi2QkhsIdUR6/RrpFc11Gct33+vDddOW5pTDgKdFtFvKJZEEdmRJpJg/dQeSS/KeoQcAFIFQOCGBkZ7XIaWDW5OTW+ALlq5UPhevip6eX/x7PwAE0oQiibL8QeBahiP0TH0dVDUaXNEu1F+rSkSaXgg+TU/IHrzKFc0rwimM/UY7e1gWfJg93wy7++CJ9E7g39d3Q1wwk6q87VRHpDeuj8p74Sn51qtzw3tZIXbMMuRkWrpSTSoNPIKarRe0bd2BIk878ehFIt0CeuJytLWtyYcSHPImkxD+4AxMJfcWDAHIfUNO3iAQAs70UT/ikjXd6jUsNJJm4wFo0pA35205Jqfn5bSTAlMpKXO3R244TPYcEN7Zjh6Yi/rervK/Z9/FEUfPQYq3ieEHpElu/rqiUj92v5LNvb0YZMvwJWUEMEcPqHH/UXXAIgeqVTXkCz0vx506BAbwmlxs/4I5XGKJdtoV90ndkFffxc90kL5gMO+6ZLdtnnBaRxBVj6hWTknnMAiC9Ob1KQzUdb3OzZcheKfYSP6K+3Bb4tJwyYAQBDzGf/iJLMO/nO5u6NQQtFYMseMGJ5YZI9EBBOiuK0qpVNd1qm0WlJe3nepo6AGA+cXCa8FhxcdZrZ/UCOTsSOn1hBBkyJeqe3lBCsad/ANVCoAe3LF2p6nXnHH33zHYYmPPpDd/ZlYVBcy+MkV4VoPwkzVBp2QvVztFecB7NevXa+vASGLjxuTjrXZK16qcpS1TkzRZJmboyB/esGSoeBZuEm2tUUOVbltzzZNeT2sC1itTmJ6z7ggJ/jn7WhjUDpY2CIRgwpgIQulmbi14uTEpmpGXOUgI/gJVh6h+Hh8M5Nr1pVsHcppTnUi3heFlKTAOW7wj0zJYmuEUL51ACoLcOp7B68xSALFi+ggkKtPxNTeXgkDWnJSEiP+5sCTBQvVKotLVL/3g4rjaEcIHdDrraRG1OXpTCh5Al3epmELuahkhKMyrp5lZOVsGJJVEjZTDYSlIwSZ3d+1un6vaJjCeXRZxZ0AAXIkFp+UIFvqCPmhkypZwaujCJwBVFC3N5mMMN07dDMDk3Xw+xkKvlJSXt6WWsF587URi/l2Hpi/mQl5Ein+numldcMqGzWBZ/MryLj98Xe2/bWL7grKhy8XzW0dFxfu1B/zm5tTBP0cAANS6UjxXJUVLC0NzsJNWZV18QJFUj20vf6cqMZY/nD3yXbpldj5ZCuxbOluUlNWk+kCYT6Gp8QBKVL6nOBqoLA2/ne005woqg7nXxWo/nJq6c/SaR5Ie7duw36rudY0BemkcFNTRtMrRAy4pK+LbL55UdKxCoSVXhTzHa6monlFe8Y6aM+uungIgkERFqSpnSZWKKSs5CfgXqsuSSr7S9uu/kxx8SRgAq9fVflX4w2nrmCRqtBaXmGrZiTn7ZmJuG0rPUc2Qnply8jp6Pfk6CJzVPFjL5137Ihi2k+A46tWiG9Vl1TSMHzBx9b5IB61JQK/45vOBSV35pgh+S1VN1e8CWEtJSjUFyPlib9spVVUKRSVuzxw5qE0Z3dZ+DEnWOZh07D9WXZCxKq0Tdt/P20JivZC4ULw03AmaDp54qoclKXAOPhAySkXfUzbFN6xfhzgWxBLDPSNcm2VFb3pXbPfDzNa6gMdGXwD5K1Q1IXN5/J6SquVF+aTqzj1/XlFp85NydwPBaaejSTQxBX3WFKRiynglS/SIgMlCqPg5yZADkFlaE4VD0yCDcavEuE9troKlxh+jLJLURHT6oEbwNQ5ycsp9TVnoU/6O5gMGArru/38f0kDfiJi6F9UPSmqnOhDUmhFk2gTwrJXuuPfD7BmDBsBFn7SI4B6AO+pUhaDmpO7gwKMmxEJ1ltMotZ3EUxS0d6T+u8IWMFZVqohxlUINY4sjBJoQa5lZSxQoMH5T+lwPFtflBWqj6fIUo5CC5zgByJ/jN+Ui445C00aQXgxQDUADwOpa9P7IUewXbDq/fAqUi8ax45Sc2Bp6uMpaoaj6vQOE1K0et8yNPgoyzxCum1dNRmewnHZivQeApqFXIHM1YwsM3zSrMqpHUUPWkCvOetNr5VSp1docLoHTB9gmHGK4LoVE2YNsTQ73JBgeTT0sG8UhVvj/IHNubScHQrdUzgnMTq0V0MoN8l3vEgq5es2WPqtklLxW+6InJTWZtnxnjencmjEkGumJInVbZDBJcQqhTK/lomEYrnlEu+3tXGGdLHr//0k5NBWGljPb3mKzQtJrqmXK7ETAOmD+c5ya4h9wXVeqHG7lwpCNg1jM1bHssUMo+dSzRaFShc4qTVzaNhvUBIyWUzja/H+C0BLGMwLLq8QqNHU9WSsCUNU75xquelwYIu5UQWR4JifvSh1vK1ftKZD91I4cqYvNcjtVopSsqAKgoTnlyFYK6DJDoMas/U50skDi2QnkvFH9SIYI0tWRwjAAOg4LpwYUQfv6MdANl6gCtHG11igCxUqZR8xrrd1klbqo8cZdm3VTJDxCEk6ELreqMnscoUJ1Wz9snfJI8PYjAwxlbmVV6rM+lgi2SEbzbEDAsaNaC2k1JXqnQubqoWGKyhfai+QAx5fcTq5Z9pQOqVI1Wtp0Jw5KHrOkouqm9FztiRyJCofg5l1Rll3hCEm38iNJfNVjK+btD09tMrIafsqmBjoa2zVhdVyMes+4MWGxfUlYAMjt1uv2+iVLV1cRTJo69tqFnBEdQy0//v4bdG36S01VTBEO1lX1R6YkxuI1Ufq8NlzGMSvJMdfd1Uux7mHwhZrT0WHhmAzaTxUEhdsUjKBJjTWC0maZ3avgWnIAVz8mapCnJYqcb/jEn5TUdtpMHXFFTJWcae62tjbMVfEcc61cndBam8g5LJRRbHhSA5L6UqLVlOEKdF69ha4JwoksViV1IDniTuDackXhHhcctdw4EC5ECZeq3mkFg/TeZbWkCTg06VQLcMpAO+c2cM0zBq0SZqYLfKCp/x1LDKFzj+5yaiXZeO13RGVhJsaqUNW1l2y43Vx79dM7dMND4BpKNZmnLNtAfk2HZZVbHIV865xxG7nu1B3VBmb/LN73ILHshLVAtnOdodpNNCiHmI7q6kKy4o7huud7HBnOBuwOsNXiKOf6ptv3QYH7hi2srGGFeBYe6aX+IULPlAXk8katc2FBpIMpRQUrecvb9XlpLSvt8C2z4l6FK0Or9Oz/DWnaFJS61WX+y3RoJmCbqtnO7bh34to4RdTlG3V92U9JfW9xatFj6e78PXEveS/dIYuOeo3+etFmarU+LavD312Sc3vJAfdFXoVWo9qJ2/s+Ymk7LStqQ66iPS/A+BLKieT/rqdQw5HhbLcjraYW68rdZGXwKk6McYr7kPsqWEV7Pbbsz27Y4AlVczmrn/S1u+Jvh/OPS47O0xa4acN8pIOpG+52WXPv4bd1agwn3P93VE+YlZMtRZ2ccZ+lKoUI12Uqekmuh04Mqk0ui+0QQvU0sD6+L8v1oJmRrVJTJd5TsY3Jk2Pwh0oouNc8KuMyYc2YEbF8BIyivoNDsanUthpypnaza/2s74vmFO3G3QIn1CYVVyRp0dnkmL4vmLrZJqgQcqylCBMugu+62O1LHksssnW8AeZPOTTXtAAfr+DmsK+Aa2kFUyRag+JvxZ9708SQrfqW5LkjriggCTz3vmHssX3MwwcRZyDPNVnylGizDXtuVZN2lc7suUVK8pn55aNOD7r0Ic4NUyzQ8gy5f6E28zU1mCh1pZsuquFOu17r0Jt9lX+nOTX+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gv47+M/zL+y/gvn6Mw"); mask-image: url("data:image/webp;base64,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"); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; will-change: transform; } /* La textura de nube queda apenas insinuada sobre el azul */ .tn__nube { position: absolute; inset: 0; background: url("../img/nube.webp") center bottom / cover no-repeat; mix-blend-mode: multiply; opacity: 0.15; pointer-events: none; } .tn__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; } /* Separaciones medidas del frame */ .tn__badge { width: clamp(180px, 17.2vw, 248px); height: auto; margin-bottom: 60px; } .tn__title { font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-snug); letter-spacing: -0.02em; color: #fff; margin-bottom: 24px; } .tn__title b, .tn__title .w--b { font-weight: 800; color: #fff; } .tn__desc { max-width: 46ch; color: rgba(255, 255, 255, 0.88); margin-bottom: 34px; } /* ------------------------------------------------------------ PROYECTOS ------------------------------------------------------------ */ /* Mismo aire arriba y abajo: el texto queda centrado en el panel en vez de colgar del borde superior. */ .proy-intro-sec { padding-block: clamp(64px, 12vw, 173px); } /* z-index 1: el hero es sticky y sin esto se pintaría encima */ .proy-resto { position: relative; z-index: 1; background: var(--bg-dark); color: var(--text-invert); } .proy { padding-block: 0 var(--space-3xl); } /* Medidos del frame: 54 / 32 / 24 px a 1440, con el mismo tracking negativo del resto de los titulares. */ .proy__title { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 20px; } .proy__lead { font-size: clamp(20px, 2.22vw, 32px); line-height: 1.3; color: #fff; margin-bottom: 10px; } .proy__lead b { font-weight: 700; } /* Móvil: los dos párrafos se leen como uno solo, igual que en el diseño, y el título baja a 26px. El panel abre con 96px y cierra con los 38px que lo separan de la primera imagen. */ @media (max-width: 820px) { .proy-intro-sec { padding: 96px 0 38px; } .proy__title { font-size: 26px; line-height: 1.27; margin-bottom: 25px; } .proy__lead, .proy__lead2 { display: inline; font-size: 16px; line-height: 1.34; color: var(--text-invert-soft); } .proy__lead b { font-weight: 400; } .proy__lead2::before { content: " "; } } .proy__lead2 { font-size: clamp(16px, 1.67vw, 24px); line-height: 1.35; color: var(--text-invert-soft); /* Sin margen propio: el aire de abajo lo define el padding del panel, que es el que tiene que igualar al de arriba. */ margin-bottom: 0; } /* El bloque se descubre hacia arriba. El estado inicial va en CSS para que no se vea un parpadeo antes de que arranque el JS. */ /* Cursor del tipeo: acompaña a la última letra escrita */ .proy__title { position: relative; } .caret { position: absolute; left: 0; top: 0.08em; width: 3px; height: 0.88em; background: var(--brand-light); border-radius: 2px; opacity: 0; pointer-events: none; } .caret.is-parpadeo { animation: parpadeo 0.9s steps(1) infinite; } @keyframes parpadeo { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .caret { display: none; } } /* Destacados en scroll horizontal. El contenedor se pinea y el track se desplaza en X con el scroll; al llegar al último proyecto, el pin suelta y la página sigue bajando. Referencia: landonorris.com */ /* El track mide el ancho de los tres paneles juntos (3 × 100vw). Sin recorte acá, ese ancho se suma al del documento y toda la página se puede arrastrar hacia la derecha. `clip` y no `hidden`: hidden convierte al elemento en un contenedor de scroll, y eso rompe el pin de ScrollTrigger y el sticky del hero. clip recorta sin crear scroll. */ .hscroll { position: relative; overflow-x: clip; } .hscroll__track { display: flex; width: max-content; will-change: transform; } .feat { flex: none; width: 100vw; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; } .feat__media { position: relative; z-index: 0; height: 72svh; overflow: hidden; border-radius: 0 var(--radius-card) var(--radius-card) 0; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); } .feat__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transition: transform var(--dur-slow) var(--ease-out); } .feat:hover .feat__media img { transform: scale(1.04); } .feat__info { padding-inline: clamp(2rem, 5vw, 5rem); } .feat__name { font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: var(--space-lg); } .feat__meta { font-size: clamp(12px, 0.97vw, 14px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-invert-soft); } /* Barra de avance del recorrido horizontal */ .hscroll__bar { position: absolute; left: 50%; bottom: 6svh; transform: translateX(-50%); width: min(280px, 40vw); height: 2px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; overflow: hidden; } .hscroll__bar span { display: block; height: 100%; width: 100%; background: var(--brand-light); transform: scaleX(0); transform-origin: left; } /* Móvil: sin recorrido lateral. Los tres proyectos se apilan, cada uno con la imagen arriba y el rótulo debajo. Medidas del frame de 390: imagen 350x219 (16/10), 22px hasta el nombre, 13px hasta el dato y 38px hasta el proyecto que sigue. La grilla de tres secundarios no va en móvil. */ @media (max-width: 820px) { .hscroll { padding-inline: 20px; } .hscroll__track { flex-direction: column; width: 100%; gap: 38px; } .feat { width: 100%; height: auto; grid-template-columns: 1fr; } .feat__media { height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-card); } .feat__info { padding-inline: 0; padding-block: 22px 0; } .feat__name { font-size: 24px; line-height: 1.1; margin-bottom: 13px; } .feat__meta { font-size: 14px; } /* En el frame móvil el dato arranca en el corchete: sin la palabra "Proyecto" entra en un renglón. */ .feat__meta-pre { display: none; } .hscroll__bar { display: none; } .proy__more { justify-content: flex-start; margin-top: 37px; } .proy { padding-bottom: var(--space-3xl); } } /* Grilla secundaria de 3 */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: var(--space-4xl); } .card3__name { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: var(--space-md); transition: color var(--dur-fast) var(--ease-out); } .card3:hover .card3__name { color: var(--brand-light); } .card3__media { aspect-ratio: 412 / 358; border-radius: var(--radius-card); background: #f7f7f8; overflow: hidden; transition: transform var(--dur-base) var(--ease-out); } .card3__media--b { background: #f3f7ff; } .card3__media--c { background: #f5f5f6; } .card3:hover .card3__media { transform: translateY(-6px); } .card3__meta { margin-top: var(--space-md); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-invert-soft); } .proy__more { display: flex; justify-content: center; margin-top: var(--space-3xl); } /* ------------------------------------------------------------ CULTURA ------------------------------------------------------------ */ .cultura { position: relative; z-index: 1; background: var(--bg-lavender); padding-block: var(--space-4xl); /* El diseño mide ~1395px de alto: es lo que le da espacio a las órbitas para respirar alrededor del texto. */ min-height: clamp(820px, 92vw, 1180px); display: grid; place-items: center; overflow: hidden; text-align: center; } .orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(124, 0, 244, 0.22); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .orbit--out { width: 1060px; height: 1060px; } .orbit--in { width: 700px; height: 700px; } /* Posiciones tomadas del diseño (porcentajes = centro del ícono) */ /* El centrado (-50%,-50%) lo aplica GSAP con xPercent/yPercent para no pisarse con la animación de flotado. */ .ico { position: absolute; width: 62px; height: auto; } .ico--lego { left: 24.4%; top: 25.7%; width: 58px; } .ico--bulb { left: 51.4%; top: 29.8%; width: 74px; } .ico--target { left: 16.7%; top: 67.0%; width: 68px; } .ico--lupa { left: 88.5%; top: 62.4%; width: 64px; } .ico--perro { left: 58.3%; top: 80.1%; width: 68px; } .cultura__inner { position: relative; z-index: 1; max-width: 940px; padding-inline: var(--gutter); } .cultura__text { font-size: var(--fs-intro); line-height: var(--lh-snug); font-weight: 500; letter-spacing: -0.018em; margin-bottom: var(--space-xl); } /* Las órbitas se miden contra el ancho cuando la ventana no da para los 1060px del diseño. Los íconos siguen visibles: en el frame móvil están. */ @media (max-width: 900px) { .orbit--out { width: min(1060px, 88vw); height: min(1060px, 88vw); } .orbit--in { width: min(700px, 58vw); height: min(700px, 58vw); } } /* ------------------------------------------------------------ MARCAS + TESTIMONIOS ------------------------------------------------------------ */ .marcas { padding-block: var(--space-4xl); text-align: center; } .marcas__title { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.02em; margin-bottom: var(--space-3xl); } /* 10 marcas en dos filas de cinco. El diseño mostraba una grilla de 7×3 repitiendo logos para llenarla; con los archivos reales no hace falta repetir. */ .marcas__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 30px; max-width: 1040px; margin-inline: auto; } .marcas__grid img { width: 114px; height: 64px; padding: 12px 14px; object-fit: contain; border: 1px solid rgba(169, 123, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.012); opacity: 0.72; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .marcas__grid img:hover { opacity: 1; transform: translateY(-3px); border-color: rgba(169, 123, 255, 0.38); } @media (max-width: 820px) { .marcas__grid img { width: 108px; height: 60px; padding: 11px 13px; } } .testis { margin-top: var(--space-4xl); padding-left: max(var(--gutter), calc(50vw - var(--container) / 2)); overflow: hidden; cursor: grab; scrollbar-width: none; } .testis::-webkit-scrollbar { display: none; } .testis.is-dragging { cursor: grabbing; } .testis__track { display: flex; gap: 28px; width: max-content; } .testi { width: 632px; max-width: 82vw; padding: 40px; border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(124,0,244,0.16), rgba(106,76,224,0.30)); border: 1px solid rgba(255, 255, 255, 0.08); text-align: left; } .testi__stars { color: #f5c518; letter-spacing: 0.35em; margin-bottom: var(--space-lg); } .testi blockquote { font-size: 1.0625rem; line-height: 1.6; margin-bottom: var(--space-xl); } .testi figcaption { display: flex; align-items: center; gap: var(--space-sm); } .testi__avatar { width: 28px; height: 28px; border-radius: 50%; background: #dcdce4; overflow: hidden; flex: none; } .testi__avatar img { width: 100%; height: 100%; object-fit: cover; } .testi__who { font-size: var(--fs-small); color: var(--text-invert-soft); } .testi__who b { color: var(--brand-light); font-weight: 600; } /* ------------------------------------------------------------ FOOTER / CTA ------------------------------------------------------------ */ .foot { position: relative; z-index: 1; margin-top: calc(-1 * var(--radius-panel)); background: var(--bg-lavender); border-radius: var(--radius-panel) var(--radius-panel) 0 0; padding: calc(var(--space-4xl) + var(--radius-panel)) 0 var(--space-3xl); overflow: hidden; } /* La mancha violeta. En Figma no es la misma en las tres medidas: cambia de tamaño, de forma y de la altura a la que llega. Los números son la posición del óvalo del frame dividida por el tamaño del frame, así la proporción aguanta aunque el footer quede más alto o más bajo que el diseño. */ .foot__blob { position: absolute; left: 55.5%; top: 75.5%; width: 65.4%; /* 941 sobre los 1440 del frame */ aspect-ratio: 1; background: var(--grad-blob); filter: blur(10px); pointer-events: none; } .foot__inner { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; /* En variable porque las redes van posicionadas y necesitan apoyarse en el mismo borde que el texto. */ --foot-pad: 80px; padding-inline: var(--foot-pad); } .foot__title { font-size: var(--fs-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: var(--space-xl); } .foot__bottom { margin-top: clamp(6rem, 14vw, 12rem); } .foot__logo { width: 168px; margin-bottom: var(--space-xl); } /* ---- Redes ---------------------------------------------------- En el diseño cuelgan arriba a la derecha, a la altura del título, salvo en móvil, donde bajan al cuerpo entre el logo y los datos de contacto. Por eso viven en el marcado donde las quiere el móvil y de ahí para arriba se posicionan: así hay una sola lista y no dos copias que mantener. Los dos SVG salen del mismo alto de caja (46 en escritorio, 36 de tablet para abajo). El de LinkedIn se ve más chico porque su propio dibujo viene con 3px de aire adentro; es así en Figma. */ .foot__redes { display: flex; gap: 14px; /* El gris azulado del diseño. No es ninguno de los grises de texto del sitio, es propio del componente. */ color: #8e98a8; } /* `flex` y no `inline-flex`: en línea, la caja de renglón le sumaba 7px de descendente a cada ícono y el aire entre los dos dejaba de ser el del diseño. */ .foot__redes li { display: flex; } .foot__redes a { display: flex; color: inherit; transition: color var(--dur-base) var(--ease-out); } .foot__redes a:hover, .foot__redes a:focus-visible { color: var(--brand-deep); } .foot__red--ig { width: 36px; height: 36px; } .foot__red--in { width: 36px; height: 35.2px; } /* la caja del SVG es 46x45 */ @media (min-width: 641px) { .foot__redes { position: absolute; top: 0; right: var(--foot-pad); flex-direction: column; gap: 16px; } } @media (min-width: 1025px) { .foot__redes { /* El diseño las mete 20px adentro del borde y arranca el primer ícono al ras de la mayúscula del título. Los 9px son la distancia medida entre el tope de la caja de renglón y esa mayúscula, con la Figtree de 44px. */ top: 9px; right: calc(var(--foot-pad) + 20px); gap: 10px; } .foot__red--ig { width: 46px; height: 46px; } .foot__red--in { width: 46px; height: 45px; } } /* En el diseño la línea corre por debajo de los datos de contacto y cruza todo el ancho; el menú va a la derecha, centrado con esa fila. Por eso la línea cuelga de .foot__data (que ocupa el ancho completo) y el menú se posiciona aparte. */ .foot__row { position: relative; padding-top: var(--space-md); } .foot__data { display: flex; gap: var(--space-xl); flex-wrap: wrap; font-size: var(--fs-body); border-bottom: 1px solid rgba(24, 15, 52, 0.18); padding-bottom: var(--space-md); padding-right: 180px; /* espacio reservado para el menú */ } .foot__data li + li { border-left: 1px solid rgba(24,15,52,.18); padding-left: var(--space-xl); } /* El menú se apoya sobre la línea, no se centra en la fila. Centrado se desbordaba: son cuatro renglones contra una fila de datos de uno solo, así que la mitad quedaba del otro lado del divisor. Anclado abajo, la línea es el límite y el bloque crece hacia arriba, que es espacio libre. El desplazamiento equivale al padding inferior de los datos: así "Contacto" queda al ras del renglón de contacto. */ .foot__nav { position: absolute; right: 0; bottom: var(--space-md); text-align: right; font-size: var(--fs-small); line-height: 2; /* Oscuro y no gris: acá abajo el degradé violeta lo lavaba */ color: var(--text); } /* El apagado va en el enlace y no en la lista: así el hover puede devolverle el negro pleno, que con la opacidad en el padre quedaba fuera de alcance. */ .foot__nav a { position: relative; display: inline-block; /* El interlineado del menú es 2, para separar los renglones. Si la caja del enlace se lo queda, el subrayado cae seis píxeles más abajo del texto y termina encima de la palabra siguiente. Acá la caja abraza a la palabra y la separación queda a cargo del renglón. */ line-height: 1.25; opacity: 0.7; transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } /* El subrayado nace del lado del margen: a la derecha mientras el menú está en la columna, a la izquierda cuando pasa a fila. */ .foot__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); } .foot__nav a:hover, .foot__nav a:focus-visible { opacity: 1; color: var(--brand-deep); } .foot__nav a:hover::after, .foot__nav a:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .foot__nav a::after { transition: none; } } /* Tablet y móvil: el menú deja el costado derecho y pasa a una fila horizontal debajo de la línea. Ya no hay que reservarle lugar a la derecha de los datos. Corta en 1024 y no en 820: es el mismo punto en el que el resto de la página pasa a la grilla de tablet, y por debajo de los 1000 el menú vertical a la derecha ya deja al bloque de datos sin lugar. */ @media (max-width: 1024px) { .foot__blob { left: 39.6%; top: 57.2%; width: 121.4%; /* 932 sobre los 768 del frame */ aspect-ratio: 932 / 716; /* acá el óvalo es más chato */ } .foot__data { padding-right: 0; } .foot__nav a::after { transform-origin: left; } .foot__nav { position: static; transform: none; display: flex; flex-wrap: wrap; gap: 8px 20px; text-align: left; line-height: 1.4; margin-top: 40px; } } @media (max-width: 820px) { .foot__inner { --foot-pad: var(--gutter); } } /* Móvil: los tres datos ya no entran en un renglón, así que se apilan y pierden los separadores, que sólo tienen sentido entre elementos de una misma línea. */ @media (max-width: 640px) { .testi { padding: 24px; } .foot__blob { left: -20.3%; top: 73.5%; width: 170%; /* 663 sobre los 390 del frame */ aspect-ratio: 1; } .foot__data { flex-direction: column; gap: var(--space-xs); } .foot__data li + li { border-left: 0; padding-left: 0; } .foot__nav { margin-top: 28px; } /* El diseño deja 49px de aire arriba y abajo de las redes. El margen del logo pone 32 y el padding de la fila 16; acá va lo que falta para llegar a 49 de cada lado. */ .foot__redes { margin: 17px 0 33px; } } /* ------------------------------------------------------------ BOTONES ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.72em 1.5em; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } .btn--primary { background: var(--grad-btn); color: #fff; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(106, 76, 224, 0.75); filter: saturate(1.08); } .btn--lg { padding: 0.9em 2em; font-size: var(--fs-lead); } /* Variante oscura: la usa el bloque tiendanube, donde el fondo azul deja sin contraste al violeta del botón principal. */ .btn--dark { background: var(--violet-500); color: #fff; } .btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(24, 15, 52, 0.65); } .btn__arrow { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(4px); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: var(--radius-pill); } /* ------------------------------------------------------------ MENÚ MÓVIL El nav y el botón "Hablemos" no entran en 390px: se reemplazan por la píldora "Menú" del diseño, que abre un panel. ------------------------------------------------------------ */ .header__menu { display: none; align-items: center; gap: 10px; font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--menu-texto); background: var(--menu-fondo); box-shadow: var(--menu-sombra); border: 0; border-radius: var(--radius-pill); padding: 0.62em 1.25em; cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Tres líneas dibujadas con el borde y los pseudo-elementos */ .header__hamb, .header__hamb::before, .header__hamb::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .header__hamb { position: relative; } .header__hamb::before, .header__hamb::after { content: ""; position: absolute; left: 0; } .header__hamb::before { top: -6px; } .header__hamb::after { top: 6px; } [aria-expanded="true"] .header__hamb { background: transparent; } [aria-expanded="true"] .header__hamb::before { top: 0; transform: rotate(45deg); } [aria-expanded="true"] .header__hamb::after { top: 0; transform: rotate(-45deg); } /* ------------------------------------------------------------ MENÚ DESPLEGABLE — móvil y tablet ------------------------------------------------------------ Toma la pantalla entera. El degradado, los aros y las chispas son los mismos del resto del sitio: el menú no se lee como una capa encima sino como otra habitación de la misma casa. ------------------------------------------------------------ */ .menu-movil { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; overflow: hidden; color: #fff; background: linear-gradient(180deg, #a376f9 0%, #4d399d 100%); /* La entrada: el panel aparece y se asienta unos píxeles. */ opacity: 0; translate: 0 -12px; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); } .menu-movil.is-abierto { opacity: 1; translate: 0 0; } .menu-movil__aros { --aro: 103%; --aro-y: 87%; /* Las chispas del menú son apenas más claras que el aro sobre el que se apoyan: en el diseño se leen como un brillo del propio trazo, no como puntos aparte. */ --c: rgba(255, 255, 255, 0.5); } /* Barra de arriba: el header de la página queda tapado, así que el panel repite el logo y pone la cruz en el lugar donde estaba el botón. */ .menu-movil__barra { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 20px; } .menu-movil__logo img { width: 133px; } .menu-movil__cerrar { display: grid; place-items: center; width: 50px; height: 50px; margin-right: -8px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; } .menu-movil__cerrar svg { width: 30px; height: 30px; } .menu-movil__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; } .menu-movil__nav { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: 70px; font-size: 30px; line-height: 56px; letter-spacing: -0.01em; } .menu-movil__nav > a { transition: opacity var(--dur-fast) var(--ease-out); } .menu-movil__nav > a:hover { opacity: 0.72; } .menu-movil__cta { margin-top: 20px; min-width: 179px; height: 60px; justify-content: center; font-size: 20px; line-height: 1; } /* Las redes quedan abajo de todo, en el centro. `margin-top:auto` las empuja: así el bloque no depende del alto de la pantalla. */ .menu-movil__redes { position: relative; z-index: 1; margin-top: auto; padding-bottom: 83px; display: flex; justify-content: center; gap: 20px; } .menu-movil__redes a { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; transition: opacity var(--dur-fast) var(--ease-out); } .menu-movil__redes a:hover { opacity: 0.72; } .menu-movil__redes svg { width: 100%; height: 100%; } /* Cada pieza entra un instante después de la anterior. Los retrasos van con `nth-child` y no uno por uno: agregar un enlace no obliga a tocar el CSS. */ .menu-movil__barra, .menu-movil__nav > *, .menu-movil__redes { opacity: 0; translate: 0 14px; transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out); } .menu-movil.is-abierto :is(.menu-movil__barra, .menu-movil__nav > *, .menu-movil__redes) { opacity: 1; translate: 0 0; } .menu-movil.is-abierto .menu-movil__nav > *:nth-child(1) { transition-delay: 0.10s; } .menu-movil.is-abierto .menu-movil__nav > *:nth-child(2) { transition-delay: 0.16s; } .menu-movil.is-abierto .menu-movil__nav > *:nth-child(3) { transition-delay: 0.22s; } .menu-movil.is-abierto .menu-movil__nav > *:nth-child(4) { transition-delay: 0.28s; } .menu-movil.is-abierto .menu-movil__nav > *:nth-child(5) { transition-delay: 0.36s; } .menu-movil.is-abierto .menu-movil__redes { transition-delay: 0.44s; } @media (prefers-reduced-motion: reduce) { .menu-movil, .menu-movil__barra, .menu-movil__nav > *, .menu-movil__redes { transition: none; translate: none; } } /* Tablet: la misma pieza, más grande y con más aire. */ @media (min-width: 641px) { .menu-movil__barra { padding: 20px 50px; } .menu-movil__logo img { width: 145px; } .menu-movil__cerrar { width: 50px; height: 50px; } .menu-movil__nav { margin-top: 156px; font-size: 44px; line-height: 76px; } .menu-movil__cta { margin-top: 36px; min-width: 225px; height: 72px; font-size: 29px; } .menu-movil__redes { padding-bottom: 160px; gap: 20px; } .menu-movil__redes a { width: 36px; height: 36px; } } /* Con el menú abierto la página de atrás no se mueve. Va en y no sólo en : quien scrollea es , y sólo toma el `overflow` del cuando el suyo es `visible`. Acá no lo es —tiene `overflow-x: clip` como red contra el arrastre lateral—, así que ponerlo en el body no hacía nada y la página seguía scrolleando por detrás del menú. */ html:has(body.menu-abierto) { overflow-y: hidden; } body.menu-abierto { overflow: hidden; } /* ------------------------------------------------------------ AJUSTES MÓVIL Medidos sobre el frame "Home — Mobile 390" de Figma. ------------------------------------------------------------ */ .hero__cta { display: none; } @media (max-width: 820px) { .header__inner { padding-inline: 20px; } .header__nav, .header__cta { display: none; } .header__menu { display: inline-flex; } .header__logo img { width: 116px; } /* En el diseño el CTA baja al hero, porque arriba queda el menú */ .hero__cta { display: inline-flex; margin-top: var(--space-xl); } .hero { padding-block: 6rem 3rem; } .hero__title { font-size: 28px; line-height: 1.21; } .hero__eyebrow { font-size: var(--fs-body); } .marquee__set img { height: 44px; } /* Título y bajada de la intro comparten cuerpo: 24px */ .intro__text { font-size: 24px; line-height: 1.29; } .intro__kicker { font-size: var(--fs-body); } /* En móvil los íconos se mantienen fuera del ancho del texto para que la animación de flotado tampoco llegue a taparlo. */ .ico { display: block; width: 40px; } .ico--lego { left: 7%; top: 38%; } .ico--bulb { left: 30%; top: 10%; width: 44px; } .ico--target { left: 93%; top: 25%; width: 42px; } .ico--lupa { left: 94%; top: 58%; } .ico--perro { left: max(7%, calc(50% - 150px)); top: 74%; width: 70px; } .orbit { opacity: 1; } .orbit--out { width: 82vw; height: 82vw; } .orbit--in { width: 54vw; height: 54vw; } .cultura { min-height: 0; padding-block: 7rem; } /* Más angosto que la órbita: si no, las líneas pasan por debajo de los íconos laterales. */ .cultura__inner { max-width: 74vw; padding-inline: 0; } .cultura__text { font-size: 20px; line-height: 1.32; } /* La grilla de tres secundarios no va en móvil */ .grid3 { display: none; } /* Dos mitades reales: el gap se descuenta del ancho disponible. */ .marcas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 420px; } .marcas__grid img { width: 100%; height: 68px; padding: 13px 18px; margin: 0; } } /* ------------------------------------------------------------ Primitivas de animación (estado inicial) ------------------------------------------------------------ */ .line-mask { display: block; overflow: hidden; } .line-mask > span { display: block; will-change: transform; } [data-reveal] { will-change: transform, opacity; } [data-clip] > img { will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-reveal], .line-mask > span, [data-clip] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .marquee__track { transform: none !important; } } /* ------------------------------------------------------------ Panel de prueba (no va al sitio final) ------------------------------------------------------------ */ .devbar { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: rgba(24, 15, 52, 0.92); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); } .devbar button { font: inherit; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: #fff; background: transparent; border: 0; padding: 0.6em 1.1em; border-radius: var(--radius-pill); cursor: pointer; } .devbar button:hover { background: rgba(255,255,255,.14); } /* ------------------------------------------------------------ BLOQUE DE VIDEO / FOTO DEL EQUIPO ------------------------------------------------------------ */ .team { position: relative; z-index: 1; background: var(--bg-dark); padding-bottom: 0; } .team__media { height: clamp(420px, 52vw, 745px); overflow: hidden; } .team__asset { display: block; width: 100%; height: 130%; /* extra para que el parallax tenga recorrido */ object-fit: cover; } /* ------------------------------------------------------------ CURSOR PERSONALIZADO Sobre las imágenes de proyecto el puntero se transforma en el círculo con la flecha del diseño. ------------------------------------------------------------ */ .cursor { position: fixed; top: 0; left: 0; z-index: 150; width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--text); display: grid; place-items: center; pointer-events: none; opacity: 0; will-change: transform; } .cursor svg { width: 26px; height: 26px; } [data-cursor] { cursor: none; } @media (hover: none) { .cursor { display: none; } [data-cursor] { cursor: pointer; } } /* Las palabras del texto que se pinta con el scroll */ .w--paint { transition: none; }