/* =================================================== 1. FOOTER "Información de interés" dropdown =================================================== */ .footer-info-toggle { position: relative; display: inline-flex; align-items: center; } /* Botón idéntico a .footer__links a */ .footer-info-btn { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .07); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .82rem; border: none; cursor: pointer; font-family: inherit; letter-spacing: inherit; gap: 0.3em; transition: transform .15s var(--ease-spring, ease), background .15s, box-shadow .15s; } .footer-info-btn:hover { background: rgba(255, 178, 0, .18); transform: translateY(-1px); box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,.08)); } .footer-info-toggle.is-open .footer-info-btn { background: rgba(255, 178, 0, .18); } .footer-info-arrow { display: inline-block; font-size: 0.8em; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .footer-info-toggle.is-open:not(.is-below) .footer-info-arrow { transform: rotate(180deg); } /* ── Menú desplegable — position:fixed para escapar el stacking context del footer ── */ .footer-info-menu { position: fixed; /* escapa backdrop-filter del footer */ left: 50%; /* sobreescrito por JS */ top: auto; /* sobreescrito por JS */ bottom: auto; /* sobreescrito por JS */ transform: translateX(-50%) translateY(8px); background: #ffffff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.05); list-style: none; margin: 0; padding: 6px 0; min-width: 220px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9999; /* por encima del topbar (z-index:100) y cualquier otra capa */ transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s; } /* Menú visible — clase aplicada directo al menú (portal: el menú vive en ) */ .footer-info-menu.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Triángulo apuntando hacia abajo (abre arriba) */ .footer-info-menu::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #ffffff; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05)); } /* Triángulo apuntando hacia arriba (abre abajo) */ .footer-info-menu.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #ffffff; filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.05)); } .footer-info-toggle.is-below.is-open .footer-info-arrow { transform: rotate(180deg); } /* ── Items del menú ── */ .footer-info-menu li { list-style: none; } .footer-info-menu li a { display: block; padding: 10px 20px; color: #1a2233; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.14s ease, color 0.14s ease; white-space: nowrap; line-height: 1.4; } .footer-info-menu li a:hover { background: #f0f4ff; color: #1746a2; } .footer-info-menu li:first-child a { border-radius: 12px 12px 0 0; } .footer-info-menu li:last-child a { border-radius: 0 0 12px 12px; } .footer-info-menu li + li { border-top: 1px solid rgba(0, 0, 0, 0.05); } /* Mobile: alinear al borde derecho */ @media (max-width: 480px) { .footer-info-menu { left: auto; right: 0; transform: translateY(6px); } .footer-info-menu.is-open { transform: translateY(0); } .footer-info-menu::after { left: auto; right: 20px; transform: none; } } /* =================================================== 2. NAV PRINCIPAL — rediseño profesional =================================================== */ /* Separador superior más elegante */ .nav { border-top: 1px solid rgba(11, 42, 74, 0.10); padding: 5px 0 3px; margin-top: 4px; } /* Centrado con gap uniforme */ .nav__main { display: flex; align-items: center; justify-content: center; gap: 2px; } /* Links del nav */ .nav__panel a { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-80, #3a3a4a); padding: 7px 18px; border-radius: 999px; font-size: .875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; transition: background .18s ease, color .18s ease, box-shadow .18s ease; box-shadow: none; transform: none; } /* Hover: neutro y corporativo (sin amarillo) */ .nav__panel a:hover { background: rgba(11, 42, 74, 0.07); color: var(--ink, #1a1a2e); transform: none; box-shadow: none; } /* Indicador activo: pill azul marino sólido */ .nav__panel a.is-current { background: #0b2a4a; color: #ffffff; font-weight: 700; box-shadow: 0 2px 10px rgba(11, 42, 74, 0.22); } .nav__panel a.is-current:hover { background: #0d3460; color: #ffffff; } /* Mobile: mantener estilos del menú hamburguesa */ @media (max-width: 860px) { .nav__main { justify-content: flex-start; flex-direction: column; align-items: stretch; gap: 4px; } .nav__panel a { justify-content: flex-start; font-size: .93rem; padding: 11px 16px; border-radius: var(--radius-sm, 8px); } .nav__panel a:hover { background: rgba(11, 42, 74, 0.07); } .nav__panel a.is-current { background: #0b2a4a; color: #ffffff; } }