/* ===== TOKENS ===== */
:root{
  --preto:#050505; --preto-hero:#090909; --preto-quente:#1B170C; --card:#111111;
  --bege:#E2DCCE; --bege-claro:#ECE2D8; --sage:#B7B299;
  --creme:#E2DACD; --creme-titulo:#CDC9B9; --rotulo:#ABA894; --mudo:#9F998A; --escuro:#221D1A;
  --ouro:#B8964D; --ouro-escuro:#8C7444;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Medidos no modelo a 1920px: H1 ~104px, sub ~28px, rotulo 14px.
     Reduzidos a pedido: o texto da DASP e mais longo que o do modelo
     (57 caracteres contra 41), entao no mesmo corpo ele quebrava em 5 linhas. */
  --t-h1:clamp(2.35rem,4vw,4.8rem); --t-h2:clamp(1.9rem,3.1vw,3rem); --t-h3:1.95rem;
  --t-corpo:1.0625rem; --t-rotulo:.875rem;
  --t-sub:clamp(1.05rem,1.25vw,1.5rem);
  --raio-card:18px; --raio-botao:4px; --raio-img:14px;
  --track-rotulo:.22em; --altura-divisor:48px;
  --largura:72%; --largura-max:1560px;
  --header-h:96px;                 /* no modelo o header mede 95px */
  /* O header TEM de ser exatamente a cor do hero. Media separadamente no
     modelo, essa cor deu #0B0B0A contra os #090909 do hero — dois niveis de
     diferenca em 255. Isso e ruido de medicao, nao intencao de projeto, e
     virava um risco horizontal visivel em monitor que abre sombra.
     Se um dia mudar --preto-hero, mude este junto. */
  --preto-header:#090909;
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bege);color:var(--escuro);
  font-family:var(--sans);font-size:var(--t-corpo);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.13;margin:0}
p{margin:0 0 1.1em}

/* CORRECAO 3 — conteudo em 85% da largura */
.wrap{width:var(--largura);max-width:var(--largura-max);margin:0 auto}

/* badge — caixa medida no modelo: 453x40px, borda 1px OPACA (nao 45%), canto 6px */
.rotulo{display:inline-block;font-family:var(--sans);font-size:var(--t-rotulo);
  letter-spacing:var(--track-rotulo);text-transform:uppercase;color:var(--rotulo);
  border:1px solid rgba(171,168,148,.82);border-radius:6px;padding:11px 30px;line-height:1.2}
/* Borda do badge sobre fundo claro. No modelo ela fica so 13 pontos de
   luminancia abaixo do fundo bege (206 contra 220). A .5 que estava aqui
   dava 95 pontos — sete vezes mais forte. */
/* Nas secoes claras o badge e MAIOR, como no modelo: la ele mede 54px de
   altura com texto de ~16px, contra 40px e 14px do badge do hero. */
.claro .rotulo{color:#5f5a4c;border-color:rgba(34,29,26,.09);
  font-size:1rem;padding:16px 34px}
.h1{font-size:var(--t-h1);color:var(--creme-titulo);letter-spacing:-.012em;line-height:.9}
.h2{font-size:var(--t-h2);color:var(--creme-titulo)}
.claro .h1,.claro .h2{color:var(--escuro)}
.sub{color:var(--creme);opacity:.82;max-width:56ch}
.claro .sub{color:var(--escuro);opacity:.78}
.losango{width:14px;height:14px;background:var(--creme);transform:rotate(45deg);
  margin:34px auto;border-radius:2px}
.claro .losango{background:var(--escuro)}

.btn{display:inline-block;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:var(--sage);color:var(--escuro);padding:19px 34px;
  border-radius:var(--raio-botao);border:0;cursor:pointer;transition:filter .2s}
.btn:hover{filter:brightness(1.07)}
.btn-escuro{background:var(--preto);color:var(--creme)}
.btn-bloco{display:block;width:100%;text-align:center}
/* botao do hero — no modelo mede 426x83px, com maiusculas de 17px */
.btn-grande{font-size:1.28rem;font-weight:600;letter-spacing:.055em;padding:22px 46px}
.link-seta{font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:3px}

.divisor{display:block;width:100%;height:var(--altura-divisor);position:relative;z-index:1}
.divisor path{fill:var(--bege)}
.divisor.p-preto path{fill:var(--preto)}
.divisor.p-sage path{fill:var(--sage)}

/* ===== HEADER — CORRECAO 1 ===== */
/* Header SOLIDO em altura fixa. No modelo ele tem 95px e a foto do hero
   comeca exatamente embaixo dele, em y=95 — nao passa por tras. */
.topo{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);
  display:flex;align-items:center;background:var(--preto-header)}
.topo.solido{border-bottom:1px solid rgba(226,218,205,.09)}
.topo .wrap{display:flex;align-items:center;gap:24px;position:relative}
.marca img{height:65px;width:auto}
/* menu centralizado no header, independente da largura do logo e do botao */
.nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:34px}
.nav a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;opacity:.82;transition:opacity .2s}
.nav a:hover{opacity:1}
.nav a[aria-current]{opacity:1;border-bottom:1px solid var(--ouro);padding-bottom:4px}
/* botao do header — vazado, como no modelo: 141x41px, borda de 2px, caixa normal */
.topo .btn{margin-left:auto;background:transparent;color:var(--creme);
  border:2px solid rgba(226,218,205,.8);border-radius:3px;
  padding:9px 24px;font-size:.85rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;transition:background .2s,color .2s}
.topo .btn:hover{filter:none;background:var(--creme);color:var(--preto)}
.hamb{display:none;background:0;border:0;cursor:pointer;padding:8px;margin-left:auto}
.hamb span{display:block;width:26px;height:1.5px;background:var(--creme);margin:6px 0}

/* ===== HERO =====
   A foto saiu da grade: agora e uma faixa absoluta que sangra ate a borda
   direita e ocupa a altura inteira da secao, comecando embaixo do header.
   A dissolucao NAO usa mais mascara — usa tres degrades empilhados na cor
   exata do fundo. Mascara com 'mask-composite' nao estava sendo aplicada e
   as duas camadas se somavam em vez de se cruzarem: dava borda dura. */
.hero{background:var(--preto-hero);position:relative;overflow:hidden;
  min-height:min(96vh,990px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 70px) 0 60px}
