/* ------------------------------------------------------------------
   Pousada Vila Nova — sistema visual "Carta da Terceira"
   Mundo: carta náutica da ilha. Tipo em campo sólido, foto em moldura.
   Nenhum texto sobre fotografia, em nenhuma seção.
------------------------------------------------------------------- */

@font-face{font-family:"Young Serif";src:url(fonts/young-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{
  /* campos */
  --papel:#fbfaf7;        /* chão claro, branco morno */
  --mata:#0e3330;         /* chão escuro: mata e mar fundo */
  --mata-alt:#0a2724;     /* rodapé */
  --mare:#dce5df;         /* maré baixa: faixas, mar da carta */
  --mare-clara:#eef2ee;
  --areia:#efe6d4;        /* areia: moldura de foto, cards */

  /* tinta */
  --tinta:#15231f;
  --tinta-2:#4c5e58;
  --tinta-clara:#e4ece6;  /* texto sobre --mata */
  --tinta-clara-2:#a8bfb7;

  /* acento único: o laranja da marca, tirado do logo (#f89048) e da parede
     da fachada (#f87810). Mesma cor em duas forças. */
  --sol:#e8701a;          /* só gráfico e sobre escuro: 3.0:1 no papel */
  --sol-tinta:#9e480b;    /* versão legível sobre claro: 6.0:1 no papel */
  --laranja-fundo:#a04a0a;/* campo inteiro, onde o laranja manda na seção */
  --areia-clara:#faf2e6;  /* chão quente, para a seção da fachada */

  --wa:#0f7a43;
  --wa-escuro:#0b5e33;

  --linha:#d6ded8;
  --r:14px;
  --r-peq:10px;
  --max:1200px;

  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --texto:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 17px/1.65 var(--texto);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--sol-tinta);
}
img{display:block;max-width:100%;height:auto}
svg{display:block}

/* superfícies do navegador: nada sai com o padrão de fábrica */
::selection{background:#f6dcae;color:var(--tinta)}
:where(.escuro,.foot) ::selection{background:var(--sol);color:var(--mata)}
:focus-visible{outline:2px solid var(--sol-tinta);outline-offset:3px;border-radius:4px}
.escuro :focus-visible,.foot :focus-visible{outline-color:var(--sol)}
@supports (scrollbar-color:auto){html{scrollbar-color:#b9c7bf var(--mare-clara)}}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--mare-clara)}
::-webkit-scrollbar-thumb{background:#b9c7bf;border:3px solid var(--mare-clara);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#9bada4}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.1vw,3.5rem);line-height:1.05}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem);line-height:1.08}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
a{color:var(--sol-tinta);text-underline-offset:.22em;text-decoration-thickness:.07em}
a:hover{color:var(--tinta)}
strong,b{font-weight:600}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.sec{padding:88px 0}
.sec.escuro{background:var(--mata);color:var(--tinta-clara)}
.sec.mare{background:var(--mare-clara)}
/* chão quente: entra onde o assunto é o prédio laranja da pousada */
.sec.areia{background:var(--areia-clara)}
/* campo laranja: o verde não pode mandar na página inteira, e a cor da marca
   merece uma seção, não só um detalhe. Texto secundário clareado para passar AA. */
.sec.escuro.laranja{background:var(--laranja-fundo);color:#fdeee0}
.escuro.laranja .lead,.escuro.laranja p{color:#f7dcc6}
.sec-head{display:grid;gap:16px;margin-bottom:44px;max-width:64ch}
.sec-head h2{max-width:19ch}
.sec-head .lead{max-width:54ch}
.lead{font-size:1.14rem;line-height:1.6;color:var(--tinta-2)}
.escuro .lead,.escuro p{color:var(--tinta-clara-2)}
.escuro h1,.escuro h2,.escuro h3{color:#fff}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--mata);color:#fff;padding:14px 18px;border-radius:var(--r-peq);text-decoration:none}
.skip:focus{left:12px}

/* etiqueta de pendência: ferramenta de trabalho, não decoração */
.tbc{display:inline-flex;align-items:center;font:600 .72rem/1.35 var(--texto);letter-spacing:.01em;color:#6b4a0c;background:#fdf0d2;border:1px dashed #b8872b;border-radius:5px;padding:2px 6px;vertical-align:baseline}
.tbc::before{content:"a confirmar"}
.tbc[data-n]::before{content:"a confirmar: " attr(data-n)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:0;border-radius:var(--r-peq);font:600 1rem/1.2 var(--texto);text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn svg{width:21px;height:21px;flex:none}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-escuro);color:#fff}
.btn-linha{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.btn-linha:hover{background:var(--tinta);color:var(--papel)}
.escuro .btn-linha{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.escuro .btn-linha:hover{background:#fff;color:var(--mata)}
.btn-bloco{width:100%}
.btn-peq{min-height:46px;padding:11px 20px;font-size:.95rem}

/* ---------- cabeçalho ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--papel);border-bottom:1px solid var(--linha);transition:box-shadow .2s ease}
.top.solid{box-shadow:0 6px 22px -18px rgba(14,51,48,.7)}
.top .wrap{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;margin-right:auto;min-height:44px}
.brand img{width:126px;height:auto}
.nav{display:none;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--tinta);text-decoration:none;font-weight:500;font-size:.98rem;border-radius:var(--r-peq)}
.nav a:hover{background:var(--mare-clara);color:var(--tinta)}
@media (min-width:980px){.nav{display:flex}}
.top .btn{min-height:46px;padding:11px 18px;font-size:.95rem;white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding:40px 0 0}
.hero-grid{display:grid;gap:40px;align-items:start}
.hero-texto{display:grid;gap:20px}
.hero h1{max-width:15ch}
.hero .sub{font-size:1.1rem;line-height:1.6;color:var(--tinta-2);max-width:46ch}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px}
.inclui-linha{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:18px 0 0;border-top:1px solid var(--linha);list-style:none;font-size:.95rem;color:var(--tinta-2)}
.inclui-linha li{display:flex;align-items:center;gap:9px}
.inclui-linha svg{width:17px;height:17px;flex:none;color:var(--sol-tinta)}

/* moldura: toda foto mora aqui dentro, com legenda própria */
.moldura{margin:0;display:grid;gap:12px}
.moldura .quadro{overflow:hidden;border-radius:var(--r);background:var(--areia)}
.moldura img{width:100%;height:100%;object-fit:cover}
.moldura figcaption{font-size:.9rem;line-height:1.5;color:var(--tinta-2);display:grid;grid-template-columns:14px 1fr;gap:4px 9px;max-width:52ch}
.moldura figcaption::before{content:"";width:14px;height:1px;background:var(--sol);margin-top:.62em}
.moldura figcaption .tbc{grid-column:2;justify-self:start}
.escuro .moldura figcaption{color:var(--tinta-clara-2)}
.hero .moldura .quadro{aspect-ratio:4/3}

/* No celular a praia sobe para logo abaixo da manchete: a promessa e a prova
   na mesma tela, antes do botão. O texto de apoio desce. */
@media (max-width:899px){
  .hero{padding-top:34px}
  .hero-texto{display:contents}
  .hero-grid{gap:22px}
  .hero h1{order:1}
  .hero .moldura{order:2}
  .hero .sub{order:3}
  .hero .acoes{order:4}
  .hero .inclui-linha{order:5}
  .hero .moldura .quadro{aspect-ratio:5/4}
}
@media (min-width:900px){
  .hero{padding-top:44px}
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
}
@media (min-width:1140px){.hero-grid{grid-template-columns:1fr 1.05fr;gap:72px}}

/* ---------- a carta: linha de praias ---------- */
.carta{margin-top:28px;background:var(--mare);border-top:1px solid #c6d3cb}
.carta figure{margin:0}
.carta .tela{width:100%;overflow:hidden}
.carta svg{width:100%;height:auto}
.carta .larga{display:none}
.carta .estreita{display:block}
@media (min-width:760px){.carta .larga{display:block}.carta .estreita{display:none}}
.carta figcaption{max-width:var(--max);margin:0 auto;padding:0 24px 26px;font-size:.93rem;color:#3f524b}
.carta figcaption b{font-weight:600;color:var(--tinta)}

.c-terra{fill:#e7dcc3}
.c-costa{fill:none;stroke:#5f756b;stroke-width:2.4;stroke-linecap:round}
.c-tick{stroke:#76897f;stroke-width:1.4;stroke-linecap:round}
.c-num{font:600 25px var(--texto);fill:#3f524b;letter-spacing:.01em}
.c-eixo{stroke:var(--sol-tinta);stroke-width:2;stroke-linecap:round}
.c-pino{fill:var(--sol)}
.c-aqui{font:600 22px var(--texto);fill:var(--sol-tinta);letter-spacing:.01em}
.c-aqui-num{fill:var(--sol-tinta)}
.c-ponta{font:400 17px var(--texto);fill:#46564e;letter-spacing:.01em}
.carta .estreita .c-num{font-size:27px}
.carta .estreita .c-aqui{font-size:21px}
.carta .estreita .c-ponta{font-size:19px}

/* o único momento coreografado da página: a carta se desenha */
@media (prefers-reduced-motion:no-preference){
  .c-costa{stroke-dasharray:1 0}
  .carta .anima .c-costa{stroke-dasharray:1600;stroke-dashoffset:1600;animation:tracar 1.1s cubic-bezier(.22,1,.36,1) .15s forwards}
  .carta .anima .c-marca{opacity:0;animation:surgir .5s cubic-bezier(.22,1,.36,1) 1s forwards}
}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes surgir{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* O pino da Terceira dá um sinal só, depois que a costa termina de ser traçada.
   Uma vez, nunca em laço: é um "é aqui", não um alerta piscando. */
.c-halo{fill:none;stroke:var(--sol);stroke-width:2;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .carta .anima .c-halo{animation:sinal 1.1s cubic-bezier(.22,1,.36,1) 1.35s 1 both}
}
@keyframes sinal{
  from{opacity:.75;r:7}
  to{opacity:0;r:26}
}

/* Os tempos a pé contam ao entrar na tela: a página fala em distância, e o número
   chegando é o que liga a lista à tese. Sem contagem, o valor já nasce correto. */
.distancias .tempo{transition:color .3s ease}
.distancias li.contando .tempo{color:var(--sol)}

/* ---------- barra de consulta ---------- */
.consulta{background:var(--mata);color:var(--tinta-clara);padding:40px 0}
.consulta h2{font-size:1.6rem;color:#fff;margin-bottom:4px}
.consulta form{display:grid;gap:18px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo{display:grid;gap:7px}
.campo.cheio{grid-column:1/-1}
.campo label{font-size:.88rem;font-weight:500;color:var(--tinta-clara-2)}
.campo input,.campo select{width:100%;min-height:54px;padding:13px 15px;border-radius:var(--r-peq);border:1.5px solid transparent;background:#fff;color:var(--tinta);font:500 1rem var(--texto);appearance:none;-webkit-appearance:none}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315231f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.campo input:focus,.campo select:focus{border-color:var(--sol);outline:none}
.consulta .nota{font-size:.9rem;color:var(--tinta-clara-2);margin-top:14px}
.erro{color:#ffc46b;font-weight:500;font-size:.93rem;min-height:1.3em}
.erro:empty{min-height:0}
@media (min-width:980px){
  .consulta form{grid-template-columns:auto auto 1fr;align-items:end;gap:28px}
  .consulta form > .btn{justify-self:start}
  .consulta h2{grid-column:1/-1;margin-bottom:-4px}
  .campos{grid-template-columns:1fr 1fr 1fr}
  .campo.cheio{grid-column:auto}
  .consulta .erro{grid-column:1/-1}
}

/* ---------- avaliações ---------- */
.notas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;list-style:none;padding:0}
.notas li{background:#fff;border:1px solid var(--linha);border-radius:999px;padding:9px 18px;font-weight:600;font-size:.95rem}
.grade-aval{display:grid;gap:16px}
@media (min-width:860px){.grade-aval{grid-template-columns:repeat(3,1fr)}}
.aval{margin:0;background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:26px;display:grid;gap:14px;align-content:start}
.aval .estrelas{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--sol-tinta)}
.aval .estrelas svg{width:18px;height:18px}
.aval blockquote{margin:0;font-size:1.02rem}
.aval cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--tinta-2)}

/* ---------- suítes ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-16px 0 32px}
.filtros p{font-weight:500;color:var(--tinta-2);margin-right:8px;font-size:.96rem}
.chip{min-height:44px;min-width:50px;padding:0 17px;border-radius:999px;border:1.5px solid var(--linha);background:#fff;color:var(--tinta);font:600 .98rem var(--texto);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.chip:hover{border-color:#9bada4}
.chip[aria-pressed="true"]{background:var(--mata);border-color:var(--mata);color:#fff}
.suites{display:grid;gap:26px}
@media (min-width:720px){.suites{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.suites{grid-template-columns:repeat(3,1fr)}}
.suite{display:flex;flex-direction:column;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;background:#fff;scroll-margin-top:92px}
.suite[hidden]{display:none}
/* Movimento que responde a uma ação: ao filtrar, só o que acabou de entrar se anuncia. */
@media (prefers-reduced-motion:no-preference){
  .suite.entrou{animation:entrar .34s cubic-bezier(.22,1,.36,1) both}
}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* a foto nunca carrega texto: capacidade e contador moram na linha de legenda */
.gal-quadro{position:relative;background:var(--areia)}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/3}
.gal-track::-webkit-scrollbar{display:none}
.gal-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.gal-btn{position:absolute;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;border:0;background:rgba(251,250,247,.94);color:var(--tinta);cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .16s}
.gal-btn:hover{background:#fff}
.gal-btn svg{width:19px;height:19px}
.gal-btn.prev{left:10px}
.gal-btn.next{right:10px}
@media (hover:hover){.gal-btn{display:flex}}
.gal-legenda{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 24px 0;font-size:.88rem}
.gal-legenda .cap{font-weight:600;color:var(--tinta)}
.gal-conta{color:var(--tinta-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.suite-corpo{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.gal + .suite-corpo{padding-top:14px}
.suite-corpo > p:first-of-type{color:var(--tinta-2);font-size:1rem}
.ficha{list-style:none;margin:0;padding:0;display:grid;font-size:.95rem}
.ficha li{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--linha)}
.ficha dt,.ficha b{font-weight:500;color:var(--tinta-2)}
.marcas{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.marcas li{font-size:.85rem;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--mare-clara);color:var(--tinta-2)}
.marcas li.destaque{background:#f8e9cd;color:var(--sol-tinta)}
.preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--linha);font-size:.93rem;color:var(--tinta-2)}
.preco .valor{font-family:var(--display);font-size:1.4rem;color:var(--tinta);font-variant-numeric:tabular-nums}
.todas-tem{margin-top:30px;padding:22px 24px;border-radius:var(--r);background:var(--mare-clara);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.todas-tem b{font-weight:600}
.todas-tem span{color:var(--tinta-2)}

/* ---------- localização: a página fala em minutos ---------- */
.loc-grid{display:grid;gap:44px}
@media (min-width:980px){.loc-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.distancias{list-style:none;margin:28px 0 0;padding:0;display:grid}
.distancias li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-top:1px solid var(--linha)}
.distancias li:last-child{border-bottom:1px solid var(--linha)}
.distancias .lugar{font-weight:500}
.distancias .tempo{font-family:var(--display);font-size:1.45rem;color:var(--sol-tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.distancias .tempo small{font-family:var(--texto);font-size:.88rem;font-weight:500;color:var(--tinta-2);margin-left:5px}
.endereco{margin-top:24px;font-size:.95rem;color:var(--tinta-2);display:grid;gap:8px}
.mapa-caixa{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--mare);display:grid;place-items:center;text-align:center;padding:28px;border:1px solid var(--linha)}
.mapa-caixa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-in{display:grid;gap:14px;justify-items:center;max-width:300px}
.mapa-in strong{font-family:var(--display);font-weight:400;font-size:1.25rem}
.mapa-caixa .btn{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linha)}
.mapa-caixa .btn:hover{background:var(--tinta);color:#fff}
.loc-fotos{display:grid;gap:24px}

/* ---------- como chegar ---------- */
.rotas{display:grid;gap:12px;max-width:860px}
.rota{border:1px solid var(--linha);border-radius:var(--r);background:#fff;overflow:hidden}
.rota[open]{border-color:#b6c6bd}
.rota summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;min-height:68px}
.rota summary::-webkit-details-marker{display:none}
.rota summary h3{font-size:1.2rem}
.rota summary small{display:block;font:400 .92rem var(--texto);color:var(--tinta-2);margin-top:5px}
.seta{flex:none;width:22px;height:22px;color:var(--sol-tinta);transition:transform .22s cubic-bezier(.22,1,.36,1)}
details[open] > summary .seta{transform:rotate(180deg)}
.passos{margin:0;padding:0 22px 24px;list-style:none;counter-reset:p;display:grid;gap:16px}
.passos li{counter-increment:p;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.passos li::before{content:counter(p);width:32px;height:32px;border-radius:50%;background:var(--mata);color:#fff;display:grid;place-items:center;font:600 .92rem var(--texto)}
.rota .meta{padding:0 22px 22px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.92rem;color:var(--tinta-2)}
.aviso{margin-top:22px;max-width:860px;padding:22px 24px;border-radius:var(--r);background:#fdf6e8;border:1px solid #ecd9ae;display:grid;gap:9px}
.aviso strong{font-family:var(--display);font-weight:400;font-size:1.15rem}
.aviso p{color:#5d4e36}

/* ---------- o que fazer ---------- */
.fazer{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
@media (min-width:820px){.fazer{grid-template-columns:1fr 1fr}}
.fazer article{background:var(--mata);padding:30px;display:grid;gap:11px;align-content:start}
.laranja .fazer article{background:var(--laranja-fundo)}
.laranja .fazer .meta{color:#f9e0ca}
.laranja .mais svg{color:#ffd2a0}
.fazer h3{font-size:1.3rem}
.fazer .meta{font-size:.9rem;color:var(--tinta-clara-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mais{margin-top:30px}
.mais a{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:9px;min-height:44px}
.mais svg{width:19px;height:19px;color:var(--sol);transition:transform .2s ease}
.mais a:hover svg{transform:translateX(4px)}

/* ---------- dúvidas ---------- */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:var(--r-peq)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:19px 22px;min-height:62px;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq .resposta{padding:0 22px 22px;color:var(--tinta-2);display:grid;gap:10px;max-width:68ch}

/* ---------- chamada final ---------- */
.final{background:var(--mata);color:var(--tinta-clara);padding:88px 0}
.final-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.final-grid{grid-template-columns:1fr 1fr;gap:64px}}
.final h2{color:#fff;max-width:14ch}
.final .texto{display:grid;gap:24px}
.final p{font-size:1.12rem;max-width:40ch}
.final .moldura .quadro{aspect-ratio:3/2}
.final .acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- rodapé ---------- */
.foot{background:var(--mata-alt);color:var(--tinta-clara-2);padding:64px 0 108px;font-size:.96rem}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:var(--sol);text-decoration:underline}
.foot-grid{display:grid;gap:34px}
@media (min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h3{font-family:var(--texto);font-size:.95rem;font-weight:600;letter-spacing:.01em;color:#fff;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot ul a{display:inline-flex;min-height:44px;align-items:center}
.foot .logo-f{background:var(--papel);border-radius:var(--r-peq);padding:11px 15px;display:inline-block;margin-bottom:16px}
.foot .legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:.86rem;color:#86a097;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}

/* ---------- botão flutuante ---------- */
/* Só aparece depois do hero, que já tem um botão de WhatsApp maior.
   Sem JS continua visível: a classe só adianta o estado, nunca o esconde de vez. */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:50;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(10,39,36,.55);transition:background .18s ease,transform .22s cubic-bezier(.22,1,.36,1),opacity .22s ease}
.wa-float:hover{background:var(--wa-escuro);color:#fff}
.js .wa-float{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
.js .wa-float.visivel{opacity:1;transform:none;pointer-events:auto}
.js .wa-float.visivel:hover{transform:translateY(-2px)}
.wa-float svg{width:29px;height:29px}

/* ---------- página da ilha ---------- */
.capa-interna{padding:56px 0 0}
.capa-interna h1{max-width:16ch}
.capa-interna .lead{margin-top:20px;max-width:52ch}
.capa-grid{display:grid;gap:40px;align-items:start}
@media (min-width:980px){.capa-grid{grid-template-columns:1.1fr .9fr;gap:64px}}
.essencial{margin:0;display:grid}
.essencial > div{display:grid;gap:4px;padding:15px 0;border-top:1px solid var(--linha)}
.essencial > div:last-child{border-bottom:1px solid var(--linha)}
.essencial dt{font-family:var(--display);font-size:1.05rem}
.essencial dd{margin:0;color:var(--tinta-2);font-size:.98rem}
.indice{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;list-style:none;padding:0}
.indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border-radius:999px;background:#fff;border:1px solid var(--linha);color:var(--tinta);font-weight:500;font-size:.95rem;text-decoration:none}
.indice a:hover{background:var(--mata);border-color:var(--mata);color:#fff}
.cartoes{display:grid;gap:14px}
@media (min-width:760px){.cartoes{grid-template-columns:1fr 1fr}}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start;scroll-margin-top:92px}
.cartao h3{font-size:1.22rem}
.cartao p{color:var(--tinta-2)}
.cartao .antes{font-size:.88rem;color:var(--tinta-2)}
.cartao.aqui{border-color:var(--sol);background:#fdf8ef}

/* passeios: lista com filete, para a página não ser três grades de cartão iguais */
.entradas{display:grid;gap:0;max-width:72ch}
.entrada{display:grid;gap:8px;padding:26px 0;border-top:1px solid var(--linha)}
.entrada:last-child{border-bottom:1px solid var(--linha)}
.entrada h3{font-size:1.25rem}
.entrada p{color:var(--tinta-2)}
@media (min-width:860px){
  .entradas{max-width:none}
  .entrada{grid-template-columns:15rem 1fr;gap:8px 40px;align-items:baseline}
  .entrada h3{grid-row:span 2}
  .entrada p{max-width:62ch}
}

/* pontos históricos: verbetes dentro do texto, não cartões */
.verbetes{margin-top:40px;display:grid;gap:28px;max-width:72ch;padding-top:28px;border-top:1px solid var(--linha)}
@media (min-width:860px){.verbetes{grid-template-columns:1fr 1fr;gap:32px 48px;max-width:none}}
.verbete{display:grid;gap:8px;align-content:start}
.verbete h3{font-size:1.18rem}
.verbete p{color:var(--tinta-2);max-width:54ch}
.prosa{max-width:66ch;display:grid;gap:16px;color:var(--tinta-2)}
.prosa h3{color:var(--tinta);margin-top:12px}
.lista{margin:0;padding-left:22px;display:grid;gap:9px;color:var(--tinta-2)}
.lista li::marker{color:var(--sol)}

@media (max-width:719px){
  .sec{padding:64px 0}
  .hero{padding-top:44px}
  .carta{margin-top:48px}
  .final{padding:64px 0}
  .wrap{padding:0 20px}
}
@media (max-width:559px){
  .hero .acoes,.final .acoes{display:grid;gap:10px}
  .hero .acoes .btn,.final .acoes .btn{width:100%}
}

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