:root{ --hdr-h: 64px; --logo-h: 40px; --hdr-dark-a: rgba(11,18,32,.72); --hdr-dark-b: rgba(11,18,32,.52); --hdr-glass: rgba(255,255,255,.82); --hdr-glass-line: rgba(0,0,0,.06); --hdr-text-dark: rgba(255,255,255,.88); --hdr-text-glass: rgba(15,23,42,.82); --hdr-radius: 18px; --hdr-shadow: 0 10px 30px rgba(15,23,42,.08); } /* ✅ recomendado: offset para anclas */ html{ scroll-padding-top: var(--hdr-h); } /* ✅ recomendado: aplicalo con */ body.has-fixed-header{ padding-top: var(--hdr-h); } /* 👉 Si querés SÍ o SÍ padding-top global en todas las páginas, descomentá esta línea y NO uses has-fixed-header: */ /* body{ padding-top: var(--hdr-h); } */ @media (max-width: 800px){ :root{ --hdr-h: 60px; --logo-h: 36px; } body.has-fixed-header{ padding-top: var(--hdr-h); } } /* ========================= HEADER ========================= */ .main-header{ position: fixed; top:0; left:0; right:0; z-index: 5000; height: var(--hdr-h); background: linear-gradient(180deg, var(--hdr-dark-a), var(--hdr-dark-b)), radial-gradient(120% 120% at 20% 0%, rgba(30,58,138,.18), rgba(0,0,0,0) 55%); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } /* ✅ Estado “glass” al scrollear: - soporta .is-scrolled (nuevo) - soporta .scrolled / .transparent (viejo) */ .main-header.is-scrolled, .main-header.scrolled, .main-header.transparent{ background: var(--hdr-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hdr-glass-line); box-shadow: var(--hdr-shadow); } .header-container{ max-width: 1500px; margin: 0 auto; height: 100%; padding: 0 24px; padding-right: max(24px, env(safe-area-inset-right)); display:flex; align-items:center; justify-content: space-between; gap: 16px; } /* Logo */ .logo{ display:flex; align-items:center; text-decoration:none; } .logo-img{ height: var(--logo-h); width:auto; display:block; transition: transform .25s ease, filter .25s ease; } .logo-img:hover{ transform: scale(1.03); filter: brightness(1.05); } /* Nav centrado real */ .navigation{ flex: 1 1 auto; display:flex; justify-content:center; min-width: 0; } .nav-links{ list-style:none; display:flex; align-items:center; justify-content:center; gap: clamp(10px, 1.8vw, 22px); margin:0; padding:0; white-space: nowrap; } .nav-links a{ font-family:'Poppins', sans-serif; font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; color: var(--hdr-text-dark); text-decoration:none; padding: 10px 12px; border-radius: 12px; transition: background .22s ease, color .22s ease, transform .22s ease; } .nav-links a:hover{ background: rgba(255,255,255,.10); color: #fff; transform: translateY(-1px); } /* Texto en modo glass */ .main-header.is-scrolled .nav-links a, .main-header.scrolled .nav-links a, .main-header.transparent .nav-links a{ color: var(--hdr-text-glass); } .main-header.is-scrolled .nav-links a:hover, .main-header.scrolled .nav-links a:hover, .main-header.transparent .nav-links a:hover{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.96); } /* Dropdown desktop */ .nav-links li{ position:relative; } .dropdown{ display:none; position:absolute; top: calc(100% + 10px); left: 0; min-width: 200px; padding: 10px; border-radius: 16px; background: rgba(17,24,39,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 60px rgba(0,0,0,.22); z-index: 6000; } .has-dropdown:hover .dropdown{ display:block; } .dropdown a{ display:block; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.92); font-weight: 600; font-size: .95rem; } .dropdown a:hover{ background: rgba(255,255,255,.10); } /* Hamburger */ .menu-toggle{ display:none; width:44px; height:44px; border-radius: 14px; position: relative; flex-shrink: 0; align-items:center; justify-content:center; flex-direction: column; gap: 6px; cursor:pointer; user-select:none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); transition: transform .2s ease, background .2s ease, border-color .2s ease; } .menu-toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); } .menu-toggle .bar{ width: 20px; height: 2px; border-radius:999px; background: rgba(255,255,255,.92); transition: transform .22s ease, opacity .22s ease; } /* hamburger en modo glass */ .main-header.is-scrolled .menu-toggle, .main-header.scrolled .menu-toggle, .main-header.transparent .menu-toggle{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.08); } .main-header.is-scrolled .menu-toggle .bar, .main-header.scrolled .menu-toggle .bar, .main-header.transparent .menu-toggle .bar{ background: rgba(15,23,42,.88); } /* X */ .menu-toggle.open .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } .menu-toggle.open .bar:nth-child(2){ opacity:0; } .menu-toggle.open .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } /* ===== MOBILE ===== */ @media (max-width: 800px){ .header-container{ padding: 0 16px; padding-right: max(16px, env(safe-area-inset-right)); } .menu-toggle{ display:flex; margin-right: 6px; } .navigation{ justify-content:flex-end; } .nav-links{ display:none; position:absolute; left: 16px; right: 16px; top: calc(var(--hdr-h) + 10px); flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(17,24,39,.76); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 60px rgba(0,0,0,.22); z-index: 6000; } .nav-links.active{ display:flex; } .nav-links a{ width:100%; padding: 12px 12px; border-radius: 14px; font-size: 1rem; color: rgba(255,255,255,.92); } .nav-links a:hover{ background: rgba(255,255,255,.10); transform:none; } /* Dropdown mobile por click */ .has-dropdown:hover .dropdown{ display:none; } .dropdown{ position: static; display:none; margin-top: 6px; padding: 8px; border-radius: 14px; box-shadow: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .has-dropdown.open .dropdown{ display:block; } }