/* Luzes douradas sobre preto, distribuidas por toda a abertura.
   A mascara dissolve o topo junto ao header e evita uma emenda horizontal. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 30%,rgba(184,150,77,.24) 0%,transparent 54%),
    radial-gradient(ellipse at 84% 38%,rgba(184,150,77,.30) 0%,transparent 58%),
    radial-gradient(ellipse at 45% 110%,rgba(184,150,77,.23) 0%,transparent 62%),
    linear-gradient(122deg,transparent 15%,rgba(184,150,77,.08) 32%,transparent 47%,
      rgba(184,150,77,.10) 66%,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%)}

/* Trama dourada sutil em toda a largura, dissolvida nas bordas. */
.hero-malha{position:absolute;z-index:1;pointer-events:none;display:block;
  left:0;top:var(--header-h);width:100%;height:calc(100% - var(--header-h));
  opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse 68% 50% at 50% 50%,#000 0%,rgba(0,0,0,.72) 32%,rgba(0,0,0,.34) 56%,rgba(0,0,0,.1) 76%,transparent 94%);
          mask-image:radial-gradient(ellipse 68% 50% at 50% 50%,#000 0%,rgba(0,0,0,.72) 32%,rgba(0,0,0,.34) 56%,rgba(0,0,0,.1) 76%,transparent 94%)}

/* camada 2 — recorte da Deidy, ancorado no rodape, comecando abaixo do header.
   Nao precisa mais de degrade nenhum: a transparencia do PNG faz o recorte. */
/* right controla o quanto ela avanca pra direita. Em 1920px de tela:
   3%  -> eixo dela em x 1547 (encostada na borda, como estava)
   13% -> eixo dela em x 1355 (posicao pedida, mais ao centro)
   Subir esse numero puxa ela mais pro meio; baixar joga pra borda. */
/* RODIZIO DE 3 FOTOS. As tres foram montadas no MESMO quadro de 1935x1955,
   alinhadas pelo centro da cabeca dela — medido no arquivo final: 1001, 1000
   e 1001, um pixel de diferenca. Por isso a troca nao mexe a Deidy de lugar
   nem de tamanho; so muda a pose.
   O quadro precisou ficar mais largo que o da foto original (1400px) porque
   nas outras duas ela segura coisas: o tablet passa 48px pra esquerda e 71
   pra direita, o aparelho de laser passa 115 e 158.
   AQUI ESTA O PULO DO GATO: o .hero-foto continua com a proporcao ANTIGA
   (1400/1955) e com right:13%, exatamente como estava. Quem cresceu foi a
   imagem, que agora TRANSBORDA o container por left:-16.07%. Assim a janela
   visivel da foto 1 cai pixel a pixel onde ela ja estava — em qualquer
   largura de tela — em vez de depender de uma margem recalculada, que so
   bateria certo numa resolucao. As outras duas transbordam de proposito.
   O -16.07% sai de 225/1935 (onde a foto antiga comeca dentro do quadro
   novo) multiplicado por 1935/1400 (quanto a imagem e maior que o
   container). Mexeu num, recalcula o outro. */
.hero-foto{position:absolute;right:13%;bottom:0;top:auto;z-index:2;
  height:calc(100% - var(--header-h) - 14px);width:auto;aspect-ratio:1400/1955}
/* max-width:none NAO E OPCIONAL. La em cima existe um img{max-width:100%}
   global. Estas imagens sao de proposito MAIS LARGAS que o container (1935
   de quadro contra 1400 de janela), entao aquela regra global entrava e
   grampeava a largura na do container, mantendo a altura — resultado: a
   Deidy espremida na horizontal a 72% da largura certa, e ainda por cima
   deslocada, porque o -16.07% e calculado sobre a largura do container e
   passou a apontar pro lugar errado.
   Antes isso nao acontecia porque o container nao tinha largura propria:
   ele nascia do tamanho da imagem, entao 100% era exatamente a largura
   dela e o clamp nunca mordia. Ao dar aspect-ratio ao container, a largura
   virou um numero fixo e menor — e o clamp passou a morder. */
.hero-slide{position:absolute;top:0;left:-16.07%;height:100%;width:auto;
  max-width:none;display:block;opacity:0;transition:opacity .9s ease}
.hero-slide.ativa{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* Sem dissolucao no pe: ela termina em corte reto na borda da secao, como
   no modelo. O degrade que existia aqui foi retirado a pedido. */
.hero .wrap{position:relative;z-index:3}
.hero-txt{max-width:min(56%,750px)}
.hero .h1{margin:30px 0 0}
.hero .sub{margin:30px 0 42px;font-size:var(--t-sub);line-height:1.62;max-width:44ch}
/* os 3 textos ficam DENTRO do hero, abaixo do botao — no modelo, y 885..943 */
.hero-provas{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:46px;
  max-width:660px}
.hero-provas span{font-size:.95rem;line-height:1.6;color:var(--creme);opacity:.62}

/* Selo. O modelo NAO usa disco chapado com contorno: o circulo tem degrade
   com a luz vindo de cima e da direita — medido, #141413 no lado esquerdo
   contra #363636 no direito — e nao tem borda visivel. O simbolo dele e um
   cinza claro quente (#DED7CA), nao dourado. Aqui a libelula vira cinza por
   filtro, entao continua sendo o mesmo arquivo do resto do site. */
/* O selo NAO pode viver dentro do hero: o hero tem overflow:hidden, e isso
   cortava tanto a base dele quanto a sombra, que terminava seca no bege.
   Ele passou a ser filho da secao bege, que nao recorta, e sobe metade da
   propria altura pra ficar montado na emenda entre as duas cores. */
.com-selo{position:relative}
.com-selo .selo{position:absolute;top:-59px;left:50%;transform:translateX(-50%);
  margin:0;z-index:5}
.selo{width:118px;height:118px;border-radius:50%;border:0;
  background:radial-gradient(circle at 72% 26%,#3d3b37 0%,#242320 34%,#141312 70%,#0d0c0b 100%);
  display:grid;place-items:center;margin:0 auto -59px;position:relative;z-index:3}
/* Dentro do selo nao vai mais a libelula sozinha: vai o "A" do logotipo COM
   a libelula atravessada nele, que e como a marca se escreve. Preenche o
   disco em vez de deixar uma faixa fina no meio dele.
   O arquivo foi tirado do VETOR (identidade-visual/dasp fundo preto.svg),
   nao de um print: no logo o bloco do A ocupa x 381..745 e y 411..688 do
   viewBox de 1254, com folga limpa do D e do S — a envergadura das asas
   nao encosta em nenhuma das duas letras. Renderizei a 4x e recortei ali.
   A transparencia foi feita pelo canal alpha = max(R,G,B) do render sobre
   preto. Efeito colateral proposital: a libelula, que no logo e dourada,
   fica um pouco menos opaca que o A, que e branco — entao a hierarquia do
   logotipo se mantem, a letra na frente e o ornamento atras.
   O filtro continua o mesmo de antes: no modelo o simbolo do selo e um
   cinza claro quente, nao dourado. */
.selo img{width:76px;filter:grayscale(1) brightness(1.55)}

/* ===== SECOES ===== */
.sec{padding:110px 0}
.sec.fim-divisor{padding-bottom:0}          /* nada de cor voltando depois da curva */
.sec.claro{background:var(--bege)}
.sec.sage{background:var(--sage)}
.sec.preta{background:var(--preto)}
.centro{text-align:center}
.centro .sub{margin-left:auto;margin-right:auto}

.intro{max-width:1120px;margin:0 auto;text-align:center}
.intro .h2{margin:22px 0 26px}
/* Corpo de texto medido na faixa bege do modelo: 24px, entrelinha 1,7.
   Reusa o token --t-sub, que ja vale 24px a 1920. */
.intro p{color:rgba(34,29,26,.8);font-size:var(--t-sub);line-height:1.7}
.intro .destaque{font-weight:500;color:var(--escuro)}

/* cards de tratamento */
.grade{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grade-2{display:grid;gap:26px;grid-template-columns:1fr 1fr;position:relative}
/* Luz circular UNICA, centrada no encontro dos quatro cards. Nao e um veu por
   foto: e uma camada por cima da grade inteira, pintada na cor do fundo da
   secao, entao os quatro cantos internos e os vaos se dissolvem juntos.
   Raios: solida ate ~22% do raio, metade em 46%, some em 72%. */
.grade-2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.8) 0%,
    rgba(255,255,255,.6) 16%,
    rgba(255,255,255,.28) 34%,
    rgba(255,255,255,0) 56%)}
/* gap:0 de proposito. O espacamento e definido peca a peca, porque ele nao
   e uniforme: o respiro entre o preco e o botao e maior que os demais. */
.card{background:var(--card);border-radius:var(--raio-card);padding:42px 34px;
  display:flex;flex-direction:column;gap:0;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,background .45s ease}
/* Movimento no card inteiro ao passar o mouse. Usa transform, que nao afeta o
   fluxo — os vizinhos nao se mexem quando um card sobe.
   :focus-within entra junto pra quem navega pelo teclado ter o mesmo retorno. */
.card:hover,.card:focus-within{
  transform:translateY(-10px);
  background:#15120B;
  box-shadow:0 26px 52px rgba(0,0,0,.5),0 0 0 1px rgba(184,150,77,.3)}
.card:hover .moldura,.card:focus-within .moldura{border-color:rgba(184,150,77,.95)}
.card:hover .moldura img,.card:focus-within .moldura img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .card,.card .moldura,.card .moldura img{transition:none}
  .card:hover,.card:focus-within{transform:none}
}
/* Icones extraidos do proprio modelo do Behance, a pedido. Sao rasters de
   57px de origem: no quadro de 76px ficam ligeiramente ampliados, e numa
   tela de alta densidade vao aparecer macios. Sao tambem ativos de outra
   empresa — pra producao, comprar o conjunto equivalente. */
.card .moldura{width:76px;height:76px;border:1px solid rgba(184,150,77,.55);
  border-radius:10px;display:grid;place-items:center;flex:0 0 auto;margin-bottom:32px;
  transition:border-color .45s ease}
/* max nos dois eixos: os tres icones tem proporcoes diferentes (um e mais
   largo que alto), e travar so a largura deixaria ele visualmente menor. */
.card .moldura img{max-width:54px;max-height:54px;width:auto;height:auto;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card .eyebrow{font-size:.78rem;font-weight:500;letter-spacing:var(--track-rotulo);
  text-transform:uppercase;color:var(--ouro);margin:0 0 16px}
.card h3{font-family:var(--serif);font-size:var(--t-h3);color:var(--creme);margin:0 0 22px}
.card p{color:var(--mudo);font-size:1.28rem;line-height:1.7;margin:0 0 26px}
.card .meta{font-size:1rem;color:var(--rotulo);letter-spacing:.04em;margin:0 0 36px}
/* Medido no card do modelo: corpo 21px com entrelinha 1,7, rotulo 12,5px.
   O botao do card ganha corpo proprio pra nao mexer no .btn global, que
   tambem serve o header e o rodape. */
.card .btn{margin-top:auto;font-size:.98rem;letter-spacing:.08em;padding:21px 18px}

/* CORRECAO 6a — veu claro e texto escuro, como no modelo */
.cardimg{position:relative;border-radius:var(--raio-img);overflow:hidden;
  min-height:380px;display:flex;align-items:flex-end;padding:34px}
.cardimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.68) contrast(1.02) brightness(1.04);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.cardimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(236,226,216,.06) 0%,rgba(236,226,216,.72) 52%,rgba(236,226,216,.97) 100%);
  transition:opacity .7s ease}

