/* ============================================================ CIFH — Utilidades, animaciones y responsive helpers ============================================================ */ /* Mejora progresiva: el contenido es visible por defecto (sin JS o si JS falla, nada queda oculto). Solo cuando main.js confirma que puede animar agrega ".js-reveal-ready" al y ahi se activa el fade-in real. */ .js-reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { transition-delay: calc(var(--stagger-i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ============================================================ Iconos animados ============================================================ */ /* Entrada: cuando la seccion aparece en pantalla, cada icono "salta" a su lugar con un pequeno rebote, en cascada segun su orden. */ .js-reveal-ready .reveal.is-visible .icon { animation: icon-pop 0.5s var(--ease-spring) both; animation-delay: calc(120ms + var(--stagger-i, 0) * 70ms); } @keyframes icon-pop { 0% { transform: scale(0.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* Base: todo icono responde con una transicion suave a hover/estado */ .icon { transition: transform var(--dur-base) var(--ease-spring); flex: none; } /* Flechas y chevrons: se desplazan en su direccion al hover del contenedor */ a:hover .icon-arrow-right, button:hover .icon-arrow-right, .btn:hover .icon-arrow-right { transform: translateX(4px); } a:hover .icon-chevron-right, button:hover .icon-chevron-right { transform: translateX(3px); } /* Iconos genericos dentro de elementos interactivos: pequeno "bounce" */ .badge:hover .icon, .eyebrow:hover .icon, .footer-social a:hover .icon, .share-row a:hover .icon, .hero-trust-item:hover .icon { transform: scale(1.2) rotate(-8deg); } /* Iconos de contacto (topbar / tarjetas de contacto): laten al hover */ .topbar a:hover .icon, .back-to-top:hover .icon { transform: scale(1.25); } @media (prefers-reduced-motion: reduce) { .js-reveal-ready .reveal .icon { animation: none; opacity: 1; transform: none; } .icon { transition: none; } } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mx-auto { margin-inline: auto; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .hide-mobile { display: none; } @media (min-width: 768px) { .hide-mobile { display: initial; } } .hide-desktop { display: initial; } @media (min-width: 768px) { .hide-desktop { display: none; } } .sticky-aside { position: sticky; top: 100px; } @media (max-width: 980px) { h1 { font-size: var(--fs-4xl); } .cta-banner { padding: var(--sp-7); } } @media (max-width: 640px) { .section { padding-block: var(--sp-9); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } }