/* ==========================================================================
   NORY JOIAS · seções da página
   Mobile primeiro. Sobe em 768px e assenta em 1200px.
   ========================================================================== */

/* ==========================================================
   NAVBAR
   ========================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  /* backdrop-filter nunca entra numa transição: o compositor refaria o
     desfoque da barra inteira a cada frame dos 260ms */
  transition:background-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
/* enquanto a barra está sobre a foto do hero ela ganha o próprio degradê:
   os links brancos passavam sobre o céu claro e a folhagem contraluz */
.nav--hero:not(.is-stuck)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,35,19,.55),rgba(1,35,19,0));
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:4.25rem;
}
/* 34px e não 30px no celular: a palavra JOIAS do lockup é uma fração da
   altura do NORY e abaixo disso ela vira borrão */
/* a marca é um só desenho em currentColor: verde na navbar de vidro claro,
   off-white enquanto a barra está transparente sobre a foto do hero.
   A troca é uma transição de color, que é pintura barata e não pisca */
.nav__logo{position:relative;display:block;height:34px;color:#115137;
  transition:color var(--dur-base) var(--ease-out)}
.nav__logo-img{height:100%;width:auto;display:block}
.nav--hero:not(.is-stuck) .nav__logo{color:var(--papel)}
.rodape__logo svg{height:44px;width:auto;display:block;color:var(--papel);opacity:.96}
.nav__menu{display:none;align-items:center;gap:2.1rem}
.nav__menu a{
  font-size:.875rem;font-weight:500;color:var(--tinta);
  position:relative;padding-block:.35rem;white-space:nowrap;
  transition:color var(--dur-base) var(--ease-out);
}
/* sobre a foto escura do hero a navbar é off-white; ao virar vidro claro
   ela volta para a tinta da marca */
.nav--hero:not(.is-stuck) .nav__menu a{color:var(--papel)}
.nav--hero:not(.is-stuck) .nav__cta{color:var(--papel);box-shadow:inset 0 0 0 1px rgba(246,243,236,.42)}
.nav__menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
@media (hover:hover){.nav__menu a:hover::after{transform:scaleX(1)}}
.nav__cta{display:none;white-space:nowrap}
/* o vidro da navbar vem do kit (.glass, ligado pelo motion.js junto do is-stuck),
   só o raio e o fio de base são da barra */
.nav.glass{border-radius:0;overflow:visible}
.nav.glass::after{border-radius:0}
.nav.is-stuck{box-shadow:inset 0 -1px 0 rgba(220,216,204,.85),0 10px 30px -22px rgba(30,33,28,.35)}
/* cinco itens mais o pill de CTA: entre 768 e 999 a barra só cabe numa linha
   com o passo curto e sem quebra de palavra. O respiro largo volta em 1000. */
@media (min-width:768px){
  .nav__menu{display:flex;gap:1.1rem}
  .nav__menu a{font-size:.8rem}
  .nav__cta{display:inline-flex;padding:.7rem 1.1rem;font-size:.82rem}
  .nav__logo{height:32px}
}
@media (min-width:1000px){
  .nav__menu{gap:2.1rem}
  .nav__menu a{font-size:.875rem}
  .nav__cta{padding:.78rem 1.5rem;font-size:.875rem}
  .nav__logo{height:36px}
}
/* o CTA da navbar só vira mancha verde depois que o hero sai da tela:
   acima da dobra existe uma única mancha de verde, a do hero */
.nav.is-stuck .nav__cta{
  color:var(--offwhite);background:var(--verde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px rgba(1,35,19,.12),0 16px 34px -18px rgba(17,81,55,.6);
}

/* ==========================================================
   1 · HERO
   Foto full bleed como LCP, scrim de verde noite, painel de vidro
   à esquerda e a aliança 3D flutuando à direita.
   ========================================================== */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:5.5rem;padding-bottom:4.5rem;
  background:var(--verde-noite);
}
.hero > picture{position:absolute;inset:0;z-index:-3;display:block}
.hero__photo{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* scrim de verde noite vindo da esquerda: é ele que segura o contraste do
   painel. Vai de .55 a transparente aos 60%, como manda o contrato.
   A parada de topo é medida em pixels e morre nos 68px, a altura da barra:
   em porcentagem ela descia 144px no hero de 900px, entrava na área do
   painel e ajudava a fechar o vidro. Quem protege os links da navbar é
   esta faixa somada ao degradê da própria .nav--hero. */
.hero__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,35,19,.45) 0px,rgba(1,35,19,.2) 40px,rgba(1,35,19,0) 68px),
    linear-gradient(90deg,rgba(1,35,19,.55) 0%,rgba(1,35,19,.34) 32%,rgba(1,35,19,0) 60%),
    linear-gradient(0deg,rgba(1,35,19,.5) 0%,rgba(1,35,19,0) 34%);
}
/* no celular o painel ocupa a largura inteira: o scrim que vem da esquerda
   não protege nada e a metade de baixo do painel cai sobre as janelas
   acesas da estufa. Aqui o scrim é vertical, e a primeira parada também
   resolve a faixa da navbar */
@media (max-width:767px){
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(1,35,19,.58) 0%,rgba(1,35,19,.12) 24%,
      rgba(1,35,19,.3) 52%,rgba(1,35,19,.72) 100%);
  }
}
/* vinheta suave: fecha os cantos sem escurecer o centro da cena */
.hero__vinheta{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(128% 96% at 50% 46%,rgba(1,35,19,0) 42%,rgba(1,35,19,.42) 100%);
}
.hero__grid{display:flex;flex-direction:column;gap:1.25rem;width:100%}

/* o berço da aliança: quadrado, porque o palco 3D é quadrado e a peça
   ocupa 80% do lado. 26vh de peça no celular pede 32.5vh de berço. */
.hero__ring{
  order:1;align-self:center;
  width:32.5vh;height:32.5vh;max-width:72vw;max-height:72vw;
  position:relative;flex:none;
}
/* halo próprio: em 1920 a peça caía sobre os lustres acesos da estufa e o
   ouro sumia contra o amarelo quente. O berço é quadrado e a peça ocupa
   80% dele, então o halo redondo não lê como forma, só devolve a névoa.
   Mora no palco e não no berço porque é o palco que viaja no trajeto. */
