/*-------------------------------------------------------------- # Mejoras UX/UI (aditivas) — no modifican el aspecto base del template # - Animaciones al hacer scroll (reveal) # - Micro-interacciones (hover) y foco accesible # - Scroll suave --------------------------------------------------------------*/ html { scroll-behavior: smooth; } /*------/ Reveal al hacer scroll /------*/ /* Solo se oculta si hay JS (clase .js en ); sin JS, se ve normal. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /*------/ Foco accesible (teclado) /------*/ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .custom-select:focus-visible, .whatsapp-float:focus-visible { outline: 3px solid #e5b663; outline-offset: 2px; border-radius: 2px; } /*------/ Micro-interacciones (hover) /------*/ .card-box-a, .card-box-c { transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .card-box-a:hover, .card-box-c:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); } } /*------/ Indicador de scroll en el hero /------*/ .scroll-indicator { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; pointer-events: none; } .scroll-indicator::before { content: ""; width: 4px; height: 8px; border-radius: 2px; background-color: #e5b663; animation: kelta-scroll-dot 1.6s ease-in-out infinite; } @keyframes kelta-scroll-dot { 0% { opacity: 0; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(4px); } 100% { opacity: 0; transform: translateY(12px); } } /*------/ Botón WhatsApp: pulso sutil /------*/ .whatsapp-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: kelta-whatsapp-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes kelta-whatsapp-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } /*------/ Respeta a quien prefiere menos movimiento /------*/ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .scroll-indicator::before, .whatsapp-float::after { animation: none; } .card-box-a:hover, .card-box-c:hover { transform: none; } } /*-------------------------------------------------------------- # Footer en dos columnas + barra inferior (más compacto) --------------------------------------------------------------*/ .section-footer { padding-top: 34px; padding-bottom: 12px; } .section-footer .widget-a .w-title-a { margin-bottom: 0.5rem; } .section-footer .w-text-a { margin-bottom: 0.75rem; } /* Aprieta la lista de contacto */ .section-footer ul { line-height: 1.7; margin-bottom: 0.5rem; } /* Enlaces del footer en 2 columnas para reducir altura */ .footer-links { margin-bottom: 0; columns: 2; column-gap: 24px; } .footer-links li { line-height: 1.8; break-inside: avoid; } .footer-links a { color: #555; transition: color 0.3s ease; } .footer-links a:hover { color: #e5b663; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ddd; } .footer-bottom .copyright { margin-bottom: 0; } .footer-legal a { color: #555; } .footer-legal a:hover { color: #e5b663; } @media (max-width: 991px) { .footer-bottom { justify-content: center; text-align: center; } }