*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:'Cormorant fallback';src:local('Georgia'),local('Times New Roman');size-adjust:87.7%;ascent-override:105%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:'Inter fallback';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');size-adjust:102.3%;ascent-override:95%;descent-override:24%;line-gap-override:0%}

/* ============================================================
   Estrutura e tipografia da voltaskai.endover.ee, paleta neutra:
   off-white e preto. Sem acento de cor.
   ============================================================ */
:root{
  --fundo:#F1EFEA;    /* off-white, o chão da página */
  --branco:#FFFFFF;
  --painel:#E7E4DE;   /* blocos de respiro e as caixas do topo */
  --tinta:#1A1A18;    /* o preto da página, levemente quente */
  --texto:#4A4844;    /* texto corrido */
  --suave:#67645E;    /* rótulos e legendas: 5,13:1 sobre --fundo, 4,65:1 sobre --painel (o pior dos 3 fundos claros) */
  --tenue:#D6D2CB;  --barra:76px;    /* fios e bordas */
  --margem:max(22px,calc((100vw - 1280px)/2));
}
html{scroll-behavior:smooth;background:var(--fundo)}
body{background:var(--fundo);color:var(--texto);
  font-family:'Inter','Inter fallback',system-ui,sans-serif;font-weight:400;
  font-size:15px;line-height:1.72;letter-spacing:.1px;-webkit-font-smoothing:antialiased;
  padding-bottom:76px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- tipografia, regra da Volta: rótulo abre, título aperta ---------- */
.rotulo{display:inline-block;font-family:'Inter','Inter fallback',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--suave)}

/* título serifado de dois tons: a primeira metade em tinta, a segunda em itálico mais claro */
.titulo{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:400;letter-spacing:-.02em;line-height:1.17;color:var(--tinta);
  font-size:clamp(33px,4.6vw,62px);margin-top:18px;text-wrap:balance;max-width:20ch}
.titulo em{font-style:italic;font-weight:300;color:var(--suave)}

p{max-width:52ch;color:var(--texto)}
.lead{font-size:clamp(15px,1.25vw,17px);line-height:1.68;max-width:44ch}

/* ---------- estrutura ---------- */
section{padding:clamp(72px,9.5vw,132px) var(--margem)}
.branco{background:var(--branco)}
.painelBg{background:var(--painel)}
.miolo{max-width:1280px;margin:0 auto}

/* ---------- o hero nao tem topo: a placa da marca e as duas pilulas sairam a
   pedido do dono. O unico CTA permanente e a barra fixa do rodape. ---------- */
footer .logo{display:block;width:150px;height:auto;aspect-ratio:200/80;
  margin:0 auto 26px;color:var(--painel)}
/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;gap:13px;font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);
  border-bottom:1px solid var(--tenue);padding-bottom:9px;transition:gap .3s,border-color .3s}
.cta::after{content:"→";font-size:13px;letter-spacing:0}
.cta:hover{gap:19px;border-color:var(--tinta)}
.cta.claro{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.cta.claro:hover{border-color:#fff}
.botao{display:inline-block;background:var(--tinta);color:#fff;padding:18px 34px;border-radius:999px;
  font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  transition:background .25s,transform .25s}
.botao:hover{background:#000;transform:translateY(-2px)}

/* barra fixa: o CTA que nunca sai da tela */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tinta);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--margem)}
.barra p{color:rgba(241,239,234,.7);font-size:12px;max-width:none;margin:0}
.barra .botao{padding:14px 26px}
@media (max-width:720px){
  .barra{padding:11px 16px}.barra p{display:none}
  .barra .botao{width:100%;text-align:center}
}

/* ---------- hero: o título dentro da imagem ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--tinta);padding:0 0 clamp(230px,33vh,340px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.hero-veu{position:absolute;inset:0;z-index:2;
  background:
    /* faixa do topo: preto que abre para transparente antes da metade da tela.
       E ela que separa o titulo dos galhos claros da figueira. */
    linear-gradient(180deg,rgba(10,8,6,.6) 0%,rgba(10,8,6,.42) 18%,rgba(10,8,6,.16) 38%,rgba(10,8,6,0) 58%),
    radial-gradient(76% 56% at 50% 40%,rgba(28,20,17,.5) 0%,rgba(28,20,17,.3) 62%,rgba(28,20,17,0) 100%),
    linear-gradient(180deg,rgba(28,20,17,0) 0%,rgba(28,20,17,.04) 32%,rgba(28,20,17,.12) 62%,rgba(28,20,17,.5) 100%)}
