/* ============ BNB FLEX — base ============ */
:root{
  --branco:#FFFFFF;
  --cinza-claro:#F2F2F2;
  --cinza-medio:#DCDCDC;
  --cinza-texto:#6E6E6E;
  --quase-preto:#141414;
  --linha:rgba(20,20,20,.12);

  --fonte:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,80px);
  --gutter:clamp(24px,3.5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Largura única do card de unidade (grade e carrossel). Precisa caber
     3 lado a lado dentro do padding da página, senão o Comfort quebra
     para duas linhas. Em telas largas o card cresce. */
  --card-unidade:min(396px,84vw);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--branco);color:var(--quase-preto);
  font-family:var(--fonte);font-weight:300;
  font-size:clamp(14px,.88vw,14.5px);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--quase-preto);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.08}

.wrap{padding-inline:var(--pad)}
.sec{padding:clamp(64px,9vw,140px) var(--pad)}
.olho{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cinza-texto);font-weight:400;margin:0 0 20px}
.h2{font-size:clamp(1.3rem,2.25vw,1.85rem);max-width:26ch;line-height:1.2}
.lead{color:var(--cinza-texto);max-width:62ch}

.rev{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.on{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;font-size:11.5px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--quase-preto);
  background:var(--quase-preto);color:var(--branco);
  transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:transparent;color:var(--quase-preto)}
.btn.vazado{background:transparent;color:var(--quase-preto)}
.btn.vazado:hover{background:var(--quase-preto);color:var(--branco)}

/* ============ header ============ */
.topo{position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);color:var(--branco);
  transition:background .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease);
  border-bottom:1px solid transparent}
.topo.solido{background:var(--branco);color:var(--quase-preto);border-bottom-color:var(--linha)}
.logo{font-size:17px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center}
.logo b{font-weight:300}

/* A logo enviada é preta. Sobre o hero escuro o menu é transparente, então
   ela é invertida para branco; quando o menu fica sólido, volta ao original.
   Assim uma única imagem serve aos dois estados. */
.logo-img{height:var(--altura-logo,32px);width:auto;display:block;
  transition:filter .45s var(--ease)}
.topo:not(.solido) .logo-img{filter:brightness(0) invert(1)}
.topo.solido .logo-img{filter:none}
.logo-rodape{height:var(--altura-logo-rodape,30px);margin-bottom:36px}
.logo-rodape.inverter{filter:brightness(0) invert(1)}
@media(max-width:600px){.logo-img{height:26px}}
.menu{display:flex;gap:clamp(18px,2.4vw,40px);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.menu a{position:relative;padding-bottom:3px}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .35s var(--ease)}
.menu a:hover::after,.menu a[aria-current]::after{width:100%}
.topo .cta{border:1px solid currentColor;padding:11px 26px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease)}
.topo:not(.solido) .cta:hover{background:var(--branco);color:var(--quase-preto)}
.topo.solido .cta:hover{background:var(--quase-preto);color:var(--branco)}

.hamburguer{display:none;width:26px;height:14px;position:relative}
.hamburguer i{position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s}
.hamburguer i:nth-child(1){top:0}
.hamburguer i:nth-child(2){bottom:0}
body.menu-aberto .hamburguer i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-aberto .hamburguer i:nth-child(2){transform:translateY(-6.5px) rotate(-45deg)}

.gaveta{position:fixed;inset:0;z-index:95;background:var(--branco);
  color:var(--quase-preto);display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
body.menu-aberto .gaveta{clip-path:inset(0 0 0 0);visibility:visible}
.gaveta a{font-size:clamp(2rem,9vw,3.2rem);font-weight:300;letter-spacing:-.03em}
.gaveta .btn{margin-top:28px;align-self:flex-start;font-size:11.5px}

@media(max-width:900px){
  .menu{display:none}
  .hamburguer{display:block}
  .topo .cta{display:none}
}

/* ============ hero: tela cheia desde o início, zoom que relaxa no scroll ============ */
.hero{position:relative;height:210vh}
.hero .palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--quase-preto)}
.hero .moldura{position:absolute;inset:0;overflow:hidden}
.hero .moldura img{transform:scale(var(--z,1.28));will-change:transform}
.hero .moldura::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.34),rgba(10,10,10,.06) 42%,rgba(10,10,10,.62));
  opacity:var(--o,.9)}
