/* =====================================================================
   Pousada Brisas — folha compartilhada (style.css)
   Camada canônica única: fonts, tokens, base, header/nav, footer,
   primitivos de seção, botões, booking form, flatpickr, WhatsApp float.
   CSS page-unique (hero, bento, vídeo, outeiro, split, mosaico, room,
   blog, faq) permanece inline em cada página.
   Fonte canônica: index.html (versão aprovada). Editar AQUI, não nas páginas.
   ===================================================================== */

/* ----- FONTS ----- */
@font-face{font-family:'Mr Sheffield';src:url('assets/Fonts/Mr Sheffield.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Autography';src:url('assets/Fonts/autography/Autography.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('assets/Fonts/Gotham Rounded/gothamrnd_light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('assets/Fonts/Gotham Rounded/gothamrnd_book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('assets/Fonts/Gotham Rounded/gothamrnd_medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('assets/Fonts/Gotham Rounded/gothamrnd_bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('assets/Fonts/Gotham Rounded/gothamrnd_bolditalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60ptLight.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60ptLightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60pt.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60ptItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60ptBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Walbaum';src:url('assets/Fonts/walbaum-60pt/Walbaum60ptBoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Abel Pro';src:url('assets/Fonts/abel-pro/Abel-Pro.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Abel Pro';src:url('assets/Fonts/abel-pro/Abel-Pro-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Didot';src:url('assets/Fonts/didot-2/Didot.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Didot';src:url('assets/Fonts/didot-2/Didot Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Didot';src:url('assets/Fonts/didot-2/Didot Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Didot';src:url('assets/Fonts/didot-2/Didot Title.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ----- TOKENS + BASE ----- */
:root{--verde:#828f55;--terracota:#b15d56;--coral:#e67363;--laranja:#eea54a;--areia:#bdb490;--salmão:#ef9c7d;--rosa:#ddc4af;--creme:#f5efe2;--cinza:#706f6f;--white:#ffffff;--dark:#3a3a3a;--font-serif:'Walbaum',serif;--font-rounded:'Gotham Rounded',sans-serif;--font-body:'Abel Pro',sans-serif;--font-script:'Mr Sheffield',cursive;--font-script-alt:'Autography',cursive;--font-display:'Didot',serif}
/* ----- ESCALA DE ESPAÇAMENTO (débito técnico #6) -----
   Grid de 8pt com meio-passo de 4px. Os tokens _5 são os meio-passos (12/20/28/…),
   que absorvem os valores off-grid frequentes SEM mudar pixel. Consumir via
   var(--space-N) em padding/margin/gap. Valores <8px (bordas, gaps de ícone) ficam
   raw — camada fina, fora do ritmo. Os one-offs do hero (100/120/176px) ficam raw e
   page-unique de propósito. Snap dos off-grid genuínos (9/10/13/14/18/22) = pendência. */
:root{
  --space-0_5:4px;  --space-1:8px;    --space-1_5:12px; --space-2:16px;
  --space-2_5:20px; --space-3:24px;   --space-3_5:28px; --space-4:32px;
  --space-4_5:36px; --space-5:40px;   --space-5_5:44px; --space-6:48px;
  --space-6_5:52px; --space-7:56px;   --space-8:64px;   --space-9:72px;
  --space-10:80px;  --space-12:96px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:18px;color:var(--cinza);background:var(--creme);line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)}
@media(max-width:768px){.container{padding:0 var(--space-3)}}

/* ----- HEADER ----- */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:var(--space-2) 0;transition:all .4s ease}
.header.gradient{background:transparent}
.header.scrolled{background:var(--creme);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.04);padding:var(--space-1) 0}
.header .container{display:flex;align-items:center;justify-content:space-between}
.header-logo{display:flex;align-items:center;flex-shrink:0}
.header-logo img{height:52px;width:auto;transition:.3s}
/* logo inicial (marca aquarela sobre o hero): faixa horizontal cortada — altura menor p/ não alargar demais */
.header-logo .logo-mark{height:clamp(40px,4vw,52px)}
.header.scrolled .header-logo img{height:42px}
/* troca de logo no scroll: marca aquarela sobre o hero · wordmark "BRISAS" sobre o creme */
.header-logo .logo-word{display:none}
.header.scrolled .header-logo .logo-mark{display:none}
.header.scrolled .header-logo .logo-word{display:block;height:46px}
.nav{display:flex;align-items:center;gap:var(--space-1)}
.nav a{font-family:var(--font-rounded);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:1.5px;padding:var(--space-1) var(--space-2);border-radius:5px;color:var(--white);transition:all .3s}
.header.scrolled .nav a{color:var(--cinza)}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.2);color:var(--white)!important}
.header.scrolled .nav a:hover,.header.scrolled .nav a.active{background:var(--verde);color:var(--white)!important}
.header-cta{padding:14px var(--space-4);font-family:var(--font-rounded);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;border-radius:5px;border:none;cursor:pointer;background:var(--terracota);color:var(--white);transition:all .3s;flex-shrink:0}
.header-cta:hover{background:var(--verde);color:var(--white)}
.header.scrolled .header-cta{background:var(--terracota);color:var(--white)}
.header.scrolled .header-cta:hover{background:var(--verde)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-1);flex-shrink:0}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:6px 0;transition:.3s;border-radius:2px}
.header.scrolled .menu-toggle span{background:var(--dark)}
.nav.open ~ .menu-toggle span{background:var(--creme)}
.nav.open ~ .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open ~ .menu-toggle span:nth-child(2){opacity:0}
.nav.open ~ .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:1024px){
  .nav{position:fixed;top:0;right:-320px;width:304px;height:100vh;background:rgba(50,47,44,.8);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);flex-direction:column;justify-content:center;gap:var(--space-1);padding:var(--space-10) var(--space-5);transition:right .45s cubic-bezier(.22,1,.36,1);box-shadow:-16px 0 50px rgba(0,0,0,.4);z-index:2000;border-left:1px solid rgba(255,255,255,.08)}
  .nav.open{right:0}
  .nav a,.header.scrolled .nav a{color:var(--creme);font-size:13px;padding:var(--space-1) var(--space-2)}
  .nav a:hover,.nav a.active{background:rgba(255,255,255,.1)!important;color:var(--white)!important}
  .menu-toggle{display:block;z-index:2001}
  .header-cta{display:none}
}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;opacity:0;pointer-events:none;transition:.4s}
.menu-overlay.open{opacity:1;pointer-events:auto}

