/* base.css (29/09/2026): a base comum do site (reset, .wrap, .eyebrow, .grain, botoes, .pill,
   foco de teclado, "pular para o conteudo", botao do WhatsApp e as guardas de celular).
   Extraida do primeiro <style> das paginas: so entram regras que aparecem iguais em 40 ou mais das
   48 paginas publicas, na ordem em que aparecem la (referencia: maceio-mar-hotel/acomodacoes.html).
   AINDA NAO ESTA LIGADA EM PAGINA NENHUMA. Ao ligar, entra logo depois de tokens.css, no lugar do
   <style> grande, e antes de familias.css, menu.css e padrao-2409.css (ver PARA-O-DEV.md, CSS).
   Fica de fora de proposito, e continua na pagina:
   - a guarda section,header,footer,.wrap{max-width:100vw} do @media 820px: PARA-O-DEV.md avisa
     que ela foi reafirmada por ultimo e que subir a regra reabre o estouro no celular;
   - body{}, :root{} vazio, h1 e tudo de hero, que variam de pagina para pagina. */

#wpadminbar {display: none!important;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;margin-top: 0!important;}
body{font-family:Poppins,system-ui,sans-serif;color:var(--tinta);background:var(--areia);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{text-decoration:none;color:inherit}
::selection{background:var(--turquesa);color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 64px;position:relative}

/* veu neutro */
.hero-veil{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.18) 60%,rgba(8,12,14,.86) 100%),linear-gradient(100deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 55%)!important}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg);opacity:.7;flex:none}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.cine{filter:saturate(1.08) contrast(1.07) brightness(.97)}
.flot{position:absolute;pointer-events:none;z-index:5}

/* botoes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:Poppins,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 28px;border:0;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-turquesa{background:var(--turquesa-deep);color:#fff;box-shadow:0 14px 34px rgba(var(--turquesa-deep-rgb),.35)}
.btn-turquesa:hover{background:var(--tinta-2)}
.btn-dourado{background:var(--dourado);color:var(--tinta);box-shadow:0 14px 34px rgba(20,20,10,.4)}
.btn-dourado:hover{background:var(--dourado-claro)}
.btn-ghost-claro{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-ghost-claro:hover{background:rgba(255,255,255,.12)}

.pill{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:9px 13px;background:rgba(var(--tinta-4-rgb),.6);backdrop-filter:blur(4px);color:#fff}

@media (max-width:1120px){
  .wrap{padding:0 36px}
}
@media (max-width:640px){
  svg[width="420"],svg[width="360"],svg[width="280"]{display:none}
}
html,body{overflow-x:clip}

/* acabamento: foco de teclado visivel (navegacao sem mouse) */
:focus-visible{outline:3px solid var(--turquesa-viva);outline-offset:3px;border-radius:2px}
.pular{position:absolute;left:-9999px;top:0;z-index:999;background:var(--turquesa-deep);color:#fff;
  padding:14px 20px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pular:focus{left:12px;top:12px}

/* botao flutuante do WhatsApp (hoje num <style> proprio em 46 paginas) */
.fab-wpp{position:fixed;right:22px;bottom:22px;z-index:150;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(var(--tinta-3-rgb),.4);transition:transform .25s ease}
.fab-wpp:hover{transform:scale(1.08)}
.fab-wpp svg{width:29px;height:29px}
@media print{.fab-wpp{display:none}}

/* QA: no mobile o botao flutuante cobria palavras do texto */
@media (max-width:640px){
  .fab-wpp{width:48px;height:48px;right:14px;bottom:14px}
  .fab-wpp svg{width:25px;height:25px}
  footer,section{padding-right:0}
  .wrap{padding-left:20px;padding-right:20px}
}

/* nada pode ultrapassar a tela no celular: transbordo vira pagina arrastavel de lado no Android
   (a linha do max-width:100vw fica na pagina, ver o cabecalho deste arquivo) */
@media (max-width:820px){
  .flot,.flot2,.dia-canto,.res-losango,.orn,.ornamento,.trama-a,.trama-b,.trama{display:none!important}
  .of-filtros{margin-left:0;margin-right:0;padding-left:0;padding-right:0;max-width:100%}
  img,svg,video{max-width:100%}
}

.fab-wpp{position:fixed;right:22px;bottom:22px;z-index:150;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(var(--tinta-3-rgb),.4);transition:transform .25s ease}.fab-wpp:hover{transform:scale(1.08)}.fab-wpp svg{width:29px;height:29px}@media print{.fab-wpp{display:none}}  .somos .eyebrow::before{display:none}

/* pacote: parallax sem fresta */
[data-parallax]{inset:-18% 0 !important}