.hero .texto{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:0 var(--pad) clamp(30px,7vh,64px);color:var(--branco)}
.hero h1{font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.025em;
  max-width:16ch;font-weight:300;text-wrap:balance}
.hero .role{display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.hero .role i{display:block;width:32px;height:1px;background:currentColor;
  transform-origin:left;animation:puxa 2.2s var(--ease) infinite}
@keyframes puxa{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
@media(max-width:700px){.hero{height:190vh}}

/* hero simples (páginas internas) */
.capa{position:relative;height:min(62svh,620px);min-height:340px;overflow:hidden;
  display:flex;align-items:flex-end;color:var(--branco);padding:0 var(--pad) clamp(40px,7vh,80px)}
.capa .fundo{position:absolute;inset:-6% 0}
.capa .fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.45),rgba(10,10,10,.25) 50%,rgba(10,10,10,.65))}
.capa h1{position:relative;font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.025em;max-width:18ch;font-weight:300}

/* ============ pilares ============ */
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) clamp(40px,7vw,120px);
  align-items:start}
.pilares .lista{display:grid;gap:0}
.pilares .item{padding:26px 0;border-top:1px solid var(--linha)}
.pilares .item:last-child{border-bottom:1px solid var(--linha)}
.pilares .item{display:block}
.pilares .item h3{font-size:1rem;font-weight:400;letter-spacing:0;
  display:flex;align-items:center;gap:10px}
.pilares .item p{margin-top:8px}
.pilares .item p{margin:6px 0 0;color:var(--cinza-texto);font-size:13.8px;max-width:46ch}
@media(max-width:860px){.pilares{grid-template-columns:1fr}}

/* ============ categorias ============ */
.categorias{background:var(--cinza-claro)}
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(32px,4vw,56px)}
.cat{background:var(--branco);display:flex;flex-direction:column}
.cat .foto{aspect-ratio:4/3;overflow:hidden}
.cat .foto img{transition:transform 1.2s var(--ease)}
.cat:hover .foto img{transform:scale(1.05)}
.cat .corpo{padding:28px var(--gutter) 32px;display:flex;flex-direction:column;gap:12px;flex:1}
.cat h3{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.cat .sub{font-size:.95rem;line-height:1.3;font-weight:300;letter-spacing:-.01em}
.cat p{margin:0;color:var(--cinza-texto);font-size:13.8px}
.cat .destaques{margin-top:auto;padding-top:16px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--cinza-texto)}
.cat .destaques b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:6px;color:var(--quase-preto)}
.centro{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}
@media(max-width:900px){.grade3{grid-template-columns:1fr}}

/* ============ experiências (home) ============ */
.exp-home{background:var(--quase-preto);color:var(--branco)}
.exp-home .olho{color:var(--cinza-medio)}
.exp-home .lead{color:rgba(255,255,255,.7)}
.exp-home .grade3{gap:1px;background:rgba(255,255,255,.18)}
.exp-home .bloco{background:var(--quase-preto);padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:10px;min-height:240px}
.exp-home .bloco h3{font-size:1.1rem;font-weight:400}
.exp-home .bloco p{margin:0;color:rgba(255,255,255,.7);font-size:13.8px}
.exp-home .btn{border-color:var(--branco);background:var(--branco);color:var(--quase-preto)}
.exp-home .btn:hover{background:transparent;color:var(--branco)}

/* ============ passos ============ */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);
  margin-top:clamp(36px,4.5vw,64px)}
