/* position:fixed en vez de sticky, y este padding-top: el header se imprime al final del en modo Reskin 'Todo el sitio', así que sticky no funcionaría (quedaría abajo en vez de arriba). fixed sí funciona sin importar dónde se imprima el HTML. */ body { padding-top: 120px !important; } :root { --ug-blue-primary: #001B71; --ug-red-accent: #E8002A; --ug-red-hover: #C40023; --ug-text-main: #1F2937; --ug-text-gray: #4B5563; --ug-bg-soft: #F8FAFC; --ug-bg-hover: #E2E8F0; /* Tono de hover uniforme */ } .ug-header-site { width: 100%; background-color: #ffffff; position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .ug-header-container { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; gap: 24px; } /* ESTILOS DE LOGO */ .ug-header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .ug-header-logo-img { max-height: 84px; width: auto; object-fit: contain; display: block; } .ug-header-nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .ug-nav-item { position: relative; padding: 10px 0; } .ug-nav-link { color: var(--ug-blue-primary) !important; font-size: 15px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.2s ease; } .ug-nav-link:hover { color: var(--ug-red-accent) !important; } .ug-nav-link i.arrow { font-size: 11px; color: var(--ug-blue-primary); transition: transform 0.3s ease, color 0.2s ease; } .ug-nav-item:hover .ug-nav-link i.arrow { transform: rotate(180deg); color: var(--ug-red-accent); } .ug-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); width: 380px; background-color: #ffffff; border-radius: 20px; box-shadow: 0 20px 40px -15px rgba(0, 27, 113, 0.15), 0 0 0 1px rgba(0, 27, 113, 0.08); opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1100; overflow: hidden; } .ug-nav-item:hover .ug-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .ug-dropdown-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .ug-dropdown-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none; transition: background-color 0.2s ease; } .ug-dropdown-item:hover { background-color: #F1F5F9; } .ug-dropdown-icon { width: 40px; height: 40px; border-radius: 10px; background-color: var(--ug-bg-soft); display: flex; align-items: center; justify-content: center; color: var(--ug-blue-primary); font-size: 18px; flex-shrink: 0; border: 1px solid rgba(0, 27, 113, 0.08); } .ug-dropdown-item:hover .ug-dropdown-icon { background-color: #ffffff; color: var(--ug-red-accent); } .ug-dropdown-text { display: flex; flex-direction: column; justify-content: center; } .ug-dropdown-title { color: var(--ug-blue-primary); font-size: 14px; font-weight: 700; margin-bottom: 2px; } .ug-dropdown-desc { color: var(--ug-text-gray); font-size: 12px; line-height: 1.35; } /* FOOTER Y BOTONES ESTILO TAILWIND/SHADCN */ .ug-dropdown-footer { background-color: var(--ug-bg-soft); border-top: 1px solid rgba(0, 27, 113, 0.08); display: grid; grid-template-columns: 1fr 1fr; padding: 0; /* Sin espacio interno para abarcar el 100% de la celda */ } .ug-footer-action { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ug-blue-primary); font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 14px 16px; /* Abarca todo el bloque */ transition: background-color 0.15s ease, color 0.15s ease; } .ug-footer-action:first-child { border-bottom-left-radius: 20px; } .ug-footer-action:last-child { border-bottom-right-radius: 20px; border-left: 1px solid rgba(0, 27, 113, 0.06); /* Divisor vertical central */ } .ug-footer-action i { color: var(--ug-blue-primary); font-size: 14px; } .ug-footer-action:hover { background-color: var(--ug-bg-hover); color: var(--ug-red-accent); } .ug-footer-action:hover i { color: var(--ug-red-accent); } .ug-header-cta-wrapper { display: flex; align-items: center; gap: 16px; } .ug-header-btn { background-color: var(--ug-red-accent); color: #ffffff !important; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 24px; border-radius: 9999px; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(232, 0, 42, 0.2); white-space: nowrap; } .ug-header-btn:hover { background-color: var(--ug-red-hover); transform: translateY(-2px); } .ug-hamburger-btn { display: none; background: transparent; border: none; font-size: 24px; color: var(--ug-blue-primary); cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color 0.2s ease; } .ug-hamburger-btn:hover { background-color: #F1F5F9; } .ug-mobile-overlay { position: fixed; inset: 0; background-color: rgba(0, 27, 113, 0.4); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1001; } .ug-mobile-drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 340px; height: 100vh; background-color: #ffffff; z-index: 1002; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15); transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow-y: auto; } body.ug-menu-open { overflow: hidden; } body.ug-menu-open .ug-mobile-overlay { opacity: 1; visibility: visible; } body.ug-menu-open .ug-mobile-drawer { right: 0; } .ug-drawer-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 27, 113, 0.08); } .ug-drawer-close { background: transparent; border: none; font-size: 22px; color: var(--ug-blue-primary); cursor: pointer; } .ug-drawer-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .ug-drawer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ug-drawer-link { color: var(--ug-blue-primary) !important; font-size: 16px; font-weight: 700; text-decoration: none; padding: 12px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .ug-drawer-link:hover { background-color: #F1F5F9; } .ug-mobile-accordion { display: none; padding-left: 8px; margin-top: 4px; flex-direction: column; gap: 6px; } .ug-mobile-accordion.open { display: flex; } .ug-mobile-accordion .ug-dropdown-item { align-items: center !important; padding: 8px 10px; } .ug-mobile-accordion .ug-dropdown-title { margin-bottom: 0 !important; } .ug-drawer-footer { padding: 20px; border-top: 1px solid rgba(0, 27, 113, 0.08); background-color: var(--ug-bg-soft); } .ug-drawer-footer .ug-header-btn { display: block; text-align: center; width: 100%; box-sizing: border-box; } @media (max-width: 1024px) { .ug-header-nav { display: none; } .ug-hamburger-btn { display: inline-flex; align-items: center; justify-content: center; } .ug-header-cta-wrapper { margin-left: auto; } } @media (max-width: 640px) { .ug-header-cta-wrapper .ug-header-btn { display: none; } .ug-hamburger-btn { margin-left: auto; } } /* Botón flotante de WhatsApp (pedido explícito del brief: "widget/botón flotante", distinto al enlace normal que ya está dentro del footer). */ .ug-whatsapp-float { position: fixed !important; bottom: 24px; right: 24px; width: 58px; height: 58px; background: #25D366; color: #fff !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none !important; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); z-index: 9997; animation: ug-wa-pulse 2.4s ease-in-out infinite; } .ug-whatsapp-float:hover { transform: scale(1.08); } @keyframes ug-wa-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.15); } } @media (max-width: 480px) { .ug-whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 16px; right: 16px; } }