/* HOVER destes cards — de proposito DIFERENTE do bloco de tratamentos.
   La o card inteiro sobe; aqui o quadro fica PARADO e a imagem se aproxima
   dentro dele, o veu clareia e o texto sobe um pouco. Sao tres movimentos
   coordenados, em tempos diferentes, pra nao parecer um unico salto.
   O overflow:hidden do card e o que segura a imagem ampliada dentro do
   canto arredondado. */
.cardimg:hover img,.cardimg:focus-within img{
  transform:scale(1.075);filter:saturate(.8) contrast(1.04) brightness(1.02)}
.cardimg:hover::after,.cardimg:focus-within::after{opacity:.86}
.cardimg .txt{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.cardimg:hover .txt,.cardimg:focus-within .txt{transform:translateY(-7px)}
@media (prefers-reduced-motion:reduce){
  .cardimg img,.cardimg::after,.cardimg .txt{transition:none}
  .cardimg:hover img,.cardimg:focus-within img{transform:none}
  .cardimg:hover .txt,.cardimg:focus-within .txt{transform:none}
}
/* z-index 4 pra ficar ACIMA da luz central da grade, que esta em 2.
   Os dois estavam em 2; empatados, vence quem vem depois no HTML — e a
   luz vem depois, entao ela lavava o texto do card mais proximo do centro. */
.cardimg .txt{position:relative;z-index:4;max-width:34ch}
.cardimg h3{font-family:var(--sans);font-size:1.12rem;font-weight:600;color:var(--escuro);margin:0 0 7px}
.cardimg p{font-size:.93rem;color:rgba(34,29,26,.72);margin:0}

/* depoimentos */
/* Carrossel de depoimentos: um por vez, troca sozinho.
   Os slides ficam empilhados na MESMA celula de grid — assim o palco tem a
   altura do maior deles e a caixa nao pula de tamanho a cada troca. */
.carrossel{max-width:900px;margin:0 auto}
/* Janela do carrossel: recorta o que entra e o que sai pelas laterais. */
.depo-quadro{position:relative;overflow:hidden}
.depo-palco{display:grid}
/* Repouso: parado FORA da janela, a direita, e SEM transicao — assim ele nao
   aparece voltando pela tela quando sai da vez e volta pra fila. */
.depo-palco>*{grid-area:1/1;transform:translateX(100%);opacity:0;
  pointer-events:none;transition:none}
/* Entra: da direita para o centro. */
.depo-palco>.ativo{transform:translateX(0);opacity:1;pointer-events:auto;
  transition:transform .7s cubic-bezier(.33,0,.2,1),opacity .55s ease}
/* Sai: do centro para a esquerda. */
.depo-palco>.saindo{transform:translateX(-100%);opacity:0;
  transition:transform .7s cubic-bezier(.33,0,.2,1),opacity .55s ease}
.depo{text-align:center;margin:0}
.depo p{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1.55vw,1.75rem);color:var(--escuro);
  line-height:1.5;margin:0 0 28px}
.depo cite{font-style:normal;font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(34,29,26,.55)}
.depo-pontos{display:flex;justify-content:center;gap:12px;margin-top:44px}
.depo-pontos button{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(34,29,26,.22);cursor:pointer;transition:background .3s,transform .3s}
.depo-pontos button.ativo{background:var(--ouro-escuro);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){
  .depo-palco>*,.depo-palco>.ativo,.depo-palco>.saindo{transition:none}
}

/* CTA final — a composicao inteira (recorte da Deidy, foto menor atras e o
   cartao do logo) veio pronta num PNG unico enviado pelo usuario. Por isso
   aqui nao ha mais camadas: as antigas .inset, .principal e .selo-flut foram
   removidas, e o selo circular sairia redundante com o logo ja na imagem. */
/* Medido no CTA do modelo: titulo ~70px, subtitulo 25px, botao de 80px de
   altura. O h2 e o sub ganham corpo proprio aqui pra nao mexer nos tokens
   globais, que servem tambem os outros quatro blocos da pagina. */
.cta{position:relative;overflow:hidden}
/* Mesma malha do hero, agora cobrindo o bloco inteiro. width/height
   explicitos: SVG embutido sem viewBox e elemento substituido e assume
   300x150px se nao forem declarados. */
.cta-malha{position:absolute;z-index:0;pointer-events:none;display:block;
  /* Baixou mais que a do hero — de .30 para .20, contra .26 para .19 la —
     e o motivo e o fundo. Este bloco roda sobre #050505 e o hero sobre
     #090909. Quatro niveis mais escuro faz o MESMO fio de malha render com
     degrau maior aqui: 24 niveis contra 20. Por isso a compensacao e
     desigual: nao adianta usar o mesmo numero nos dois lugares. */
  left:0;top:0;width:100%;height:100%;opacity:.2;
  -webkit-mask-image:radial-gradient(ellipse 78% 50% at 50% 50%,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.4) 58%,rgba(0,0,0,.12) 78%,transparent 96%);
          mask-image:radial-gradient(ellipse 78% 50% at 50% 50%,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.4) 58%,rgba(0,0,0,.12) 78%,transparent 96%)}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.04fr;gap:70px;align-items:center}
.cta .h2{font-size:clamp(2.2rem,3.9vw,4.4rem);line-height:1.02}
/* sem trava de largura: quem manda e a coluna da grade. O 24ch que estava
   aqui quebrava a linha na metade do espaco disponivel. */
/* peso 300: texto claro sobre fundo escuro parece mais pesado do que e,
   porque o brilho vaza na borda das letras. Corrigir pelo peso preserva o
   contraste; baixar a opacidade resolveria a aparencia mas apagaria o texto. */
.cta .sub{font-size:clamp(1.15rem,1.45vw,1.7rem);line-height:1.6;max-width:none;
  font-weight:300;letter-spacing:.005em}
.comp{position:relative}
/* O RETANGULO EM VOLTA DA IMAGEM ERA ISTO AQUI.
   Um radial-gradient sem palavra de tamanho usa 'farthest-corner': a elipse
   e dimensionada pelo canto MAIS DISTANTE. Com o centro fora do meio
   (58%/42%), as bordas proximas da caixa ficam la atras — medi: a borda
   direita e a de cima caiam a 51,2% da elipse, onde o dourado ainda tinha
   opacidade 0,043. Ou seja, o degrade nunca terminava dentro da caixa: a
   BORDA DA CAIXA e que virava o limite do brilho, e por isso aparecia um
   retangulo de 6 niveis de degrau em volta da foto.
   Isso existia desde o inicio. E o meu ajuste anterior PIOROU: ao esticar
   a dissolucao de 64% para 88% eu levantei a opacidade no meio do caminho,
   e 51,2% e meio do caminho — a borda subiu de 0,032 para 0,043. Foi por
   isso que, no CTA, "nada mudou".
   A correcao nao e baixar mais o dourado: e trocar a regra de tamanho.
   Com 'closest-side' a elipse chega a 100% exatamente na borda mais
   proxima, entao TODAS as bordas caem em transparente — as proximas em
   100% e as distantes ainda mais longe. Nao sobra limite pra aparecer.
   A caixa cresceu junto (de -6%/-4% para -22%/-27%) so pra compensar: com
   closest-side o raio passa a ser a distancia ate a borda mais proxima, e
   numa caixa pequena o brilho ficaria colado na foto.
   pointer-events:none porque agora ela avanca por cima da coluna de texto.
   O brilho do HERO nao tem esse defeito: la eu declarei os raios na mao
   (80% 56%), entao ele nao depende da palavra de tamanho. */
.comp::before{content:"";position:absolute;inset:-22% -27%;pointer-events:none;
  background:radial-gradient(ellipse closest-side at 58% 42%,
    rgba(184,150,77,.11) 0%,rgba(184,150,77,.068) 34%,
    rgba(184,150,77,.03) 60%,rgba(184,150,77,.009) 76%,transparent 88%)}
.comp img{position:relative;z-index:2;width:100%;height:auto}

/* ===== RODAPE — CORRECAO 7 ===== */
.rodape{background:var(--sage);padding:92px 0 0;color:var(--escuro)}
.rodape .grade-pe{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px}
.rodape img.logo{height:78px;width:auto;margin-bottom:24px}
.rodape h4{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:var(--track-rotulo);text-transform:uppercase;margin:0 0 16px;
  color:rgba(34,29,26,.62)}