/* ----- NAV DROPDOWN ----- */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-link-dd{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-rounded);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:1.5px;padding:var(--space-1) var(--space-2);border-radius:5px;color:var(--white);transition:all .3s}
.header.scrolled .nav-link-dd{color:var(--cinza)}
.nav-link-dd:hover,.nav-link-dd.active{background:rgba(255,255,255,.2);color:var(--white)!important}
.header.scrolled .nav-link-dd:hover,.header.scrolled .nav-link-dd.active{background:var(--verde);color:var(--white)!important}
.dd-chevron{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;flex-shrink:0}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--white);border-radius:14px;padding:6px;min-width:200px;box-shadow:0 8px 40px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .2s ease .12s,transform .2s ease .12s;z-index:500}
/* ponte invisível: cobre o gap item↔dropdown p/ o hover não cair ao descer o mouse */
.nav-dropdown::before{content:'';position:absolute;left:0;right:0;top:-14px;height:16px}
.nav-dropdown a{display:block;padding:10px var(--space-2);font-family:var(--font-rounded);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:1.5px;color:var(--dark);border-radius:9px;transition:all .2s;white-space:nowrap}
.nav-dropdown a:hover,.nav-dropdown a.active-sub{background:var(--dark);color:var(--white)}
@media(min-width:1025px){.nav-item:hover .nav-dropdown,.nav-dropdown:hover{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}.nav-item:hover .dd-chevron{transform:rotate(180deg)}}
@media(max-width:1024px){.nav-item{flex-direction:column;align-items:flex-start;width:100%}.nav-link-dd{width:100%;color:var(--creme)!important;font-size:13px;padding:var(--space-1) var(--space-2);justify-content:center;gap:6px}.nav-dropdown{position:static;transform:none!important;box-shadow:none;background:rgba(255,255,255,.05);border-radius:10px;padding:4px var(--space-1);margin-top:4px;width:100%;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s;pointer-events:none}.nav-dropdown a{color:var(--creme)}.nav-dropdown a:hover,.nav-dropdown a.active-sub{background:rgba(255,255,255,.1);color:var(--white)}.nav-item.open .nav-dropdown{opacity:1;pointer-events:auto;max-height:300px}.nav-item.open .dd-chevron{transform:rotate(180deg)}}