.hero-txt{position:relative;z-index:2;text-align:center;padding:0 var(--margem);max-width:1180px}
.hero h1{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:300;font-size:clamp(38px,5.9vw,93px);line-height:.9;
  letter-spacing:-.05em;color:rgba(255,255,255,.95);text-transform:uppercase;
  text-shadow:0 2px 44px rgba(20,14,11,.4)}
.hero h1 em{font-style:italic;font-weight:300;letter-spacing:-.035em}
/* -25% no titulo do hero, so no desktop: o clamp base continua valendo abaixo
   de 1000px, entao o mobile nao muda. */
@media (min-width:1000px){.hero h1{font-size:clamp(38px,4.43vw,70px)}}
/* ---------- promo: o card entre o hero e a secao seguinte.
   Mecanismo medido na Volta: nao e absoluto. Vive num container com margem
   negativa em cima (puxa para dentro do hero) e embaixo (puxa a secao
   seguinte para cima, sobrepondo). E o que faz ele juntar dos dois lados. */
.promo{position:relative;z-index:6;
  margin-top:clamp(-300px,-27vh,-170px);
  margin-bottom:clamp(-130px,-11vh,-60px);
  padding:0 var(--margem);display:grid;gap:0}
@media (min-width:1000px){.promo{grid-template-columns:1.06fr .94fr}}
.promo-card{background:var(--painel);border-radius:12px 0 0 12px;
  padding:clamp(40px,5vw,74px) clamp(24px,2.6vw,37px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(18px,2vw,26px)}
.promo-card h2{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:400;font-size:clamp(26px,2.9vw,39px);line-height:1.05;letter-spacing:-.02em;
  color:var(--tinta);max-width:16ch}
.promo-card p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.39;font-weight:450;
  color:var(--texto);max-width:34ch;text-align:center;margin:0}
.promo-card .botao{padding:15px 26px;font-size:12px;letter-spacing:.05em}
.promo-img{width:100%;height:100%;object-fit:cover;border-radius:0 12px 12px 0;
  min-height:clamp(220px,26vw,380px)}
@media (max-width:999px){
  .promo{margin-top:clamp(-190px,-20vh,-120px);margin-bottom:clamp(-90px,-8vh,-44px);
    padding:0 12px}
  .promo-card{border-radius:12px 12px 0 0}
  .promo-img{border-radius:0 0 12px 12px;min-height:200px}
}

.hero-rolar{position:relative;z-index:2;margin-top:clamp(34px,5vh,58px);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(20,14,11,.9),0 1px 14px rgba(20,14,11,.7)}
.hero-rolar::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)}

/* ---------- manifesto: titulo grande com varredura de gradiente.
   Mecanismo medido na Volta: o texto e transparente e o preenchimento vem de um
   linear-gradient com background-clip:text. O gradiente termina em transparente,
   e deslocar a posicao dele faz o texto aparecer varrendo. ---------- */
.manif{padding-top:clamp(140px,15vw,215px);padding-bottom:clamp(70px,9vw,124px)}
.varre{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:400;font-size:clamp(31px,3.7vw,56px);line-height:1.02;letter-spacing:-.03em;
  text-align:center;margin:0 auto;max-width:none;padding-bottom:8px;
  background-image:linear-gradient(160deg,
    var(--tinta) 0%, var(--tinta) 12%, #55514B 30%, #8A857D 46%,
    rgba(0,0,0,0) 64%, rgba(0,0,0,0) 100%);
  background-size:260% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:background-position 1.5s cubic-bezier(.22,.61,.36,1)}
