/* cabecalho.css (29/09/2026): o CSS base do <header> que hoje vem copiado no primeiro <style> das
   paginas (barra, logo, nav, submenu, burger, seletor de idioma, header fixo e o menu no tablet e
   no celular). So entram regras iguais em 40 ou mais das 48 paginas publicas, na ordem de la
   (referencia: maceio-mar-hotel/acomodacoes.html). O markup do header e do menu-unico.cjs.
   AINDA NAO ESTA LIGADA EM PAGINA NENHUMA. Ao ligar, entra depois de base.css e ANTES do CSS da
   pagina e do menu.css: o menu.css precisa continuar vencendo (PARA-O-DEV.md, "menu.css tem que
   carregar depois do CSS da pagina"). Por isso este arquivo nao foi fundido no menu.css.
   Duas notas:
   - .header-in, .logo img, nav e header.is-stuck .logo img tambem tem valor no menu.css, que
     carrega depois e vence nessas propriedades. Aqui elas ficam inteiras, como estao na pagina,
     para a troca nao mudar nada; limpar o que o menu.css ja sobrescreve e um passo seguinte;
   - Ipioca: nav a, .lang, .promo-link e .burger i usam --texto-marca nas 8 paginas do Ipioca.
     Essas regras continuam no <style> das paginas do Ipioca, que vem depois deste arquivo e
     redefine as mesmas propriedades, entao vencem sem precisar de !important. */

header{position:absolute;top:0;left:0;right:0;z-index:80;padding:32px 0;transition:padding .35s ease,background .35s ease,box-shadow .35s ease}
.header-in{display:flex;align-items:center;gap:44px}
.logo img{height:42px;width:auto;transition:height .35s ease}
nav{display:flex;gap:32px;margin-left:auto}
nav a{font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.92;position:relative;padding-bottom:6px}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--turquesa-viva);transition:right .3s ease}
nav a:hover::after{right:0}
nav a.on{opacity:1}
nav a.on::after{right:0}
.header-right{display:flex;align-items:center;gap:24px;margin-left:8px}
.lang{font-size:12.5px;font-weight:500;letter-spacing:.12em;color:#fff;opacity:.85}
.promo-link{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.promo-link i{width:7px;height:7px;background:var(--dourado);display:inline-block;transform:rotate(45deg)}
header.is-stuck{position:fixed;padding:12px 0;background:rgba(var(--tinta-3-rgb),.9);backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(var(--tinta-5-rgb),.4);animation:desce .4s ease}
header.is-stuck .logo img{height:32px}
@keyframes desce{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){header.is-stuck{animation:none}}

/* ===== pacote tablet L12: menu completo colapsa no burger de 641px a 1120px =====
   seletores prefixados por "header" de proposito: a ordem das regras base do header
   varia entre os arquivos, entao o bloco tem de vencer por especificidade, nao por ordem. */
@media (min-width:641px) and (max-width:1120px){
  header nav{display:none}
  header .burger{display:flex;order:5;margin-left:14px;flex:none}
  header .header-in{gap:24px}
  header .header-right{margin-left:auto;gap:16px}
  header .lang{display:none}
  header .promo-link{font-size:11px;letter-spacing:.1em;white-space:nowrap}
  header .btn{padding:13px 18px;font-size:11px;letter-spacing:.1em;white-space:nowrap}
  header.nav-open nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(var(--tinta-3-rgb),.97);backdrop-filter:blur(10px);padding:20px 36px 26px;gap:2px;z-index:90;
    max-height:70vh;overflow-y:auto}
  header.nav-open nav a{min-height:44px;display:flex;align-items:center;padding-bottom:0}
  header.nav-open nav a::after{display:none}
  header.nav-open nav a.ativo,header.nav-open nav a.on{color:var(--dourado-claro)}
  header.nav-open .nav-item{display:flex;flex-direction:column;align-items:stretch}
  header.nav-open .subnav{position:static;display:block;min-width:0;padding:0 0 8px 18px}
  header.nav-open .subnav a{display:block;background:transparent;border:0;padding:9px 0;white-space:normal;font-size:13px;min-height:38px}
  header.nav-open .subnav .sub-extra small{display:block;font-size:9px;letter-spacing:.16em;margin-bottom:4px}
  header.nav-open .subnav .sub-extra{border-top:1px solid rgba(255,255,255,.18);margin-top:4px;padding-top:12px}
}

@media (max-width:640px){
  .header-in{gap:12px}
  .logo img{height:28px}
}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger i{width:22px;height:2px;background:#fff;display:block}
@media (max-width:640px){
  nav{display:none}
  .promo-link,.lang{display:none}
  header .btn{padding:12px 16px;letter-spacing:.1em}
  .burger{display:flex}
  header.nav-open nav{display:flex;position:fixed;top:64px;left:0;right:0;flex-direction:column;background:rgba(var(--tinta-3-rgb),.97);padding:26px 36px;gap:18px;z-index:90}
}

/* submenu */
.nav-item{position:relative;display:inline-flex}
.nav-item>a{display:inline-block}
.subnav{position:absolute;top:100%;left:-18px;padding-top:16px;display:none;min-width:250px;z-index:120}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{display:block}
.subnav a{display:block;background:rgba(var(--tinta-3-rgb),.96);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:none;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);opacity:1;white-space:nowrap}
.subnav a:hover{background:var(--turquesa-deep)}
.subnav a::after{display:none}
@media (max-width:640px){.subnav{position:static;display:block;padding:0 0 0 18px;min-width:0}.subnav a{background:transparent;border:0;padding:8px 0}}
.subnav .sub-extra{border-top:1px solid rgba(255,255,255,.18)}
.subnav .sub-extra small{display:block;font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado-claro);margin-bottom:3px}