/* ----- ESTADO ATIVO DO MENU (por página, via body.pg-*) -----
   Substitui as classes .active/.active-sub hard-coded no markup.
   Mantém o header/footer como fragmento idêntico em todas as páginas. */
body.pg-acomodacoes .nav a[href="acomodacoes.html"],
body.pg-praias      .nav a[href="praias.html"],
body.pg-contato     .nav a[href="contato.html"]{background:rgba(255,255,255,.2);color:var(--white)!important}
body.pg-acomodacoes .header.scrolled .nav a[href="acomodacoes.html"],
body.pg-praias      .header.scrolled .nav a[href="praias.html"],
body.pg-contato     .header.scrolled .nav a[href="contato.html"]{background:var(--verde);color:var(--white)!important}
/* dropdown "Informações": marca o trigger nas páginas internas do grupo */
body.pg-gastronomia .nav-link-dd,
body.pg-eventos     .nav-link-dd,
body.pg-piscina-jardim .nav-link-dd,
body.pg-outeiro     .nav-link-dd,
body.pg-informacoes .nav-link-dd{background:rgba(255,255,255,.2);color:var(--white)!important}
body.pg-gastronomia .header.scrolled .nav-link-dd,
body.pg-eventos     .header.scrolled .nav-link-dd,
body.pg-piscina-jardim .header.scrolled .nav-link-dd,
body.pg-outeiro     .header.scrolled .nav-link-dd,
body.pg-informacoes .header.scrolled .nav-link-dd{background:var(--verde);color:var(--white)!important}
/* sub-item ativo dentro do dropdown */
body.pg-gastronomia    .nav-dropdown a[href="gastronomia.html"],
body.pg-eventos        .nav-dropdown a[href="eventos.html"],
body.pg-piscina-jardim .nav-dropdown a[href="piscina-jardim.html"],
body.pg-outeiro        .nav-dropdown a[href="outeiro.html"]{background:var(--dark);color:var(--white)}

