/* ------------------------------------------------------------- tipografia
   Fontes AUTO-HOSPEDADAS. Até 22/07/2026 cada página abria duas conexões para
   o Google (preconnect em fonts.googleapis.com e fonts.gstatic.com, mais a
   folha de estilo) dentro do caminho crítico. Num site cujo valor é o capricho
   estético, isso deixava a identidade tipográfica inteira na mão de terceiro:
   Google lento, bloqueado ou fora do ar e o site abre em Georgia e system-ui.
   Também é o que faz o visitante europeu ser exposto ao Google sem consentir —
   servir a fonte do próprio domínio elimina a questão em vez de administrá-la.

   Os arquivos vêm do CDN oficial (fonts.gstatic.com), sem nenhuma modificação,
   nos subconjuntos latin e latin-ext. Ficam versionados em assets/fontes/ e o
   build os copia para publico/fontes/ (ver copiar_fontes()).
   Licença: SIL Open Font License 1.1 nas duas famílias — auto-hospedar e
   redistribuir é expressamente permitido.

   A faixa em font-weight NÃO significa "baixamos pesos a mais": Cormorant
   Garamond romano e Archivo chegam como UM arquivo variável cada, e a faixa
   declarada é a que o arquivo carrega de verdade (lida no fvar: 300–700 e
   100–900). Declarar menos não economizaria um byte e ainda faria o navegador
   sintetizar negrito falso nos pesos que ele julgasse fora da faixa.
   O itálico do Cormorant é arquivo estático de peso 400 — o único itálico que
   o site usa (.citacao).

   O unicode-range é cópia literal da folha do Google, e é ele que faz o
   latin-ext só ser baixado se a página tiver um caractere de lá. Em português
   isso praticamente nunca acontece (á, ã, ç, é, õ vivem todos em U+0000-00FF),
   então o custo real de rede são os arquivos `-latin`. */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
  font-display:swap;
  src:url(fontes/cormorant-garamond-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
  font-display:swap;
  src:url(fontes/cormorant-garamond-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:italic;font-weight:400;
  font-display:swap;
  src:url(fontes/cormorant-garamond-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:italic;font-weight:400;
  font-display:swap;
  src:url(fontes/cormorant-garamond-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;
  font-display:swap;
  src:url(fontes/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;
  font-display:swap;
  src:url(fontes/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --paper:#FAF6EF; --cream:#F2E7D3; --green:#1D3B2A; --green-deep:#12261B;
  --gold:#C8A24A; --gold-deep:#76591F; --grape:#4A2A54; --wine:#9B1B45;
  --wine-deep:#7A1435; --ink:#16140F;
  --n200:#E7DFD1; --n300:#D3C8B6; --n400:#B0A491; --n600:#6A6153; --n700:#4C463C;
  /* Contorno de CONTROLE — separado de --n300 de propósito. A WCAG 1.4.11 exige
     3:1 para o que identifica um controle, e --n300 dá 1,65:1 contra o branco do
     campo e 1,53:1 contra o papel: num monitor barato, com brilho baixo ou visão
     reduzida, o campo vazio some do fundo. Não reaproveitar --n600 (6,09:1)
     aqui: cumpriria a norma com folga e faria o formulário gritar numa página
     deliberadamente clara. #8F8878 dá ~3,1:1 e preserva o tom. */
  --contorno:#8F8878;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Escala de títulos em DOIS tokens (Bloco B): display para heroes/capas/fichas,
     h1 padrão para o resto. Nenhuma Cormorant abaixo de 24px. */
  --fs-h1:clamp(34px,5.4vw,52px);
  --fs-display:clamp(44px,6.4vw,76px);
}
*{box-sizing:border-box}
/* scroll-padding no scrollport, e não scroll-margin no alvo: a folga passa a
   valer para TUDO que o navegador rola até a tela — inclusive o elemento que
   acabou de receber foco pelo teclado, que não tem id. Era esse o buraco: o
   anel de foco de 5 elementos ficava 100% coberto pela barra fixa de baixo,
   entre eles o botão que fecha a venda (auditoria de 21/07/2026, item 10).
   Topo = cabeçalho grudado; base = barra fixa do celular. */
html{scroll-behavior:smooth;scroll-padding-top:132px;scroll-padding-bottom:84px}
body{margin:0;background:var(--paper);color:var(--n700);
  font:400 17px/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
/* Toda foto passou a sair dentro de <picture> (WebP na frente do JPEG).
   `display:contents` apaga o <picture> da árvore de layout: a <img> volta a ser
   filha direta do container, e as dezenas de regras que dimensionam a foto
   (.momento-foto img{height:100%}, .editorial-foto img, .card-media img…)
   continuam valendo sem uma única alteração. Sem isto, cada uma delas passaria
   a medir a altura automática do <picture> em vez do container.
   ATENÇÃO ao escrever CSS novo de foto: `display:contents` conserta o LAYOUT,
   não a ÁRVORE. Seletor casa com o DOM, e no DOM a <img> é filha do <picture>.
   Portanto `.container>.foto` NÃO casa mais — use sempre descendente
   (`.container .foto`). Foi assim que .faixa-fundo>.fundo quase caiu. */
picture{display:contents}
a{color:var(--green);text-underline-offset:3px}
h1,h2,h3{color:var(--green);margin:0 0 .5em;text-wrap:balance}
h1{font:600 var(--fs-h1)/1.1 var(--serif);letter-spacing:-0.01em}
h2{font:600 clamp(25px,4.6vw,34px)/1.2 var(--serif)}
h3{font:600 19px/1.35 var(--sans)}
p{margin:0 0 1.1em;max-width:62ch;text-wrap:pretty}
/* hifenização só no texto corrido (o html já declara lang="pt-BR") */
.estreito p,.momento-txt p,.editorial-corpo p,.bloco-foto .txt p{hyphens:auto}
.over{font:700 12px/1.35 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .8em}
mark.todo{background:#FFE9A8;color:#5b4708;padding:.1em .4em;border-radius:3px;
  font-size:.92em;font-weight:500}
/* visível só para leitor de tela — mantém a hierarquia de títulos sem
   acrescentar ruído visual */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px}
.pular:focus{left:8px;top:8px;background:var(--green);color:var(--cream);
  padding:10px 16px;z-index:99;border-radius:4px}
/* Anel de foco BICOLOR. O anel vinho sozinho dava 2,00:1 contra o creme do
   fundo — abaixo do mínimo de 3:1 do WCAG — e sumia de vez sobre o verde
   escuro. Duas cores resolvem a classe inteira: qualquer que seja o fundo,
   uma das duas encosta nele com contraste. Nos blocos escuros o par se
   inverte para ouro sobre verde profundo (6,61:1, medido). */
:focus-visible{outline:2px solid var(--wine);outline-offset:2px;
  box-shadow:0 0 0 4px var(--cream)}
.escuro :focus-visible,.hero :focus-visible,.barra :focus-visible,
.tese :focus-visible,.bloco-foto :focus-visible,.rodape :focus-visible,
.faixa-fundo :focus-visible,.capa-experiencia :focus-visible,
.capa-editorial :focus-visible,.produto-apresentacao :focus-visible{
  outline-color:var(--gold);box-shadow:0 0 0 4px var(--green-deep)}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(250,246,239,.98);
  border-bottom:1px solid var(--n200);box-shadow:0 1px 0 rgba(18,38,27,.03);
  display:flex;align-items:center;gap:16px;padding:13px clamp(20px,4vw,52px);flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca::before{content:"";width:10px;height:10px;border:2px solid var(--gold-deep);border-radius:50%;
  box-shadow:7px 0 0 -2px var(--paper),7px 0 0 0 var(--gold-deep),3px 7px 0 -2px var(--paper),3px 7px 0 0 var(--gold-deep)}
/* A marca sai da Cormorant: serif abaixo de 24px perde o desenho (regra de
   escala do Bloco B). Caixa alta espaçada mantém o tom editorial. */
.marca strong{display:block;font:700 13px/1.2 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.marca small{display:block;font:400 11px/1.3 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--n600)}
.menu-btn{font:600 14px var(--sans);background:none;border:1px solid var(--n300);
  color:var(--green);padding:8px 14px;border-radius:999px;cursor:pointer}
.menu{display:none;width:100%;flex-direction:column;gap:2px;padding:8px 0 4px}
.menu.aberto{display:flex}
.menu a{font:500 15px var(--sans);text-decoration:none;padding:9px 4px;
  border-bottom:1px solid var(--n200)}
.menu a.ativo{color:var(--wine)}
@media(min-width:1080px){
  .menu-btn{display:none}
  .menu{display:flex;flex-direction:row;width:auto;gap:22px;padding:0}
  .menu a{border:0;padding:4px 0}
}
/* Único botão de destaque do cabeçalho; no celular a barra fixa já cumpre o
   papel. O seletor precisa ser `.topo .btn-topo`: com `.btn-topo` puro a regra
   empatava em especificidade com `.btn{display:inline-block}`, que vem depois
   na folha e vencia por ordem. Resultado medido: o botão aparecia no celular e
   inflava o cabeçalho grudado para 125px — 19% da tela de um iPhone SE — ao
   contrário do que este próprio comentário dizia (item 11). */
.topo .btn-topo{display:none}
@media(min-width:1080px){
  .topo .btn-topo{display:inline-block;padding:11px 18px;font-size:12px}}

/* blocos */
.faixa{padding:clamp(56px,9vw,104px) 20px}
.faixa-interna{max-width:1080px;margin:0 auto}
.estreito{max-width:660px;margin:0 auto}
.filete{width:64px;height:1px;background:var(--gold);margin:26px auto}
.escuro{background:var(--green-deep);color:#E9E2D4}
.escuro h2,.escuro h3{color:var(--cream)}
.escuro a{color:var(--gold)}
.escuro .over{color:var(--gold)}

/* HERO. As fotos já vêm recortadas na proporção certa pelo otimiza_fotos.py —
   o CSS não recorta nada, só posiciona. Era esse o defeito da versão anterior:
   foto retrato espremida em caixa horizontal, cortando rosto e taça. */
.hero{position:relative;display:flex;align-items:flex-end;padding:0;
  isolation:isolate;background:var(--ink);
  min-height:clamp(560px,92svh,880px)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,10,8,.68) 0%,rgba(12,10,8,.28) 42%,
             rgba(12,10,8,.03) 72%),
             linear-gradient(90deg,rgba(12,10,8,.28),rgba(12,10,8,.08) 43%,rgba(12,10,8,0) 68%)}
/* Véu PRÓPRIO do bloco de texto, em vez de escurecer o gradiente do hero
   inteiro — que apagaria o céu de pôr do sol da imagem escolhida pelo cliente
   (S26): seria consertar legibilidade estragando a estética aprovada.

   Números medidos a 390×844, na imagem que o <picture> realmente serve abaixo
   de 900px, com a geometria lida do navegador (o h1 ocupa de 41,5% a 53,4% da
   altura do hero — o véu global vale só 0,28 ali):

                       ANTES              DEPOIS
       h1              25,9%  (2,19:1)   0,0%  (3,15:1)
       lead             1,3%  (2,69:1)   0,0%  (8,94:1)
       botão            0,0%  (4,13:1)   0,0%  (15,6:1)
       (% da faixa abaixo de 3:1, e o pior ponto medido)

   O padding SUPERIOR é o que faz funcionar, e não é folga estética: sem ele o
   gradiente nasce transparente EXATAMENTE na primeira linha do título, e o h1
   só caía de 25,9% para 13,1% — continuava reprovando. Empurrando o começo do
   véu para 35% da altura (uns 6% acima do texto), o desvanecimento acontece no
   espaço vazio. O terço superior da foto fica intocado, e o texto não se move.

   Ele vai DENTRO da forma abreviada `padding:`, não numa linha própria: a
   abreviada vem depois e zeraria um `padding-top` separado. Foi o que aconteceu
   na primeira tentativa — o gradiente aplicava, o padding não, e só a medição
   no navegador mostrou.

   Ao mexer aqui, RE-MEÇA no navegador. Duas versões desta correção pareciam
   certas lendo o código e não resolviam. */
.hero-txt{max-width:1080px;margin:0 auto;width:100%;
  background:linear-gradient(to top,rgba(12,10,8,.88),rgba(12,10,8,.74) 55%,transparent);
  padding:clamp(40px,6vh,72px) 20px clamp(44px,7vw,80px)}
/* A barra fixa de baixo só existe abaixo de 1080px, e o hero termina embaixo:
   sem esta folga o botão principal da primeira tela ficava 100% coberto a
   375x844 (iPhone SE) — um toque no centro dele acertava a barra. Os 76px são
   a altura da barra, o mesmo número que o body.tem-barra já reserva para o
   rodapé (auditoria de 21/07/2026, item 2). */
@media(max-width:1079px){
  .hero-txt{padding-bottom:calc(clamp(44px,7vw,80px) + 76px)}}
.hero .over{color:#E4C77E}
.hero h1{color:#fff;max-width:15ch;
  font-size:var(--fs-display);line-height:1.04;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .lead{color:#EDE6D8;max-width:46ch;
  font:400 clamp(17px,2.1vw,20px)/1.6 var(--sans)}
.hero .acoes{margin-top:1.6em}
.hero .btn-2{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn-2:hover{background:rgba(255,255,255,.12);border-color:#fff}

.agendamento-nota{font:600 13px/1.45 var(--sans);letter-spacing:.02em;
  color:#E4C77E;margin:1.3em 0 0}

/* MONUMENTO À TESE (Bloco B): declaração full-width em fundo escuro, só
   tipografia. Sem CTA, sem foto — a frase carrega a seção sozinha. */
.tese{padding:clamp(80px,13vw,152px) 20px;text-align:center}
.tese h2{font:600 clamp(40px,7vw,84px)/1.08 var(--serif);letter-spacing:-0.01em;
  color:var(--cream);max-width:17ch;margin:0 auto}
.tese .over{margin-bottom:1.6em}

/* primeiro parágrafo em serif maior nas páginas editoriais */
.lead-ed{font:400 clamp(24px,2.8vw,28px)/1.42 var(--serif);color:var(--green);
  max-width:52ch}

.visita-essencia{padding-block:clamp(56px,9vw,112px)}
.visita-intro{max-width:680px;margin:0 0 clamp(32px,5vw,56px)}
.roteiro{display:grid;gap:0;border-top:1px solid var(--n300)}
.roteiro article{padding:24px 0;border-bottom:1px solid var(--n300)}
.roteiro .passo{display:block;color:var(--gold-deep);font:700 12px var(--sans);
  letter-spacing:.13em;margin-bottom:.75em}
.roteiro h3{font:600 25px/1.12 var(--serif);margin-bottom:.35em}
.roteiro p{font-size:15px;margin:0;color:var(--n600)}
@media(min-width:760px){
  .roteiro{grid-template-columns:repeat(3,1fr);gap:28px}
  .roteiro article{padding:26px 0}
}

.momento{display:grid;background:var(--cream)}
.momento-foto{min-height:clamp(360px,62vw,560px);overflow:hidden}
.momento-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.momento-txt{padding:clamp(48px,7vw,92px) 20px}
.momento-txt>*{max-width:540px;margin-left:auto;margin-right:auto}
.momento-txt h2{font-size:clamp(32px,5vw,50px)}
@media(min-width:900px){
  .momento{grid-template-columns:1fr 1fr;align-items:stretch}
  .momento-txt{padding-inline:clamp(40px,7vw,104px)}
  .momento-txt>*{margin-left:0}
}

.origem-visita{display:grid;gap:clamp(30px,6vw,86px);align-items:center}
.origem-visita .origem-foto{background:var(--cream);margin:0}
.origem-visita .origem-foto img{width:100%;height:auto}
.origem-visita .origem-foto figcaption{font:400 13px/1.5 var(--sans);
  color:var(--n600);padding:10px 4px 0;background:var(--paper)}
.origem-visita h2{font-size:clamp(32px,5vw,48px)}
@media(min-width:900px){.origem-visita{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}}

.destaques-home{background:#F5F0E6}
.destaques-home .cabecalho-secao{display:flex;gap:20px;align-items:end;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:clamp(24px,4vw,44px)}
.destaques-home .cabecalho-secao p{margin:0}
.convite-visita{text-align:center}
.convite-visita>*{margin-left:auto;margin-right:auto}
.convite-visita h2{font-size:clamp(36px,5vw,54px);max-width:15ch}
.convite-visita p{max-width:52ch}

/* BLOCO COM FOTO INTEIRA. A foto aparece por completo, na proporção em que foi
   recortada, e o texto vem depois — sobre fundo escuro. Nada é cortado. */
.bloco-foto{background:var(--green-deep);color:#E3DCCE}
.bloco-foto>img{width:100%;height:auto;display:block}
.bloco-foto .txt{padding:clamp(40px,6vw,72px) 20px}
.bloco-foto .txt>*{max-width:660px}
.bloco-foto h2,.bloco-foto h3{color:var(--cream)}
.bloco-foto .over{color:var(--gold)}
@media(min-width:900px){
  .bloco-foto .txt{padding-inline:clamp(32px,6vw,96px)}
}

/* duas colunas: foto inteira de um lado, texto do outro */
.meia{display:grid;gap:0;align-items:center}
.meia .meia-img img{width:100%;height:auto;display:block}
.meia .meia-txt{padding:clamp(40px,7vw,80px) 20px}
@media(min-width:900px){
  .meia{grid-template-columns:1fr 1fr}
  .meia .meia-txt{padding:clamp(56px,6vw,88px) clamp(32px,5vw,64px)}
  .meia.inverso .meia-img{order:2}
}

/* retratos dos fundadores */
figure.retrato{margin:1.8em 0 0}
figure.retrato img{width:100%;height:auto;display:block}
figure.retrato figcaption{font:400 13px var(--sans);color:var(--n600);
  margin-top:.7em}
.retratos{display:grid;gap:20px;grid-template-columns:1fr;margin-top:.4em}
@media(min-width:620px){.retratos{grid-template-columns:1fr 1fr}}

/* par de fotos lado a lado, cada uma com a sua proporção preservada */
.par{display:grid;gap:14px;grid-template-columns:1fr;margin-top:2.2em}
.par img{width:100%;height:auto;display:block}
@media(min-width:760px){.par{grid-template-columns:1fr 1fr;align-items:start}
  .par img:nth-child(2){margin-top:44px}}

/* linha do tempo */
.linha-tempo{list-style:none;padding:0;margin:2em 0 0;
  border-top:1px solid var(--n200)}
.linha-tempo li{display:grid;grid-template-columns:64px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--n200)}
@media(min-width:520px){.linha-tempo li{grid-template-columns:88px 1fr;gap:18px}}
.linha-tempo b{font:700 11px var(--sans);letter-spacing:.12em;
  color:var(--gold-deep);align-self:center}
.escuro .linha-tempo,.escuro .linha-tempo li{border-color:rgba(255,255,255,.16)}
.escuro .linha-tempo b{color:var(--gold)}

/* lista de rótulos em vez de catálogo */
/* CSS NÃO USADO HOJE — leia antes de mexer.
   `.rotulos`, `.etapas`, `.par` e `.meia` não são emitidas por nenhum ponto do
   gerador: são de verdade sobra. `.retratos` e `.lojas` PARECEM sobra e não
   são — o gerador as emite condicionalmente (o bloco das lojas só aparece
   quando app_store_url/play_store_url existem). Apagar as duas quebraria esse
   bloco no dia em que o aplicativo sair, e o portão não pegaria: ele confere o
   HTML gerado, e hoje esse HTML não existe.
   Deixo tudo no lugar de propósito. O risco que a auditoria nomeou não era o
   peso — era alguém reaproveitar `.rotulos`, cujo `.num` usava --n400 (2,28:1,
   reprova). Isso está corrigido abaixo: quem reaproveitar agora herda cor
   acessível. */
.rotulos{list-style:none;padding:0;margin:2em 0 0;
  border-top:1px solid var(--n200)}
.rotulos li{border-bottom:1px solid var(--n200)}
.rotulos a{display:grid;grid-template-columns:34px 1fr auto;gap:16px;
  align-items:baseline;padding:18px 4px;text-decoration:none}
.rotulos a:hover{background:#fff}
.rotulos .num{font:500 12px var(--sans);color:var(--n600);
  font-variant-numeric:tabular-nums}
.rotulos .nome{font:600 24px var(--serif);color:var(--green)}
.rotulos .val{font:500 15px var(--sans);color:var(--n600);
  font-variant-numeric:tabular-nums}

/* etapas da visita */
.etapas{list-style:none;padding:0;margin:2em 0 0}
.etapas li{padding:20px 0;border-top:1px solid rgba(255,255,255,.2)}
.etapas b{display:block;font:700 11px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:#E4C77E;margin-bottom:.4em}
.etapas p{margin:0;max-width:46ch}

/* citação isolada */
.citacao{font:400 italic clamp(24px,3vw,28px)/1.42 var(--serif);
  color:var(--green);max-width:30ch;margin:1.6em 0 0}
/* .faixa-foto virou .bloco-foto na reforma das fotos; sem esta linha a citação
   ficava verde escuro sobre verde escuro, ou seja, invisível. */
.escuro .citacao,.bloco-foto .citacao{color:#F2ECDF}

/* barra fixa no celular — o turista decide no celular */
/* opaca de verdade: a 0.97 o conteúdo atravessava a barra e parecia bug */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  align-items:center;gap:12px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--green-deep);color:#E9E2D4;font:500 14px var(--sans);
  box-shadow:0 -6px 24px rgba(12,10,8,.28)}
.barra span{flex:1;line-height:1.3}
.barra .btn{padding:11px 18px;font-size:15px;min-height:44px}
@media(min-width:1080px){.barra{display:none}}
/* a barra é fixa: sem esta folga ela cobre o fim do rodapé */
@media(max-width:1079px){body.tem-barra{
  padding-bottom:calc(76px + env(safe-area-inset-bottom))}}

/* botões — fantasmas (Bloco B): borda 1px, caixa alta 13px, sem sombra,
   sem transform. O botão se cala; a fotografia e a tipografia falam. */
.btn{display:inline-block;background:none;color:var(--green);text-decoration:none;
  border:1px solid var(--green);border-radius:0;
  font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;min-height:48px;transition:background .18s ease,color .18s ease,
  border-color .18s ease}
.btn:hover{background:var(--green);color:var(--paper)}
.btn-2{border-color:var(--n300)}
.btn-2:hover{border-color:var(--green);background:none;color:var(--green)}
/* sobre fundos escuros o fantasma vira branco */
.escuro .btn,.hero .btn,.capa-experiencia .btn,.capa-editorial .btn,
.bloco-foto .btn,.barra .btn{color:#fff;border-color:rgba(255,255,255,.75)}
.escuro .btn:hover,.hero .btn:hover,.capa-experiencia .btn:hover,
.capa-editorial .btn:hover,.bloco-foto .btn:hover,
.barra .btn:hover{background:rgba(255,255,255,.14);color:#fff}
.escuro .btn-2,.hero .btn-2,.capa-experiencia .btn-2,.capa-editorial .btn-2{
  color:#fff;border-color:rgba(255,255,255,.5)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}

/* grade de vinhos */
.grade{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:2em}
.card{background:#fff;border:1px solid var(--n200);border-radius:12px;
  overflow:hidden;text-decoration:none;display:block;transition:border-color .2s}
.card:hover{border-color:var(--gold)}
.card-media{background:linear-gradient(145deg,#F8F1E3,#EDE1C8);aspect-ratio:4/5;
  overflow:hidden;border-bottom:1px solid var(--n200)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.card-conteudo{padding:22px 24px 24px}
.card .over{margin-bottom:.5em}
.card h3{margin-bottom:.3em;font-family:var(--serif);font-size:26px;font-weight:600}
.card p{font-size:15px;color:var(--n600);margin:0 0 .9em}
.preco{font:500 16px var(--sans);color:var(--green);font-variant-numeric:tabular-nums}

/* ficha */
.ficha-visual{margin:1.6em 0 2em;background:linear-gradient(145deg,#F8F1E3,#EDE1C8);
  overflow:hidden;border:1px solid var(--n200);aspect-ratio:4/5}
.ficha-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ficha dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:10px 22px;
  margin:0 0 2em;border-top:1px solid var(--n200);padding-top:1.4em}
.ficha dt{font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);align-self:center}
.ficha dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Em telas estreitas o rótulo em caixa alta espremia o valor e cortava o texto. */
@media(max-width:560px){
  .ficha dl{grid-template-columns:1fr;gap:2px}
  .ficha dt{margin-top:12px}
  .ficha dd{padding-bottom:8px;border-bottom:1px solid var(--n200)}
}
.selo{display:inline-block;background:var(--cream);color:var(--green);
  font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid var(--gold)}
ul.lista{padding-left:1.1em;margin:0 0 1.4em}
ul.lista li{margin-bottom:.4em}
.aviso{background:var(--cream);border-left:3px solid var(--gold);
  padding:18px 22px;border-radius:0 8px 8px 0;margin:2em 0}
.aviso p:last-child{margin:0}

/* formulário */
.form{margin-top:2em;display:block}
.form label{display:block;font:600 14px var(--sans);color:var(--green);
  margin:1.4em 0 .4em}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form input[type=date],.form select,.form textarea{
  width:100%;font:400 16px var(--sans);color:var(--n700);background:#fff;
  border:1px solid var(--contorno);border-radius:8px;padding:13px 14px;
  min-height:48px;-webkit-appearance:none;appearance:none}
.form textarea{min-height:110px;resize:vertical}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--n600) 50%),
  linear-gradient(135deg,var(--n600) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--green);outline:2px solid var(--wine);outline-offset:1px}
.form small{display:block;font-size:13px;color:var(--n600);margin-top:.45em}
.form .check{display:flex;gap:12px;align-items:flex-start;margin-top:1.8em;
  font-weight:400;color:var(--n700);font-size:15px}
.form .check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--wine)}
.form button{margin-top:1.8em;cursor:pointer;width:100%}
@media(min-width:560px){.form button{width:auto}}

/* baixar o app */
.lojas{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
.lojas a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  border:1px solid var(--n300);border-radius:10px;padding:12px 20px;
  background:#fff;min-height:52px}
.lojas b{display:block;font:600 15px var(--sans);color:var(--green)}
.lojas span{display:block;font:400 12px var(--sans);color:var(--n600)}

/* rodapé */
.rodape{background:var(--green-deep);color:#CFC6B4;padding:56px 20px 32px;
  font-size:15px}
.rodape a{color:var(--cream);padding-block:5px}
.rodape .over{color:var(--gold)}
.rodape-grid{max-width:1080px;margin:0 auto;display:grid;gap:36px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rodape-legal{max-width:1080px;margin:40px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14)}
.rodape-legal strong{color:var(--cream)}
.mini{font-size:13px;color:#9E9686}

/* Revisão integral 2026-07-20: componentes com mais respiro, contraste e uma
   apresentação editorial. Fotos só aparecem quando têm fonte e recorte íntegros. */
.faixa{position:relative}
.faixa-interna{max-width:1160px}
.estreito{max-width:680px}
.pagina main>.faixa:first-child{padding-top:clamp(64px,10vw,128px)}
.barra{min-height:68px}
.barra span{font-size:13px}

/* Catálogo: não recortamos composições promocionais para fingir packshots.
   O cartão sem foto é um elemento editorial deliberado; fotos reais ganham
   espaço completo, sem object-fit agressivo. */
.vinhos-cabecalho{display:grid;gap:28px;align-items:end;margin-bottom:clamp(28px,5vw,56px)}
.vinhos-cabecalho h1{font-size:var(--fs-display);max-width:11ch}
.vinhos-cabecalho .intro{font-size:18px;color:var(--n600);max-width:48ch}
@media(min-width:900px){.vinhos-cabecalho{grid-template-columns:1.1fr .9fr}}
.grade.grade-vinhos{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:22px;margin-top:0}
.produto-card{position:relative;display:flex;flex-direction:column;min-height:320px;padding:28px;
  overflow:hidden;border:1px solid var(--n200);border-radius:16px;background:#fff;color:var(--green);
  text-decoration:none;transition:border-color .2s ease}
.produto-card:hover{border-color:var(--gold)}
.produto-card .linha{font:700 11px/1.35 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 auto}
.produto-card h3{font:600 clamp(30px,3vw,38px)/.98 var(--serif);margin:46px 0 .3em;color:var(--green);max-width:12ch}
.produto-card .resumo{color:var(--n600);font-size:15px;line-height:1.55;margin:0 0 1.2em;max-width:31ch}
.produto-card .preco{position:relative;z-index:1;margin-top:auto;padding-top:16px;border-top:1px solid var(--n200);
  font-size:15px}
/* sem preço confirmado o cartão não tem a linha .preco: o link assume o pé */
.produto-card .ver-ficha{display:block;position:relative;z-index:1;margin-top:auto;padding-top:16px;
  font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--wine)}
.produto-card .preco+.ver-ficha{margin-top:16px;padding-top:0}
.produto-card.tem-foto{padding:0;min-height:0;background:var(--cream)}
.produto-card.tem-foto .foto-vinho-real{aspect-ratio:4/5;overflow:hidden;background:#E9E0CE}
.produto-card.tem-foto .foto-vinho-real img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.produto-card.tem-foto .produto-txt{padding:24px 26px 28px;display:flex;flex-direction:column;min-height:238px}
.produto-card.tem-foto h3{margin:26px 0 .3em}

.produto-apresentacao{position:relative;overflow:hidden;margin:1.8em 0 2.2em;padding:clamp(28px,5vw,52px);
  border-radius:16px;background:var(--green-deep);color:var(--cream)}
.produto-apresentacao .selo{position:relative;z-index:1;background:transparent;color:#E4C77E;border-color:rgba(228,199,126,.65)}
.produto-apresentacao p{position:relative;z-index:1;color:#E9E2D4;margin:1.2em 0 0;max-width:44ch}
.produto-apresentacao.foto-real{padding:0;background:#E9E0CE}
.produto-apresentacao.foto-real .foto-vinho-real{aspect-ratio:4/5;max-width:560px}
.produto-apresentacao.foto-real .foto-vinho-real img{width:100%;height:100%;object-fit:cover}
.produto-apresentacao.foto-real .produto-legenda{padding:24px 28px;color:var(--green)}
.produto-apresentacao.foto-real .produto-legenda p{color:var(--n600);margin:0}
.ficha h1{font-size:var(--fs-display);max-width:12ch}
.ficha h2{margin-top:2.2em}
.ficha dl{border-color:var(--n300)}

/* Famílias de página: experiência, editorial e serviços práticos. */
.capa-experiencia,.capa-editorial{display:grid;background:var(--green-deep);color:#E9E2D4}
.capa-experiencia .capa-copia,.capa-editorial .capa-copia{padding:clamp(48px,8vw,108px) 20px;
  display:flex;flex-direction:column;justify-content:center}
.capa-experiencia .capa-copia>*,.capa-editorial .capa-copia>*{max-width:560px;margin-left:auto;margin-right:auto}
.capa-experiencia h1,.capa-editorial h1{color:var(--cream);font-size:var(--fs-display);line-height:1.02;max-width:11ch}
.capa-experiencia .lead,.capa-editorial .lead{font-size:18px;color:#E9E2D4;line-height:1.6}
/* A única <picture> com classe própria: aqui ela É a caixa da foto (item da
   grade da capa), então precisa voltar a existir no layout — o display:contents
   da regra geral a apagaria junto com o aspect-ratio. */
.capa-foto{display:block;aspect-ratio:4/5;min-height:0;overflow:hidden}
.capa-foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(min-width:900px){
  .capa-experiencia,.capa-editorial{grid-template-columns:1fr 1fr;min-height:620px}
  .capa-experiencia .capa-copia,.capa-editorial .capa-copia{padding-inline:clamp(40px,7vw,112px)}
  .capa-experiencia .capa-copia>*,.capa-editorial .capa-copia>*{margin-left:0}
  .capa-foto{aspect-ratio:auto;min-height:620px}
}
.passos-visita{display:grid;gap:18px;counter-reset:passos;margin-top:2.4em}
.passos-visita article{counter-increment:passos;border:1px solid var(--n200);border-radius:14px;padding:24px;background:#fff}
.passos-visita article::before{content:"0" counter(passos);display:block;margin-bottom:1.2em;color:var(--gold-deep);font:700 12px var(--sans);letter-spacing:.14em}
.passos-visita h3{font:600 26px/1.1 var(--serif);margin-bottom:.4em}
.passos-visita p{margin:0;color:var(--n600);font-size:15px}
@media(min-width:760px){.passos-visita{grid-template-columns:repeat(3,1fr)}}
.painel-info{border:1px solid var(--n200);border-radius:16px;background:#fff;padding:clamp(24px,4vw,42px);box-shadow:0 12px 28px rgba(18,38,27,.05)}
.painel-info h2{margin-bottom:.6em}.painel-info p:last-child{margin-bottom:0}
.pontos-venda{display:grid;gap:16px;margin:2em 0}
.ponto-venda{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--n200);border-radius:14px;background:#fff}
.ponto-venda h2{font-size:28px;margin:0}.ponto-venda p{margin:0;color:var(--n600)}
.ponto-venda .acoes{margin-top:auto}
@media(min-width:720px){.pontos-venda{grid-template-columns:repeat(2,1fr)}}
.pagina-utilitaria .faixa{background:linear-gradient(180deg,#FAF6EF 0%,#F4EDDF 100%)}
.editorial-corpo{display:grid;gap:clamp(32px,6vw,78px);align-items:center}
.editorial-corpo .editorial-foto{overflow:hidden;background:var(--cream)}
.editorial-corpo .editorial-foto img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
@media(min-width:900px){.editorial-corpo{grid-template-columns:.9fr 1.1fr}.editorial-corpo.inverso .editorial-foto{order:2}}
.foto-editorial{margin:clamp(32px,6vw,58px) 0 0;overflow:hidden;background:var(--cream)}
.foto-editorial img{display:block;width:100%;height:auto}
.pagina-editorial-simples .foto-editorial{max-width:560px}

/* Bloco A do plano estético (21/07/2026): fotografia nas páginas anêmicas. */
/* legenda curta sob a foto editorial */
.foto-editorial figcaption{font:400 13px/1.5 var(--sans);color:var(--n600);
  padding:10px 4px 0}
/* foto de abertura logo após o H1 das páginas editoriais: usa a coluna inteira */
.pagina-editorial-simples .foto-abre{max-width:none;
  margin:clamp(20px,4vw,36px) 0 clamp(28px,5vw,44px)}
/* faixa escura com fotografia ao fundo; o overlay garante a legibilidade
   do texto claro sobre a foto (a paleta continua a mesma, só ganha fundo) */
.faixa-fundo{isolation:isolate;overflow:hidden}
/* Descendente, não filho direto: a foto agora vem dentro de um <picture>, e
   seletor casa com a árvore do DOM, não com a de layout — o `>` deixaria de
   casar e a imagem de fundo cairia no meio do texto em tamanho natural. */
.faixa-fundo .fundo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 58%;z-index:-2}
.faixa-fundo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(12,24,17,.74),rgba(12,24,17,.84))}

/* Bloco B do plano estético (21/07/2026): refinamento de CSS e tipografia. */
/* espaçamentos utilitários — substituem os style="" inline de Nossa História */
.mt-secao{margin-top:2.4em}
.mt-topico{margin-top:2em}
.mt-sub{margin-top:1.8em}
.nota-discreta{margin-top:1.8em;font-size:15px;color:var(--n600)}
/* B8 (21/07/2026): a data de vigência anda COLADA ao preço, nunca numa nota de
   rodapé — a exigência é "data de atualização visível", e nota de rodapé é o
   lugar onde o leitor não olha. Bloco próprio para que a linha do preço não
   engorde nem quebre em telas estreitas. */
.preco-data{display:block;margin-top:.3em;font:400 12px/1.4 var(--sans);
  color:var(--n600);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.escuro .preco-data,.bloco-foto .preco-data,.capa-experiencia .preco-data,
.capa-editorial .preco-data{color:#CFC6B4}

/* B11: advertência de idade no ponto de venda. Fica ao lado do botão que fecha
   a compra, e não só no rodapé; a borda vinho a distingue do texto corrido sem
   virar alarme. */
.aviso-idade{margin:1.6em 0 0;padding:14px 18px;background:#fff;
  border:1px solid var(--n200);border-left:3px solid var(--wine);
  font:400 14px/1.55 var(--sans);color:var(--n700);max-width:62ch}
.aviso-idade strong{color:var(--wine-deep)}

/* quem pede menos movimento recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}