.passo{border-top:1px solid var(--quase-preto);padding-top:18px}
.passo span{font-size:11px;letter-spacing:.18em;color:var(--cinza-texto)}
.passo h3{font-size:.98rem;font-weight:400;letter-spacing:0;margin:10px 0 8px}
.passo p{margin:0;color:var(--cinza-texto);font-size:13.5px}
.suporte{margin-top:clamp(40px,5vw,72px);padding:clamp(28px,3.5vw,44px);
  background:var(--cinza-claro);display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap}
.suporte h3{font-size:1.05rem;font-weight:400}
.suporte p{margin:6px 0 0;color:var(--cinza-texto);max-width:48ch}
@media(max-width:900px){.passos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.passos{grid-template-columns:1fr}}

/* ============ depoimentos ============ */
.depos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(32px,4vw,56px)}
.depo{border-top:1px solid var(--linha);padding-top:24px}
.depo p{margin:0;font-size:14px;color:var(--quase-preto)}
.depo cite{display:block;margin-top:18px;font-style:normal;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cinza-texto)}
@media(max-width:900px){.depos{grid-template-columns:1fr}}

/* ============ abas de acomodações ============ */
.abas{position:sticky;top:0;z-index:60;background:var(--branco);
  border-bottom:1px solid var(--linha);display:flex;
  overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas button{flex:1;white-space:nowrap;padding:22px 24px;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cinza-texto);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.abas button[aria-selected="true"]{color:var(--quase-preto);border-bottom-color:var(--quase-preto)}
.painel[hidden]{display:none}

.intro-cat{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) clamp(40px,6vw,100px);
  align-items:start}
.intro-cat h2{font-size:clamp(1.2rem,2.05vw,1.65rem);max-width:26ch;line-height:1.25}
.intro-cat .lead+.lead{margin-top:1em}
.recursos{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gutter);
  margin-top:clamp(36px,4.5vw,64px)}
.recursos div{padding:22px 0;border-top:1px solid var(--linha)}
.recursos h4{font-size:.95rem;font-weight:400;letter-spacing:0;display:flex;align-items:center;gap:9px}
.recursos p{margin:6px 0 0;color:var(--cinza-texto);font-size:13.5px;max-width:44ch}
.paraquem{margin-top:clamp(36px,4.5vw,60px);padding:clamp(26px,3.5vw,40px);
  background:var(--cinza-claro)}
.paraquem h3{font-size:1rem;font-weight:400;margin-bottom:10px}
.paraquem p{margin:0;color:var(--cinza-texto);max-width:70ch}
@media(max-width:860px){.intro-cat,.recursos{grid-template-columns:1fr}}

/* ============ cards de unidade ============ */
.unidades{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);
  margin-top:clamp(40px,5vw,72px)}
.unidade{background:var(--cinza-claro);display:flex;flex-direction:column}
/* galeria com scroll-snap: capa + até 5 fotos */
.galeria{position:relative;height:250px;overflow:hidden;flex:0 0 auto;background:var(--cinza-medio)}
.galeria .slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none}
.galeria .slides::-webkit-scrollbar{display:none}
.galeria .slide{flex:0 0 100%;height:100%;scroll-snap-align:center}
.galeria .slide img{width:100%;height:100%;object-fit:cover}
.galeria .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);
  color:var(--quase-preto);font-size:17px;line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.14);
  opacity:.85;transition:opacity .3s var(--ease),background .3s}