/* ----- SECTIONS COMMON ----- */
.section{padding:var(--space-12) 0}
/* mobile: 96px por seção empilha espaço vazio demais no celular — reduz universalmente p/ 56px (vale home e páginas internas) */
@media(max-width:768px){.section{padding:var(--space-7) 0}}
.section-alt{background:var(--white)}
.section-creme{background:var(--creme)}
.section-rosa{background:var(--rosa)}
.section-areia{background:var(--areia)}
/* texto em creme claro da paleta sobre o areia (título "Suíte", desc e especs) */
.section-areia .headline,.section-areia .section-text,.section-areia .section-desc,.section-areia .suite-spec{color:var(--creme)}
.section-areia .headline em{color:#566324}
.section-dark{background:var(--dark);color:var(--white)}
/* .subheadline + .headline: par canônico ÚNICO (kicker/subtítulo + título) usado no hero
   e nas seções. Mesma fonte serif; o subheadline é menor (hierarquia). Contexto escuro
   (hero, section-dark) sobrescreve só a cor. Substitui o antigo hero-tag/section-tag duplicado. */
.subheadline{font-family:var(--font-serif);font-size:clamp(20px,2.2vw,26px);color:var(--salmão);line-height:1.2;margin-bottom:2px}
.section-label{font-family:var(--font-rounded);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--terracota);margin-bottom:var(--space-2)}
.headline{font-family:var(--font-serif);font-size:clamp(32px,4vw,48px);font-weight:400;color:var(--dark);line-height:1.15;margin-bottom:var(--space-3)}
.headline em{color:var(--verde);font-style:italic}
.section-dark .headline{color:var(--white)}
.section-desc{font-size:17px;color:var(--cinza);max-width:600px;line-height:1.8;margin-bottom:0}
.section-dark .section-desc{color:rgba(255,255,255,.78)}
.section-center{text-align:center}
/* util: <br> que só quebra no desktop — some no mobile p/ não criar linha órfã */
@media(max-width:768px){.br-desktop{display:none}}
.section-center .section-desc{margin:0 auto}
.section-text{font-size:18px;color:var(--cinza);max-width:600px;line-height:1.9}
.reveal{opacity:0;transform:translateY(40px);transition:all .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ----- BOTÕES ----- */
.btn-outline{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1_5) var(--space-4);font-family:var(--font-rounded);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;border-radius:5px;border:1.5px solid var(--terracota);color:var(--terracota);transition:all .3s;margin-top:var(--space-4)}
.btn-outline:hover{background:var(--terracota);color:var(--white)}
.btn-outline svg{width:14px;height:14px;fill:currentColor}
/* variante sobre fundo escuro/foto — consumida pelas seções vídeo e outeiro (markup page-unique do index) */
.video-content .btn-outline,
.section-outeiro .btn-outline{margin-top:var(--space-5);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.95)!important;color:var(--white)!important;padding:var(--space-1_5) var(--space-6);letter-spacing:3px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.video-content .btn-outline:hover,
.section-outeiro .btn-outline:hover{background:rgba(255,255,255,.2);border-color:var(--white)!important;color:var(--white)!important}
.btn-whatsapp{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-5);font-family:var(--font-rounded);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:2px;border-radius:5px;border:none;cursor:pointer;background:var(--verde);color:var(--white);transition:all .3s}
.btn-whatsapp:hover{background:#6b7546}
.btn-whatsapp svg{width:18px;height:18px;fill:currentColor}

/* ----- BOOKING FORM (páginas com Omnibees) ----- */
.hero-booking{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:var(--space-4) 0 var(--space-5);opacity:0;animation:fadeUp .8s 1s forwards}
.booking-form{display:flex;align-items:stretch;gap:0;background:rgba(255,255,255,.78);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(177,93,86,.3);border-radius:9px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5)}
.booking-form .field{flex:1;display:flex;flex-direction:column;padding:var(--space-2) var(--space-3);border-right:1px solid rgba(177,93,86,.18);position:relative;cursor:pointer;transition:background .3s}
.booking-form .field:hover{background:rgba(177,93,86,.08)}
.booking-form .field:last-child{border-right:none;flex:0 0 auto}
.booking-form label{font-family:var(--font-rounded);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#8a423b;margin-bottom:2px}
.booking-form input,.booking-form select{background:none;border:none;color:#6e342e;font-size:15px;font-family:var(--font-rounded);font-weight:700;cursor:pointer;outline:none;width:100%}
/* campos de data (Selecionar data / data escolhida): menor, próximo do tamanho das labels — desktop e mobile */
.booking-form input[type="text"]{font-size:11px}
.booking-form select option{color:var(--dark)}
.booking-form input::placeholder{color:#7d3a33;opacity:1}
.booking-form .btn-search{padding:var(--space-2) var(--space-5);font-family:var(--font-rounded);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:2px;border:none;cursor:pointer;background:var(--terracota);color:var(--white);align-self:stretch;display:flex;align-items:center;justify-content:center;transition:background .3s;white-space:nowrap}
.booking-form .btn-search:hover{background:var(--verde)}
@media(max-width:768px){
  /* width:100% — o .hero é flex-column com align-items:center; sem isso o booking encolhe pro conteúdo e centraliza (gaps laterais) */
  .hero-booking{position:static;width:100%;padding:0 0 var(--space-2);animation:fadeUp .8s 1s forwards}
  /* mobile: grid 2 colunas → CHECK-IN | CHECK-OUT em cima, ADULTOS | CRIANÇAS embaixo, botão full */
  .booking-form{display:grid;grid-template-columns:1fr 1fr;border-radius:5px;margin:0;background:rgba(255,255,255,.78)}
  .booking-form .field{min-width:0;border-right:1px solid rgba(177,93,86,.18);border-bottom:1px solid rgba(177,93,86,.18);padding:var(--space-1) 14px}
  .booking-form .field:nth-child(even){border-right:none}   /* coluna da direita (CHECK-OUT, CRIANÇAS) */
  .booking-form .btn-search{grid-column:1/-1;width:100%;padding:13px}
}

/* ----- FLATPICKR OVERRIDES ----- */
/* date picker (flatpickr) — paleta da marca: card claro, acento terracota */
.flatpickr-calendar{font-family:var(--font-rounded)!important;border-radius:12px!important;border:none!important;box-shadow:0 12px 44px rgba(0,0,0,.20)!important}
.flatpickr-months,.flatpickr-months .flatpickr-month,.flatpickr-weekdays,.flatpickr-weekdaycontainer,.flatpickr-current-month .flatpickr-monthDropdown-months{background:#fff!important}
.flatpickr-current-month,.flatpickr-current-month input.cur-year,.flatpickr-current-month .cur-month,.flatpickr-monthDropdown-months{color:var(--dark)!important;font-weight:700!important}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--terracota)!important}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--verde)!important}
span.flatpickr-weekday{color:var(--cinza)!important;font-weight:700!important;background:#fff!important}
.flatpickr-day{color:var(--dark)!important;border-radius:8px!important}
.flatpickr-day:hover,.flatpickr-day:focus{background:rgba(177,93,86,.12)!important;border-color:transparent!important}
.flatpickr-day.today{border-color:var(--terracota)!important}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.inRange{background:var(--terracota)!important;border-color:var(--terracota)!important;color:#fff!important}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:rgba(58,58,58,.28)!important}

/* ----- FOOTER ----- */
.footer-cta{position:relative;background:var(--creme);padding:100px 0;text-align:center;min-height:380px;display:flex;align-items:center}
.footer-cta .container{position:relative;z-index:1}
.footer-cta h2{font-family:var(--font-serif);font-size:clamp(30px,4vw,52px);color:var(--dark);font-weight:400;margin-bottom:var(--space-2);letter-spacing:-.5px;line-height:1.15}
.footer-cta p{font-size:17px;color:var(--cinza);line-height:1.8;margin-bottom:var(--space-4_5);max-width:520px;margin-left:auto;margin-right:auto}
.footer-cta .btn-cta{display:inline-flex;align-items:center;gap:10px;padding:18px var(--space-6);font-family:var(--font-rounded);font-size:11px;font-weight:800;border-radius:5px;text-transform:uppercase;letter-spacing:2.5px;border:none;cursor:pointer;background:var(--terracota);color:var(--white);transition:all .3s}
.footer-cta .btn-cta:hover{background:var(--dark);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.footer-main{background:var(--white);color:var(--cinza);padding:var(--space-8) 0 var(--space-6);border-top:1px solid rgba(0,0,0,.08)}
.footer-main>.container{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:var(--space-6)}
.footer-col h3{font-family:var(--font-rounded);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--dark);margin-bottom:var(--space-3)}
.footer-col p{font-size:14px;line-height:1.7;margin-bottom:var(--space-1)}
.footer-col a{font-size:14px;color:var(--cinza);transition:color .3s;display:block;margin-bottom:var(--space-1)}
.footer-col a:hover{color:var(--verde)}
.footer-logo-footer img{height:36px;width:auto;margin-bottom:var(--space-2)}
.footer-social{display:flex;gap:var(--space-1);margin-top:var(--space-2)}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:var(--cinza);transition:all .3s}
.footer-social a:hover{background:var(--verde);border-color:var(--verde);color:var(--white)}
.footer-social svg{width:14px;height:14px;fill:currentColor}
.footer-bottom{border-top:1px solid rgba(0,0,0,.08);padding:var(--space-3) 0;text-align:center;font-size:13px;color:rgba(0,0,0,.4)}
@media(max-width:992px){.footer-main>.container{grid-template-columns:1fr 1fr;gap:var(--space-4)}}
@media(max-width:576px){.footer-main>.container{grid-template-columns:1fr;gap:var(--space-4)}}

/* ----- PÁGINAS INTERNAS: page-hero + split + cards (compartilhado entre as 9 internas) -----
   Drift fino reconciliado p/ a maioria (::after .55, h1 64px, p .75); só a ALTURA do
   page-hero é page-specific e fica inline (via tiers .page-hero-*). */
.page-hero{position:relative;height:55vh;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.2))}
.page-hero .content{position:relative;z-index:2;text-align:center}
.page-hero h1{font-family:var(--font-serif);font-size:clamp(36px,5vw,64px);font-weight:400;color:var(--white);margin-bottom:var(--space-1)}
.page-hero p{font-family:var(--font-body);font-size:19px;color:rgba(255,255,255,.75)}
/* tiers de altura do page-hero (convenção): base=55vh · -tall=60vh · -short=50vh. Aplicar como classe extra no markup. */
.page-hero-tall{height:60vh;min-height:420px}
.page-hero-short{height:50vh;min-height:360px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center}
.split-img{height:500px;overflow:hidden;border-radius:16px}
.split-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s;border-radius:16px}
.split-img:hover img{transform:scale(1.03)}
@media(max-width:992px){.split{grid-template-columns:1fr;gap:var(--space-5)}.split-img{height:360px}}
.gastro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.gastro-card{background:var(--white);border-radius:16px;overflow:hidden;transition:transform .3s}
.gastro-card:hover{transform:translateY(-6px)}
.gastro-card-img{height:220px;background-size:cover;background-position:center}
.gastro-card-body{padding:var(--space-3_5) var(--space-3)}
.gastro-card-body h3{font-family:var(--font-serif);font-size:20px;font-weight:400;color:var(--dark);margin-bottom:var(--space-1)}
.gastro-card-body p{font-size:14px;color:var(--cinza);line-height:1.7}
.gastro-card-tag{display:inline-block;font-family:var(--font-rounded);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--terracota);margin-bottom:10px}
@media(max-width:768px){.gastro-cards{grid-template-columns:1fr}}