.varre.in{background-position:0 0}
/* no mobile as quebras fixas apertariam demais: o texto volta a fluir sozinho */
@media (max-width:640px){.varre .q{display:none}.varre{max-width:20ch}}
@media (prefers-reduced-motion:reduce){
  .varre{transition:none;background-position:0 0}
}

/* ---------- capítulo de cidade ---------- */
.cap{padding-top:clamp(66px,8.5vw,116px);padding-bottom:clamp(66px,8.5vw,116px)}
.cap-cab{display:grid;gap:clamp(18px,2.6vw,40px);margin-bottom:clamp(32px,4.6vw,58px)}
@media (min-width:960px){
  .cap-cab{grid-template-columns:1.02fr .98fr;align-items:end;column-gap:clamp(40px,6vw,100px)}
}
.cidade{margin-top:0;font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-weight:300;
  font-size:clamp(50px,8.4vw,116px);line-height:.96;letter-spacing:-.025em;color:var(--tinta)}
.frase{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-style:italic;
  font-weight:300;font-size:clamp(22px,2.7vw,36px);line-height:1.24;letter-spacing:-.015em;
  color:var(--tinta);margin-bottom:15px;max-width:22ch}
.cap-cab p{font-size:14.5px}

/* ---------- seletor de tipo de cerimonia ---------- */
.seletor{margin-top:clamp(26px,3vw,42px);text-align:center}
.seletor-tit{display:block;font-size:11px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--suave);margin-bottom:13px}
.toggle{display:inline-flex;gap:3px;border:1px solid var(--tenue);border-radius:999px;padding:3px}
.toggle button{border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--suave);padding:11px 22px;border-radius:999px;
  transition:background .25s,color .25s}
.toggle button[aria-selected="true"]{background:var(--tinta);color:#fff}
.toggle button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

/* ---------- escolha da cidade: um capitulo por vez.
   Os cinco capitulos empilhados faziam a pagina passar de 22.000px no desktop.
   Sem JS nada e escondido, entao o conteudo nunca fica inacessivel. ---------- */
.escolha{padding:clamp(58px,7vw,92px) var(--margem) 0;text-align:center}
.escolha .titulo{margin:0 auto}
.cidades{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:clamp(26px,3vw,40px)}
.cidades button{border:1px solid var(--tenue);background:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto);padding:14px 24px;border-radius:999px;
  transition:background .25s,color .25s,border-color .25s}
.cidades button[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.cidades button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
@media (max-width:520px){.cidades button{padding:12px 17px;font-size:11px}}
.js section.cap.oculta{display:none}
/* com uma cidade por vez a alternancia de fundo entre capitulos perde sentido:
   cada cidade apareceria com um fundo diferente. Todas ficam no mesmo. */
.js section.cap.branco{background:var(--fundo)}

/* ---------- cards escalonados: imagem, contador e titulo embaixo ---------- */
/* ---------- pilha de fotos ----------
   Mobile: lista simples, foto com legenda embaixo, escalonada.
   Desktop: o padrao medido na voltaskai (scroll-cards). Coluna esquerda fixa
   com o titulo em cima e, no rodape da coluna, a legenda da foto que esta no
   centro da tela; entre as colunas uma linha de 1px cujo preenchimento sobe
   conforme as fotos passam; as fotos rolam normalmente a direita. */
.pilha{margin-top:clamp(34px,4.2vw,62px)}
.pilha-lado{margin-bottom:clamp(32px,4.6vw,58px)}
.pilha-legendas{display:none}
.pilha-varre{text-align:left;margin:0;max-width:14ch;
  font-size:clamp(50px,8.4vw,116px);line-height:.96}
.pilha-frase,.pilha-texto{font-size:14.5px;line-height:1.7;color:var(--texto);max-width:48ch}
.pilha-frase{font-style:italic;margin-top:clamp(18px,2.6vw,28px);color:var(--tinta)}
.pilha-texto{margin-top:11px}
.pilha-fotos{display:flex;flex-direction:column;gap:clamp(50px,6vw,96px)}
/* os cards escalonam no mobile: um encosta a esquerda, o proximo a direita. */
.cartao{width:min(100%,var(--larg,80%))}
.cartao.dir{margin-left:auto}
.cartao img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.cartao .num,.pilha-legenda .num{margin:clamp(18px,2.2vw,28px) 0 clamp(8px,1vw,12px);
  font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--suave)}
.cartao .num i,.pilha-legenda .num i{font-style:normal;color:var(--texto)}
.cartao h3,.pilha-legenda h4{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:400;
  font-size:clamp(24.96px,24.05px + .233vw,27.78px);
  line-height:clamp(29.12px,28.96px + .042vw,29.63px);
  letter-spacing:-.02em;color:var(--tinta);max-width:18ch}

/* o filtro so age com o JS vivo; sem ele todos os cards aparecem. Vale para os
   dois lugares onde a legenda existe: dentro da foto e na barra lateral. */
.js .pilha[data-ativa="ar"] .cartao[data-cat="in"],
.js .pilha[data-ativa="in"] .cartao[data-cat="ar"],
.js .pilha[data-ativa="ar"] .pilha-legenda[data-cat="in"],
.js .pilha[data-ativa="in"] .pilha-legenda[data-cat="ar"]{display:none}

@media (min-width:1000px){
  .pilha{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:var(--calha,clamp(76px,8.4vw,148px));align-items:start;position:relative}
  /* a coluna termina acima da barra fixa do rodape: sem descontar a barra, a
     legenda encostava nela (medido: -4px de folga em 1440x900). */
  .pilha-lado{display:flex;flex-direction:column;justify-content:space-between;
    position:sticky;top:clamp(56px,7vh,88px);
    height:calc(100vh - clamp(56px,7vh,88px) - var(--barra) - clamp(150px,18.4vh,210px))}
  /* trilho e preenchimento: dois pseudo-elementos, como na referencia. O JS so
     escreve --progresso; quem anima e a transicao do CSS. */
  .pilha-lado::before,.pilha-lado::after{content:"";position:absolute;width:1px;
    top:0;right:calc(var(--calha,clamp(76px,8.4vw,148px)) / -2)}
  .pilha-lado::before{height:100%;background:var(--tenue)}
  .pilha-lado::after{height:var(--progresso,0%);background:var(--tinta);
    transition:height .8s cubic-bezier(.77,0,.175,1)}
  .pilha-lado{margin-bottom:0}
  .pilha-varre{font-size:clamp(46px,4.9vw,76px);line-height:.98}
  /* as legendas ficam empilhadas no rodape da coluna: a ativa sobe para o lugar,
     as ja passadas saem por cima. */
  .pilha-legendas{display:block;position:relative;min-height:clamp(150px,17vh,190px);
    transition:opacity .4s linear}
  .pilha-legenda{position:absolute;left:0;right:0;bottom:0;opacity:0;
    transform:translateY(110px) translateZ(0);
    transition:opacity .8s cubic-bezier(.77,0,.175,1),transform .8s cubic-bezier(.77,0,.175,1)}
  .pilha-legenda.atual{opacity:1;transform:translateZ(0)}
  .pilha-legenda.passou{opacity:0;transform:translateY(-110px) translateZ(0)}
  .pilha-legenda .num{margin-top:0}
  .pilha-legenda h4{max-width:none;font-size:clamp(28px,2.4vw,34px);line-height:1.14}
  /* no desktop quem mostra a legenda e a barra lateral */
  .cartao-txt{display:none}
  .cartao{width:100%}
  .cartao.dir{margin-left:0}
  .cartao img{aspect-ratio:814/525;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .pilha-legenda{transition:none}
  .pilha-lado::after{transition:none}
}

/* botao de fecho do capitulo */
.fecho-cap{margin-top:clamp(34px,4vw,58px);display:flex;justify-content:center}

/* caixa da foto que ainda não existe */
.falta{width:100%;aspect-ratio:3/2;border:1px solid var(--tenue);
  border-radius:10px;
  background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(26,26,24,.05) 10px,rgba(26,26,24,.05) 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:26px;text-align:center}
.falta.larga16{aspect-ratio:16/10}
.falta .tag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);font-weight:500}
.falta .nome{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(19px,2vw,27px);line-height:1.18;color:var(--tinta);max-width:20ch}
.falta .obs{font-size:11.5px;color:var(--suave);max-width:30ch;line-height:1.5}

/* ---------- duas colunas ---------- */
.duplo{display:grid;gap:clamp(26px,4vw,68px);align-items:center}
/* foto a esquerda, texto a direita: a ordem do HTML e texto-depois-foto, entao
   quem inverte e o order, nao a marcacao. */
@media (min-width:960px){
  .duplo{grid-template-columns:.6fr 1fr}
  .duplo img{order:1}
  .duplo > div{order:2}
}
.duplo img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px}

/* ---------- tudo num so lugar: texto preso a esquerda e fotos correndo ao lado.
   Sem JS ou com movimento reduzido, vira uma tira de arrastar comum. ---------- */
.horiz{padding:0;position:relative;background:var(--branco)}
.horiz-fixo{min-height:auto;padding:clamp(72px,9vw,124px) 0;display:flex;align-items:center;overflow:hidden}
.horiz-grade{display:grid;gap:clamp(28px,3.4vw,48px);width:100%;align-items:center}
@media (min-width:1000px){
  .horiz-grade{grid-template-columns:minmax(270px,31%) 1fr;gap:clamp(36px,4vw,64px)}
}
.horiz-txt{padding-inline:var(--margem)}
@media (min-width:1000px){.horiz-txt{padding-right:0}}
.horiz-janela{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;padding-inline:var(--margem)}
.horiz-janela::-webkit-scrollbar{display:none}
.horiz.laco .horiz-janela{padding-right:0}   /* o laco NAO tranca mais o scroll: anda sozinho e aceita o dedo */
@media (min-width:1000px){.horiz-janela{padding-left:0}}
.horiz-trilho{display:flex;gap:clamp(13px,1.6vw,22px)}
.horiz-trilho figure{flex:0 0 clamp(228px,21vw,322px);margin:0;position:relative;
  border-radius:10px;overflow:hidden}
.horiz-trilho img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.horiz-trilho figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,0) 46%,rgba(20,18,16,.72) 100%)}
.horiz-trilho figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff}
.horiz-trilho .serv{display:block;font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(20,18,16,.85);margin-bottom:5px}
.horiz-trilho .quem{display:block;font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:400;font-size:clamp(19px,1.8vw,24px);line-height:1.12;letter-spacing:-.02em;
  text-shadow:0 1px 14px rgba(20,18,16,.5)}

/* ---------- prova ---------- */
.prova{text-align:center}
.prova .titulo{margin-left:auto;margin-right:auto;max-width:none}
.prova p{margin:20px auto 0}
.selos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(11px,2vw,24px);margin-top:clamp(34px,4.2vw,52px)}
/* Os selos de 2025 e 2026 sao placas PRETAS por desenho; os de 2019 a 2024 sao
   louros claros. O sepia tingia o branco embutido dos claros e o opacity .62
   lavava o preto dos escuros, que apareciam como cinza sujo sobre o branco da
   secao. Sem os dois, o preto fica preto e o cinza fica cinza. */
.selos img{height:56px;width:auto;filter:grayscale(1) contrast(1.06)}