.rodape p,.rodape a:not(.btn){font-size:.95rem;color:rgba(34,29,26,.85);text-decoration:none}
.rodape a:not(.btn):hover{text-decoration:underline}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:9px}
.rodape .tag{font-family:var(--serif);font-style:italic;font-size:1.08rem;
  color:rgba(34,29,26,.75);margin:0 0 24px}
.rodape .fim{margin-top:70px;border-top:1px solid rgba(34,29,26,.18);
  padding:24px 0 32px;font-size:.82rem;color:rgba(34,29,26,.6)}

/* =====================================================================
   FAIXA PRETA CONTINUA — RESULTADOS + SEGURANCA + FAQ + PROXIMO PASSO
   =====================================================================
   No modelo os quatro blocos moram dentro de UMA faixa preta de 4856px
   (y 7544..12399), sem emenda, sem divisor e sem troca de cor entre eles.
   Aqui e igual: quatro <section> com o mesmo background, so com os
   espacamentos internos do modelo. Medidos a 1920px:
     inicio do preto -> rotulo de Resultados ....  88px
     botao -> card de Seguranca ................. 100px
     card -> rotulo do FAQ ......................  89px
     ultimo acordeao -> CTA ..................... 218px  (142 + 76 do CTA)
   A malha dourada NAO se estende por aqui: ela fica so no "Seu proximo
   passo", como pedido. */
.sec.resultados{padding:96px 0 0}
.sec.seguranca{padding:104px 0 0}
.sec.faq{padding:96px 0 142px}

/* Titulo destes blocos. No modelo a capitular mede 56px, o que da Playfair
   de 80px a 1920 (4,17vw) — bem maior que o --t-h2 de 48px das secoes
   claras. Nao destoa porque o CTA logo abaixo ja roda a 70px. */
.h2-grande{font-size:clamp(2.2rem,4.17vw,5rem);line-height:1.04;
  color:var(--creme-titulo);letter-spacing:-.01em}
/* losango do modelo: caixa de 35x33, ou seja, quadrado de 24px girado a 45.
   Cor medida #B7B99F — o nosso --sage, nao o creme das secoes claras. */
.losango-sage{width:24px;height:24px;background:var(--sage);border-radius:2px;
  transform:rotate(45deg);margin:30px auto 0}

/* ---------- RESULTADOS REAIS ---------- */
.resultados .abre{text-align:center;margin-bottom:104px}
.resultados .abre .h2-grande{margin:34px 0 24px}
.resultados .abre .sub{margin:0 auto;max-width:54ch}
/* 3 colunas com vao de 25px em 1470 = 1,7% do container */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7%}
/* Card medido no modelo: 465x476, borda dourada de 2px (#BE9163 no pico),
   canto de 20px. As duas metades vem coladas dentro do MESMO arquivo —
   por isso nao ha divisoria em CSS: o corte esta na imagem. */