.ring-stage::before{
  content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(1,35,19,.5),rgba(1,35,19,.26) 58%,rgba(1,35,19,0) 100%);
  filter:blur(24px);
  transition:opacity 420ms var(--ease-out);
}
/* no dock, sobre off-white, o halo escuro seria mancha: some ao pousar */
.ring-stage.is-docked::before{opacity:0}
.hero__panel{order:2;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.5rem 1.35rem 1.65rem}
/* o painel do hero anda um passo acima da dose do kit (.42/.32) e para aí:
   .62/.46 fechava o vidro e o painel virava cartão verde, sem estufa atrás
   e sem espessura. Com .48/.36 a cena continua passando e o eyebrow de 12px,
   que mora sobre a parte clara do céu, sai de 3,86 para perto dos 4,5 por
   amostragem de pixel. O resto do contraste vem da sombra de texto abaixo,
   que custa dois elementos e não o painel inteiro. */
.hero__panel.glass{--glass-a1:.48;--glass-a2:.36}
/* o eyebrow dourado mora sobre a parte mais clara da foto e media 1,93 de
   contraste no iPhone 13. Sobre foto ele vira off-white, e o filete
   continua dourado porque filete não é texto */
.hero__panel .eyebrow{
  color:rgba(246,243,236,.94);font-weight:600;
  text-shadow:0 1px 12px rgba(1,35,19,.55);
}
.hero__panel .eyebrow::before{background:rgba(246,243,236,.62)}
/* no celular o topo do painel cai sobre o céu do entardecer, a parte mais
   clara da foto, e o eyebrow de 12px fica em 3,9 mesmo com o alfa em .48.
   Quem resolve é uma sombra mais fechada e curta atrás dos glifos, que é
   local e não fecha o vidro: o painel continua deixando a estufa passar */
@media (max-width:767px){
  .hero__panel .eyebrow{text-shadow:0 1px 10px rgba(1,35,19,.82),0 0 3px rgba(1,35,19,.6)}
}
/* a microcopy de 12px no pé do painel raspava os 4,5 no celular */
.hero__panel .microcopy{color:rgba(246,243,236,.86)}
.hero__panel .hero__prova{color:rgba(246,243,236,.84);text-shadow:0 1px 12px rgba(1,35,19,.55)}
.hero h1{
  font-size:var(--fs-display);font-weight:400;line-height:1.14;
  display:flex;flex-direction:column;gap:.02em;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal}
.hero h1 .ln--2 i{font-style:italic;font-size:.8em;letter-spacing:0}
.hero__lead{max-width:44ch}
.hero__cta{margin-top:.25rem}
.hero__prova{
  font-size:var(--fs-micro);line-height:1.7;color:rgba(246,243,236,.7);
  border-top:1px solid rgba(246,243,236,.22);padding-top:.9rem;width:100%;max-width:46ch;
}
.hero__quem{
  font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;
  font-size:1.04rem;color:var(--papel);line-height:1.45;max-width:34ch;
}
/* duas sentinelas de 1px no lugar de duas leituras de layout por frame:
   a navbar vira vidro quando a de cima sai, a barra entra quando a de baixo sai */
.hero__sentinel{position:absolute;left:0;width:1px;height:1px;pointer-events:none;opacity:0}
.hero__sentinel--nav{top:40px}
.hero__sentinel--barra{bottom:40px}

/* entrada do hero, CSS puro: o texto é legível mesmo sem JS */
@keyframes heroUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
/* acima da dobra nada nasce em opacidade 0: com o painel e a headline
   invisíveis no primeiro frame o único candidato a LCP que sobrava era o
   logotipo da navbar. Aqui só o transform anima, e o texto pinta na hora. */