/* ----- CAROUSEL (compartilhado: gastronomia + acomodações) -----
   Base comum aqui; dimensões por convenção de classe: .carousel-tall (acomodações,
   500/360px) e a skin .carousel-strip (gastronomia, faixa full-bleed retrato). ----- */
.carousel{position:relative;width:100%;overflow:hidden}
.carousel-tall{height:500px;border-radius:16px}
@media(max-width:992px){.carousel-tall{height:360px}}
.carousel-track{display:flex;height:100%;will-change:transform;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carousel-slide{flex:0 0 100%;width:100%;height:100%}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.88);border:none;border-radius:50%;width:42px;height:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.carousel-btn:hover{background:var(--white);transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.carousel-btn svg{width:18px;height:18px;fill:none;stroke:var(--dark);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.carousel-btn-prev{left:14px}
.carousel-btn-next{right:14px}
.carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .3s;border:none;padding:0;flex-shrink:0}
.carousel-dot.active{background:var(--white);width:20px;border-radius:4px}
/* skin "strip": faixa full-bleed de cards retrato lado a lado (galeria). O .carousel precisa
   estar FORA do .container (filho direto da <section>) p/ ocupar a largura toda sem 100vw. */
.carousel-strip{position:relative;overflow:hidden;width:100%}
/* base: flex-start porque o translateX do carrossel (script.js) calcula o deslize
   a partir da origem 0 — qualquer outro justify só vale quando NADA transborda.
   Com 5 cards de 300px (5×300 + 4×gap16 + 2×pad32 = 1628px) eles só cabem inteiros
   acima de ~1640px; daí distribui em espaços iguais (regra min-width abaixo). Entre
   769 e 1639 transborda → vira carrossel rolável (flex-start). Mobile: idem. */
.carousel-strip .carousel-track{height:auto;gap:var(--space-2);padding:0 var(--space-4);justify-content:flex-start}
@media(min-width:1640px){.carousel-strip .carousel-track{justify-content:space-evenly}}
.carousel-strip .carousel-slide{flex:0 0 clamp(220px,22vw,300px);width:auto;height:auto;aspect-ratio:2/3;border-radius:14px;overflow:hidden}
.carousel-strip .carousel-slide img{border-radius:14px}
.carousel-strip .carousel-btn-prev{left:24px}
.carousel-strip .carousel-btn-next{right:24px}
@media(max-width:768px){
  .carousel-strip .carousel-track{gap:var(--space-1_5);padding:0 var(--space-1_5)}
  .carousel-strip .carousel-slide{flex-basis:74vw;aspect-ratio:3/4}
}

/* ----- OUTEIRO / INFRAESTRUTURA DO CONDOMÍNIO (compartilhado: outeiro + informacoes) -----
   Bloco "infra do condomínio" idêntico nas duas páginas; .img aceita img|video (superset). ----- */
.out-eiro{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-8);align-items:start}
.out-eiro .list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--space-3)}
.out-eiro .list .item{display:flex;align-items:center;gap:var(--space-1_5);padding:var(--space-1_5) 14px;background:var(--white);border-left:3px solid var(--verde);border-radius:0 10px 10px 0}
.out-eiro .list .item .ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--verde);color:var(--white);flex-shrink:0;font-family:var(--font-rounded);font-size:10px;font-weight:800;border-radius:4px}
.out-eiro .list .item span{font-family:var(--font-rounded);font-size:12px;font-weight:600;color:var(--dark);line-height:1.3}
.out-distances{margin-top:var(--space-3_5);padding-top:var(--space-3);border-top:1px solid rgba(0,0,0,.07)}
.out-distances .od-label{font-family:var(--font-rounded);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--terracota);margin-bottom:14px}
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1)}
.od-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--creme);border-radius:8px}
.od-item .od-place{font-family:var(--font-rounded);font-size:11px;color:var(--cinza)}
.od-item .od-dist{font-family:var(--font-serif);font-size:15px;font-weight:700;color:var(--verde)}
.out-eiro .img{height:600px;overflow:hidden;border-radius:16px;position:sticky;top:100px}
.out-eiro .img img,.out-eiro .img video{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
@media(max-width:992px){.out-eiro{grid-template-columns:1fr;gap:var(--space-5)}.out-eiro .img{height:320px;position:static}.od-grid{grid-template-columns:1fr 1fr}}

/* ----- WHATSAPP FLOATING ----- */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;border-radius:50%;background:var(--verde);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.18);transition:all .3s;cursor:pointer}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.whatsapp-float svg{width:26px;height:26px;fill:currentColor}

/* ===== [PROTOTIPO-BADGE] selo "protótipo" no canto inf. esquerdo — REMOVER AO PUBLICAR ===== */
.proto-badge{position:fixed;left:12px;bottom:12px;z-index:60;pointer-events:none;
  font-family:var(--font-rounded);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--creme);background:rgba(58,58,58,.78);backdrop-filter:blur(4px);
  padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 10px rgba(0,0,0,.18)}
@media(max-width:768px){.proto-badge{font-size:8px;padding:5px var(--space-1);left:10px;bottom:10px}}