/* foco de teclado sobre fundo escuro (a regra geral de :focus-visible esta em base.css) */
header :focus-visible,.hero :focus-visible,.chegada :focus-visible{outline-color:#fff}

/* seletor de idioma */
.lang-wrap{position:relative;display:inline-flex}
.lang-wrap>.lang{cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 4px}
.lang-wrap>.lang::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7}
.lang-menu{position:absolute;top:100%;right:0;min-width:160px;background:rgba(var(--tinta-3-rgb),.97);backdrop-filter:blur(10px);
  padding:8px 0;display:none;z-index:95;box-shadow:0 18px 40px rgba(var(--tinta-4-rgb),.35)}
.lang-wrap.aberto .lang-menu{display:block}
.lang-menu b,.lang-menu span{display:block;padding:9px 16px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.lang-menu b{color:var(--dourado-claro);font-weight:600}
.lang-menu span{color:rgba(255,255,255,.5)}
.lang-menu span small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-left:6px}

/* o menu do celular precisa levar Promocoes junto, senao a pagina some do site no mobile */
@media (max-width:640px){
  header.nav-open nav .promo-mob{display:flex;align-items:center;gap:10px;color:var(--dourado-claro);
    font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;min-height:44px;
    border-top:1px solid rgba(255,255,255,.16);margin-top:6px;padding-top:16px}
  header.nav-open nav .promo-mob i{width:7px;height:7px;background:var(--dourado);transform:rotate(45deg);flex:none}
  header nav .promo-mob{display:none}
  /* o submenu nao pode cortar o rotulo da area compartilhada */
  header.nav-open .subnav .sub-extra small,header.nav-open .subnav small{white-space:normal;line-height:1.4}
  header.nav-open nav a{white-space:normal}
}
@media (min-width:641px) and (max-width:1120px){
  header.nav-open nav .promo-mob{display:flex;align-items:center;gap:10px;color:var(--dourado-claro);
    font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;min-height:44px;
    border-top:1px solid rgba(255,255,255,.16);margin-top:6px;padding-top:14px}
  header.nav-open nav .promo-mob i{width:7px;height:7px;background:var(--dourado);transform:rotate(45deg);flex:none}
}
@media (min-width:1121px){header nav .promo-mob{display:none}}