@keyframes heroRise{from{transform:translate3d(0,18px,0)}to{transform:none}}
@keyframes heroClip{from{transform:translate3d(0,102%,0)}to{transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  /* a entrada mora no palco e não no berço: initCoreografia leva o palco
     para fora do .hero__ring e a aliança aparecia de uma vez no desktop */
  /* backwards e não both: com both o fill da animação venceria a opacidade
     inline que a coreografia baixa na travessia do texto */
  .ring-stage{animation:heroFade 720ms var(--ease-out) backwards 120ms}
  .hero .eyebrow{animation:heroRise 400ms var(--ease-out) both 40ms}
  .hero h1 .ln--1 i{animation:heroClip 560ms var(--ease-out) both 100ms}
  .hero h1 .ln--2 i{animation:heroClip 560ms var(--ease-out) both 180ms}
  .hero__lead{animation:heroRise 420ms var(--ease-out) both 260ms}
  .hero__cta{animation:heroRise 420ms var(--ease-out) both 320ms}
  .hero__micro{animation:heroRise 420ms var(--ease-out) both 370ms}
  .hero__prova{animation:heroRise 420ms var(--ease-out) both 410ms}
  .hero__quem{animation:heroRise 420ms var(--ease-out) both 450ms}
}

/* telas curtas de verdade, iPhone SE e similares: a headline, o subtitulo
   e o botao continuam cabendo na primeira tela sem rolar */
@media (max-width:767px) and (max-height:720px){
  .hero{padding-top:4.6rem;padding-bottom:3rem}
  .hero__grid{gap:.9rem}
  .hero__panel{gap:.7rem;padding:1.25rem 1.1rem 1.4rem}
  .hero__ring{width:30vh;height:30vh}
  .hero h1{font-size:clamp(1.98rem,7vw,2.5rem)}
  .hero__lead{font-size:.98rem}
}
@media (min-width:768px){
  .hero{padding-top:7rem;min-height:min(100svh,900px)}
  .hero__grid{
    display:grid;grid-template-columns:repeat(12,1fr);
    gap:clamp(1.5rem,3vw,3rem);align-items:center;
  }
  .hero__panel{order:1;grid-column:1 / span 7;gap:1.1rem;padding:2rem 1.9rem 2.2rem}
  /* dentro do painel a headline tem a largura da coluna, não a da página:
     o display cheio quebrava "Alianças de ouro 18k" em duas linhas */
  .hero__panel h1{font-size:clamp(1.9rem,4.4vw,3rem)}
  /* o berço não pode ficar preso à largura de 5 colunas: com min() a coluna
     sempre ganhava e o cap de 60vh nunca entrava. Soltando para 140% da
     coluna, a peça chega perto dos 48vh que o contrato pede. */
  .hero__ring{
    order:2;grid-column:8 / span 5;justify-self:end;
    width:min(60vh,140%);height:auto;aspect-ratio:1/1;max-width:none;max-height:none;
    margin-right:calc(var(--gutter) * -1);
  }
}
/* iPad em retrato: a tela é alta e o grid de desktop deixava 180px de foto
   vazia abaixo do painel, com a aliança boiando na coluna da direita.
   Aqui vale o empilhamento do celular, em escala de tablet. */
@media (min-width:768px) and (max-width:999px) and (orientation:portrait){
  .hero__grid{display:flex;flex-direction:column;align-items:center}
  .hero__ring{order:1;width:min(38vh,420px);justify-self:auto;margin-right:0}
  .hero__panel{order:2;width:min(620px,100%)}
}
@media (min-width:1000px){
  .hero{padding-top:8.5rem;padding-bottom:clamp(4rem,8vw,6rem)}
  .hero__panel{grid-column:1 / span 7;gap:1.15rem;padding:2.4rem 2.2rem 2.6rem}
  .hero__panel h1{font-size:clamp(2.2rem,3.55vw,3rem)}
  .hero__ring{grid-column:8 / span 5;width:min(60vh,140%)}
}
/* a partir de 1200 o berço deixa de obedecer às colunas e passa a obedecer
   à margem externa: preso ao wrap de 1180px ele parava a 370px da borda em
   1920 e a 690px em 2560, com meia foto sobrando à direita. Aqui ele fica
   sempre a 6vw da borda, então em 1440 anda pouco e nas telas largas anda
   muito. Quem mede o trajeto é o motion.js, pelo próprio .hero__ring. */
@media (min-width:1200px){
  .hero__ring{margin-right:calc((100vw - var(--maxw)) / -2 + 6vw)}
}

/* ==========================================================
   PALCO DA ALIANÇA 3D · hero, trajeto e dock
   O palco é sempre quadrado: o poster e o canvas enquadram a peça
   em 80% do lado, então o crossfade é pixel sobre pixel.
   ========================================================== */
.ring-stage{position:absolute;inset:0;aspect-ratio:1/1}
.ring-stage > canvas,
.ring-stage__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ring-stage > canvas{z-index:1}
.ring-stage__poster{z-index:2;transition:opacity 600ms var(--ease-out)}
.ring-stage.is-live .ring-stage__poster{opacity:0;pointer-events:none}
@keyframes ring-float{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-10px)}
  75%{transform:translateY(10px)}
}
@media (prefers-reduced-motion:no-preference){
  .ring-stage__poster{animation:ring-float 6s cubic-bezier(.37,0,.63,1) infinite}
}
/* a sequência do celular: 24 quadros da mesma aliança, trocados pelo
   progresso do voo. Abaixo de 768 o canvas WebGL não sobe (691 KB de
   Three.js que o telefone não paga), então quem gira a peça na travessia é
   este canvas 2D, que só desenha um quadro já decodificado por frame.
   Ele mora na mesma caixa do poster, com o mesmo flutuar: no instante da
   troca os dois mostram o mesmo quadro 0 e a passagem não aparece. */
.ring-stage__seq{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  z-index:3;opacity:0;pointer-events:none;
}
.ring-stage.is-seq .ring-stage__seq{opacity:1}
/* com a sequência no ar o poster troca sem esmaecer: os 600ms do crossfade
   do 3D deixariam as duas imagens visíveis meio segundo, já em ângulos
   diferentes */
.ring-stage.has-seq .ring-stage__poster{transition:none}
.ring-stage.has-seq.is-seq .ring-stage__poster{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ring-stage__seq{animation:ring-float 6s cubic-bezier(.37,0,.63,1) infinite}
}
/* em voo a peça sai do fluxo e passa por cima da faixa de prova,
   sempre por baixo da navbar */
/* will-change não fica ligado para sempre: o motion.js acende no onEnter e
   apaga no onLeave, senão a camada promovida (com a textura do WebGL
   dentro) sobrevive o resto da sessão com a peça já pousada */
.ring-stage--fly{
  inset:auto;z-index:40;pointer-events:none;
}
/* ==========================================================
   2 · FAIXA DE PROVA
   ========================================================== */
/* a faixa sobe 40px sobre a base do hero: a prova entra antes de a foto
   acabar, e a aliança passa por cima dela no trajeto */
.prova{
  position:relative;z-index:2;
  margin-top:-40px;border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--verde-nevoa);padding-block:clamp(2rem,5vw,3rem)
}
.prova__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;background:none;align-items:stretch}
/* o chip é bloco de duas linhas, não pílula: o raio de pílula vence a
   leitura. A dose de vidro continua a do .glass--pill, que é a mínima. */
.prova__chip{
  border-radius:var(--r-sm);
  padding:1.1rem 1rem;
  border-top:1px solid var(--ouro-claro);
  display:flex;flex-direction:column;gap:.3rem;justify-content:flex-start;
}
/* os quatro números partilham a mesma linha de base, mesmo quando um rótulo
   ocupa duas linhas e o outro uma */
.prova__chip strong{
  display:flex;align-items:flex-end;min-height:1em;
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;
  font-size:clamp(1.4rem,5.1vw,1.82rem);color:var(--tinta);letter-spacing:0;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.prova__chip span{display:block;font-size:.72rem;line-height:1.45;letter-spacing:.02em}
.prova__chip b{
  display:block;font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ouro-texto);
}
.prova__close{
  margin-top:1.4rem;font-size:var(--fs-small);color:var(--tinta-suave);max-width:60ch;
}
/* entre 768 e 999 as quatro colunas ficam estreitas demais e os rótulos
   quebram deixando órfãs: as quatro colunas só entram em 1000 */
@media (min-width:768px){
  .prova__grid{gap:1.25rem;background:none}
  .prova__chip{padding:1.35rem 1.2rem}
}
@media (min-width:1000px){
  .prova__grid{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================
   3 · FABRICANTE
   ========================================================== */
.fab__grid{display:flex;flex-direction:column;gap:2.5rem}
.fab__col{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.fab__head{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
/* o dock: a coluna que recebe a aliança vinda do hero. A bancada fica
   atrás, em dose baixa, para a peça pousar sobre a oficina e não no vazio */
/* a foto da bancada saiu: lavada a 82% ela não lia como bancada, virava
   mancha cinza, e a aliança branca que existe no centro dela aparecia
   dentro do furo do aro de ouro, duas alianças concêntricas. Material só,
   e o halo do palco faz o trabalho de assentar a peça.
   De quebra são 99 KB que deixam de baixar junto com a primeira tela,
   porque background de CSS nunca é preguiçoso. */
.fab__dock{
  order:-1;position:relative;
  min-height:min(46vh,380px);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(160deg,var(--verde-nevoa),#f2f5f0);
}
.fab__dock-slot{position:relative;z-index:1;width:min(32vh,300px);aspect-ratio:1/1}
.fab__dock-poster{width:100%;height:100%;object-fit:contain}
/* com a coreografia de scroll no ar, quem ocupa o dock é a peça viva */
.fab__dock.has-ring .fab__dock-poster{display:none}
.fab h2{font-size:var(--fs-h2)}
.conta{
  border-top:1px solid var(--ouro-claro);border-bottom:0;
  padding-block:1.9rem 1rem;display:flex;flex-direction:column;gap:1.15rem;
}
.conta__line{
  font-family:'Fraunces','Fraunces Fallback',serif;font-size:var(--fs-conta);
  line-height:1.14;color:var(--tinta);letter-spacing:-.004em;max-width:20ch;
}
.conta__line em{font-style:normal;color:var(--verde)}
.conta__line--3{position:relative;padding-top:1.35rem;font-size:calc(var(--fs-conta) * .82);max-width:24ch;color:var(--tinta)}
.conta__line--3::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform 900ms var(--ease-out) 120ms;
}
.conta.is-in .conta__line--3::before,
html.nomotion .conta__line--3::before{transform:scaleX(1)}
.conta__foot{font-size:var(--fs-micro);color:var(--tinta-suave);max-width:52ch}
.fab__fecho{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:1.18rem;color:var(--tinta);max-width:28ch;line-height:1.35}
/* o contrato pede dock de ~180px no celular: com 380px a seção abria com
   quase uma tela de cartão antes da primeira palavra. Os 200px de hoje são o
   pouso: a aliança agora atravessa a página também no celular, e com 170px de
   slot ela chegava pequena demais para o trajeto pagar a viagem. O texto
   continua logo abaixo, sem tela de cartão nenhuma. */
@media (max-width:767px){
  .fab__dock{min-height:200px}
  .fab__dock-slot{width:180px}
}
@media (min-width:768px){
  .fab__dock{min-height:min(60vh,520px)}
  .fab__dock-slot{width:min(34vh,330px)}
}
@media (min-width:1000px){
  /* start e não center: com a coluna esquerda curta contra a direita alta,
     o centro deixava 360px de vazio no topo da seção */
  .fab__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
  .fab__dock{order:0;grid-column:1 / span 5;align-self:start}
  .fab__col{grid-column:6 / span 7}
}

/* ==========================================================
   4 · COMO É FEITA, bloco verde noite
   ========================================================== */
.feita{position:relative;overflow:hidden}
.feita__head{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:44ch}
.feita__steps{
  display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:3rem;
}
@media (max-width:767px){
  .feita__steps{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
    padding-inline-end:calc(var(--gutter) + 2.75rem);
    scrollbar-width:none;
  }
  .feita__steps::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:start}
  .feita__hint{
    margin-top:.9rem;font-size:var(--fs-micro);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ouro-claro);
  }
}
@media (min-width:768px){.feita__hint{display:none}}
.step{display:flex;flex-direction:column;gap:.9rem}
.step__fig{position:relative;overflow:hidden;border-radius:var(--r-sm);background:rgba(246,243,236,.06)}
.step__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.step__fig--type{
  position:relative;
  aspect-ratio:4/5;display:grid;align-content:center;justify-items:start;
  gap:clamp(.6rem,2vw,.95rem);padding:clamp(1.25rem,4vw,1.9rem);
  border:1px solid rgba(217,195,154,.3);
  background:
    radial-gradient(120% 90% at 22% 18%,rgba(217,195,154,.10),transparent 62%),
    repeating-linear-gradient(118deg,rgba(246,243,236,.05) 0 3px,rgba(246,243,236,0) 3px 7px),
    rgba(246,243,236,.05);
}
/* um filete de ouro no topo, para o painel ter peso de peça e nao de vazio */
.step__fig--type::before{
  content:"";position:absolute;left:clamp(1.25rem,4vw,1.9rem);top:clamp(1.25rem,4vw,1.9rem);
  width:2.6rem;height:2px;background:var(--ouro-claro);
}
/* seis medidas no mesmo painel: a coluna do rotulo e fixa para as barras
   nascerem todas na mesma vertical, inclusive a de 10mm, que tem um digito
   a mais que as outras cinco */
.step__mm{
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;font-size:clamp(1rem,3.1vw,1.22rem);
  color:rgba(246,243,236,.85);letter-spacing:0;line-height:1;width:100%;
  display:grid;grid-template-columns:3.3em minmax(0,1fr);align-items:center;gap:.55rem;
  font-variant-numeric:lining-nums tabular-nums;
}
/* a barra é proporcional ao milímetro: 2, 3, 4, 6, 8 e 10 se veem, não só se leem.
   A escala caiu de 16px para 11px por mm, senão a de 10mm estourava o card. */
.step__mm::after{
  content:"";height:3px;border-radius:2px;background:rgba(217,195,154,.58);
  width:min(calc(var(--mm) * 11px),100%);
}
.step__mm--on{color:var(--papel)}
.step__mm--on::after{background:var(--ouro-claro);height:6px}
.step__n{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--ouro-claro)}
.step h3{font-size:1.18rem;color:var(--papel)}
.step p{font-size:var(--fs-small);color:rgba(246,243,236,.72)}
.feita__corpo{margin-top:3rem;display:flex;flex-direction:column;gap:1.5rem;max-width:64ch}
.feita__prova{
  display:flex;flex-direction:column;gap:1.25rem;margin-top:2.5rem;
  border-top:1px solid rgba(217,195,154,.28);padding-top:2rem;
}
.feita__prova img{width:100%;max-width:340px;border-radius:var(--r-sm);aspect-ratio:3/2;object-fit:cover;background:rgba(246,243,236,.06)}
.compara{
  margin-top:3rem;border-top:1px solid rgba(217,195,154,.28);padding-top:2.25rem;
  display:flex;flex-direction:column;gap:1.25rem;
}
.compara h3{font-size:var(--fs-h3)}
.compara__cols{display:grid;gap:1.5rem;max-width:74ch}
@media (min-width:768px){
  .feita__steps{grid-template-columns:repeat(2,1fr);gap:2rem}
  .compara__cols{grid-template-columns:1fr 1fr;gap:2.5rem}
  /* o bloco da garantia vitalicia tem um paragrafo so: em duas colunas ele
     deixava metade da linha vazia, entao volta para coluna unica */
  .compara__cols:has(> p:only-child){grid-template-columns:1fr}
  .feita__prova{flex-direction:row;align-items:center;gap:2rem}
  .feita__prova img{width:38%}
}
@media (min-width:1000px){
  .feita__steps{grid-template-columns:repeat(4,1fr);gap:1.5rem}
}

/* ==========================================================
   5 · MODELOS
   ========================================================== */
.modelos__head{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:46ch}

.cards{display:flex;flex-direction:column;gap:1.25rem;margin-top:2.5rem;position:relative}
/* matéria atrás da coluna central, para o backdrop-filter e a lente do card
   do meio terem o que borrar e o que refratar */
.cards::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-3%;width:min(100%,560px);height:106%;transform:translateX(-50%);
  background:radial-gradient(58% 46% at 50% 44%,rgba(217,195,154,.22),rgba(217,195,154,0) 72%);
}
.cards > *{position:relative;z-index:1}
.card{
  display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.35rem;
  background:var(--papel);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--linha);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.card.is-active{box-shadow:inset 0 0 0 1px var(--verde)}
