/* ========================================================= GAP Broker — motion.css Movimiento sutil como progressive enhancement: solo transform y opacity. El estado en reposo es SIEMPRE visible — el ocultamiento del scroll-reveal se activa recién cuando JS agrega .js-reveal en , así que sin JS no queda contenido atrapado. ========================================================= */ :root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); } /* Fotos del hero: 5 slides. Sin animación (o con reduced-motion) se ve la primera y listo. El desborde lateral evita que el slide deje un borde vacío mientras entra o sale. */ .hero__slide { position: absolute; top: 0; bottom: 0; left: -28px; right: -28px; width: auto; height: 100%; object-fit: cover; opacity: 0; } .hero__slide:first-child { opacity: 1; } @media (prefers-reduced-motion: no-preference) { /* ---------- Revelado del contenido al entrar a una vista ---------- Se activa solo con .stage-on (lo pone el Stage en el body), así que sin JS el contenido está visible siempre. Lo dispara Stage.playReveal() cada vez que se abre una sección. */ .stage-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .stage-on [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- Hero: rotación de fotos (25s / 5 slides) ---------- */ @keyframes heroSlide { 0% { opacity: 0; transform: translateX(22px); } 3.6% { opacity: 1; transform: translateX(0); } 16.8% { opacity: 1; transform: translateX(0); } 21% { opacity: 0; transform: translateX(-22px); } 100% { opacity: 0; transform: translateX(-22px); } } /* Los delays arrancan en -0.9s (no en 0) para que la primera foto ya esté a opacidad plena en el primer frame: si no, el hero se ve sin foto durante los primeros 0,9s de carga. */ .hero__slide { animation: heroSlide 25s infinite both; } .hero__slide:nth-child(1) { animation-delay: -0.9s; } .hero__slide:nth-child(2) { animation-delay: 4.1s; } .hero__slide:nth-child(3) { animation-delay: 9.1s; } .hero__slide:nth-child(4) { animation-delay: 14.1s; } .hero__slide:nth-child(5) { animation-delay: 19.1s; } /* ---------- Globo del logo: flota y los meridianos giran ---------- */ @keyframes globeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes globeMeridian { 0% { transform: scaleX(.04); } 50% { transform: scaleX(1); } 100% { transform: scaleX(.04); } } .globe { animation: globeFloat 6s ease-in-out infinite; } .globe__mer { transform-box: fill-box; transform-origin: center; animation: globeMeridian 7s ease-in-out infinite; animation-delay: var(--d, 0s); } /* ---------- Tira de aseguradoras ---------- */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Solo corre cuando main.js duplicó la tira (si no, el -50% cortaría la lista a la mitad). */ /* No se pausa al pasar el mouse: Jose quiere que corra siempre */ .marquee__track.is-looping { animation: marquee 42s linear infinite; } /* ---------- Modal: apertura y cierre fluidos ---------- */ .modal { opacity: 0; transition: opacity .2s var(--ease-out); } .modal.in { opacity: 1; } .modal__panel { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); } .modal.in .modal__panel { opacity: 1; transform: none; } /* Barra de progreso del cotizador */ .progress__fill { transition: width .35s var(--ease-out); } /* ---------- Slide-fade direccional entre pasos (cotizador y siniestros) ---------- */ .step-anim { transition: transform 300ms var(--ease-soft), opacity 300ms var(--ease-soft); } .is-from-right { transform: translateX(30px); opacity: 0; } .is-from-left { transform: translateX(-30px); opacity: 0; } .is-to-left, .is-to-right { transition-duration: 200ms; } .is-to-left { transform: translateX(-30px); opacity: 0; } .is-to-right { transform: translateX(30px); opacity: 0; } /* ---------- Comparador: atenuado de columnas + pulso al matchear ---------- */ .cmp-table [data-col] { transition: opacity .3s var(--ease-soft), box-shadow .3s var(--ease-soft); } .cmp-table thead th.col-pulse { animation: colPulse 600ms var(--ease-soft); } @keyframes colPulse { 0%, 100% { box-shadow: inset 0 0 0 0 var(--blue); } 50% { box-shadow: inset 0 0 0 3px var(--blue); } } /* ---------- Cotizador: el check final entra con un pop ---------- */ @keyframes czCheckPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes czCheckMarkPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .cz-check { animation: czCheckPop .5s var(--ease-out) both; transform-origin: center; } .cz-check svg { animation: czCheckMarkPop .35s var(--ease-out) .18s both; transform-origin: center; } /* ---------- Menú de herramientas del header ---------- */ @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .nav__menu { animation: menuIn .2s ease both; } } /* ---------- Hover (solo con puntero real) ---------- */ @media (prefers-reduced-motion: no-preference) and (hover: hover) { .member, .ccard, .prod { transition: transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft), border-color .2s var(--ease-soft); } .member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } } /* ---------- prefers-reduced-motion: reduce ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }