/* ============================================================ TOPBAR - Inner Condor | Barra informativa superior (escritorio) Colores corporativos: --color-principal #0d3b66, --color-acento #d4af37 Fuente local: Jost (main). Animacion 100% CSS. ============================================================ */ .topbar { display: none; } @media (min-width: 993px) { .topbar { display: block; position: relative; --topbar-h: 34px; background-color: #071d33; border-bottom: 1px solid rgba(212, 175, 55, 0.5); color: rgba(255, 255, 255, 0.85); font-family: 'Jost', sans-serif; font-size: 0.74rem; line-height: 1.1; height: var(--topbar-h); } /* Colapso con suavidad real en ambas direcciones: se desplaza el wrapper completo (topbar + header) con un unico transform y una curva de easing suave (fade hacia el final). Clase independiente del para no chocar con otros scripts de la página. */ #site-header-wrap { will-change: transform; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } #site-header-wrap.topbar-collapsed { transform: translateY(calc(-1 * var(--topbar-h, 34px))); } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 3px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; } /* Izquierda: redes sociales */ .topbar-social { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .topbar-social a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.68rem; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .topbar-social a:hover { background: var(--color-acento); color: #071d33; border-color: var(--color-acento); transform: translateY(-1px); } .topbar-social a:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; } /* Centro: contacto */ .topbar-contact { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: center; min-width: 0; white-space: nowrap; } .topbar-contact a { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s ease; font-weight: 400; letter-spacing: 0.2px; } .topbar-contact a i { color: var(--color-acento); font-size: 0.66rem; } .topbar-contact a:hover { color: var(--color-acento); } .topbar-contact a:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; border-radius: 4px; } /* Derecha: selector de idiomas (mismo componente del proyecto) */ .topbar-lang { flex-shrink: 0; } .topbar-lang .lang-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); padding: 3px 8px; font-size: 0.72rem; border-radius: 6px; color: #fff; } .topbar-lang .lang-toggle:hover { background: rgba(255, 255, 255, 0.16); } /* Prefers-reduced-motion: sin animacion de colapso, aparece/oculta limpio */ @media (prefers-reduced-motion: reduce) { #site-header-wrap { transition: none; } } }