.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--color-border); }
.site-header .container { display: flex; align-items: center; gap: 1.5rem; width: 100%; }

.site-header--solid { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--color-border); }
.site-header--solid .brand .logo-white { display: none; }
.site-header--solid .brand .logo-color { display: block; }
.site-header--solid .nav-link { color: #000; }
.site-header--solid .menu-toggle span { background: var(--color-primary); }

body.has-solid-header main { padding-top: var(--header-h); }

.brand { display: inline-flex; align-items: center; }
.brand img { height: 38px; width: auto; display: block; }
.brand .logo-white { display: none; }
.brand .logo-color { display: block; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-link { position: relative; padding: .5rem .85rem; font-weight: 500; font-size: .95rem; color: var(--color-ink); opacity: .92; }
.nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 2px; background: var(--green-500); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; align-items: center; margin-left: .5rem; padding: .6rem 1.3rem; background: var(--green-600); color: #fff; border-radius: var(--radius-pill); font-weight: 600; font-size: .95rem; transition: background .3s ease, transform .3s ease; }
.nav-cta:hover { background: var(--green-700); transform: translateY(-2px); color: #fff; }

.header-actions { display: flex; align-items: center; gap: .75rem; }

.wa-logo { height: 16px; width: auto; display: block; }
.btn-whatsapp { padding: .5rem 1.05rem; }

.lang { position: relative; }
.lang__toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 600; font-size: .85rem; line-height: 1; }
.site-header.scrolled .lang__toggle { color: #000; border-color: var(--color-border); }
.lang__flag { border-radius: 3px; display: block; }
.lang__gl { font-weight: 700; font-size: .68rem; background: var(--green-600); color: #fff; padding: .1rem .32rem; border-radius: 4px; line-height: 1; }
.lang__caret { width: 14px; height: 14px; opacity: .8; }
.lang__menu { position: absolute; right: 0; top: calc(100% + .5rem); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .35rem; min-width: 180px; display: none; z-index: 60; }
.lang.open .lang__menu { display: block; }
.lang__menu li { list-style: none; }
.lang__menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border-radius: 8px; font-size: .92rem; font-weight: 500; color: var(--color-ink); }
.lang__menu button:hover { background: var(--color-surface); }
.lang__menu img { border-radius: 3px; }

.lang-float { position: fixed; left: 20px; bottom: 20px; z-index: 97; }
.lang-float .lang__toggle { background: #fff; color: #000; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: .5rem .75rem; }
.lang-float .lang__toggle:hover { border-color: var(--green-500); }
.lang-float .lang__menu { top: auto; bottom: calc(100% + .5rem); left: 0; right: auto; }

.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--color-primary); transition: transform .3s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; background: var(--color-primary); color: #fff; padding: 2rem clamp(1.25rem,5vw,2rem); transform: translateX(100%); transition: transform .35s var(--ease); z-index: 99; display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu a.m-link { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-menu .m-actions { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.mobile-langs { display: flex; gap: .5rem; }
.mobile-langs a, .mobile-langs button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600; color: inherit; }
.mobile-langs a[aria-current="true"], .mobile-langs button[aria-current="true"] { background: var(--green-500); border-color: var(--green-500); }
.mobile-langs .lang__flag { width: 18px; height: 18px; }

/* Current page highlighted in the mobile menu */
.mobile-menu a.m-link.active { color: var(--green-500); }

/* When the mobile menu is open, fill the header strip with the menu colour so
   there is no transparent gap, and keep the logo + toggle legible over it
   (works whether or not the header is in its scrolled/solid state). */
body.menu-open .site-header { background: var(--color-primary); box-shadow: none; }
body.menu-open .site-header .brand .logo-white { display: block; }
body.menu-open .site-header .brand .logo-color { display: none; }
body.menu-open .site-header .menu-toggle span { background: #fff; }

@media (max-width: 960px) {
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: flex; }
  /* The language switcher lives inside the burger menu on phones instead of
     floating over the page (it used to collide with the WhatsApp button and
     the cookie banner in that corner). */
  .lang-float { display: none; }
}