/* o motion.js faz do card um botão de verdade: o ponteiro e o toque avisam */
.card[data-model]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.card[data-model]:active{transform:scale(.985)}
/* o card do meio é o único painel de vidro da seção, e o vidro vem do kit:
   aqui só sobra a ordem, o respiro e o anel verde do estado ativo */
/* sem order:-1: no celular a escada de preço saía 2.625, 1.523, 3.375 e o
   argumento da seção some. Em todas as larguras lê 1.523, 2.625, 3.375, e
   o destaque do meio vem do vidro e do selo */
.card--mid.glass{padding:1.75rem 1.5rem;background-color:transparent}
.card--mid.glass.is-active{box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(17,81,55,.55)}
.card__tag{align-self:flex-start;margin-bottom:-.35rem}
.card__fig{border-radius:var(--r-xs);overflow:hidden;background:var(--verde-nevoa)}
.card__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 58%}
/* compensação de escala enquanto as três fotos não são refeitas no mesmo
   enquadramento: as peças chegam ao mesmo tamanho aparente no card */
.card[data-model="classic"] .card__fig img{transform:scale(1.18)}
.card[data-model="canastra"] .card__fig img{transform:scale(1.06)}
.card h3{font-size:1.26rem}
.card__attrs{list-style:none;display:flex;flex-direction:column;font-size:.8rem;line-height:1.4}
.card__attrs li{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:baseline;
  border-bottom:1px solid var(--linha);padding-block:.42rem}