.antes-depois{position:relative;margin:0;aspect-ratio:465/476;
  border:2px solid #BE9163;border-radius:20px}
.antes-depois>img{width:100%;height:100%;object-fit:cover;border-radius:18px}
/* Medalhao de 62px montado na borda de baixo do card (o do modelo mede 64px
   num card de 465px; aqui o card da 445px, entao 62px mantem a proporcao).
   O do modelo NAO e um disco chapado: e um DOMO metalico. Medido numa
   vertical pelo centro dele, de y 8488 a 8552:
     0% #D4A571 . 18% #F9EFE2 (brilho) . 31% #E4CEB8 . 43% #9E7A5B
     56% #9A734E . 75% #685640 (o mais escuro) . 87% #A78864 . 93% #C9A376
   Repare no trecho 87-93%: ele CLAREIA de novo perto da base. E luz
   refletida — o mesmo truque que faz uma esfera parecer esfera. Sem isso o
   disco vira adesivo, que era o problema da versao anterior.
   Por isso sao dois fundos empilhados: um degrade vertical para o corpo e a
   luz de baixo, e um radial por cima so para o brilho especular do topo.
   Borda: nenhuma. A beirada e macia, com um halo quente em volta — no
   modelo nao existe contorno desenhado. */
.antes-depois .medalha{position:absolute;left:50%;bottom:0;z-index:3;
  transform:translate(-50%,50%);width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 62% 44% at 48% 19%,
      rgba(255,252,242,.96) 0%,rgba(252,240,222,.72) 26%,
      rgba(238,210,172,.28) 52%,rgba(214,175,126,0) 78%),
    linear-gradient(180deg,#D4A571 0%,#D9AC79 8%,#CFA06B 22%,#B98F5E 36%,
      #A17A4E 50%,#8D6947 62%,#775C3E 72%,#725839 80%,#916F4A 88%,
      #B8925F 95%,#CBA579 100%);
  box-shadow:0 0 16px rgba(201,163,118,.42),0 7px 18px rgba(0,0,0,.55),
    inset 0 -1px 2px rgba(255,234,200,.34)}
/* Dentro vai o losango do proprio bloco, no lugar da libelula: a 32px ela
   virava um borrao branco sem leitura nenhuma. O losango do modelo tem
   linha fina; este e cheio, como o da secao, so que com um degrade leve e
   um fio de sombra pra assentar no metal em vez de flutuar por cima. */
.antes-depois .medalha .gema{width:16px;height:16px;border-radius:2px;
  transform:rotate(45deg);box-shadow:0 1px 2px rgba(74,50,24,.5);
  background:linear-gradient(145deg,#F8EFDC 0%,#EFE0C4 58%,#E0CBA6 100%)}
.resultados .acao{text-align:center;margin-top:118px}

/* HOVER dos cards de resultado. O mouse em UM card mexe so nele.
   1) GIRO do medalhao, 0,75s, uma volta completa.
      Quem gira e a GEMA, nao o disco. O disco e um circulo liso: girar ele
      nao mudaria nada visivel, a nao ser fazer o brilho do topo ORBITAR — e
      luz que anda em volta de uma peca de metal entrega na hora que a coisa
      e falsa. Numa medalha girando no proprio plano a luz fica parada e
      quem roda e o relevo. E isso que acontece aqui, entao o efeito que se
      ve e o mesmo, so que sem o erro de iluminacao.
      A gema ja nasce com rotate(45deg) — e o que transforma o quadrado em
      losango — por isso o giro vai de 45 a 405 graus: da a volta inteira e
      para exatamente onde comecou.
   2) FLASH na imagem, 0,8s, a mesma faixa do cartao "Seguranca".
      Aqui ela NAO pode ser uma tira estreita andando com translateX como la,
      porque este card nao tem overflow:hidden — e nao pode ter, senao
      cortaria o medalhao, que precisa vazar pela borda de baixo.
      A saida foi outra: o ::after cobre o card inteiro, ja com o raio da
      imagem, e o que se move e o background-position. Nada escapa da
      moldura e nao foi preciso mexer no HTML.
      background-repeat:no-repeat e OBRIGATORIO. No padrao 'repeat' o
      degrade se repetiria lado a lado e passariam varias faixas ao mesmo
      tempo, em vez de uma.
      O medalhao subiu pra z-index 3 por causa disto: o ::after cobre so a
      area da imagem, entao sem isso a faixa cortaria o medalhao ao meio,
      bem na linha da borda de baixo do card. */
.antes-depois:hover .gema,.antes-depois:focus-within .gema{
  animation:medalha-giro .75s cubic-bezier(.32,.72,.28,1)}
@keyframes medalha-giro{
  from{transform:rotate(45deg)}
  to  {transform:rotate(405deg)}
}
.antes-depois::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:18px;opacity:0;
  background:linear-gradient(102deg,transparent 45%,rgba(255,252,244,.5) 50%,transparent 55%);
  background-size:280% 100%;background-repeat:no-repeat;background-position:100% 0}
.antes-depois:hover::after,.antes-depois:focus-within::after{
  animation:card-flash .8s cubic-bezier(.3,.5,.4,1)}
@keyframes card-flash{
  0%  {opacity:0;background-position:100% 0}
  8%  {opacity:1}
  92% {opacity:1}
  100%{opacity:0;background-position:0% 0}
}
@media (prefers-reduced-motion:reduce){
  .antes-depois:hover .gema,.antes-depois:focus-within .gema{animation:none}
  .antes-depois:hover::after,.antes-depois:focus-within::after{animation:none}
}

/* ---------- SEGURANCA E CRITERIO CLINICO ----------
   Este bloco NAO tem fundo preto no modelo: e um cartao claro de 1470x756
   (canto de 24px) apoiado sobre o preto. O fundo dele e um degrade
   horizontal medido ponto a ponto, a y=8920:
     x240 #B6B097 . x600 #BCB69F . x800 #DBD6C9 . x1000 #E3D9D0 . x1300 #D8C8BD
   Fundo do cartao, lido no modelo em tres alturas (y 9000/9200/9400):
     0-22% chapado #B6B097 . 30% #C4BEA7 . 38% #D7D0C2 . 46% #E0D8CD
     56% #E2DAD1 . 66% #E3DDD6
   A DISSOLUCAO DA FOTO NAO E FEITA EM CSS. Ela esta gravada no canal alpha
   do proprio .webp: a imagem sai de opacidade zero em 30% da sua largura e
   chega a 100% em 64%, numa curva suavizada (smoothstep). Foi a saida certa
   por dois motivos — nao repete o problema de mask-composite deste arquivo,
   e acaba com a emenda dura que existia antes, quando a foto comecava de
   supetao na borda do proprio elemento e so DEPOIS era veada por um degrade.
   Aquele veu clareava a foto, mas o salto de "nenhuma foto" para "16% de
   foto" continuava aparecendo como um risco vertical.
   Largura de 82% de proposito: assim a caixa fica MAIS LARGA que a
   proporcao da imagem (1,59 contra 1,50) e o object-fit:cover corta em
   cima e embaixo, nunca nas laterais — se cortasse na lateral esquerda,
   levaria junto a parte dissolvida e a emenda dura voltaria. */
.seg-card{position:relative;overflow:hidden;border-radius:24px;
  display:flex;align-items:center;min-height:min(37vw,802px);
  background:linear-gradient(90deg,#B6B097 0%,#B6B097 22%,#C4BEA7 30%,
    #D7D0C2 38%,#E0D8CD 46%,#E2DAD1 56%,#E3DDD6 66%,#DFD5CB 100%)}
.seg-foto{position:absolute;right:0;top:0;width:82%;height:100%;
  object-fit:cover;object-position:center 40%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
/* z-index explicito: a foto e irma posicionada e vem antes no DOM. Sem isso
   o texto empata com ela — foi o que lavou o texto dos cards do bloco
   "por que a DASP". */
.seg-txt{position:relative;z-index:2;width:44%;padding-left:7.15%}
.seg-txt .rotulo-seco{display:block;font-size:.9rem;font-weight:400;
  letter-spacing:var(--track-rotulo);text-transform:uppercase;
  color:#5B5442;margin:0 0 26px}
.seg-txt h2{font-size:clamp(1.7rem,2.7vw,3.25rem);line-height:1.1;
  color:var(--escuro);margin:0 0 30px}
.seg-txt p{color:rgba(34,29,26,.86);font-size:var(--t-sub);line-height:1.6;margin:0 0 24px}
.seg-txt p.menor{font-size:1rem;line-height:1.72;color:rgba(34,29,26,.6);margin:0}

/* HOVER — os dois efeitos existem SO neste cartao.
   1) ZOOM: mesma sensacao dos cards do bloco "por que a DASP" —
      scale(1.075) em 1,1s, mesma curva. A foto e absoluta e o cartao tem
      overflow:hidden, entao ela cresce por dentro sem empurrar o texto.
      Crescer nao cria emenda: os pixels da esquerda da foto JA sao
      transparentes, entao a parte invisivel so fica um pouco mais larga.
      A 1,075 a dissolucao anda cerca de 2 pontos pra esquerda — comeca por
      volta de 41% em vez de 43% — e o texto termina em 51%. Sobra folga.
   2) FLASH: uma faixa clara inclinada atravessa o cartao inteiro, da
      esquerda pra direita, em 0,8s, uma vez por entrada do mouse.

   >>> AVISO A QUEM LER DEPOIS: sim, o ::after deste cartao voltou a ser
   usado — mas ISTO NAO E O VEU. O veu era um degrade bege chapado por cima
   da foto e era ELE que criava a emenda dura em 48%; foi removido e nao
   volta. O que mora aqui agora e uma faixa de luz que so existe durante a
   animacao. A dissolucao da foto continua sendo o canal alpha do .webp, que
   nenhuma regra daqui toca.

   Anima transform, nao 'left': assim o navegador nao refaz o layout a cada
   quadro. A faixa tem 26% da largura do cartao, ou seja, o cartao inteiro
   mede 3,85 faixas — por isso o percurso vai de -120% a 420%: nos dois
   extremos ela esta inteira fora do campo, e o overflow:hidden do cartao
   recorta o resto.
   O branco e levemente quente (#FFFCF4) pra nao esfriar o bege.
   A faixa vai render DESIGUAL ao longo do caminho: forte sobre o sage da
   esquerda e sobre as partes escuras da foto, fraca no miolo, onde o cartao
   ja e quase branco. Isso e da natureza da coisa — nao da pra clarear o que
   ja esta claro. */
.seg-card:hover .seg-foto,.seg-card:focus-within .seg-foto{transform:scale(1.075)}
.seg-card::after{content:"";position:absolute;z-index:3;pointer-events:none;
  top:-12%;bottom:-12%;left:0;width:26%;opacity:0;
  transform:translateX(-120%) skewX(-14deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,252,244,.6) 50%,transparent 100%)}
.seg-card:hover::after,.seg-card:focus-within::after{
  animation:seg-flash .8s cubic-bezier(.3,.5,.4,1)}
@keyframes seg-flash{
  0%  {opacity:0;transform:translateX(-120%) skewX(-14deg)}
  8%  {opacity:1}
  92% {opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-14deg)}
}
@media (prefers-reduced-motion:reduce){
  .seg-foto{transition:none}
  .seg-card:hover .seg-foto,.seg-card:focus-within .seg-foto{transform:none}
  .seg-card:hover::after,.seg-card:focus-within::after{animation:none}
}

/* ---------- PERGUNTAS FREQUENTES ----------
   Medido no modelo: lista de 1050px (71,4% do container de 1470), caixa
   #1F1F1F com canto de 16px e vao de 21px entre elas. Pergunta em Jost de
   30px (#F2EBCE), resposta de 20px com entrelinha de 26px (1,3), e entre
   as duas um separador CLARO de 1px que atravessa a caixa de ponta a
   ponta — luminancia 217, quase opaco, nao um fiozinho discreto.
   Acima da lista corre outra linha de 1px, essa fraca, com a largura
   inteira do container (1470px, luminancia 66).
   Os seis vem ABERTOS, como no modelo — e assim a Deidy le tudo de uma vez. */
.faq .abre{text-align:center}
.faq .abre .h2-grande{margin:34px 0 0}
.faq .risco{height:1px;background:rgba(226,218,205,.17);margin:28px 0 74px}
.faq-lista{width:71.4%;margin:0 auto;display:flex;flex-direction:column;gap:21px}
.faq-item{background:#1F1F1F;border-radius:16px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:20px;padding:19px 30px 14px;color:#F2EBCE;line-height:1.25;
  font-family:var(--sans);font-weight:600;font-size:clamp(1.02rem,1.5625vw,1.875rem)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
/* tracinho: menos quando aberto, mais quando fechado */
.faq-item .traco{position:relative;flex:0 0 auto;width:26px;height:3px;
  border-radius:2px;background:#F0E2D2}
.faq-item .traco::after{content:"";position:absolute;inset:0;border-radius:2px;
  background:#F0E2D2;transform:rotate(90deg);transition:opacity .3s ease}
.faq-item[open] .traco::after{opacity:0}
.faq-item .resposta{margin:0;padding:14px 26px 24px;
  border-top:1px solid rgba(240,232,210,.82);
  color:rgba(216,216,216,.9);line-height:1.32;
  font-size:clamp(.95rem,1.042vw,1.25rem)}

/* ===== REVELACAO AO ROLAR =====
   Cada bloco entra subindo 28px e ganhando opacidade.
   A PRIMEIRA DOBRA FICA DE FORA por construcao: no carregamento, tudo que
   ja esta dentro da tela recebe o estado final SEM transicao. So anima o
   que entra depois, quando voce rola. Nao e uma excecao escrita a mao pro
   hero — e uma regra geral que, na pratica, deixa a primeira dobra parada
   em qualquer altura de tela.

   O estado inicial (invisivel) so vale se a classe 'anima' estiver no
   <html>, e quem poe essa classe e um script de uma linha no <head>. Isso
   e proposital: se o JS nao rodar, nada fica escondido e a pagina aparece
   inteira. O pior defeito possivel aqui seria a pagina sumir por causa de
   um efeito decorativo.

   O selo da libelula ficou de fora de proposito: ele ja usa
   transform:translateX(-50%) pra se centralizar, e um translateY de
   entrada brigaria com isso — a peca sairia do lugar.
   A grade 2x2 do "por que a DASP" tambem entra INTEIRA, e nao card a card:
   a luz branca do centro mora na propria grade, entao com os cards ainda
   invisiveis ela ficaria boiando sozinha sobre o sage. */
.anima .revelar{opacity:0;transform:translateY(28px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.anima .revelar.visivel{opacity:1;transform:none}
.anima .revelar.sem-anim{transition:none}
/* escalonamento dentro das grades e da lista do FAQ */
.anima .grade>.revelar:nth-child(2),.anima .grade-3>.revelar:nth-child(2),
.anima .faq-lista>.revelar:nth-child(2){transition-delay:.1s}
.anima .grade>.revelar:nth-child(3),.anima .grade-3>.revelar:nth-child(3),
.anima .faq-lista>.revelar:nth-child(3){transition-delay:.2s}
.anima .faq-lista>.revelar:nth-child(4){transition-delay:.3s}
.anima .faq-lista>.revelar:nth-child(5){transition-delay:.4s}
.anima .faq-lista>.revelar:nth-child(6){transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .anima .revelar{opacity:1;transform:none;transition:none}
}

/* ===== MOBILE ===== */
@media (max-width:980px){
  /* No mobile, o header usa recuo proprio. O wrap geral de 72% deixava o
     hamburger deslocado demais para o centro em celulares largos e tablets. */
  .topo .wrap{width:100%;max-width:none;min-width:0;margin:0;
    padding-left:clamp(20px,4vw,40px);
    padding-right:calc(clamp(20px,4vw,40px) + 68px)}
  .topo .marca{min-width:0}
  .cta .wrap{grid-template-columns:1fr;gap:48px}
  .grade-3{grid-template-columns:1fr;gap:26px}
  .resultados .abre{margin-bottom:74px}
  .resultados .acao{margin-top:86px}
  /* Empilhado: a foto sobe pro topo, largura inteira. A dissolucao dela
     continua valendo — o que aparece por tras e o proprio degrade do
     cartao, entao o efeito e o mesmo do desktop, so que empilhado. */
  .seg-card{display:block;min-height:0}
  .seg-foto{position:relative;width:100%;height:300px;object-position:right center}
  .seg-txt{width:100%;padding:34px 30px 42px}
  .faq-lista{width:100%}
  .sec.faq{padding-bottom:96px}
  .hero{display:block;min-height:0;padding:calc(var(--header-h) + 26px) 0 calc(66px + var(--altura-divisor))}
  /* No empilhado a altura vem da aspect-ratio do container. Nao ha regra
     pra .hero-slide aqui de proposito: height:100%/width:auto continua
     valendo, senao o transbordo de -16.07% deixaria de bater. */
  .hero-foto{position:relative;top:0;right:auto;height:auto;width:100%;
    max-width:380px;margin:0 auto 30px}
  .hero-malha{left:0;width:100%;top:0;height:100%;opacity:.13}
  .hero-txt{max-width:100%}
  .grade-2{grid-template-columns:1fr}
  /* empilhado nao existe encontro de quatro quinas */
  .grade-2::after{display:none}
  .rodape .grade-pe{grid-template-columns:1fr;gap:40px}
  .nav{position:fixed;left:0;right:0;top:var(--header-h);bottom:auto;transform:none;
    background:rgba(5,5,5,.98);flex-direction:column;
    gap:0;padding:18px 7.5% 30px;display:none;
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .nav.aberto{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(226,218,205,.12)}
  .hamb{display:block;position:fixed;right:clamp(20px,4vw,40px);
    top:calc(var(--header-h) / 2);
    transform:translateY(-50%);margin-left:0;min-width:44px;min-height:44px}
  .topo .btn{display:none}
  .hero-provas{grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:38px;max-width:100%}
  .sec{padding:82px 0}
  .comp{aspect-ratio:4/5;max-width:460px;margin:0 auto}
  /* O ponto continua com 9px, mas o alvo de toque passa a 44px. */
  .depo-pontos{gap:0}
  .depo-pontos button{position:relative;width:44px;height:44px;border-radius:0;
    background:transparent;transition:none}
  .depo-pontos button::before{content:"";position:absolute;left:50%;top:50%;
    width:9px;height:9px;border-radius:50%;background:rgba(34,29,26,.22);
    transform:translate(-50%,-50%);transition:background .3s,transform .3s}
  .depo-pontos button.ativo{background:transparent;transform:none}
  .depo-pontos button.ativo::before{background:var(--ouro-escuro);
    transform:translate(-50%,-50%) scale(1.35)}
}
@media (max-width:560px){
  :root{--largura:88%}
  .sec{padding:66px 0}
  .hero-provas{grid-template-columns:1fr;gap:16px}
  .btn-grande{font-size:1.02rem;padding:22px 32px}
  .rotulo{padding:9px 20px;font-size:.76rem}
}

/* ===================================================================
   PAGINAS INTERNAS
   -------------------------------------------------------------------
   Tudo daqui pra baixo nasceu depois que a home foi aprovada. Nenhuma
   regra acima foi tocada: as paginas novas so ganham classes proprias.
   Assim e impossivel quebrar a home construindo as outras paginas.

   Nada aqui e desenho novo — cada componente herda de um que ja existe:
   hero interno   <- a faixa preta + titulo Playfair + losango sage
   linha do tempo <- o losango sage vira o marcador de cada marco
   valores        <- a grade de cards do "Por que a DASP"
   lista de preco <- a tipografia e o filete dos depoimentos
   galeria        <- o card de "Resultados reais", sem o medalhao
   formulario     <- campos sobre o bege, botao igual ao do CTA
   =================================================================== */

/* ---------- HERO DAS PAGINAS INTERNAS ---------- */
/* Comeca embaixo do header e usa a MESMA cor dele (--preto-hero), senao
   aparece um risco horizontal na emenda — foi o que aconteceu na home. */
.hero-int{position:relative;background:var(--preto-hero);overflow:hidden;
  padding:calc(var(--header-h) + 92px) 0 100px}
.hero-int .wrap{position:relative;z-index:2}
.hero-int .h1{max-width:22ch}
.hero-int .sub{margin-top:26px;font-size:var(--t-sub);max-width:60ch}
.hero-int .rotulo{margin-bottom:30px}

/* Brilho dourado de fundo. closest-side e obrigatorio: com o padrao
   (farthest-corner) as bordas da caixa cortam a elipse onde o dourado
   ainda tem opacidade, e aparece um retangulo visivel. */
.hero-int::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse closest-side at 62% 52%,
    rgba(184,150,77,.10) 0%,rgba(184,150,77,.062) 34%,
    rgba(184,150,77,.028) 60%,rgba(184,150,77,.008) 78%,transparent 88%)}

/* Variante com foto (pagina Sobre). A foto sangra na direita, como no hero
   da home, e dissolve por degrades empilhados na cor do fundo — nunca por
   mask-image com mask-composite, que o navegador nao aplica. */
.hero-int.com-foto{padding-bottom:0}
.hero-int.com-foto .wrap{display:grid;grid-template-columns:minmax(0,53%) 1fr;
  align-items:end;gap:40px}
.hero-int-txt{padding-bottom:108px}
.hero-int-foto{position:relative;align-self:end;margin-bottom:0}
.hero-int-foto img{width:100%;height:auto;display:block}
.hero-int-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--preto-hero) 0%,rgba(9,9,9,.72) 9%,rgba(9,9,9,0) 26%),
    linear-gradient(0deg,var(--preto-hero) 0%,rgba(9,9,9,0) 14%)}

/* ---------- MARCADOR DE PENDENCIA ---------- */
/* Onde a Deidy ainda nao mandou material. Fica visivel de proposito: ela
   precisa ver o lugar reservado, e nao um texto inventado no lugar. */
.pendente{border:1px dashed rgba(34,29,26,.28);border-radius:var(--raio-card);
  padding:44px 34px;text-align:center;background:rgba(255,255,255,.22)}
.preta .pendente,.sage .pendente{border-color:rgba(226,218,205,.26);
  background:rgba(255,255,255,.03)}
.pendente .marca-pend{display:inline-block;font-family:var(--sans);
  font-size:.74rem;font-weight:600;letter-spacing:var(--track-rotulo);
  text-transform:uppercase;color:var(--ouro);
  border:1px solid rgba(184,150,77,.5);border-radius:6px;padding:7px 16px}
.pendente p{margin:16px auto 0;max-width:52ch;font-size:.97rem;
  color:rgba(34,29,26,.62)}
.preta .pendente p,.sage .pendente p{color:rgba(226,218,205,.6)}

/* ---------- LISTA DE MARCADORES ---------- */
.bullets{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.bullets li{position:relative;padding-left:30px;line-height:1.5}
.bullets li::before{content:"";position:absolute;left:0;top:.52em;
  width:11px;height:11px;border-radius:2px;background:var(--sage);
  transform:rotate(45deg)}
.claro .bullets li{color:rgba(34,29,26,.82)}
/* hero interno centrado (404) */
.hero-int .centro .h1,.hero-int .centro .sub{margin-left:auto;margin-right:auto}
.hero-int .centro .losango{margin:34px auto 30px}

/* ---------- ABERTURA DE SECAO (paginas internas) ---------- */
/* O mesmo arranjo do bloco "Resultados reais" da home, sem depender dele. */
.abre-sec{text-align:center;margin-bottom:60px}
.abre-sec .h2{margin:22px 0 20px}
.abre-sec .sub{margin:0 auto;max-width:56ch}
.abre-sec .losango{margin:30px auto 0}

/* ---------- LINHA DO TEMPO (Sobre) ---------- */
/* O losango sage da home vira o marcador de cada marco. */
.linha-tempo{position:relative;margin-top:8px;padding-top:8px}
.linha-tempo::before{content:"";position:absolute;left:50%;top:0;bottom:34px;
  width:1px;background:rgba(34,29,26,.17);transform:translateX(-50%)}
.marco{position:relative;box-sizing:border-box;
  width:50%;padding:0 54px 54px 0;text-align:right}
.marco:nth-of-type(even){margin-left:50%;padding:0 0 54px 54px;text-align:left}
.marco::before{content:"";position:absolute;top:7px;right:-10px;
  width:20px;height:20px;border-radius:3px;background:var(--sage);
  transform:rotate(45deg);box-shadow:0 0 0 7px var(--bege)}
.marco:nth-of-type(even)::before{right:auto;left:-10px}
.marco .ano{display:block;font-family:var(--sans);font-size:.79rem;font-weight:600;
  letter-spacing:var(--track-rotulo);text-transform:uppercase;color:var(--ouro-escuro)}
.marco h3{font-size:clamp(1.35rem,1.8vw,1.85rem);margin:11px 0 12px;color:var(--escuro)}
.marco p{margin:0;color:rgba(34,29,26,.79)}

/* citacao que fecha a historia */
.citacao{max-width:920px;margin:24px auto 0;text-align:center;
  font-family:var(--serif);font-style:italic;line-height:1.45;color:var(--escuro);
  font-size:clamp(1.2rem,1.95vw,1.9rem)}
.citacao::before{content:"";display:block;width:22px;height:22px;margin:0 auto 28px;
  background:var(--sage);border-radius:2px;transform:rotate(45deg)}

/* ---------- MISSAO E VISAO ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.mv article{background:rgba(255,255,255,.3);border-radius:var(--raio-card);
  padding:42px 38px}
.mv h3{font-size:clamp(1.4rem,1.9vw,1.9rem);margin-bottom:14px;color:var(--escuro)}
.mv p{margin:0;color:rgba(34,29,26,.84)}

/* ---------- VALORES ---------- */
/* Mesma reacao ao passar o mouse dos cards do "Por que a DASP". */
.valores{display:grid;gap:20px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.valor{background:rgba(255,255,255,.28);border-radius:var(--raio-card);padding:34px 28px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),background .35s ease}
.valor:hover,.valor:focus-within{transform:translateY(-6px);background:rgba(255,255,255,.44)}
.valor i{display:block;width:18px;height:18px;margin-bottom:22px;border-radius:2px;
  background:var(--ouro-escuro);transform:rotate(45deg)}
.valor h3{font-size:1.3rem;margin-bottom:9px;color:var(--escuro)}
.valor p{margin:0;font-size:.97rem;line-height:1.55;color:rgba(34,29,26,.78)}
@media (prefers-reduced-motion:reduce){
  .valor{transition:none} .valor:hover,.valor:focus-within{transform:none}
}

/* ---------- PAGINA SERVICOS ---------- */
/* Abertura de cada categoria: a foto herda a moldura dourada dos cards de
   "Resultados reais" — mesma cor de borda, mesmo raio. */
.cat-topo{display:grid;grid-template-columns:296px 1fr;gap:46px;
  align-items:center;margin-bottom:54px}
.cat-topo .foto{border-radius:20px;overflow:hidden;border:2px solid #BE9163}
.cat-topo .foto img{width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:18px;display:block}
.cat-topo .h2{margin:20px 0 16px}
.cat-topo p{margin:0;color:rgba(34,29,26,.78);max-width:52ch}

/* A lista em si: tipografia e filete dos depoimentos da home. */
.lista-preco{display:grid;grid-template-columns:1fr 1fr;gap:0 62px;
  border-top:1px solid rgba(34,29,26,.16)}
.item-preco{display:grid;grid-template-columns:1fr auto;gap:6px 24px;
  align-items:baseline;padding:23px 2px;
  border-bottom:1px solid rgba(34,29,26,.16)}
.item-preco h3{font-size:clamp(1.1rem,1.42vw,1.42rem);color:var(--escuro);line-height:1.25}
.item-preco .preco{font-family:var(--sans);font-size:.93rem;font-weight:600;
  letter-spacing:.03em;color:var(--ouro-escuro);white-space:nowrap;text-align:right}
.item-preco p{grid-column:1/-1;margin:0;font-size:.99rem;line-height:1.55;
  color:rgba(34,29,26,.72)}

/* Os dois carros-chefe. A copy os marca com uma estrela; aqui o destaque e
   o mesmo dourado das molduras, que ja e a cor de enfase do site. */
.item-preco.premium{background:linear-gradient(90deg,rgba(184,150,77,.11),transparent 66%);
  border-left:2px solid var(--ouro);padding-left:20px;margin-left:-22px}

/* Depilacao: so nome e preco, sem descricao. Cabe em tres colunas. */
.lista-preco.compacta{grid-template-columns:repeat(3,1fr);gap:0 50px}
.lista-preco.compacta .item-preco{padding:17px 2px}

/* ---------- PAGINA GALERIA ---------- */
.galeria-grade{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.foto-galeria{position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:2px solid #BE9163;background:#0d0d0d;cursor:zoom-in}
.foto-galeria img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:18px;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.foto-galeria figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 22px 20px;font-family:var(--sans);font-size:.94rem;color:#F2EBCE;
  background:linear-gradient(0deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.5) 52%,transparent 100%);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.foto-galeria:hover img,.foto-galeria:focus-within img{transform:scale(1.06)}
.foto-galeria:hover figcaption,.foto-galeria:focus-within figcaption{opacity:1;transform:none}
.galeria-grade.antes-e-depois .foto-galeria img{aspect-ratio:1000/1024}
.galeria-grade.retrato .foto-galeria img{aspect-ratio:4/5}

/* o mesmo flash diagonal do card "Seguranca e criterio clinico" */
.foto-galeria::after{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;border-radius:18px;opacity:0;
  background:linear-gradient(102deg,transparent 45%,rgba(255,252,244,.42) 50%,transparent 55%);
  background-size:280% 100%;background-repeat:no-repeat;background-position:100% 0}
.foto-galeria:hover::after,.foto-galeria:focus-within::after{animation:card-flash .72s ease}

/* Lupa: abre a foto em tela cheia. E um <dialog>, entao fecha no Esc sozinho. */
.lupa{border:0;padding:0;background:rgba(5,5,5,.94);width:100%;height:100%;
  max-width:100%;max-height:100%}
.lupa::backdrop{background:rgba(5,5,5,.9)}
.lupa .quadro{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:36px;box-sizing:border-box}
.lupa img{max-width:100%;max-height:calc(100vh - 72px);width:auto;height:auto;
  border-radius:12px}
.lupa .fechar{position:absolute;top:18px;right:22px;z-index:2;
  background:none;border:0;cursor:pointer;color:#F2EBCE;font-size:2.4rem;
  line-height:1;font-family:var(--sans);padding:8px 14px}
.lupa .fechar:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  .foto-galeria img{transition:none}
  .foto-galeria:hover img,.foto-galeria:focus-within img{transform:none}
  .foto-galeria:hover::after,.foto-galeria:focus-within::after{animation:none}
}
/* Em telas touch, a legenda nao depende de um hover que nao existe. */
@media (max-width:980px) and (any-hover:none){
  .foto-galeria figcaption{opacity:1;transform:none}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .depo-pontos button::before{transition:none}
}

/* ---------- PAGINA CONTATO ---------- */
.info-contato{display:grid;gap:24px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.info-contato article{background:rgba(255,255,255,.3);border-radius:var(--raio-card);
  padding:34px 30px}
.info-contato i{display:block;width:16px;height:16px;margin-bottom:20px;
  border-radius:2px;background:var(--sage);transform:rotate(45deg)}
.info-contato h3{font-size:1.24rem;margin-bottom:12px;color:var(--escuro)}
.info-contato p{margin:0;color:rgba(34,29,26,.82);line-height:1.62}
.info-contato a{text-decoration:none;border-bottom:1px solid rgba(34,29,26,.25)}
.info-contato a:hover{border-bottom-color:var(--escuro)}

.acoes-contato{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  margin-top:52px}
.btn-vazado{background:transparent;color:var(--escuro);
  box-shadow:inset 0 0 0 2px rgba(34,29,26,.5)}
.btn-vazado:hover{background:rgba(34,29,26,.06);filter:none}

/* Formulario. Os campos sao os que o send-form.php ja espera:
   name, phone, email, service e message — nao invente outros nomes. */
.form{max-width:880px;margin:8px auto 0;display:grid;gap:20px;
  grid-template-columns:1fr 1fr}
.campo{display:flex;flex-direction:column;gap:9px}
.campo.largo{grid-column:1/-1}
.campo label{font-family:var(--sans);font-size:.79rem;font-weight:600;
  letter-spacing:var(--track-rotulo);text-transform:uppercase;color:rgba(34,29,26,.72)}
.campo input,.campo select,.campo textarea{
  font-family:var(--sans);font-size:1.02rem;color:var(--escuro);
  background:rgba(255,255,255,.62);border:1px solid rgba(34,29,26,.18);
  border-radius:8px;padding:15px 17px;width:100%;box-sizing:border-box;
  transition:border-color .25s ease,background .25s ease}
.campo textarea{min-height:148px;resize:vertical;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--ouro);background:rgba(255,255,255,.85)}
.form .envio{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;
  gap:20px;margin-top:6px}
.form-aviso{font-family:var(--sans);font-size:.96rem;margin:0;flex:1 1 240px}
.form-aviso.erro{color:#8f3a2f}
.form-aviso.ok{color:#3d6b46}

/* Mapa */
.mapa{border-radius:var(--raio-card);overflow:hidden;margin-top:8px;
  border:2px solid rgba(190,145,99,.5);line-height:0}
.mapa iframe{width:100%;height:min(52vw,470px);border:0;display:block}

/* Redes */
.redes{display:flex;justify-content:center;gap:16px;margin-top:44px}
.rede{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.02em;color:var(--escuro);
  background:rgba(255,255,255,.34);border-radius:999px;padding:14px 26px;
  transition:background .25s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.rede:hover{background:rgba(255,255,255,.56);transform:translateY(-3px)}
.rede svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
@media (prefers-reduced-motion:reduce){ .rede{transition:none} .rede:hover{transform:none} }

/* ---------- RESPONSIVO DAS PAGINAS INTERNAS ----------
   Mesmos dois pontos de quebra da home: 980 e 560. */
@media (max-width:980px){
  .hero-int{padding:calc(var(--header-h) + 60px) 0 72px}
  .hero-int::before{display:none}
  .hero-int.com-foto{padding-bottom:0}
  .hero-int.com-foto .wrap{grid-template-columns:1fr;gap:0}
  .hero-int-txt{padding-bottom:42px}
  .hero-int-foto{max-width:420px;margin:0 auto}
  /* empilhado nao ha borda esquerda para dissolver, so o pe da foto */
  .hero-int-foto::after{background:linear-gradient(0deg,var(--preto-hero) 0%,rgba(9,9,9,0) 18%)}

  .abre-sec{margin-bottom:46px}

  /* linha do tempo vira coluna unica, com a linha encostada na esquerda */
  .linha-tempo::before{left:9px;transform:none}
  .marco,.marco:nth-of-type(even){width:100%;margin-left:0;
    padding:0 0 44px 42px;text-align:left}
  .marco::before,.marco:nth-of-type(even)::before{left:0;right:auto;top:8px;
    width:18px;height:18px;box-shadow:0 0 0 6px var(--bege)}

  .mv{grid-template-columns:1fr}
  .cat-topo{grid-template-columns:1fr;gap:28px}
  .cat-topo .foto{max-width:300px}
  .lista-preco{grid-template-columns:1fr;gap:0}
  .lista-preco.compacta{grid-template-columns:1fr 1fr;gap:0 36px}
  .form{grid-template-columns:1fr}
  .mapa iframe{height:min(76vw,400px)}
}
@media (max-width:560px){
  .hero-int{padding:calc(var(--header-h) + 46px) 0 58px}
  .lista-preco.compacta{grid-template-columns:1fr}
  .item-preco.premium{margin-left:0;padding-left:16px}
  .acoes-contato{flex-direction:column;align-items:stretch}
  .acoes-contato .btn{text-align:center}
  .galeria-grade{gap:16px}
  .mv article,.info-contato article,.valor{padding:30px 24px}
  .lupa .quadro{padding:16px}
}

/* ---------- SELETOR DE IDIOMA ----------
   So existe na tela quando os dois idiomas estao ativos. Enquanto o site for
   so em portugues, o header sai exatamente como esta hoje. */
.idiomas{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:22px}
.idiomas a{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-decoration:none;color:rgba(226,218,205,.62);padding:7px 10px;border-radius:5px;
  transition:color .2s ease,background .2s ease}
.idiomas a:hover{color:var(--creme)}
.idiomas a.on{color:var(--escuro);background:var(--sage)}
@media (max-width:980px){
  .idiomas{margin-right:14px}
  .idiomas a{padding:6px 8px;font-size:.74rem}
}

/* Sobre: mesma linguagem de luz preta e dourada da Home, com menos
   intensidade na area dos paragrafos. Escopo restrito a abertura com foto. */
.hero-int.com-foto::before{display:block;
  background:
    radial-gradient(ellipse at 8% 30%,rgba(184,150,77,.18) 0%,transparent 54%),
    radial-gradient(ellipse at 84% 38%,rgba(184,150,77,.28) 0%,transparent 58%),
    radial-gradient(ellipse at 45% 110%,rgba(184,150,77,.20) 0%,transparent 62%),
    linear-gradient(122deg,transparent 15%,rgba(184,150,77,.06) 32%,transparent 47%,
      rgba(184,150,77,.09) 66%,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%)}
.hero-int.com-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,transparent 0,transparent 117px,rgba(184,150,77,.12) 117px,transparent 118px),
    repeating-linear-gradient(-45deg,transparent 0,transparent 117px,rgba(184,150,77,.12) 117px,transparent 118px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 0%,transparent 76%);
          mask-image:radial-gradient(ellipse at 50% 60%,#000 0%,transparent 76%)}
/* O recorte transparente da foto deve revelar o fundo continuo da secao.
   Remove a antiga sobreposicao preta que criava uma faixa retangular. */
.hero-int.com-foto .hero-int-foto::after{content:none}

/* Aberturas claras exclusivas de Servicos, Galeria e Contato. */
.hero-int.hero-champagne{
  background:linear-gradient(135deg,#F5EFE4 0%,#EFE6D8 55%,#E9DDC9 100%);
  padding:calc(var(--header-h) + 56px) 0 48px;
  border-bottom:1px solid rgba(140,116,68,.28)}
.hero-champagne .h1{color:var(--escuro);font-size:clamp(2.35rem,3.8vw,4.25rem);line-height:1.08}
.hero-champagne .sub{color:#5C5347;opacity:1;line-height:1.65;margin-top:20px}
.hero-champagne .rotulo{color:#74603B;border-color:rgba(140,116,68,.42);
  background:rgba(255,255,255,.24);margin-bottom:0}
.hero-champagne .centro .losango{width:10px;height:10px;background:var(--ouro-escuro);margin:28px auto 0}
/* Arcos finos nas laterais; o centro permanece livre para leitura. */
.hero-int.hero-champagne::before,.hero-int.hero-champagne::after{
  content:"";display:block;position:absolute;top:var(--header-h);bottom:0;width:25%;
  pointer-events:none;opacity:.65;
  background:radial-gradient(ellipse at 0% 60%,transparent 48%,rgba(140,116,68,.27) 48.2%,transparent 48.6%,
    transparent 62%,rgba(140,116,68,.23) 62.2%,transparent 62.6%,
    transparent 76%,rgba(140,116,68,.19) 76.2%,transparent 76.6%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero-int.hero-champagne::before{left:0;right:auto}
.hero-int.hero-champagne::after{right:0;transform:scaleX(-1)}
@media (max-width:980px){
  .hero-int.hero-champagne{padding:calc(var(--header-h) + 42px) 0 38px}
  .hero-int.hero-champagne::before,.hero-int.hero-champagne::after{width:22%;opacity:.4}
}
@media (max-width:560px){
  .hero-int.hero-champagne{padding:calc(var(--header-h) + 34px) 0 32px}
  .hero-champagne .sub{font-size:1.05rem}
  .hero-int.hero-champagne::before,.hero-int.hero-champagne::after{width:15%;opacity:.3}
}