/* Ajustes de movil del landing. Se carga al final del , despues del CSS del artifact, para ganar por orden de cascada sin tener que pelear con !important salvo donde el original usa estilos inline (las hojas decorativas). */ /* ───────────────────────────────────────────────────────────── 0. Las hojas decorativas estiraban la pagina. Van en position:absolute con `right` negativo o en porcentaje y ademas GSAP las rota y desplaza, asi que se salen del borde derecho. Eso no solo permite scrollear de costado: en un telefono el viewport de LAYOUT se ensancha para contener el desborde (390 -> 456), y con el se descoloca todo lo que mide contra window.innerWidth, como el recorrido del carrusel de pasos. Se recorta en
y no en : en la raiz, cualquier overflow distinto de visible se propaga al viewport y deja de pegar todo lo position:sticky (el encabezado). Y `clip` en vez de `hidden` porque clip no crea contenedor de scroll, asi que los pin de ScrollTrigger siguen funcionando. ───────────────────────────────────────────────────────────── */ main, footer { overflow-x: clip; } /* Alto minimo del bloque de pasos, que se fija disparado desde adentro (el track). Lo calcula landing-animaciones.js en cada refresh de ScrollTrigger y lo pasa por esta variable; sin ajuste vale 0px y no hace nada. Ver taparHueco: si la seccion no llega al pie de la pantalla, por el hueco asoma la siguiente antes de tiempo (la placa de la CTA entraba con los pasos todavia a mitad de camino). */ .l-pasos-pin { min-height: var(--cl-alto-pasos, 0px); } /* ───────────────────────────────────────────────────────────── 1. Menu del encabezado: aparece con animacion y no se pasa de ancho. El ancho lo arreglaba de rebote el fix de .l-metrics (el desborde de la pagina ensanchaba el viewport de layout y con el todo lo position:fixed), pero el menu se blinda igual para que no dependa del resto de la pagina. ───────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .l-menu { width: 100%; max-width: 100vw; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; animation: l-menu-in 260ms var(--expo-out) both; } /* Los hijos entran escalonados detras del panel. */ .l-menu > * { animation: l-menu-item-in 420ms var(--expo-out) both; } .l-menu > :nth-child(1) { animation-delay: 70ms; } .l-menu > :nth-child(2) { animation-delay: 125ms; } .l-menu > :nth-child(3) { animation-delay: 180ms; } .l-menu > :nth-child(4) { animation-delay: 235ms; } .l-menu .l-menu-cta > * { min-width: 0; } } @keyframes l-menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } @keyframes l-menu-item-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── 2. Hero: la hoja decorativa cruzaba el h1. En escritorio la hoja cae en la columna vacia al costado del titular; en movil, con una sola columna, el texto le pasa por encima y el trazo de 2px corta las letras. Se corren las dos hojas hacia afuera y se bajan de opacidad, asi quedan de textura de fondo y no compiten con la tipografia. Las posiciones originales vienen inline desde React: hace falta !important. ───────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .l-hero .l-leaf { width: 104px; opacity: .45; } .l-hero .l-leaf path { stroke-width: 1.5; } .l-hero .l-leaf.papel { left: -58px !important; top: auto !important; bottom: 28% !important; } .l-hero .l-leaf.hoja { right: -52px !important; bottom: -18px !important; } } /* ───────────────────────────────────────────────────────────── 3. Cifras: de grilla apretada a carrusel. El grid de 2 columnas no entraba: el contenido de cada pill tiene un min-content mas ancho que 1fr, asi que las columnas se estiraban y empujaban la pagina a 473px de ancho en una pantalla de 390. Pasa a scroll horizontal con snap; el sangrado hasta el borde y la pill cortada a la derecha avisan que hay mas. ───────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .l-metrics { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--l-pad); margin-inline: calc(-1 * var(--l-pad)); padding-inline: var(--l-pad); padding-block: 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .l-metrics::-webkit-scrollbar { display: none; } .l-metrics > * { flex: 0 0 min(68vw, 250px); scroll-snap-align: start; } } /* ───────────────────────────────────────────────────────────── 4. Pasos: recorrido horizontal tambien en movil. El CSS del artifact los apilaba (flex-direction:column) abajo de 1025px y escondia los puntos de progreso. Vuelve la fila; el GSAP que mueve el track ya corre en todos los anchos (ver landing-animaciones.js). La tarjeta ocupa 95vw para que se vea el borde de la siguiente. ───────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .l-pasos-track { flex-direction: row; padding: 0 var(--l-pad); } .l-paso { flex: 0 0 calc(95vw - var(--l-pad)); max-width: calc(95vw - var(--l-pad)); } .l-pasos-prog { display: flex; } .l-paso-card { min-height: min(560px, 68svh); align-content: center; } .l-paso-in { width: 100%; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; } /* El icono ocupaba 220px fijos y con la tarjeta ya acotada no entraba. */ .l-paso-ico { grid-column: 1 / -1; width: min(156px, 40vw); justify-self: center; margin: 6px 0 2px; } } @media (max-width: 760px) { .l-paso-card { padding: 24px 18px; } .l-pasos-hd { margin-bottom: 20px; } /* En dos columnas el numeraso (72px minimos) se llevaba un tercio de la tarjeta y el texto quedaba en una canaleta de 200px. En una sola columna el numero pasa a ser el encabezado del paso, que es lo que es. */ .l-paso-in { grid-template-columns: minmax(0, 1fr); gap: 0; } .l-paso-n { font-size: 54px; line-height: .85; } .l-paso-card h3 { font-size: clamp(24px, 6.4vw, 30px); margin-top: 10px; } .l-paso-card p { font-size: 15px; line-height: 1.45; margin-top: 12px; } } /* ───────────────────────────────────────────────────────────── 5. CTA: el zoom con scroll tambien en movil. El artifact anulaba la altura de la placa abajo de 761px (height:auto), que es lo que dejaba sin efecto al pin. Se devuelve la altura de pantalla, con svh para que la barra de direcciones del navegador no la haga saltar. ───────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .l-cta-pin { height: 100svh; min-height: 520px; padding: 0 var(--l-pad); } .l-cta-plate { height: calc(100svh - 32px); min-height: 0; padding: 28px 22px; align-content: center; } /* El contenido de la placa tiene que entrar en una pantalla de telefono. */ .l-cta-plate h2 { font-size: clamp(26px, 7.4vw, 34px); margin-top: 14px; } .l-cta-plate .l-lead { margin-top: 12px; font-size: 15px; line-height: 1.45; } .l-cta-plate .l-cta-stats { margin-top: 16px; gap: 10px 18px; } } @media (prefers-reduced-motion: reduce) { .l-menu, .l-menu > * { animation: none !important; } }