.card__attrs li:last-child{border-bottom:0}
.card__attrs li b{font-weight:500;color:var(--tinta);text-align:right}
.card__preco{
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;font-size:1.86rem;color:var(--tinta);line-height:1;
  letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;
  display:flex;align-items:baseline;gap:.5rem;
}
.card__preco span{font-family:'Instrument Sans',sans-serif;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.card__apoio{font-size:var(--fs-small);color:var(--tinta-suave)}
.card .btn{width:100%;padding-block:.92rem;font-size:.9rem}
.modelos__foot{margin-top:2.25rem;display:flex;flex-direction:column;gap:.9rem;max-width:62ch}
@media (min-width:768px){
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
  .card{height:100%}
  .card .btn{margin-top:auto}
  /* o card do meio sobe, mas a base dos três é a mesma:
     os três botões nascem na mesma linha */
  .card--mid{order:0;margin-top:-2rem;margin-bottom:0;height:calc(100% + 2rem);position:relative}
  .card--mid.glass{padding:3.5rem 1.5rem 1.5rem}
  /* o selo sai do fluxo: as tres fotos e as tres listas de atributos
     nascem na mesma altura, que e o que deixa comparar sem pensar */
  .card--mid .card__tag{position:absolute;top:1.15rem;left:1.5rem;margin-bottom:0;z-index:2}
}
@media (min-width:1000px){
  .cards{gap:1.5rem}
}

/* ==========================================================
   6 · PERSONALIZAÇÃO
   ========================================================== */
.pers__grid{display:flex;flex-direction:column;gap:2.5rem}
.pers__palco{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
.pers__stage{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;
  background:var(--offwhite);
  box-shadow:inset 0 0 0 1px var(--linha);
  touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
}
.pers__stage:active{cursor:grabbing}
/* no celular o campo de gravação fica meia tela abaixo do palco e, com o
   teclado aberto, a aliança sumia. Preso no topo e mais baixo, o nome
   aparece por dentro do aro enquanto a pessoa digita */
@media (max-width:999px){
  .pers__palco{position:sticky;top:4.5rem;z-index:5;background:var(--papel);padding-bottom:.7rem}
  .pers__stage{aspect-ratio:4/3;max-height:min(34vh,260px)}
  /* o que passa por baixo do palco pegajoso dissolve, em vez de ser
     cortado no meio da linha */
  .pers__palco::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:1.3rem;
    background:linear-gradient(var(--papel),rgba(253,252,248,0));
    pointer-events:none;
  }
}
.pers__stage img,.pers__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.pers__stage img{object-fit:contain;z-index:2;transition:opacity 600ms var(--ease-out)}
.pers__stage.is-live img{opacity:0;pointer-events:none}
.pers__body{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.grava{
  width:100%;padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;
}
.grava label{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.grava input{
  width:100%;border:0;border-bottom:1px solid var(--linha);background:none;
  padding:.55rem 0;font-size:1rem;color:var(--tinta);
}
.grava input:focus{outline:none;border-bottom-color:var(--verde)}
.grava__rotulo{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto)}
.grava__preview{
  border-radius:var(--r-xs);
  background:linear-gradient(115deg,#F3EDE0,#E7DCC6);
  padding:1.25rem 1rem;min-height:5.5rem;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(176,141,87,.32),inset 0 1px 2px rgba(30,33,28,.12);
  transition:opacity var(--dur-base) var(--ease-out);
}
/* enquanto ninguém digitou, a prévia é exemplo declarado, não texto do usuário */
.grava__preview.is-placeholder{opacity:.55}
.grava__preview span{
  font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:1.28rem;
  color:var(--tinta);text-align:center;line-height:1.35;word-break:break-word;
}
.grava__preview span .ch{opacity:0;filter:blur(2px);display:inline;transition:opacity 220ms var(--ease-out),filter 220ms var(--ease-out)}
.grava__preview span .ch.on{opacity:1;filter:blur(0)}
.grava__foot{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-micro);color:var(--tinta-suave)}
@media (min-width:1000px){
  .pers__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
  /* o sticky mora no palco: a aliança acompanha a leitura da coluna direita */
  .pers__palco{grid-column:1 / span 5;position:sticky;top:6rem}
  .pers__body{grid-column:7 / span 6}
}

/* ==========================================================
   BOTÃO DE PAUSA DOS PALCOS 3D
   vem do HTML, dentro do palco: o módulo só preenche o texto
   ========================================================== */
/* o botão é irmão do palco e não filho: dentro do palco, no celular, a
   pílula pousava sobre a base do aro. No desktop ele volta para o canto
   inferior direito, que ali é área livre. */
.pers__palco{position:relative}
.pers__palco .rings3d-pause{
  position:absolute;right:.75rem;bottom:1.35rem;z-index:5;
}
@media (max-width:767px){
  .pers__palco .rings3d-pause{
    position:static;align-self:center;margin-top:.55rem;
  }
}
.rings3d-pause{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  font-family:'Instrument Sans',sans-serif;font-weight:500;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  /* o material vem do kit (.glass .glass--pill no HTML), com os três
     fallbacks e a dose mínima de desfoque: aqui só a tipografia e o passo */
  color:var(--tinta-suave);
  padding:.42rem .9rem;line-height:1;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.rings3d-pause[hidden]{display:none}
@media (hover:hover){
  .rings3d-pause:hover{color:var(--tinta)}
  .rings3d-pause:hover::after{opacity:1}
}
.rings3d-pause:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ==========================================================
   7 · OUTRAS PEÇAS
   Carrossel no celular, grade de cinco no desktop.
   ========================================================== */
.outras__head{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:54ch}
.outras__grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2.5rem}
.outras__hint{display:none}
@media (max-width:767px){
  .outras__grid{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
    padding-inline-end:calc(var(--gutter) + 2.75rem);
    scrollbar-width:none;
  }
  .outras__grid::-webkit-scrollbar{display:none}
  .peca{scroll-snap-align:start}
  .outras__hint{
    display:block;margin-top:.9rem;
    font-size:var(--fs-micro);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ouro-texto);
  }
}
.peca{
  display:flex;flex-direction:column;gap:.75rem;
  padding:1.1rem 1.05rem 1.3rem;
}
.peca__fig{border-radius:var(--r-xs);overflow:hidden;background:var(--verde-nevoa)}
.peca__fig img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 700ms var(--ease-out);
}
@media (hover:hover){
  /* o vidro não anima backdrop-filter: o card só sobe e o aro clareia */
  .peca:hover{transform:translateY(-4px)}
  .peca:hover::after{opacity:1}
  .peca:hover .peca__fig img{transform:scale(1.035)}
}
.peca h3{font-size:1.06rem;line-height:1.24}
.peca__apoio{font-size:var(--fs-small);color:var(--tinta-suave)}
.peca__preco{
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;
  font-size:1.14rem;color:var(--tinta);line-height:1.1;letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
}
.peca__cta{margin-top:auto;width:100%;padding-block:.78rem;font-size:.84rem}
.outras__foot{
  margin-top:2rem;font-size:var(--fs-micro);line-height:1.7;
  color:var(--tinta-suave);max-width:64ch;
}
@media (min-width:768px){
  .outras__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .peca h3{font-size:1.12rem}
  /* o padding largo do botao base quebra o pill em duas linhas numa coluna
     estreita: aqui o pill vive dentro do card, nao no meio da pagina */
  .peca__cta{padding:.82rem 1rem}
}
@media (min-width:1100px){
  .outras__grid{grid-template-columns:repeat(5,1fr);gap:1rem}
  .peca{padding:1rem .95rem 1.2rem;gap:.65rem}
  .peca h3{font-size:1rem}
  .peca__preco{font-size:1.06rem}
  /* o pill nao pode quebrar em duas linhas numa coluna de 200px:
     o padding horizontal do botao base e largo demais para esta largura */
  .peca__cta{font-size:.78rem;padding:.72rem .9rem}
}

/* ==========================================================
   7 · PROVA SOCIAL
   ========================================================== */
.social__grid{display:flex;flex-direction:column;gap:2.25rem}
.social__head{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.social__right{display:flex;flex-direction:column;gap:1.75rem}
.notas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.nota{display:flex;flex-direction:column;gap:.3rem;border-top:1px solid var(--ouro-claro);padding-top:.9rem}
.nota strong{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;font-size:clamp(2rem,7.2vw,2.95rem);color:var(--tinta);line-height:1;
  letter-spacing:0;font-variant-numeric:lining-nums tabular-nums}
.nota span{font-size:var(--fs-micro);line-height:1.5}
.social__card{padding:1.5rem 1.35rem;border-radius:var(--r-md);background:var(--papel);box-shadow:inset 0 0 0 1px var(--linha);display:flex;flex-direction:column;gap:.7rem}
.social__card h3{font-size:1.1rem}
.bastidor{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--linha);padding-top:1.5rem}
.bastidor__links{display:flex;flex-wrap:wrap;gap:1.25rem}
@media (min-width:1000px){
  .social__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
  .social__head{grid-column:1 / span 5}
  .social__right{grid-column:7 / span 6}
}

/* ==========================================================
   8 · GARANTIAS
   ========================================================== */
