/* ============================================================ ACQUA CAPITAL — Estilos compartidos Paleta extraída del logo (pirámide aqua -> navy) ============================================================ */ :root { --aqua: #0080c8; /* azul brillante exacto (cúspide del logo) */ --aqua-soft: #4ca7da; --blue: #0061a4; /* azul medio (mezcla exacta de los tonos del logo) */ --navy: #004280; /* azul profundo exacto (base del logo) */ --navy-deep: #00325f; /* misma tonalidad, más oscura para degradados */ --ink: #1e1e2d; /* texto de párrafo (casi negro, como el wordmark) */ --mist: #f6f8fb; /* gris muy sutil de fondos secundarios */ --cloud: #e9eef4; /* gris de bordes/tarjetas */ } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } /* ============================================================ BOTÓN "LIQUID GLASS" — cápsula de cristal líquido (aqua) Múltiples capas de box-shadow + linear-gradient + reflejos con pseudo-elementos ::before / ::after. ============================================================ */ .liquid-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; isolation: isolate; overflow: hidden; border-radius: 9999px; padding: 0.95rem 2.2rem; font-weight: 600; letter-spacing: .015em; color: var(--navy-deep); text-decoration: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.38); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%), linear-gradient(180deg, rgba(43,166,224,0.09) 0%, rgba(31,111,178,0.07) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), /* filo superior brillante */ inset 0 -1px 1px rgba(255,255,255,0.35), /* filo inferior */ inset 1.5px 0 2px rgba(255,255,255,0.25), /* refracción lateral izq */ inset -1.5px 0 2px rgba(255,255,255,0.25), /* refracción lateral der */ 0 8px 24px -6px rgba(18,58,94,0.26), /* sombra suave */ 0 2px 6px -2px rgba(18,58,94,0.15); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, backdrop-filter .4s ease, filter .4s ease; } /* Reflejo especular curvo en la mitad superior (vidrio iOS) */ .liquid-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 80% at 50% -30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 35%, rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%); opacity: 1; } /* Brillo líquido que se desplaza al hacer hover */ .liquid-glass::after { content: ""; position: absolute; top: -120%; left: -30%; width: 50%; height: 340%; z-index: -1; transform: rotate(22deg) translateX(-120%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transition: transform .85s cubic-bezier(.2,.8,.2,1); filter: blur(2px); } .liquid-glass:hover { transform: translateY(-2px) scale(1.015); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(255,255,255,0.45), inset 1.5px 0 2px rgba(255,255,255,0.35), inset -1.5px 0 2px rgba(255,255,255,0.35), 0 16px 34px -10px rgba(18,58,94,0.34), 0 6px 14px -4px rgba(18,58,94,0.20); } .liquid-glass:hover::after { transform: rotate(22deg) translateX(360%); } .liquid-glass:active { transform: translateY(0) scale(.98); } /* Variante clara más sólida (cristal lechoso sobre fondos claros) */ .liquid-glass--light { color: var(--navy-deep); border: 1px solid rgba(255,255,255,0.85); background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 50%, rgba(233,238,244,0.65) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,1), inset 0 -8px 16px rgba(31,111,178,0.08), 0 10px 24px -8px rgba(18,58,94,0.26); } .liquid-glass--light:hover { box-shadow: inset 0 1px 1px rgba(255,255,255,1), inset 0 -10px 18px rgba(31,111,178,0.12), 0 16px 30px -10px rgba(18,58,94,0.31); } /* Variante para fondos oscuros (cristal transparente, texto blanco) */ .liquid-glass--dark { color: #ffffff; border: 1px solid rgba(255,255,255,0.40); background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.10) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 0 -1px 1px rgba(255,255,255,0.30), inset 1.5px 0 2px rgba(255,255,255,0.25), inset -1.5px 0 2px rgba(255,255,255,0.25), inset 0 0 16px rgba(255,255,255,0.10), 0 12px 26px -10px rgba(0,0,0,0.42); } .liquid-glass--dark:hover { box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(255,255,255,0.4), inset 1.5px 0 2px rgba(255,255,255,0.35), inset -1.5px 0 2px rgba(255,255,255,0.35), inset 0 0 20px rgba(255,255,255,0.16), 0 18px 34px -12px rgba(0,0,0,0.50); } /* Cápsula compacta para el header */ .liquid-glass--sm { padding: 0.6rem 1.4rem; font-size: .95rem; } /* ============================================================ Fondos y decoraciones ============================================================ */ .liquid-bg { background: radial-gradient(1200px 600px at 80% -10%, rgba(43,166,224,0.10), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(18,58,94,0.06), transparent 55%), #ffffff; } /* Tarjeta flotante del hero */ @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floaty { animation: floaty 6s ease-in-out infinite; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Enlace de navegación activo */ .nav-link.active { color: var(--navy); font-weight: 600; } /* Pulso del botón de WhatsApp */ @keyframes wapulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } .wa-pulse { animation: wapulse 2.4s infinite; } /* Respeto a prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .floaty, .wa-pulse { animation: none; } .reveal { transition: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }