/* ============================================================ EXPLORA MIAMI — liquid-btn.css Efecto oficial de botones: Liquid Gradient Sweep Cargado en TODAS las páginas del proyecto. REGLA DE ORO: - Usar background-image !important (NO el shorthand) - El shorthand background: gradient !important fijaría background-position con !important y bloquearía la animación (cascade CSS: !important > animation). - background-position queda libre para que liq-sweep lo mueva. SISTEMA DE COLOR SEMÁNTICO: - TURQUESA → Exploración / navegación / descubrimiento - CORAL → Conversión / contacto / urgencia - MOSTAZA → Información / contenido / acción secundaria El ancla oscura #071e2b aparece en los tres — unidad de marca. ES5 / sin frameworks / GitHub Pages ============================================================ */ /* ── Animación: desplaza el gradiente de lado a lado ── */ @keyframes liq-sweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ============================================================ PALETAS DE GRADIENTE Cada variante alterna sus colores con azul profundo (#071e2b) para mantener armonía visual entre las tres familias. ============================================================ */ /* -- TURQUESA: exploración, navegación, "Ver", "Ir", carrusel -- */ /* rgba(0,188,212) cyan·profundo ↔ #071e2b azul-tinta */ /* -- CORAL: conversión, contacto, "Empezar", "Anunciar" -- */ /* rgba(255,107,107) coral·naranja ↔ #071e2b azul-tinta */ /* -- MOSTAZA: info, contenido, "¿Cómo?", "Explorar artículos" -- */ /* rgba(255,179,0) dorado·ámbar ↔ #071e2b azul-tinta */ /* ============================================================ 1. METAL BUTTONS Selector genérico cubre todas las variantes como fallback. Los selectores específicos sobrescriben el gradiente luego. Se aplica al .metal-btn (cara visible), no a la glow-layer. ============================================================ */ /* Fallback genérico — turquesa para variantes no listadas */ .metal-btn-wrap[data-variant] .metal-btn { background-image: linear-gradient( -45deg, rgba(0, 188, 212, 0.92), rgba(7, 30, 43, 0.88), rgba(0, 140, 180, 0.90), rgba(255, 179, 0, 0.52), rgba(0, 67, 79, 0.82), rgba(0, 220, 240, 0.90), rgba(7, 46, 63, 0.85) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; will-change: transform; } /* Halo oscuro alrededor del wrap — hace brillar el color */ .metal-btn-wrap[data-variant] { box-shadow: 0 0 28px 6px rgba(7, 30, 43, 0.22), 0 4px 14px rgba(7, 30, 43, 0.18); } /* ── Variante turquesa (explora, navega, descubre) ── */ .metal-btn-wrap[data-variant="turquesa"] .metal-btn, .metal-btn-wrap[data-variant="tierra"] .metal-btn { background-image: linear-gradient( -45deg, rgba(0, 188, 212, 0.92), rgba(7, 30, 43, 0.88), rgba(0, 140, 180, 0.90), rgba(255, 179, 0, 0.52), rgba(0, 67, 79, 0.82), rgba(0, 220, 240, 0.90), rgba(7, 46, 63, 0.85) ) !important; } /* ── Variante coral (convierte, contacta, actúa ya) ── */ .metal-btn-wrap[data-variant="coral"] .metal-btn { background-image: linear-gradient( -45deg, rgba(255, 107, 107, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 66, 0.90), rgba(7, 30, 43, 0.85), rgba(184, 62, 62, 0.85), rgba(255, 100, 50, 0.90), rgba(7, 46, 63, 0.82) ) !important; } /* ── Variante gold (informa, explica, elige) ── */ .metal-btn-wrap[data-variant="gold"] .metal-btn { background-image: linear-gradient( -45deg, rgba(255, 179, 0, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 30, 0.90), rgba(7, 30, 43, 0.85), rgba(200, 130, 0, 0.85), rgba(255, 210, 60, 0.90), rgba(7, 46, 63, 0.82) ) !important; } /* ── Variante ghost (secundario, neutro) — sweep navy oscuro ── */ .metal-btn-wrap[data-variant="ghost"] .metal-btn { background-image: linear-gradient( -45deg, rgba(0, 67, 79, 0.92), rgba(7, 30, 43, 0.90), rgba(10, 45, 63, 0.88), rgba(0, 100, 120, 0.82), rgba(7, 30, 43, 0.88), rgba(0, 67, 79, 0.85), rgba(26, 42, 53, 0.85) ) !important; } /* ── Variante dark (acción neutra profunda) ── */ .metal-btn-wrap[data-variant="dark"] .metal-btn { background-image: linear-gradient( -45deg, rgba(0, 67, 79, 0.92), rgba(7, 30, 43, 0.90), rgba(10, 45, 63, 0.88), rgba(0, 100, 120, 0.82), rgba(7, 30, 43, 0.88), rgba(0, 67, 79, 0.85), rgba(26, 42, 53, 0.85) ) !important; } /* Hover JS (is-hovered): acelera el sweep */ .metal-btn-wrap.is-hovered .metal-btn { animation-duration: 2s; } /* ============================================================ 2. NAVBAR CTA — "Para empresas" CORAL: es la CTA de conversión más importante del sitio. navbar.css carga después — todos los valores llevan !important. ::before crea el halo oscuro detrás del botón. ============================================================ */ .em-nav__cta { display: inline-flex !important; align-items: center !important; position: relative !important; padding: 0.52rem 1.4rem !important; border-radius: 999px !important; white-space: nowrap !important; text-decoration: none !important; overflow: visible !important; isolation: isolate !important; will-change: transform; background-image: linear-gradient( -45deg, rgba(255, 107, 107, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 66, 0.90), rgba(7, 30, 43, 0.85), rgba(184, 62, 62, 0.85), rgba(255, 100, 50, 0.90), rgba(7, 46, 63, 0.82) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 107, 107, 0.55) !important; box-shadow: 0 4px 22px rgba(255, 107, 107, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; font-size: 0.88rem !important; font-weight: 700 !important; color: #fff !important; transition: box-shadow 0.22s ease; } /* Halo oscuro detrás */ .em-nav__cta::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; background: rgba(7, 30, 43, 0.28); filter: blur(16px); z-index: -1; pointer-events: none; } /* Texto sobre el halo */ .em-nav__cta .lang-es, .em-nav__cta .lang-en { position: relative; z-index: 1; } .em-nav__cta:hover { animation-duration: 2s; box-shadow: 0 8px 32px rgba(255, 107, 107, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } .em-nav__cta:active { transform: translateY(1px) scale(0.98) !important; } /* ============================================================ 3. BLOG HERO CTA — "Explorar artículos" MOSTAZA: descubrir contenido, leer, explorar el blog. blog.css carga antes — background-image !important gana. ============================================================ */ .blog-hero__cta { position: relative !important; isolation: isolate !important; overflow: visible !important; will-change: transform; background-image: linear-gradient( -45deg, rgba(255, 179, 0, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 30, 0.90), rgba(7, 30, 43, 0.85), rgba(200, 130, 0, 0.85), rgba(255, 210, 60, 0.90), rgba(7, 46, 63, 0.82) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; border: 1px solid rgba(255, 179, 0, 0.50) !important; box-shadow: 0 4px 22px rgba(255, 179, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.20); transition: box-shadow 0.22s ease; } .blog-hero__cta::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; background: rgba(7, 30, 43, 0.28); filter: blur(16px); z-index: -1; pointer-events: none; } .blog-hero__cta:hover { animation-duration: 2s; box-shadow: 0 8px 32px rgba(255, 179, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .blog-hero__cta:active { transform: translateY(1px) scale(0.98) !important; } /* ============================================================ 4. QUIZ — "Siguiente pregunta" TURQUESA: acción de avance, progreso, ir hacia adelante. destino.css carga antes — background-image !important gana. ============================================================ */ .quiz-btn-siguiente { position: relative !important; isolation: isolate !important; will-change: transform; background-image: linear-gradient( -45deg, rgba(0, 188, 212, 0.92), rgba(7, 30, 43, 0.88), rgba(0, 140, 180, 0.90), rgba(255, 179, 0, 0.52), rgba(0, 67, 79, 0.82), rgba(0, 220, 240, 0.90), rgba(7, 46, 63, 0.85) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; border: 1px solid rgba(0, 188, 212, 0.40) !important; box-shadow: 0 4px 18px rgba(0, 188, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: box-shadow 0.22s ease; } .quiz-btn-siguiente::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; background: rgba(7, 30, 43, 0.25); filter: blur(14px); z-index: -1; pointer-events: none; } .quiz-btn-siguiente:hover { animation-duration: 2s; box-shadow: 0 8px 28px rgba(0, 188, 212, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .quiz-btn-siguiente:active { transform: translateY(1px) scale(0.98) !important; } /* ============================================================ 5. QUIZ — "Reiniciar quiz" CORAL: reiniciar es empezar de nuevo — color de acción. ============================================================ */ .quiz-btn-reiniciar { position: relative !important; isolation: isolate !important; will-change: transform; background-image: linear-gradient( -45deg, rgba(255, 107, 107, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 66, 0.90), rgba(7, 30, 43, 0.85), rgba(184, 62, 62, 0.85), rgba(255, 100, 50, 0.90), rgba(7, 46, 63, 0.82) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; border: 1px solid rgba(255, 107, 107, 0.45) !important; box-shadow: 0 4px 18px rgba(255, 107, 107, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: box-shadow 0.22s ease; } .quiz-btn-reiniciar::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; background: rgba(7, 30, 43, 0.22); filter: blur(14px); z-index: -1; pointer-events: none; } .quiz-btn-reiniciar:hover { animation-duration: 2s; box-shadow: 0 8px 28px rgba(255, 107, 107, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.20); } .quiz-btn-reiniciar:active { transform: translateY(1px) scale(0.98) !important; } /* ============================================================ 7. OVERLAY CARD — botón "Ver destino" TURQUESA: descubrir un destino — acción de exploración. Sobre fondo oscuro (imagen) — no necesita halo. ============================================================ */ .destino-card__overlay-btn { will-change: transform; background-image: linear-gradient( -45deg, rgba(0, 188, 212, 0.92), rgba(7, 30, 43, 0.88), rgba(0, 140, 180, 0.90), rgba(255, 179, 0, 0.52), rgba(0, 67, 79, 0.82), rgba(0, 220, 240, 0.90), rgba(7, 46, 63, 0.85) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important; } .destino-card__overlay-btn:hover { animation-duration: 2s; } /* ============================================================ 8. TOGGLE PRECIOS — pestaña activa MOSTAZA: selección de plan, información de precios. Sobre fondo oscuro de la sección — no necesita halo. ============================================================ */ .precios-toggle__btn--activo { will-change: transform; background-image: linear-gradient( -45deg, rgba(255, 179, 0, 0.92), rgba(7, 30, 43, 0.88), rgba(255, 140, 30, 0.90), rgba(7, 30, 43, 0.85), rgba(200, 130, 0, 0.85), rgba(255, 210, 60, 0.90), rgba(7, 46, 63, 0.82) ) !important; background-size: 300% 300% !important; background-color: transparent !important; animation: liq-sweep 5s ease infinite; color: #fff !important; border-color: rgba(255, 179, 0, 0.55) !important; } .precios-toggle__btn--activo:hover { animation-duration: 2s; } /* ============================================================ ACCESIBILIDAD — desactiva animaciones y tilt si el usuario tiene prefers-reduced-motion activado. ============================================================ */ @media (prefers-reduced-motion: reduce) { .metal-btn-wrap[data-variant] .metal-btn, .em-nav__cta, .blog-hero__cta, .quiz-btn-siguiente, .quiz-btn-reiniciar, .destino-card__overlay-btn, .precios-toggle__btn--activo { animation: none !important; will-change: auto !important; } }