.gar__head{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:48ch}
.gar__cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.25rem}
/* quatro painéis de vidro leve, o numeral em ouro na margem de dentro */
.gar__card{
  padding:1.7rem 1.35rem 1.7rem 3.9rem;display:flex;flex-direction:column;gap:.55rem;
}
.gar__card h3{font-size:1.22rem}
.gar__card p{font-size:var(--fs-small);max-width:60ch}
.gar__n{
  position:absolute;left:1.35rem;top:1.62rem;
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;font-size:1.8rem;line-height:1;
  letter-spacing:0;color:var(--ouro);font-variant-numeric:lining-nums tabular-nums;
}
@media (min-width:768px){
  .gar__cards{grid-template-columns:repeat(2,1fr);gap:1.1rem}
}
.bloco{margin-top:3rem;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.bloco h3{font-size:var(--fs-h3)}
.bloco--aro{border-top:1px solid var(--ouro-claro);padding-top:2rem}
.prazo__linhas{display:flex;flex-direction:column;gap:0}
.prazo__linha{display:flex;gap:1rem;padding-block:.9rem;border-bottom:1px solid var(--linha);align-items:baseline}
.prazo__linha strong{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:400;font-size:1.05rem;color:var(--tinta);flex:0 0 7.5rem}
.prazo__linha p{font-size:var(--fs-small)}
.junto{display:block;column-count:1}
.junto li{break-inside:avoid}
.acc{margin-top:2.5rem;border-top:1px solid var(--linha);max-width:820px}
.acc details{border-bottom:1px solid var(--linha)}
.acc summary{
  list-style:none;cursor:pointer;padding-block:1.05rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:'Instrument Sans','Instrument Fallback',sans-serif;
  font-size:1rem;font-weight:500;color:var(--tinta);line-height:1.35;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"+";color:var(--ouro);font-family:'Instrument Sans','Instrument Fallback',sans-serif;
  font-size:1rem;line-height:1;flex:0 0 auto;
  width:24px;height:24px;display:grid;place-items:center;
  border:1px solid var(--ouro);border-radius:50%;
}
.acc details[open] summary::after{content:"\2212"}
.acc__body{padding-bottom:1.2rem;font-size:var(--fs-small);max-width:66ch}
@media (prefers-reduced-motion:no-preference){
  .acc details[open] .acc__body{animation:heroUp 340ms var(--ease-out) both}
}
.gar__cta{margin-top:3rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media (min-width:768px){
  .junto{column-count:2;column-gap:2.5rem}
  .prazo__linha strong{flex:0 0 9rem}
  /* medida de leitura única: as bordas direitas da seção se alinham */
  .gar .bloco,.gar .bloco p,.gar .bloco .list,.gar .prazo__linhas,.gar .gar__card{max-width:820px}
  .gar .bloco--aro{margin-left:0}
}
/* no desktop a seção deixava 450px de vazio na direita por 2500px de rolagem.
   O título vira coluna fixa à esquerda e o documento ocupa a direita inteira. */
@media (min-width:1000px){
  .gar > .wrap{
    display:grid;grid-template-columns:repeat(12,1fr);
    column-gap:clamp(2rem,4vw,4rem);row-gap:0;align-items:start;
  }
  /* a coluna fixa ganha uma coluna de grade: a sobrancelha cabe numa linha
     e o titulo para de quebrar em quatro pedacos.
     TUDO aqui precisa do prefixo .gar: sem ele o position:sticky vazava para
     os titulos da /revenda, que nao vivem numa grade, e o texto da secao
     passava por cima do titulo preso no topo */
  .gar .gar__head .eyebrow{align-items:flex-start}
  .gar .gar__head .eyebrow::before{margin-top:.52em}
  .gar .gar__head{
    grid-column:1 / span 5;grid-row:1 / span 40;
    position:sticky;top:7rem;align-self:start;max-width:none;
  }
  .gar > .wrap > *:not(.gar__head){grid-column:6 / span 7}
  .gar .gar__cards{margin-top:0}
  .gar .bloco,.gar .bloco p,.gar .bloco .list,
  .gar .prazo__linhas,.gar .gar__card,.gar .acc{max-width:none}
  .gar .junto{column-gap:3rem}
}

/* ==========================================================
   9 · PREÇO
   ========================================================== */
.preco__grid{display:flex;flex-direction:column;gap:2.5rem}
.preco__left{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem}

.preco__linha{
  font-family:'Fraunces','Fraunces Fallback',serif;font-size:clamp(1.72rem,5.5vw,2.78rem);
  color:var(--tinta);line-height:1.16;letter-spacing:-.004em;max-width:18ch;
}
.preco__linha em{font-style:normal;color:var(--verde)}
.preco__parc{font-size:var(--fs-body);color:var(--tinta-suave);max-width:40ch}
.preco__rotulo{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-texto)}
.inclui{border-top:1px solid var(--ouro-claro);padding-top:1.5rem}
/* régua de preço: a escada dos três modelos, com a do meio ancorada */
.regua{margin-top:2rem;display:flex;flex-direction:column}
.regua__t{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto);margin-bottom:.9rem}
.regua__l{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--linha);
}
.regua__l:first-of-type{border-top:1px solid var(--linha)}
.regua__l b{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:400;font-size:1.12rem;color:var(--tinta)}
.regua__l b small{display:block;font-family:'Instrument Sans','Instrument Fallback',sans-serif;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.25rem}
.regua__l i{
  font-style:normal;font-family:'Fraunces','Fraunces Fallback',serif;font-weight:500;font-size:1.44rem;color:var(--tinta);letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
}
.regua__l--mid{
  border-left:2px solid var(--ouro);padding-left:1rem;padding-right:1rem;
  background:linear-gradient(150deg,rgba(253,252,248,.72),rgba(253,252,248,.46));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.regua__l--mid i{font-size:1.75rem}
.regua__nota{margin-top:.9rem;font-size:var(--fs-micro);color:var(--tinta-suave);max-width:38ch}
.vitrine{display:grid;gap:1.5rem;margin-top:2.5rem;border-top:1px solid var(--linha);padding-top:2rem}
.vitrine h4{font-size:var(--fs-h4);margin-bottom:.5rem}
.preco__fecho{display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem;max-width:62ch}
.preco__cta{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media (min-width:768px){.vitrine{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media (min-width:1000px){
  .preco__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
  .preco__left{gap:1.25rem}
  .preco__right{position:sticky;top:6rem}
  .inclui{border-top:0;padding-top:0}
}

/* ==========================================================
   10 · FECHAMENTO
   ========================================================== */
.fecho{position:relative;overflow:hidden}
.fecho__grid{display:flex;flex-direction:column;gap:2.25rem}
.fecho h2{font-size:var(--fs-h2);max-width:14ch}
.fecho__body{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.fecho__media img{width:100%;border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;background:rgba(246,243,236,.06)}
.fecho__final{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-size:1.06rem;color:var(--papel);max-width:40ch;line-height:1.4}
@media (min-width:1000px){
  .fecho__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
  .fecho__body{grid-column:1 / span 6}
  .fecho__media{grid-column:8 / span 5}
  .fecho__media img{aspect-ratio:1/1}
}

/* ==========================================================
   11 · PORTA DE REVENDA
   ========================================================== */
.revenda-linha{background:var(--verde-nevoa);padding-block:1.6rem}
.revenda-linha p{font-size:var(--fs-small);color:var(--tinta-suave);max-width:70ch}
.revenda-linha a{margin-left:.35rem}

/* ==========================================================
   12 · RODAPÉ
   ========================================================== */
.rodape{background:var(--verde-noite);color:rgba(246,243,236,.7);padding-block:clamp(3rem,7vw,4.5rem);position:relative;overflow:hidden}
.rodape__grid{display:flex;flex-direction:column;gap:2.25rem}
.rodape__logo img{height:44px;width:auto;opacity:.96}
.rodape h4{
  font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-claro);
  font-family:'Instrument Sans','Instrument Fallback',sans-serif;margin-bottom:.9rem;
  display:flex;align-items:center;gap:.7em;
}
.rodape h4::before{content:"";width:1.6rem;height:1px;background:var(--ouro-claro);opacity:.9;flex:0 0 auto}
.rodape__marca{
  font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;
  font-size:1.16rem;line-height:1.4;color:var(--papel);max-width:22ch;margin-bottom:1.1rem;
}
.rodape__assin{color:rgba(246,243,236,.5)}
.rodape p,.rodape li{font-size:var(--fs-small);line-height:1.7}
.rodape ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.rodape a{color:rgba(246,243,236,.86)}
@media (hover:hover){.rodape a:hover{color:var(--papel)}}
.rodape__fim{
  margin-top:2.75rem;border-top:1px solid rgba(217,195,154,.22);padding-top:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;font-size:var(--fs-micro);line-height:1.7;
}
/* a barra fixa do mobile cobria a ultima linha do rodape no fim da pagina:
   o rodape reserva a altura dela mais a safe area */
@media (max-width:899px){
  .rodape--barra .rodape__fim{padding-bottom:1.5rem}
  .rodape--barra{
    padding-bottom:calc(clamp(3rem,7vw,4.5rem) + 5rem + env(safe-area-inset-bottom));
  }
}
@media (min-width:768px){
  .rodape__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
}

/* ==========================================================
   BARRA FIXA DO MOBILE
   ========================================================== */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:70% 1fr;gap:.6rem;align-items:center;
  transform:translate3d(0,120%,0);
  transition:transform 420ms var(--ease-out);
  border-radius:0;
}
.barra.is-on{transform:none}
.barra .btn{padding:.92rem .8rem;font-size:.88rem;min-width:0;white-space:nowrap}
.barra__primary{grid-column:1}
.barra__ghost{grid-column:2;font-size:.8rem;padding-inline:.6rem}
/* a nota vive dentro da barra: herda o vidro e nunca imprime sobre o conteúdo.
   Abre por grid-template-rows, que não recalcula o conteúdo, em vez de
   max-height, que era a única fonte de CLS da página */
.barra__nota{
  order:-1;grid-column:1 / -1;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
  text-align:center;
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:opacity 420ms var(--ease-out),grid-template-rows 420ms var(--ease-out);
}
.barra__nota > *{overflow:hidden;min-height:0}
.barra.is-first .barra__nota{grid-template-rows:1fr;opacity:1}
@media (min-width:900px){.barra{display:none}}

/* ==========================================================
   PÁGINA /REVENDA
   ========================================================== */
@media (min-width:1000px){
  .wrap--narrow{max-width:var(--maxw)}
  .wrap--narrow > *{max-width:720px}
}

#revenda-abertura{padding-block:clamp(3rem,6vw,4.5rem)}
.rev-abertura{display:flex;flex-direction:column;gap:1.15rem}
@media (min-width:1000px){
  .rev-abertura{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
  .rev-abertura .rev-abertura__txt{display:flex;flex-direction:column;gap:1.15rem}
}
.rev-abertura__img img{width:100%;border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;background:var(--verde-nevoa)}

.rev-hero{padding-top:7rem;padding-bottom:clamp(2.5rem,7vw,4rem)}
.rev-hero h1{font-size:clamp(2.2rem,6.6vw,3.7rem);max-width:17ch}
.rev-hero__body{display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start}
.rev-prova{font-size:var(--fs-micro);line-height:1.7;border-top:1px solid var(--linha);padding-top:.9rem;max-width:56ch}
.rev-num{display:grid;grid-template-columns:1fr;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r-sm);overflow:hidden}
.rev-num__item{background:var(--papel);padding:1.15rem 1.1rem;display:flex;flex-direction:column;gap:.3rem}
.rev-num__item dt{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto)}
.rev-num__item dd{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.06rem;color:var(--tinta);line-height:1.3}
.rev-form{display:flex;flex-direction:column;gap:1rem}
.rev-form .field{display:flex;flex-direction:column;gap:.35rem}
.rev-form label{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.rev-form input,.rev-form select{
  border:1px solid var(--linha);border-radius:var(--r-xs);background:var(--papel);
  padding:.85rem .9rem;font-size:1rem;color:var(--tinta);
}
.rev-form input:focus,.rev-form select:focus{outline:none;border-color:var(--verde)}
.rev-img img{width:100%;border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;background:var(--verde-nevoa)}
@media (min-width:768px){
  .rev-num{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .rev-hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
  .rev-hero__body{grid-column:1 / span 7}
  /* a foto do hero de atacado tinha metade da altura do titulo e boiava
     no canto: ganha corpo e encosta na linha de base do bloco de texto */
  .rev-img{grid-column:8 / span 5}
  .rev-img img{aspect-ratio:4/5}
  .rev-num{grid-template-columns:repeat(3,1fr)}
  .rev-form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
  .rev-form .field--full,.rev-form .rev-form__cta{grid-column:1 / -1}
}
.rev-form__cta{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}