/* ---------- fechamento ---------- */
.fim{background:var(--tinta);color:#fff;padding:0;overflow:hidden}
.fim-grade{display:grid;min-height:80svh}
@media (min-width:960px){.fim-grade{grid-template-columns:1fr .76fr;align-items:center}}
.fim-txt{padding:clamp(76px,9.5vw,124px) var(--margem);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:24px;order:1}
.fim .titulo{margin-left:auto;margin-right:auto}
.fim-txt p{margin-left:auto;margin-right:auto}
/* na seção escura o botão inverte: fundo claro, texto escuro */
.fim .botao{background:var(--branco);color:var(--tinta);border:1px solid var(--branco)}
.fim .botao:hover{background:transparent;color:var(--branco)}
.fim .titulo{color:#fff;margin-top:16px}
.fim .titulo em{color:var(--painel)}
.fim .rotulo{color:rgba(241,239,234,.55)}
.fim p{color:rgba(241,239,234,.68)}
.fim-img{order:2;width:100%;height:100%;object-fit:cover;aspect-ratio:2/3;filter:grayscale(1) contrast(1.04)}
@media (max-width:959px){.fim-img{aspect-ratio:4/5}}

/* ---------- rodapé ---------- */
footer{background:var(--tinta);color:rgba(241,239,234,.55);text-align:center;
  padding:60px var(--margem) 70px;border-top:1px solid rgba(241,239,234,.12)}
footer p{color:rgba(241,239,234,.5);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;max-width:none;margin:0 auto}
footer .flinks{margin-top:24px}
footer .flinks a{border-bottom:1px solid rgba(241,239,234,.24);padding-bottom:3px}
footer .flinks .sep{margin:0 11px}
footer .flgpd{margin-top:22px;max-width:56ch;font-size:11.5px;line-height:1.7;
  letter-spacing:0;text-transform:none}
footer .fcopy{margin-top:15px;font-size:10px}

/* revelação */
.rev{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}


/* ---------- peças próprias das páginas de cidade ---------- */
.topo{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:20px var(--margem);background:var(--fundo)}
.topo a{font-family:'Inter',system-ui,sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta);text-decoration:none}
.topo a:hover{text-decoration:underline}
.topo img{display:block;width:132px;height:auto}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(30px,4.2vw,52px);line-height:1.1;letter-spacing:-.02em;
  text-transform:none;margin:0;max-width:19ch}
.hero .hero-sub{font-family:'Inter',system-ui,sans-serif;font-size:clamp(14px,1.5vw,17px);
  line-height:1.6;margin:18px 0 0;max-width:46ch;color:#fff;opacity:.92}
.texto{padding:clamp(60px,7vw,104px) 0;background:var(--fundo)}
.texto .miolo{max-width:760px}
.texto h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.4vw,40px);line-height:1.18;margin:46px 0 14px;color:var(--tinta)}
.texto h2:first-child{margin-top:0}
.texto h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.4vw,27px);margin:34px 0 10px;color:var(--tinta)}
.texto h4{font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:500;
  letter-spacing:.02em;margin:24px 0 8px;color:var(--tinta)}
.texto p,.texto li{font-family:'Inter',system-ui,sans-serif;font-size:16.5px;line-height:1.78;
  color:var(--texto);margin:0 0 18px}
.texto ul{margin:0 0 22px;padding-left:20px}
.texto li{margin:0 0 9px}
.cidades-links{padding:34px 0;background:var(--painel)}
.cidades-links .rotulo{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:0 0 10px}
.cidades-links p{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(19px,2.2vw,25px);
  line-height:1.6;margin:0;color:var(--tinta)}
.cidades-links a{color:var(--tinta);text-underline-offset:5px}
.cidades-links strong{font-weight:400;color:var(--suave)}
.faq{padding:clamp(52px,6vw,88px) 0;background:var(--branco)}
.faq .miolo{max-width:820px}
.faq h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.4vw,40px);margin:0 0 30px;color:var(--tinta)}
.pergunta{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--tenue)}
.pergunta:last-child{border:0;margin:0;padding:0}
.pergunta h3{font-family:'Inter',system-ui,sans-serif;font-size:17px;font-weight:500;
  margin:0 0 8px;color:var(--tinta)}
.pergunta p{font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.75;
  color:var(--texto);margin:0}
.enderecos{padding:clamp(46px,5vw,72px) 0;background:var(--painel)}
.enderecos .miolo{max-width:980px}
.enderecos .rotulo{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:0 0 22px}
.enderecos-grade{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.endereco{font-style:normal;font-family:'Inter',system-ui,sans-serif;font-size:15.5px;
  line-height:1.7;color:var(--texto)}
.endereco strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:24px;color:var(--tinta);margin:0 0 6px}
.endereco a{color:var(--tinta);text-underline-offset:4px}
.rodape{padding:40px var(--margem) 54px;background:var(--fundo);border-top:1px solid var(--tenue);
  font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:2;color:var(--suave)}
.rodape a{color:var(--suave)}
@media (max-width:640px){.topo{padding:16px var(--margem)}.topo img{width:112px}}