.galeria:hover .nav{opacity:1}
.galeria .nav:hover{background:#fff}
.galeria .nav.ant{left:10px}
.galeria .nav.prox{right:10px}
.galeria .nav[disabled]{opacity:0;pointer-events:none}
.galeria .pontos{position:absolute;left:0;right:0;bottom:10px;z-index:2;
  display:flex;gap:6px;justify-content:center}
.galeria .pontos span{width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.55);transition:background .3s,transform .3s}
.galeria .pontos span.on{background:#fff;transform:scale(1.35)}

.unidade .corpo{padding:26px var(--gutter) 32px;display:flex;flex-direction:column;
  gap:12px;flex:1}
.unidade .titulo{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.unidade h3{font-size:1.05rem;font-weight:400}
.unidade .qtd{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza-texto);white-space:nowrap}
.unidade .hospedes{font-size:12.5px;letter-spacing:.06em;color:var(--cinza-texto)}
.unidade p{margin:0;color:var(--cinza-texto);font-size:13.8px}
.unidade ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;padding:0;
  list-style:none;font-size:12px;color:var(--cinza-texto)}
.unidade li::before{content:"✓";margin-right:7px;color:var(--quase-preto)}
.unidade .btn{margin-top:auto;align-self:flex-start}
@media(max-width:820px){.unidades{grid-template-columns:1fr}}

/* ============ tabela comparativa ============ */
.tabela-wrap{overflow-x:auto;margin-top:clamp(32px,4vw,56px);scrollbar-width:thin}
table{width:100%;min-width:620px;border-collapse:collapse;font-size:13.8px}
th,td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--linha)}
thead th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
tbody th{font-weight:300;color:var(--cinza-texto)}
td{text-align:center}
thead th:not(:first-child){text-align:center}

/* ============ experiências empilhadas ============ */
.pilha{position:relative}
.card-exp{position:sticky;top:0;height:100svh;display:grid;
  grid-template-columns:1fr 1fr;background:var(--branco);
  border-top:1px solid var(--linha)}
.card-exp .foto{position:relative;overflow:hidden}
.card-exp .info{padding:clamp(28px,5vw,80px);display:flex;flex-direction:column;
  justify-content:center;gap:16px;overflow-y:auto}
.card-exp .n{font-size:11px;letter-spacing:.22em;color:var(--cinza-texto)}
.card-exp h2{font-size:clamp(1.3rem,2.25vw,1.8rem)}
.card-exp p{margin:0;color:var(--cinza-texto);max-width:50ch}
.card-exp h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cinza-texto);margin-top:6px}
.card-exp ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.8px}
.card-exp li::before{content:"✓";margin-right:10px}
.card-exp .preco{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.02em;margin-top:8px}
.card-exp .btn{align-self:flex-start}
.card-exp:nth-child(even){background:var(--cinza-claro)}
.card-exp:nth-child(even) .foto{order:2}
/* No celular a sobreposição continua, mas o card cresce com o conteúdo:
   altura mínima de uma tela em vez de altura fixa. Com altura travada o
   card seguinte subia por cima e cortava o fim do anterior. */
@media(max-width:860px){
  .card-exp{height:auto;min-height:100svh;
    grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .card-exp .foto{height:34svh;min-height:200px}
  .card-exp:nth-child(even) .foto{order:0}
  .card-exp .info{padding:26px var(--pad) 36px;overflow:visible;
    justify-content:flex-start}
  .card-exp ul{gap:7px}
}

/* ============ rodapé ============ */
.rodape{background:var(--quase-preto);color:var(--branco);
  padding:clamp(48px,6vw,80px) var(--pad) 32px}
.rodape .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--gutter);font-size:13px}
.rodape h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:rgba(255,255,255,.5);margin-bottom:14px}
.rodape ul{margin:0;padding:0;list-style:none}
.rodape li+li{margin-top:8px}
.rodape a:hover{color:var(--cinza-medio)}
.rodape .fim{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.nota{margin-top:26px;font-size:12px;color:var(--cinza-texto)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
}


/* ============ WhatsApp flutuante ============ */
.whatsapp-float{position:fixed;left:20px;bottom:20px;z-index:90;width:52px;height:52px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.whatsapp-float svg{width:26px;height:26px;fill:#fff}
.whatsapp-float:hover{transform:scale(1.06)}
body.bnb-cookie-visible .whatsapp-float{transform:translateY(-84px)}
@media(max-width:600px){body.bnb-cookie-visible .whatsapp-float{transform:translateY(-124px)}}

/* ============ placeholder de foto ============ */
.bnb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:var(--cinza-medio);color:#8a8a8a;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bnb-ph svg{opacity:.6}
.bnb-media{position:relative;width:100%;height:100%}

/* ============ banner de cookies ============ */
#bnb-cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--quase-preto);color:var(--branco);padding:18px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  transform:translateY(100%);transition:transform .45s var(--ease)}
#bnb-cookie-banner.visible{transform:translateY(0)}
#bnb-cookie-banner p{margin:0;max-width:70ch;font-size:13px;color:rgba(255,255,255,.7)}
#bnb-cookie-banner a{text-decoration:underline}
#bnb-cookie-banner .btn{border-color:var(--branco);background:var(--branco);color:var(--quase-preto)}




/* ============ ícones de linha ============ */
.ico{flex:0 0 auto;vertical-align:-.18em;opacity:.75}

/* ============ miniatura atrelada ao conteúdo ============ */
.thumb{position:relative;overflow:hidden;background:var(--cinza-claro)}
.thumb img{transition:transform 1.1s var(--ease)}

/* benefícios: a headline acompanha o scroll até o último tópico */
.gruda{position:sticky;top:calc(var(--altura-topo, 74px) + 24px);align-self:start}
@media(max-width:860px){.gruda{position:static}}

/* passos: linha, depois o ícone, depois o número */
.passo{border-top:1px solid var(--quase-preto);padding-top:0}
.ico-passo{padding-top:20px;color:var(--quase-preto);line-height:0}
.ico-passo .ico{opacity:1}
.passo span{display:block;padding-top:14px;border-top:0}

/* cabeçalho centralizado */
.texto-centro{text-align:center;max-width:70ch;margin:0 auto}
.texto-centro .lead{margin-inline:auto}
.texto-centro .lead+.lead{margin-top:1.1em}

.cabeca-centro{text-align:center;margin:0 auto clamp(30px,4vw,52px)}
.cabeca-centro .h2{max-width:none;margin-inline:auto}
.cabeca-centro .lead{max-width:64ch;margin-inline:auto}

/* experiências na home: foto acima do título */
.exp-home .bloco .thumb{aspect-ratio:16/10;margin-bottom:18px;background:rgba(255,255,255,.08)}

/* ============ carrossel de acomodações ============ */
.carrossel{position:relative;margin-top:clamp(36px,4.5vw,64px)}
.carrossel .trilho{display:flex;gap:var(--gutter);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  /* sem isso o snap ignora o padding e o 1º card encosta na borda cortado */
  scroll-padding-inline:var(--pad);
  padding-bottom:8px;scrollbar-width:none}
.carrossel .trilho::-webkit-scrollbar{display:none}
.carrossel .unidade{flex:0 0 var(--card-unidade);max-width:var(--card-unidade);
  overflow:hidden;scroll-snap-align:start}
.carrossel .setas{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.carrossel .setas button{width:42px;height:42px;border:1px solid var(--linha);
  font-size:19px;line-height:1;color:var(--quase-preto);
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}
.carrossel .setas button:hover{background:var(--quase-preto);color:var(--branco)}
.carrossel .setas button[disabled]{opacity:.25;pointer-events:none}
@media(max-width:600px){.carrossel .setas{justify-content:center}}
.carrossel .setas[hidden]{display:none}

/* ============ hero com head centralizada ============ */
.hero .texto.centro-hero{top:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:var(--pad)}
.hero .texto.centro-hero h1{max-width:20ch}
.hero .texto.centro-hero .role{position:absolute;bottom:clamp(26px,5vh,48px)}

/* card dentro do carrossel: respiro proporcional à largura menor */
.carrossel .unidade .corpo{padding:22px 26px 28px}
.carrossel .galeria{height:230px}
.carrossel .unidade ul{gap:6px 14px}


/* ============ dica acima das abas ============ */
@media(min-width:1560px){:root{--card-unidade:min(440px,84vw)}}

.dica-abas{margin:0;padding:22px var(--pad) 0;text-align:center;
  font-size:12px;letter-spacing:.1em;color:var(--cinza-texto)}
.dica-abas::after{content:"";display:block;width:1px;height:16px;
  margin:10px auto 0;background:var(--linha)}

/* ============ "para quem é" + botão de estrutura ============ */
.paraquem{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center}
.paraquem-texto h3{margin-bottom:10px}
.paraquem-texto p{margin:0;color:var(--cinza-texto);max-width:70ch}
.paraquem-acao{justify-self:end}
@media(max-width:760px){
  .paraquem{grid-template-columns:1fr}
  .paraquem-acao{justify-self:start}
}

/* ============ carrossel de unidades ============ */
/* Comfort e Premium usam o mesmo carrossel do Suites. Em tela larga os
   cards dividem a linha, cabem todos e as setas se escondem sozinhas;
   quando não cabem, vira rolagem horizontal com as setas abaixo. */
.carrossel.centraliza .trilho{justify-content:center}
.carrossel.centraliza .unidade{flex:1 1 0;max-width:var(--card-unidade)}
@media(max-width:1180px){
  .carrossel.centraliza .trilho{justify-content:flex-start}
  .carrossel.centraliza .unidade{flex:0 0 min(var(--card-unidade),82vw);
    max-width:min(var(--card-unidade),82vw)}
}

/* ============ modal de estrutura ============ */
.modal-estrutura{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:var(--pad)}
.modal-estrutura[hidden]{display:none}
.modal-estrutura .fundo-modal{position:absolute;inset:0;background:rgba(10,10,10,.72)}
.modal-estrutura .caixa{position:relative;width:min(520px,100%);background:var(--branco);
  animation:sobe-modal .45s var(--ease)}
@keyframes sobe-modal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-estrutura .topo-modal{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 22px;border-bottom:1px solid var(--linha)}
.modal-estrutura .topo-modal .olho{margin:0}
.modal-estrutura .fecha{font-size:26px;line-height:1;color:var(--cinza-texto)}
.modal-estrutura .fecha:hover{color:var(--quase-preto)}
/* Fotos de estrutura em retrato 1080×1350 (4:5) — a caixa acompanha. */
.modal-estrutura .galeria{width:100%;height:auto;aspect-ratio:4/5;max-height:72svh}
.modal-estrutura .galeria .nav{opacity:1}
body.modal-aberto{overflow:hidden}

/* ============ mapa das propriedades ============ */
.mapa-bloco{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(24px,3.5vw,56px);
  align-items:start;margin-top:clamp(28px,3.5vw,48px)}
.mapa-tela{height:min(62svh,560px);min-height:340px;background:var(--cinza-claro);
  z-index:0}
.mapa-tela .leaflet-control-attribution{font-size:10px}

.mapa-lista{list-style:none;margin:0;padding:0}
.mapa-lista li{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--linha);
  transition:opacity .3s var(--ease)}
.mapa-lista li:first-child{padding-top:0}
.mapa-lista li:last-child{border-bottom:0}
.mapa-lista .pino{flex:0 0 auto;color:var(--areia,#9a8f7a);margin-top:2px}
.mapa-lista h3{font-size:1.05rem;font-weight:300;letter-spacing:-.01em}
.mapa-lista p{margin:6px 0 0;font-size:13px;color:var(--cinza-texto)}
.mapa-lista .rota{display:inline-block;margin-top:12px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid var(--linha);transition:border-color .3s}
.mapa-lista .rota:hover{border-bottom-color:var(--quase-preto)}
.mapa-lista li.ativo h3{opacity:.55}

/* pino desenhado, no lugar do marcador padrão do Leaflet */
.bnb-pino span{display:block;width:18px;height:18px;border-radius:50%;
  background:var(--quase-preto);border:3px solid var(--branco);
  box-shadow:0 1px 6px rgba(0,0,0,.3)}

@media(max-width:900px){
  .mapa-bloco{grid-template-columns:1fr}
  .mapa-tela{height:min(48svh,380px);order:-1}
}


/* ============ capa com olho acima do título ============ */
.capa-texto{position:relative}
.capa-texto .olho{color:rgba(255,255,255,.75);margin-bottom:14px}

/* ============ mapa: coluna lateral ============ */
.mapa-lado .olho{margin-bottom:18px}

/* ============ Destino: cards de lugares ============ */
.lugares{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(32px,4vw,56px)}
.lugar-card{background:var(--branco);border:1px solid var(--linha);
  display:flex;flex-direction:column}
.lugar-card .foto{position:relative;aspect-ratio:4/3;overflow:hidden}
.lugar-card .foto img{transition:transform 1.2s var(--ease)}
.lugar-card:hover .foto img{transform:scale(1.05)}
.lugar-card .corpo{padding:24px 26px 28px;display:flex;flex-direction:column;
  gap:10px;flex:1}
.lugar-card .olho{margin:0}
.lugar-card h3{font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.25}
.lugar-card p{margin:0;font-size:13.5px;color:var(--cinza-texto)}
.lugar-card .distancia{margin-top:auto;padding-top:14px;
  border-top:1px solid var(--linha);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-texto)}
@media(max-width:1000px){.lugares{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lugares{grid-template-columns:1fr}}


/* ============ mobile ============ */
/* Quebras de linha desenhadas para o desktop. No celular a largura é outra
   e elas produziriam linhas órfãs, então saem e o texto flui sozinho. */
@media(max-width:760px){
  .quebra-desktop{display:none}
}

/* Texto de apoio um pouco menor no celular. Os títulos ficam como estão. */
@media(max-width:760px){
  body{font-size:14px;line-height:1.65}
  .lead{font-size:14px}
  .pilares .item p,.cat p,.passo p,.recursos p,.paraquem p,
  .unidade p,.lugar-card p,.mapa-lista p,.depo p,.exp-home .bloco p,
  .card-exp p{font-size:13.5px}
  .cat .destaques{font-size:12px}
  .unidade ul,.card-exp ul{font-size:13px}
  .olho{font-size:10px;letter-spacing:.18em}
}


/* ============ páginas legais ============ */
.legal{max-width:78ch;margin-inline:auto;padding-top:calc(clamp(64px,9vw,140px) + 40px)}
.legal-topo{padding-bottom:clamp(28px,4vw,44px);margin-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--linha)}
.legal-topo h1{font-size:clamp(1.55rem,2.9vw,2.2rem);font-weight:300;letter-spacing:-.025em}
.legal-topo .atualizacao{margin:16px 0 0;font-size:13px;color:var(--cinza-texto)}
.legal-corpo .destaque{font-size:14.5px;padding-bottom:clamp(24px,3vw,36px);
  margin-bottom:clamp(8px,1.5vw,16px);border-bottom:1px solid var(--linha)}
.legal-corpo h2{font-size:1.05rem;font-weight:400;letter-spacing:0;
  margin:clamp(34px,4vw,52px) 0 14px}
.legal-corpo h3{font-size:.95rem;font-weight:400;letter-spacing:0;
  margin:26px 0 10px;color:var(--cinza-texto)}
.legal-corpo p{margin:0 0 1em;color:var(--cinza-texto)}
.legal-corpo strong{font-weight:500;color:var(--quase-preto)}
.legal-corpo ul{margin:0 0 1.2em;padding-left:0;list-style:none}
.legal-corpo li{position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--cinza-texto)}
.legal-corpo li::before{content:"";position:absolute;left:0;top:.68em;
  width:8px;height:1px;background:var(--cinza-texto)}
.legal-corpo a{border-bottom:1px solid var(--linha)}
.legal-corpo a:hover{border-bottom-color:var(--quase-preto)}