/* ============================================================
   BRASILINA TAPEÇARIA — mockup redesign 2026 · rev.03
   direção: tapeçaria premium · estofados de alto padrão
   verde-marca #2A3E32 · marfim · latão
   rev.03 (03/08): feedback Yana — sem bordas nas imagens,
   círculos no lugar dos traços, logo em fundo escuro,
   mais movimento, vídeo no topo, antes/depois, FAQ, Instagram.
   ============================================================ */

:root{
  --g950:#131A15;
  --g900:#1B2620;
  --g800:#22322A;
  --g700:#2A3E32;          /* verde oficial da marca */
  --g600:#3B5443;
  --sage:#93A392;
  --ivory:#F6F3EB;
  --linen:#EEE9DC;
  --paper:#FBF9F3;
  --brass:#A9905C;
  --brass-l:#C3AC7B;
  --brass-d:#8C7548;
  --ink:#232823;
  --muted:#5C6155;          /* escurecido: no marfim/linho o antigo #6F7568 dava 3,9:1 (AA pede 4,5) */
  --line:rgba(35,40,35,.14);
  --line-ivory:rgba(246,243,235,.18);
  --shadow:0 24px 60px -30px rgba(19,26,21,.35);
  --shadow-lg:0 40px 90px -40px rgba(19,26,21,.55);
  --ease:cubic-bezier(.2,.6,.2,1);
  --ff-d:"Cormorant Garamond",serif;
  --ff-b:"Jost",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip} /* clip (não hidden): corta overflow SEM quebrar position:sticky do header */
body{
  font-family:var(--ff-b);font-weight:300;color:var(--ink);
  background:var(--ivory);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* height:auto é OBRIGATÓRIO junto com os atributos width/height do HTML:
   sem ele o browser usa a altura literal do atributo e a foto estica. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* foco de teclado visível (não existia: quem navega por Tab ficava perdido).
   :focus-visible = só aparece no teclado, não atrapalha o clique do mouse. */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.on-dark :focus-visible,.hero-v :focus-visible,
header.site :focus-visible,footer.site :focus-visible,.topbar :focus-visible{outline-color:var(--brass-l)}
::selection{background:var(--g700);color:var(--ivory)}

.wrap{max-width:1180px;margin:0 auto;padding:0 5vw}
section{padding:104px 0}
@media(max-width:760px){section{padding:64px 0}}

/* ---------- tipografia ---------- */
/* eyebrow: os TRÊS PONTOS do logo no lugar do antigo tracinho */
.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  font-weight:400;color:var(--brass);display:flex;align-items:center;gap:32px;
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;background:rgba(169,144,92,.4);
  box-shadow:9px 0 0 rgba(169,144,92,.7), 18px 0 0 var(--brass);flex:0 0 auto;
}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);
  box-shadow:9px 0 0 rgba(169,144,92,.7), 18px 0 0 rgba(169,144,92,.4);flex:0 0 auto;
}
.on-dark .eyebrow::before,.dark .eyebrow::before,.hero-v .eyebrow::before{
  background:rgba(195,172,123,.4);box-shadow:9px 0 0 rgba(195,172,123,.7), 18px 0 0 var(--brass-l);
}
.on-dark .eyebrow,.dark .eyebrow,.hero-v .eyebrow{color:var(--brass-l)}

h1,h2,h3{font-family:var(--ff-d);font-weight:500;line-height:1.12;letter-spacing:.01em}
h1{font-size:clamp(38px,4.9vw,60px)}
h2{font-size:clamp(30px,3.8vw,46px)}
h3{font-size:24px}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--g600)}
.on-dark h1 em,.on-dark h2 em{color:var(--sage)}
.lead{font-size:18px;color:var(--muted);max-width:56ch}
.small{font-size:13px;color:var(--muted)}

/* três pontos da marca */
.dots{display:inline-flex;gap:9px;align-items:center}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--brass);opacity:.45}
.dots i:last-child{opacity:1}

/* divisória "costura" (identidade: linha de costura / pontilhado) */
.stitch{border:none;border-top:1px dashed rgba(169,144,92,.55);position:relative;margin:0}
.stitch::after{
  content:"";position:absolute;right:-2px;top:-3px;width:5px;height:5px;
  border-radius:50%;background:var(--brass);
}

/* ---------- topbar ---------- */
.topbar{background:var(--g950);color:rgba(246,243,235,.72)}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:40px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.topbar a{color:var(--ivory)}
.topbar a:hover{color:var(--brass-l)}
.topbar .fones{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar .fones b{font-weight:400;color:rgba(246,243,235,.5);margin-right:7px}
.topbar .soon{opacity:.55}
.topbar .social a{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(246,243,235,.2);
  display:inline-grid;place-items:center;transition:all .3s;
}
.topbar .social a:hover{border-color:var(--brass);background:rgba(169,144,92,.14)}
@media(max-width:1040px){
  .topbar .wrap>span:first-child{display:none}
  .topbar .wrap{justify-content:center}
}
@media(max-width:620px){
  /* no celular só o telefone real + redes: "número a confirmar" sem rótulo confunde */
  .topbar .fones .sep,.topbar .fones b,.topbar .soon{display:none}
  .topbar .wrap{min-height:36px}
  .topbar .fones{gap:14px;font-size:10px}
}

/* ícones sociais (reaproveitado no rodapé e no topo) */
.social{display:inline-flex;gap:9px;align-items:center}
.social svg{width:13px;height:13px;fill:currentColor;display:block}

/* ---------- header (fundo escuro p/ valorizar a logo) ---------- */
header.site{
  position:sticky;top:0;z-index:50;color:var(--ivory);
  background:rgba(27,38,32,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:background .35s,border-color .3s,box-shadow .3s;
}
header.site.scrolled{
  background:rgba(19,26,21,.97);
  border-bottom:1px solid rgba(169,144,92,.28);
  box-shadow:0 14px 40px -26px rgba(0,0,0,.8);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .4s var(--ease)}
header.site.scrolled .wrap{height:68px}

/* rev.10 (04/09) - LOGO: NEGATIVA DE VERDADE, NAO CONTORNO
   Antes: logo-relevo.svg era o desenho quase preto (#1C1C1C) do cliente com
   um contorno creme de 1px por tras (paint-order=stroke), so' pra sobreviver
   ao header verde-escuro. Preto sobre escuro se salvava pela borda - e borda
   em tipo de 4px (a linha TAPECARIA E DECORACOES) vira borrao, nao relevo.
   Agora: logo-neg.svg, a MESMA marca repintada em creme (#F6F3EB), com o
   terceiro ponto a 55% pra manter o ritmo "2 fortes + 1 suave" do original
   (que era 2 pontos verdes + 1 cinza). Creme sobre verde da ~13:1 de
   contraste: a sombra volta a ser profundidade, nao muleta de leitura.
   Uma imagem so' - sumiram a troca no hover e uma requisicao de 19 KB. */
/* vertical-align:top: o <a> e' inline-block, entao o line box do PAI reservava
   o espaco do descendente e sobravam ~8px de ar embaixo da logo do rodape,
   nas 4 paginas. O line-height:0 daqui nao alcanca isso - e' do pai. */
.brand{display:inline-block;vertical-align:top;line-height:0}
.brand img{
  width:158px;height:auto;
  /* duas camadas na escala do desenho: contato curto + ambiente macio.
     Blur grande aqui viraria halo, porque a linha de baixo tem ~4px. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 3px 8px rgba(0,0,0,.22));
  transition:width .4s var(--ease),opacity .3s var(--ease);
}
.brand:hover img,.brand:focus-visible img{opacity:.82}
header.site.scrolled .brand img{width:136px}
@media(max-width:620px){.brand img{width:126px}}

nav.main{display:flex;align-items:center;gap:38px}
nav.main a.lnk{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  padding:6px 0;position:relative;color:rgba(246,243,235,.82);transition:color .3s;
}
nav.main a.lnk::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--brass-l);transition:width .35s;
}
nav.main a.lnk:hover::after,nav.main a.lnk.on::after{width:100%}
nav.main a.lnk:hover{color:var(--ivory)}
nav.main a.lnk.on{color:var(--ivory);font-weight:500}
/* rev.12: com o link "Blog" (5 itens) o menu nao cabia entre 961 e ~1050px:
   a folga ate a logo chegava a zero e o flex ESPREMIA a logo (158px -> 109px
   em 961px), defeito que nenhuma checagem de estouro lateral pega. Nessa faixa
   o menu aperta o espaco e o tracking. Medido: 54px de folga em 961px, contra
   30px que havia antes do link novo. E a logo nao encolhe mais em caso nenhum. */
header.site .brand{flex-shrink:0}
@media(min-width:961px) and (max-width:1180px){
  nav.main{gap:22px}
  nav.main a.lnk{letter-spacing:.16em}
}

/* botões */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-b);font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  padding:17px 30px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;   /* transição e transform: bloco rev.05 */
}
.btn.solid{background:var(--g700);color:var(--ivory)}
.btn.solid:hover{background:var(--brass-d)}
.btn.ghost{border-color:rgba(35,40,35,.3);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass-d)}
.btn.ghost.iv{border-color:var(--line-ivory);color:var(--ivory)}
.btn.ghost.iv:hover{border-color:var(--brass);color:var(--brass-l)}
.btn.brass{background:var(--brass);color:var(--g950)}
.btn.brass:hover{background:var(--ivory)}
.btn .ar{font-family:var(--ff-d);font-size:16px;letter-spacing:0;transition:transform .3s}
.btn:hover .ar{transform:translateX(4px)}
/* Em tela estreita o rótulo quebra em duas linhas em vez de estourar a lateral.
   Vira inline-block: dentro de um inline-FLEX o texto vira item anônimo, encolhe até
   min-content (uma letra por linha) e joga a seta pra fora da tela. */
@media(max-width:620px){
  .btn{
    display:inline-block;white-space:normal;text-align:center;
    padding:16px 22px;max-width:100%;line-height:1.6;
  }
  .btn .ar{display:inline;margin-left:8px}
}
/* no header escuro o CTA vira latão */
header.site .btn.solid{background:var(--brass);color:var(--g950)}
header.site .btn.solid:hover{background:var(--ivory)}

/* CTA de fim de bloco */
.sec-cta{margin-top:58px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.sec-cta{margin-top:40px}}

/* hamburger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:1.5px;background:var(--ivory);transition:.3s}
@media(max-width:960px){
  /* 🔴 backdrop-filter (como transform/filter) cria CONTAINING BLOCK para descendentes
     position:fixed. Com ele no header, o nav "fullscreen" se ancorava no HEADER e abria
     como uma faixa de 88px. No celular o blur não faz falta: fundo sólido. */
  header.site{backdrop-filter:none;background:var(--g900)}
  header.site.scrolled{background:var(--g950)}

  /* Menu fechado: recortado no lugar (clip-path), NÃO estacionado fora da tela.
     Com translateX(100%) o painel continua sendo conteúdo à direita e dobra o
     scrollWidth do body — invisível pro usuário (overflow-x:clip), mas a página
     passa a ter o dobro da largura (aparece em print de página inteira e pode
     virar arrasto lateral em alguns aparelhos). */
  nav.main{
    position:fixed;inset:0;top:0;background:var(--g900);
    flex-direction:column;justify-content:center;gap:34px;z-index:60;
    clip-path:inset(0 0 0 100%);pointer-events:none;
    /* visibility:hidden tira os links do Tab — só clip-path deixava o teclado
       navegar por um menu invisível. Some depois da animação (delay). */
    visibility:hidden;
    transition:clip-path .45s cubic-bezier(.7,0,.3,1),visibility 0s .45s;
  }
  body.nav-open nav.main{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;transition-delay:0s}
  nav.main a.lnk{font-family:var(--ff-d);font-size:26px;letter-spacing:.14em;text-transform:none;color:var(--ivory)}
  .burger{display:flex;z-index:70}
  body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
/* rev.12: menu aberto em tela BAIXA (celular deitado, 390px de altura). Com
   5 links + botao a coluna tinha 506px: centralizada, "Inicio" nascia 58px
   acima do topo e o botao abaixo do rodape, sem rolagem para alcancar.
   Tela baixa aperta a coluna; e se ainda assim nao couber, `safe center`
   alinha pelo topo em vez de cortar, e o menu rola. */
@media(max-width:960px){
  nav.main{overflow-y:auto;justify-content:center;justify-content:safe center}
}
@media(max-width:960px) and (max-height:520px){
  nav.main{gap:14px;padding:24px 0}
  nav.main a.lnk{font-size:21px;padding:2px 0}
}

/* ---------- hero com VÍDEO (primeira dobra) ---------- */
/* grid (não flex): no celular o selo do vídeo entra como LINHA acima do texto.
   Com flex-row ele virava irmão lateral do .wrap e empurrava tudo pra fora da tela. */
.hero-v{
  /* rev.09: a cliente testou em monitor pequeno e os dois botoes caiam
     abaixo da dobra. min-height 92vh -> 78vh e o respiro de cima
     170px -> 112px. O bloco @media(max-height) abaixo aperta ainda mais
     em tela baixa (1366x768, notebook), que e o caso que ela relatou. */
  position:relative;min-height:min(78vh,720px);display:grid;align-content:end;
  padding:112px 0 60px;overflow:hidden;background:var(--g900);color:var(--ivory);
}
@media(max-width:760px){.hero-v{min-height:70vh;padding:104px 0 48px}}
.hero-v .bg{position:absolute;inset:0;z-index:0}
/* rev.10b - KEN BURNS REMOVIDO. Era `animation:kenburns 24s infinite alternate`
   (scale 1.02 -> 1.12) no fundo do hero. Custava METADE do quadro na rolagem do
   desktop: medido em duas voltas, 12-22 fps com ele e 40-44 fps sem, e as
   tentativas de salvar falharam todas - will-change:transform, camada propria,
   pausa fora da tela e ate' reduzir a escala pra 1.06 ficaram todas na faixa
   dos 12-22. O motivo e' a soma: o poster do hero tinha 875px de largura
   (f03.webp, aposentada) e ja era esticado pros 1440 do hero; escalar mais 12% em cima disso obriga o
   navegador a reamostrar a imagem inteira a cada quadro, e nesse contexto de
   empilhamento (bg absoluto + veu ::after por cima) ele nao compoe na GPU.
   E' o mesmo motivo pelo qual o reveal saiu na rev.09 ("a rolagem esta lenta").
   O efeito eram 10% de escala em 24s por tras de um veu escuro - invisivel na
   pratica, caro de verdade.

   rev.11: o poster virou hero-showroom.webp (1254px, recorte 16:10 da foto
   real do showroom). Sao 43% mais pixels, mas a conta acima NAO muda: 1254
   ainda e' menos que os 1440 do hero, entao o Ken Burns continua fora. */
.hero-v .bg video,.hero-v .bg .poster{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* .fora continua util: pausa o que AINDA anima dentro do hero quando ele sai
   de cena (a seta de rolagem hoje, o video do showroom quando a Emais mandar). */
.hero-v.fora .bg video,.hero-v.fora .scroll-cue{animation-play-state:paused}
.hero-v .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(19,26,21,.72) 0%,rgba(19,26,21,.34) 34%,rgba(19,26,21,.88) 100%),
    linear-gradient(90deg,rgba(19,26,21,.62) 0%,rgba(19,26,21,0) 62%);
}
.hero-v .wrap{position:relative;z-index:2;width:100%}
.hero-v h1{margin:26px 0 22px;max-width:19ch;color:var(--ivory)}
.hero-v h1 em{color:var(--brass-l)}
.hero-v .lead{color:rgba(246,243,235,.82);max-width:52ch}
.hero-v .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.hero-v .under{
  display:flex;align-items:center;gap:16px;margin-top:44px;color:rgba(246,243,235,.6);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
}
.hero-v .under .stitch{flex:1;max-width:120px;border-color:rgba(195,172,123,.5)}

/* ---------- rev.10d: TELA BAIXA. Ordem importa.
   Este bloco vivia ANTES de `.hero-v h1{margin:26px 0 22px}` e de
   `.hero-v .cta-row{margin-top:38px}`. Mesma especificidade -> quem vem
   depois vence, entao o aperto de h1 e de cta-row nunca valeu: media em
   1366x660 dava margem 26/22 e 38, os numeros do desktop cheio. So' o
   padding pegava, porque a regra base de .hero-v vem antes.
   Agora esta depois, e vale. ---------- */
@media(min-width:761px) and (max-height:860px){
  .hero-v{min-height:auto;padding:96px 0 46px}
  .hero-v h1{margin:18px 0 15px}
  .hero-v .lead{font-size:15px}
  .hero-v .cta-row{margin-top:26px}
  .hero-v .under{margin-top:30px}
}
/* notebook de 1366x768 maximizado sobra ~660px de viewport: mesmo com o
   aperto acima faltavam 11px pro segundo botao caber na dobra */
@media(min-width:761px) and (max-height:700px){
  .hero-v{padding:80px 0 34px}
  .hero-v h1{margin:14px 0 12px}
  .hero-v .cta-row{margin-top:20px}
  .hero-v .under{margin-top:22px}
}

/* ---------- rev.10d: CELULAR EM TELA BAIXA ----------
   Dois degraus. O primeiro pega o Android comum (360x740), que errava por
   2px. O segundo pega de 700px pra baixo - iPhone SE (568) e iPhone 6/7/8
   (667) -, onde ate' o PRIMEIRO botao caia fora da dobra. */
@media(max-width:760px) and (max-height:780px){
  .hero-v{padding:86px 0 38px}
  .hero-v h1{margin:18px 0 16px}
  .hero-v .cta-row{margin-top:26px}
  .hero-v .under{margin-top:28px}
}
@media(max-width:760px) and (max-height:700px){
  .hero-v{padding:62px 0 28px;min-height:auto}
  .hero-v .eyebrow{font-size:10px;letter-spacing:.14em}
  .hero-v h1{font-size:clamp(25px,7.4vw,31px);margin:12px 0 12px}
  .hero-v .lead{font-size:14.5px;line-height:1.5}
  .hero-v .cta-row{margin-top:18px;gap:10px}
  .hero-v .under{margin-top:20px}
  .hero-v .btn{padding-block:14px}
}
/* ---------- rev.10 (04/09): CARD DE REELS no hero ----------
   Saiu o selo tracejado "espaço reservado ao vídeo do showroom"; entrou um
   card 9:16 com 3 trechos dos reels do próprio perfil, em rodízio. Fica 9:16
   porque reel esticado em faixa larga sobra só uma tira horizontal - some o
   enquadramento inteiro que a pessoa filmou em pé. O card é o <a>: clique em
   qualquer ponto dele vai pro Instagram.
   A altura é a régua (não a largura), porque o que aperta o hero é a altura
   da tela: clamp em vh mantém o card dentro da primeira dobra no notebook. */
.ig-reel{
  /* right em max(): o botao flutuante do WhatsApp mora em right:26px com 58px
     de largura, ou seja, ocupa a faixa 26..84. Em notebook de tela baixa
     (1366x768 maximizado = ~660px de viewport) o card, que e' centrado na
     vertical, descia ate' a altura dele e o verde cobria o canto da assinatura.
     Separar na HORIZONTAL resolve em qualquer altura, sem media query. */
  position:absolute;right:max(5vw,104px);top:50%;z-index:3;
  /* A regua tem DUAS travas, nao uma: a altura do hero (vh) e a largura livre
     a direita da coluna de texto (vw). min() das duas deixa o card crescer
     no monitor grande sem encostar nos botoes em 1024, que e' onde a coluna
     de texto chega mais perto. */
  height:clamp(300px,min(64vh,38vw),560px);aspect-ratio:9/16;
  border:1px solid rgba(195,172,123,.42);border-radius:3px;overflow:hidden;
  background:#0e130f;--lift:0;
  transform:translateY(-46%) scale(calc(1 + var(--lift)*.025));
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.ig-reel:hover,.ig-reel:focus-visible{
  --lift:1;border-color:rgba(195,172,123,.82);
  box-shadow:0 28px 62px -18px rgba(0,0,0,.82),0 2px 10px rgba(0,0,0,.42);
}
.ig-reel .vid{position:absolute;inset:0;display:block}
/* os 3 clipes ficam empilhados e trocam por opacidade: cortar o src de um
   <video> só piscaria preto entre um e outro */
.ig-reel video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .6s var(--ease);
}
.ig-reel video.on{opacity:1}
/* três tracinhos no topo, como story: dizem em qual clipe está */
.ig-reel .bars{position:absolute;left:9px;right:9px;top:9px;z-index:2;display:flex;gap:4px}
.ig-reel .bars i{
  flex:1;height:2px;border-radius:2px;background:rgba(246,243,235,.32);transition:background .45s;
}
.ig-reel .bars i.on{background:var(--brass-l)}
/* véu só no rodapé do card: a assinatura precisa ler por cima de qualquer clipe */
.ig-reel .tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:7px;padding:30px 11px 10px;
  background:linear-gradient(180deg,rgba(11,15,12,0),rgba(11,15,12,.88));
  color:var(--ivory);font-size:11px;letter-spacing:.06em;line-height:1;
}
.ig-reel .tag svg{width:15px;height:15px;fill:currentColor;flex:none}
.ig-reel .tag b{
  flex:1;min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:opacity .3s;
}
/* o convite ocupa a MESMA vaga do @, sobreposto. Com margin-left:auto ele
   reservava ~87px mesmo invisível e comia o fim do @brasilinatapecaria. */
/* rev.10a: o rotulo era latao (#C3AC7B). Medido quadro a quadro contra a
   faixa de video que fica atras dele (ja com o alfa .636 do veu): pior caso
   3,10:1 no clipe 1 e 3,23:1 no clipe 2 - os dois tem estofado claro bem na
   base do quadro. O irmao <b>, creme, no MESMO lugar da 6,18:1: o problema
   era a cor do texto, nao o veu. Pesa mais em tela de toque >=1024px, onde
   @media(hover:none) esconde o <b> e deixa SO' este rotulo, o tempo todo.
   O latao continua na borda do card e nos tracinhos de story. */
.ig-reel .tag em{
  position:absolute;left:32px;right:11px;bottom:10px;
  font-style:normal;white-space:nowrap;color:var(--ivory);
  opacity:0;transform:translateX(5px);transition:opacity .3s,transform .3s;
}
.ig-reel:hover .tag b,.ig-reel:focus-visible .tag b{opacity:0}
/* faixa do tablet: acima de 760px o card volta a flutuar, mas a coluna de
   texto ainda e' larga - com o card no tamanho cheio os DOIS botoes do hero
   chegavam a x=544 e o card comecava em x=523. Encolhe e encosta mais na
   borda: sobra folga pro titulo (19ch) e pra dupla de botoes. */
@media(min-width:761px) and (max-width:1023px){
  /* ancora no ALTO (nao no meio): no tablet o hero e' curto e o meio do
     card cai exatamente na linha dos botoes */
  .ig-reel{height:clamp(196px,27vh,240px);right:3.5vw;top:104px;transform:none}
  .ig-reel:hover,.ig-reel:focus-visible{transform:scale(1.02)}
  /* e a coluna de texto para antes da faixa do card. Efeito colateral
     desejado: nessa largura os dois botoes empilham, que e' o certo num
     tablet estreito - melhor do que um deles encostar no card. */
  .hero-v .wrap > div{max-width:calc(100% - 182px)}
  /* card estreito (135px): "@brasilinatapecaria" nao cabe e sai reticente.
     Fica so' o simbolo do Instagram sobre o video - que ja diz tudo -
     em vez de meia palavra. */
  .ig-reel .tag{padding:26px 10px 9px;justify-content:flex-start}
  .ig-reel .tag b,.ig-reel .tag em,
  .ig-reel:hover .tag b,.ig-reel:hover .tag em{display:none}
  .ig-reel .tag svg{width:17px;height:17px}
}
.ig-reel:hover .tag em,.ig-reel:focus-visible .tag em{opacity:1;transform:none}
/* onde não existe ponteiro não existe hover: o convite tem de vir de cara */
@media(hover:none){
  .ig-reel .tag b{display:none}
  .ig-reel .tag em{position:static;opacity:1;transform:none}
}
@media(max-width:760px){
  /* desloca o enquadramento: no retrato o telão com a logo caía atrás do título */
  .hero-v .bg .poster,.hero-v .bg video{object-position:80% 50%}
  /* no retrato o card não pode flutuar: embaixo à direita mora o botão do
     WhatsApp e no meio mora o título. Ele entra como LINHA do grid, acima do
     texto, deitado - miniatura 9:16 pequena + assinatura ao lado. Ocupa ~86px
     de altura em vez de ~300px, e nada some da primeira dobra. */
  /* rev.10a: era LINHA do grid e custava 96px de altura. Medido: em 375x812
     (iPhone 12/13 mini) esses 96px empurravam o segundo CTA pra fora da dobra -
     com o card escondido o botao terminava em 742 e cabia; com ele, 838 numa
     tela de 812. Agora sai do fluxo e ocupa a faixa VAZIA que ja existia entre
     o header e o olho do texto (o hero tem 104px de padding-top no celular).
     Custo de altura: zero. */
  /* ---------- rev.10d: no CELULAR o reel vira o FUNDO do hero ----------
     Era uma faixa com miniatura de 52px. Um reel e' 9:16 (0,5625) e o hero
     no celular fica em ~0,56 de proporcao: encaixe quase exato. Espremer
     isso num quadradinho de 52px era jogar o formato fora - e ficava com
     cara de favicon, nao de video.
     Agora o video ocupa a dobra inteira, como um story, e o texto do hero
     fica por cima. Custo de altura: zero, ele ja estava fora do fluxo.
     O <a> inteiro NAO e' clicavel: numa tela de toque um link do tamanho
     da dobra rouba o dedo de quem so' queria rolar. So' a pastilha da
     assinatura leva pro Instagram. */
  .ig-reel{
    position:absolute;inset:0;top:0;left:0;right:0;margin:0;
    width:auto;max-width:none;height:auto;aspect-ratio:auto;
    display:block;padding:0;border:0;border-radius:0;
    background:none;box-shadow:none;transform:none;z-index:1;
    pointer-events:none;
  }
  .ig-reel:hover,.ig-reel:focus-visible{transform:none;box-shadow:none}
  .ig-reel .vid{position:absolute;inset:0;width:auto;height:auto;border-radius:0;overflow:hidden}
  .ig-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* o veu passa a morar AQUI, acima do video. O do .bg fica desligado no
     celular pra nao empilhar dois (o poster continua embaixo, e aparece
     inteiro quando o video nao roda - com "reduzir movimento", por exemplo). */
  .ig-reel::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,
      rgba(19,26,21,.70) 0%,rgba(19,26,21,.58) 24%,
      rgba(19,26,21,.86) 68%,rgba(19,26,21,.95) 100%);
  }
  .ig-reel::after{display:none}
  /* tracinhos de story no topo: dizem que sao tres clipes em rodizio */
  .ig-reel .bars{display:flex;left:5vw;right:5vw;top:10px;z-index:2;gap:4px}
  /* a assinatura vira pastilha - e e' a UNICA parte que recebe toque */
  .ig-reel .tag{
    position:absolute;left:5vw;top:24px;right:auto;bottom:auto;z-index:2;
    pointer-events:auto;
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 12px 7px 10px;border-radius:2px;
    background:rgba(11,15,12,.58);border:1px solid rgba(195,172,123,.42);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  }
  .ig-reel .tag svg{width:14px;height:14px;grid-row:auto}
  .ig-reel .tag b{display:none}
  .ig-reel .tag em{
    position:static;opacity:1;transform:none;color:var(--ivory);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  }
  /* rev.10d: o veu saiu daqui e foi pro .ig-reel::before, que fica ACIMA do
     video. Manter os dois empilharia escuro sobre escuro. */
  .hero-v .bg::after{display:none}
  .scroll-cue{display:none}
}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  width:1px;height:54px;background:linear-gradient(180deg,rgba(246,243,235,0),rgba(195,172,123,.9));
}
.scroll-cue::after{
  content:"";position:absolute;left:-2px;bottom:0;width:5px;height:5px;border-radius:50%;
  background:var(--brass-l);animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-46px);opacity:0}35%{opacity:1}100%{transform:translateY(0);opacity:0}}

/* ---------- seções genéricas ---------- */
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}
.sec-head h2{margin:22px 0 16px}
.alt{background:var(--linen)}
.dark{background:var(--g800);color:var(--ivory)}
.dark .lead,.dark .small{color:rgba(246,243,235,.62)}

/* imagens SEM borda / passe-partout (pedido da cliente) */
.frame{position:relative;overflow:hidden;background:transparent;border:none;padding:0}
.frame img{aspect-ratio:1/1;object-fit:cover;width:100%;filter:saturate(.94)}

/* cards de serviço — sem moldura, foto limpa */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{background:transparent;border:none;padding:0 0 6px;transition:transform .5s var(--ease);position:relative}
.svc:hover{transform:translateY(-8px)}
.svc .ph{overflow:hidden;position:relative}
.svc .ph::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,26,21,0) 55%,rgba(19,26,21,.34));
  opacity:0;transition:opacity .5s;
}
.svc:hover .ph::after{opacity:1}
.svc img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .9s var(--ease);filter:saturate(.92)}
.svc:hover img{transform:scale(1.06)}
.svc h3{margin:22px 0 8px;font-size:22px}
.svc p{margin:0 0 18px;font-size:14px;color:var(--muted)}
.svc .go{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-d);display:inline-flex;gap:8px;align-items:center;position:relative;
}
.svc .go::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--brass);transition:width .4s var(--ease);
}
.svc:hover .go::after{width:100%}
.svc .go .ar{font-family:var(--ff-d);font-size:15px;transition:transform .3s}
.svc:hover .go .ar{transform:translateX(5px)}

/* processo */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;position:relative}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:44px}}
.step{position:relative;padding-top:74px}
.step .num{
  position:absolute;top:-8px;left:-4px;font-family:var(--ff-b);font-weight:300;
  font-size:92px;line-height:1;color:transparent;letter-spacing:.02em;
  -webkit-text-stroke:1px rgba(42,62,50,.22);
}
.step h3{margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted)}
.step .stitch{margin-top:26px;max-width:82px}

/* ---------- ANTES & DEPOIS ---------- */
.ba-shell{max-width:960px;margin:0 auto}
.ba{
  position:relative;overflow:hidden;aspect-ratio:16/10;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;background:var(--g900);
}
@media(max-width:620px){.ba{aspect-ratio:4/5}}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba .after{clip-path:inset(0 0 0 var(--p,50%))}
.ba .tagl{
  position:absolute;top:18px;z-index:3;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  padding:7px 14px;border-radius:2px;background:rgba(19,26,21,.62);color:var(--ivory);
  backdrop-filter:blur(4px);pointer-events:none;
}
.ba .tagl.l{left:18px}
.ba .tagl.r{right:18px;background:rgba(169,144,92,.86);color:var(--g950)}
.ba .handle{
  position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;z-index:4;
  background:rgba(246,243,235,.9);transform:translateX(-1px);pointer-events:none;
}
.ba .handle::after{
  content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--ivory);color:var(--g700);
  display:grid;place-items:center;font-size:18px;box-shadow:var(--shadow);
}
.ba-cap{
  margin-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.dark .ba-cap{color:rgba(246,243,235,.55)}

/* ---------- carrossel ---------- */
.car-shell{position:relative}
.car{
  display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 26px;scrollbar-width:none;cursor:grab;
}
.car.dragging{cursor:grabbing;scroll-snap-type:none}
.car img{user-select:none;-webkit-user-drag:none}
.car::-webkit-scrollbar{display:none}
.car .it{flex:0 0 300px;scroll-snap-align:start}
@media(max-width:620px){.car .it{flex-basis:78vw}}
.car .it .frame img{aspect-ratio:1/1;transition:transform .9s var(--ease)}
.car .it:hover .frame img{transform:scale(1.05)}
.car .it figcaption{
  margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:10px;align-items:center;
}
.dark .car .it figcaption{color:rgba(246,243,235,.55)}
.car-nav{display:flex;gap:12px;margin-top:8px}
.car-nav button{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;font-family:var(--ff-d);font-size:19px;
  color:var(--ink);transition:all .3s;
}
.dark .car-nav button{border-color:var(--line-ivory);color:var(--ivory)}
.car-nav button:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}

/* ---------- galeria em grade (página de portfólio) ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.galeria{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.galeria{grid-template-columns:repeat(2,1fr);gap:10px}}
.galeria .it{margin:0;cursor:zoom-in;position:relative}
.galeria .it .frame{overflow:hidden}
.galeria .it .frame img{aspect-ratio:1/1;transition:transform .9s var(--ease)}
.galeria .it:hover .frame img{transform:scale(1.07)}
.galeria .it::after{                       /* véu + lupa no hover */
  content:"";position:absolute;inset:0;background:rgba(19,26,21,.34);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.galeria .it:hover::after,.galeria .it:focus-visible::after{opacity:1}
.galeria .it .lupa{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(246,243,235,.7);
  display:grid;place-items:center;color:var(--ivory);opacity:0;z-index:2;
  transition:all .35s var(--ease);pointer-events:none;font-size:15px;
}
.galeria .it:hover .lupa,.galeria .it:focus-visible .lupa{opacity:1;transform:translate(-50%,-50%) scale(1)}
.galeria .it:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:90;background:rgba(11,15,12,.94);
  display:grid;place-items:center;padding:5vh 6vw;
  opacity:0;transition:opacity .3s;
}
.lb[hidden]{display:none}
.lb.aberto{opacity:1}
.lb img{max-width:100%;max-height:90vh;object-fit:contain;width:auto;height:auto}
.lb button{
  position:absolute;background:transparent;border:1px solid rgba(246,243,235,.28);
  color:var(--ivory);width:52px;height:52px;border-radius:50%;cursor:pointer;
  font-family:var(--ff-d);font-size:21px;transition:all .3s;display:grid;place-items:center;
}
.lb button:hover{border-color:var(--brass);color:var(--brass-l)}
.lb .lb-x{top:22px;right:22px;font-size:26px}
.lb .lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:22px;top:50%;transform:translateY(-50%)}
.lb .lb-cont{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,243,235,.6);
}
@media(max-width:620px){
  .lb{padding:8vh 4vw}
  .lb button{width:44px;height:44px}
  .lb .lb-prev{left:8px}.lb .lb-next{right:8px}
}
body.lb-aberto{overflow:hidden}

/* ---------- depoimentos ---------- */
.gpill{
  display:inline-flex;align-items:center;gap:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:100px;padding:11px 22px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.stars{color:var(--brass);letter-spacing:3px;font-size:13px}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:52px}
@media(max-width:900px){.q-grid{grid-template-columns:1fr}}
.q{
  background:var(--paper);border:none;padding:38px 34px;
  display:flex;flex-direction:column;gap:18px;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.q:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.q::before{
  content:"“";font-family:var(--ff-d);font-size:88px;line-height:.6;
  color:rgba(169,144,92,.35);position:absolute;top:30px;right:26px;
}
.q p{font-family:var(--ff-d);font-size:19px;font-style:italic;line-height:1.5}
.q .who{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- INSTAGRAM ---------- */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-it{position:relative;overflow:hidden;aspect-ratio:1;display:block;background:var(--linen)}
.ig-it img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ig-it::after{
  content:"";position:absolute;inset:0;background:rgba(27,38,32,.44);opacity:0;transition:opacity .4s;
}
.ig-it .ic{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:2;
  opacity:0;transition:all .4s var(--ease);color:var(--ivory);
}
.ig-it .ic svg{width:22px;height:22px;fill:currentColor}
.ig-it:hover img{transform:scale(1.09)}
.ig-it:hover::after{opacity:1}
.ig-it:hover .ic{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px dashed rgba(169,144,92,.45)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;font-family:var(--ff-d);font-size:clamp(19px,2.2vw,23px);font-weight:500;
  color:var(--g700);transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass-d)}
.faq summary .pm{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(169,144,92,.5);
  position:relative;transition:all .35s var(--ease);
}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--brass);transition:transform .35s var(--ease),opacity .3s;
}
.faq summary .pm::before{width:11px;height:1px}
.faq summary .pm::after{width:1px;height:11px}
.faq details[open] summary .pm{background:var(--brass);border-color:var(--brass)}
.faq details[open] summary .pm::before{background:var(--g950)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.faq .ans{padding:0 60px 28px 0;color:var(--muted);font-size:15.5px;animation:fadeUp .5s var(--ease) both}
@media(max-width:620px){.faq .ans{padding-right:0}}

/* ---------- história / contadores ---------- */
.hist{position:relative;overflow:hidden}
.hist .watermark{transform:translateY(var(--plx,0));
  position:absolute;right:-2vw;top:-16px;font-family:var(--ff-b);font-weight:200;
  font-size:clamp(140px,22vw,280px);line-height:1;color:rgba(42,62,50,.045);
  letter-spacing:.04em;user-select:none;pointer-events:none;
}
.hist .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;position:relative}
@media(max-width:900px){.hist .wrap{grid-template-columns:1fr}}
.counters{display:flex;gap:64px;margin-top:44px;flex-wrap:wrap}
@media(max-width:620px){.counters{gap:36px}}
.counter .n{font-family:var(--ff-b);font-weight:300;font-size:54px;line-height:1;color:var(--g700);letter-spacing:.03em}
.counter .l{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---------- faixa CTA ---------- */
.cta-band{background:var(--g700);color:var(--ivory);text-align:center;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:22px;border:1px dashed rgba(246,243,235,.22);pointer-events:none;
}
.cta-band h2{max-width:18ch;margin:20px auto 14px}
.cta-band h2 em{color:var(--sage)}
.cta-band .lead{margin:0 auto 36px;color:rgba(246,243,235,.65)}

/* ---------- footer ---------- */
footer.site{background:var(--g900);color:rgba(246,243,235,.7)}
/* rev.10c - padding-block, NAO o atalho `padding`.
   Estava `padding:84px 0 60px`: o atalho escreve os quatro lados, entao o `0`
   do meio ZERAVA o padding lateral que vem de .wrap{padding:0 5vw}. E como
   `footer.site .top` tem especificidade maior que `.wrap`, o zero ganhava.
   No desktop nao aparecia porque o max-width:1180px ja afasta do vidro; no
   celular o rodape inteiro encostava na borda (medido: 0px), com o primeiro
   ponto da logo e os icones sociais cortados. Nas 4 paginas.
   padding-block so' mexe em cima/baixo e deixa o respiro lateral de pe'. */
footer.site .top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:50px;padding-block:84px 60px;
}
@media(max-width:900px){footer.site .top{grid-template-columns:1fr 1fr}}
@media(max-width:620px){footer.site .top{grid-template-columns:1fr}}
footer.site .brand img{width:164px}
footer.site h4{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--brass);margin-bottom:22px;
}
footer.site li{margin-bottom:12px;font-size:14px}
footer.site a:hover{color:var(--brass-l)}
footer.site .social{margin-top:22px}
footer.site .social a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(246,243,235,.18);
  display:grid;place-items:center;transition:all .35s var(--ease);
}
footer.site .social a:hover{border-color:var(--brass);color:var(--brass-l);transform:translateY(-3px)}
footer.site .social svg{width:15px;height:15px}
footer.site .note{
  display:inline-block;margin-top:10px;padding:5px 12px;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;border:1px dashed rgba(169,144,92,.5);
  color:var(--brass);border-radius:2px;
}
footer.site .base{
  border-top:1px solid rgba(246,243,235,.1);padding-block:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.08em;
}

/* whatsapp flutuante */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:40;width:58px;height:58px;border-radius:50%;
  /* rev.09: verde WhatsApp de verdade (#25D366) no lugar do verde-marca.
     A cliente pediu "um verde mais chamativo": o botao flutuante e
     afordancia de canal, nao decoracao - tem que gritar WhatsApp. */
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px -12px rgba(11,90,45,.55);transition:all .35s var(--ease);
}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #25D366;
  animation:pulse 3.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.wa-float:hover{background:#1EBE5A;transform:translateY(-4px)}
.wa-float svg{width:26px;height:26px;fill:var(--ivory)}
@media(max-width:620px){.wa-float{right:18px;bottom:18px;width:54px;height:54px}}

/* ---------- páginas internas ---------- */
.page-hero{background:var(--linen);padding:74px 0 66px;position:relative;overflow:hidden}
.page-hero .crumb{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:12px;align-items:center;margin-bottom:24px;
}
.page-hero .crumb b{color:var(--brass-d);font-weight:500}
.page-hero h1{max-width:16ch}
.page-hero .lead{margin-top:18px}
.page-hero .watermark{transform:translateY(var(--plx,0));
  position:absolute;right:-1vw;bottom:-60px;font-family:var(--ff-b);font-weight:200;
  font-size:clamp(110px,18vw,210px);color:rgba(42,62,50,.045);line-height:1;
  letter-spacing:.04em;user-select:none;pointer-events:none;
}

/* sobre — mvv */
.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:900px){.mvv{grid-template-columns:1fr}}
.mvv .box{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:44px 36px;transition:all .4s var(--ease);
}
.mvv .box:hover{border-color:rgba(169,144,92,.55);transform:translateY(-6px);box-shadow:var(--shadow)}
.mvv .box .dots{margin-bottom:22px}
.mvv .box h3{margin-bottom:14px}
.mvv .box p{font-size:14.5px;color:var(--muted)}
.mvv .vals{
  list-style:none;display:grid;gap:13px 18px;margin-top:4px;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
}
.mvv .vals li{
  font-size:14.5px;color:var(--g700);display:flex;align-items:center;gap:11px;min-width:0;
}
.mvv .vals li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none;
}

.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
@media(max-width:900px){.story{grid-template-columns:1fr}}
.story.flip{grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.story.flip{grid-template-columns:1fr}}
.story .pull{
  font-family:var(--ff-d);font-style:italic;font-size:26px;line-height:1.45;
  border-left:1px solid var(--brass);padding-left:26px;margin:30px 0;color:var(--g700);
}
.sign{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* sobre — método de trabalho */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
@media(max-width:900px){.method{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.method{grid-template-columns:1fr}}
.method .m{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.method .m .k{
  position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--brass);
}
.method .m h3{font-size:20px;margin-bottom:10px}
.method .m p{font-size:14px;color:var(--muted)}

/* sobre — estrutura física */
.units{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:820px){.units{grid-template-columns:1fr}}
.unit{position:relative;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;background:var(--g800)}
.unit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.unit:hover img{transform:scale(1.06)}
.unit::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,26,21,.15),rgba(19,26,21,.86))}
.unit .in{position:relative;z-index:2;padding:34px;color:var(--ivory)}
.unit .in h3{color:var(--ivory);margin-bottom:6px}
.unit .in .k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-l);margin-bottom:12px;display:block}
.unit .in p{font-size:14px;color:rgba(246,243,235,.75)}

/* placeholder de conteúdo pendente do cliente */
.pending{
  border:1px dashed rgba(169,144,92,.6);border-radius:3px;padding:34px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:rgba(169,144,92,.05);
}
.pending .k{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-d)}
.pending p{font-size:14px;color:var(--muted)}
/* width:100% é necessário: com justify-self:end o item de grid encolhe até o
   conteúdo ("a ser enviada" = 228px) e o max-width sozinho não segura nada. */
.pending.ph-img{aspect-ratio:1/1;width:100%;justify-content:center;align-items:center;text-align:center}
@media(max-width:900px){
  /* no celular o quadrado vazio vira um buraco enorme na página */
  .pending.ph-img{aspect-ratio:4/3;max-width:none!important;justify-self:stretch!important}
}

/* portfólio — abas */
/* rev.09: as 7 abas quebravam em duas linhas e "Area externa" ficava
   sozinha embaixo. Aperta tracking e padding (cabe ate 1024px) e, no
   estreito, vira faixa de rolagem horizontal - melhor que empilhar. */
.tabs{
  display:flex;gap:2px;flex-wrap:nowrap;border-bottom:1px solid var(--line);
  margin-bottom:54px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:none;border:none;cursor:pointer;font-family:var(--ff-b);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:16px 13px;position:relative;transition:color .3s;
  white-space:nowrap;flex:0 0 auto;
}
.tabs button::after{
  content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  background:var(--brass);transform:scaleX(0);transition:transform .35s;transform-origin:left;
}
.tabs button.on{color:var(--g700);font-weight:500}
.tabs button.on::after{transform:scaleX(1)}
.panel{display:none}
.panel.on{display:block;animation:fadeUp .6s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel .foot{
  margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.panel .count{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* contato */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.channels{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.channels{grid-template-columns:1fr}}
.chan{
  background:var(--paper);border:1px solid var(--line);padding:36px 32px;
  display:flex;flex-direction:column;gap:8px;position:relative;
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),color var(--t-base) var(--ease);
  min-width:0;   /* sem isso o e-mail longo (palavra que não quebra) define a largura de TODOS os cards */
}
.chan .v{overflow-wrap:anywhere}
.chan .v.mail{font-size:15px}   /* cabe inteiro na coluna; a 19px quebrava o ".com.br" no meio */
/* o selo "a confirmar" cobria o rótulo do card */
.chan:has(.tagg) .k{padding-right:104px}
.chan:hover{border-color:rgba(169,144,92,.6);transform:translateY(-5px);box-shadow:var(--shadow)}
.chan.hero-c{background:var(--g700);color:var(--ivory);grid-column:span 3}
@media(max-width:900px){.chan.hero-c{grid-column:span 2}}
@media(max-width:620px){.chan.hero-c{grid-column:span 1}}
.chan.hero-c .k,.chan.hero-c .small{color:rgba(246,243,235,.6)}
.chan .k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-d)}
.chan .v{font-family:var(--ff-b);font-size:20px;font-weight:400;letter-spacing:.02em}
.chan.hero-c .v{font-size:26px;font-weight:300;letter-spacing:.04em}
.chan .tagg{
  position:absolute;top:22px;right:22px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;border:1px dashed rgba(169,144,92,.6);color:var(--brass);
  padding:4px 10px;border-radius:2px;
}

/* ============================================================
   MOVIMENTO — entrada em cena, profundidade, fluidez
   (só transform/opacity: não força layout, roda na GPU)
   ============================================================ */
/* rev.09: REVEAL DESLIGADO a pedido da cliente ("a rolagem esta lenta,
   principalmente nas imagens... retirar esse efeito de animacao e deixar
   estatico"). As regras abaixo viram no-op: o conteudo ja nasce visivel e
   a foto aparece assim que decodifica, sem esperar 1,2s de clip-path.
   O .rv continua no HTML porque ainda e gancho de JS e de layout. */
/* rev.09 (18/09): estas regras neutralizavam o reveal antigo, mas `transform:none`
   e `transition:none` tem a mesma especificidade do :hover dos cartoes e vinham
   DEPOIS na folha - venciam, e o hover de levantar/dar zoom nao acontecia em
   nada que tivesse .rv. Fica so' a garantia que importa: nascer visivel. */
.rv{opacity:1}
.rv.in{opacity:1}




/* a costura nasce inteira: quem a estica no hover e' .step:hover .stitch */

/* fotos se revelam por baixo do "tecido" (clip no contêiner:
   deixa o img livre para o zoom de hover) */
.rv .ph,.rv .frame,.rv .unit,.rv .ig-it,.rv .mf{clip-path:none !important;
  clip-path:inset(18% 0 0 0);
  transition:clip-path 1.2s var(--ease) .08s;
}
.rv.in .ph,.rv.in .frame,.rv.in .unit,.rv.in .ig-it,.rv.in .mf{clip-path:inset(0 0 0 0)}

/* nada aqui: o zoom das fotos e' do :hover, e o `transform:none` desta linha
   era justamente quem o matava. */

/* parallax sutil (JS aplica translateY) */
[data-plx]{will-change:transform}

/* Foto de aba fechada só baixa quando a aba abre (loading=lazy).
   Medido no ar: ~1,1s até aparecer. Sem cor de fundo o lugar fica
   vazio nesse intervalo — o linho segura o layout com a cor da marca. */
.galeria .it .frame{background:var(--linen)}

/* =========================================================
   rev.04 (06/08) — conteúdo oficial da cliente:
   Método Entre Tramas (5 etapas), diferenciais, o que
   analisamos, manifesto e listas de serviços.
   ========================================================= */

/* 5 etapas do método: 5 → 3 → 1 coluna.
   O .steps base é repeat(3,1fr); aqui só o número muda. */
.steps.cinco{grid-template-columns:repeat(5,1fr);gap:38px}
@media(max-width:1080px){.steps.cinco{grid-template-columns:repeat(3,1fr);gap:48px}}
@media(max-width:820px){.steps.cinco{grid-template-columns:1fr}}

/* diferenciais: mesmo componente do .method, em 3 colunas */
.method.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.method.tres{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.method.tres{grid-template-columns:1fr}}

/* "não só trocamos tecidos, analisamos:" — os 12 pontos */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chips span{
  font-size:13px;letter-spacing:.04em;padding:9px 17px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--ink);border-radius:2px;
}
.alt .chips span{background:var(--ivory)}
.on-dark .chips span,.dark .chips span{
  background:rgba(246,243,235,.05);border-color:var(--line-ivory);color:var(--ivory);
}
.chips-cap{
  font-family:var(--ff-d);font-style:italic;font-size:26px;
  color:var(--brass-d);margin-top:30px;
}
.on-dark .chips-cap,.dark .chips-cap{color:var(--brass-l)}

/* manifesto: faixa de respiro, texto grande em serifa */
.manifesto{text-align:center}
.manifesto .m-txt{
  font-family:var(--ff-d);font-weight:300;font-size:clamp(22px,2.9vw,34px);
  line-height:1.5;max-width:22ch;margin:26px auto 0;color:var(--ivory);
}
.manifesto .m-txt em{color:var(--sage);font-style:italic}
.manifesto .m-fim{
  font-family:var(--ff-d);font-style:italic;font-size:clamp(19px,2.2vw,25px);
  color:var(--brass-l);max-width:30ch;margin:34px auto 0;
}

/* listas de serviços (fabricamos / reformamos / inclui) */
.listas{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media(max-width:900px){.listas{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:620px){.listas{grid-template-columns:1fr}}
.listas .col h3{font-size:21px;margin-bottom:6px}
.listas .col .k{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-d);display:block;margin-bottom:12px;
}
.listas .col .stitch{margin:18px 0 20px;max-width:70px}
.listas .col li{
  font-size:14.5px;color:var(--muted);padding:7px 0 7px 20px;position:relative;
}
.listas .col li::before{
  content:"";position:absolute;left:0;top:16px;
  width:5px;height:5px;border-radius:50%;background:var(--brass);opacity:.6;
}

/* =========================================================
   rev.05 (12/08) — MOVIMENTO
   Personalidade: PREMIUM (elegante, controlado, 0% overshoot).
   Três constantes de marca, usadas em tudo daqui pra frente:
   1 curva assinatura (--ease) + 3 durações + entrada por baixo.
   ========================================================= */
:root{
  --t-fast:170ms;   /* micro-feedback: cor, foco, sublinhado */
  --t-base:340ms;   /* mudança de estado: card sobe, botão reage */
  --t-slow:620ms;   /* deslocamento maior, painel, imagem */
  --e-soft:cubic-bezier(.4,0,.2,1);  /* on-screen: suave nas duas pontas */
  --e-in:cubic-bezier(.4,0,1,1);     /* saída: manso no início, rápido no fim */
}

/* ---- fio de progresso da leitura (latão, 2px, topo da tela) ---- */
.prog{position:fixed;left:0;top:0;width:100%;height:2px;z-index:95;pointer-events:none}
.prog i{
  display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brass-d),var(--brass-l));
}

/* ---- feedback de clique: some o "vazio" entre apertar e acontecer ----
   O botão compõe 3 deslocamentos em variáveis para o hover, o ímã (JS)
   e o clique não brigarem pelo mesmo `transform`. */
.btn{
  --mx:0px;--my:0px;--lift:0px;--press:1;
  transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0) scale(var(--press));
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.btn.solid:hover,.btn.brass:hover{--lift:-2px}
.btn:active{--press:.978;transition-duration:110ms}
.q:active,.chan:active,.svc:active{transition-duration:110ms}
.car-nav button:active,.lb button:active,.tabs button:active{transform:scale(.94)}

/* ---- cascata dentro das grades (JS numera; aqui só o degrau) ----
   Orçamento: 70ms × 6 = 420ms, abaixo do teto de 500ms. */
.rv[data-i]{transition-delay:0s}
.rv[data-i] .stitch{transition-delay:0s}

/* valores: cada um entra logo depois do anterior.
   Item pequeno pede 200-350ms, não os 620ms do bloco. Degrau de 45ms:
   o último assenta 0,7s depois da caixa — cascata sentida, não esperada. */
/* rev.07: o estado escondido daqui saiu. Ele nascia no CSS e dependia
   do JS escrever .box.in pra voltar - sem JS, os seis valores da marca
   sumiam da pagina (estava assim no ar desde 25/08). Agora quem cuida e'
   o motor de motion do texto, que so' esconde debaixo de html.mo e tem
   cao de guarda. A cascata continua: ele faz o degrau sozinho. */
.mvv .vals li::before{transition:transform var(--t-base) var(--ease),background var(--t-base)}
.mvv .box:hover .vals li::before{transform:scale(1.5);background:var(--brass-d)}

/* ---- hover que faltava ---- */
.chips span{transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.chips span:hover{border-color:rgba(169,144,92,.6);color:var(--brass-d)}
.on-dark .chips span:hover,.dark .chips span:hover{border-color:var(--brass);color:var(--brass-l)}
/* links do rodapé: o mesmo sublinhado que varre do menu */
footer.site .cols a,.topbar a:not(.social a){
  position:relative;display:inline-block;
}
footer.site .cols a::after,.topbar a:not(.social a)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--brass-l);transition:width var(--t-base) var(--ease);
}
footer.site .cols a:hover::after,.topbar a:not(.social a):hover::after{width:100%}
.listas .col li::before{transition:transform var(--t-base) var(--ease),opacity var(--t-base)}
.listas .col li:hover::before{transform:scale(1.6);opacity:1}

/* rev.09: o CURSOR DE MARCA (anel de latao + ponto que seguia o
   ponteiro) saiu a pedido da cliente - "mousse em formato de
   bolinha, retirar e deixar o formato convencional". Volta o
   ponteiro do sistema. */

/* =========================================================
   rev.06 (12/08) — MOVIMENTO, CAMADA POR CAMADA
   A doutrina: animação com uma camada só lê como plana.
   1 PRIMÁRIA  — o que a pessoa segue (bloco entra, palavra sobe)
   2 SECUNDÁRIA— o que dá riqueza (sombra atrasada, foto assenta)
   3 AMBIENTE  — o fundo vivo (os três pontos da marca respiram)
   Peso manda no tempo: bloco 760ms, foto 1,2s, palavra 700ms.
   ========================================================= */

/* ---------- 1. ABERTURA (sem depender de JS) ----------
   Nada aqui depende de JS. O scroll-cue usa `both`; header e topbar usam
   `backwards` e o motivo esta no bloco rev.12 logo abaixo. */
@keyframes cai{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0}to{opacity:1}}
/* rev.12 (15/09) - MENU DO CELULAR PRESO NO HEADER, pela 2a vez.
   Com `both`, o header guardava o ULTIMO QUADRO calculado da animacao. O
   `transform:none` do fim vira, na interpolacao, translateY(0) - o computado
   fica matrix(1,0,0,1,0,0), nao `none`. Transform que nao move nada continua
   criando containing block, entao o nav "tela cheia" (position:fixed) se
   ancorava no header e abria como faixa de 88px: mesmo defeito do
   backdrop-filter documentado no bloco do hamburguer, por outro caminho.
   `backwards` basta: segura o `from` durante o atraso e, ao terminar, a
   animacao sai de cena e vale o estilo normal (visivel, sem transform).
   No hamburguer a entrada e' so' opacidade, para o menu funcionar mesmo se
   tocado durante os 0,8s da animacao. */
.topbar{animation:cai .7s var(--ease) backwards}
header.site{animation:cai .8s var(--ease) .07s backwards}
@media(max-width:960px){header.site{animation-name:surge}}
.scroll-cue{animation:surge 1s var(--ease) 1.3s both}
/* véu de linho que abre a página e cobre a saída para a próxima.
   Em ::before do body: zero DOM extra e some sozinho no `both`. */
body::before{
  content:"";position:fixed;inset:0;z-index:200;background:var(--linen);
  pointer-events:none;animation:veuSai .58s var(--ease) both;
}
@keyframes veuSai{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
body.saindo::before{animation:veuEntra .3s var(--e-in) both}
@keyframes veuEntra{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}

/* ---------- 2. TÍTULO QUE ENTRA COMO TIPOGRAFIA ----------
   Palavra por palavra, subindo. É o gesto de uma página sendo
   composta — o recurso mais editorial que existe, e o que mais
   diferencia. `:not(.in)` guarda o estado inicial sem depender
   da ordem das regras (a armadilha da rev.03). */
.w{display:inline-block;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv:not(.in) .w{opacity:1;transform:none}
.rv .w{transition-delay:calc(var(--w,0) * 34ms)}
/* o bloco que tem título fatiado anda menos: quem entra são as
   palavras, o bloco só acompanha (senão os dois brigam) */
.rv:not(.in).tw{transform:none}
.rv:not(.in).tw.fromL{transform:none}
.rv:not(.in).tw.fromR{transform:none}

/* ---------- o reveal assinatura que faltava em 10 elementos ----------
   As regras da rev.03 são `.rv .frame`, `.rv .unit`, `.rv .ig-it` —
   DESCENDENTE. Só que em 10 lugares a foto É o próprio .rv
   (`<figure class="frame rv">`, `<a class="ig-it rv">`), e aí o
   seletor não casa: elas entravam sem o clip "por baixo do tecido".
   Aqui as mesmas regras na versão que casa consigo mesma. */
.rv.ph,.rv.frame,.rv.unit,.rv.ig-it{transition:none}
.rv:not(.in).ph,.rv:not(.in).frame,.rv:not(.in).unit,.rv:not(.in).ig-it{clip-path:none}
.rv.ph,.rv.frame,.rv.unit,.rv.ig-it{clip-path:inset(0 0 0 0)}
.rv.frame img,.rv.ph img{transition:transform 1.4s var(--ease)}
.rv:not(.in).frame img,.rv:not(.in).ph img{transform:scale(1.08)}

/* ---------- peso manda no tempo ---------- */
.rv{transition-duration:.76s}
.svc,.q,.chan,.step,.mvv .box,.ig-it{transition-duration:var(--t-base)}

/* ---------- 3. CAMADA AMBIENTE ----------
   Os TRÊS PONTOS do logo respiram no site inteiro. O motivo da
   marca é que fica vivo — não um brilho genérico de fundo.
   Só opacidade, ciclo de 7s, defasado: lê como onda, não pisca. */
@keyframes respira{0%,100%{opacity:.32}50%{opacity:1}}
/* 🔴 O mark é "··●": dois apagados e um cheio. Uma respiração só, igual
   pros três, ACHATA a marca. Cada ponto respira em torno do valor DELE —
   a graduação fica de pé e o brilho corre como onda. */
@keyframes respiraFraco{0%,100%{opacity:.3}50%{opacity:.62}}
@keyframes respiraForte{0%,100%{opacity:.66}50%{opacity:1}}
.dots i{animation:respiraFraco 7s ease-in-out infinite}
.dots i:last-child{animation-name:respiraForte}
.dots i:nth-child(2){animation-delay:-2.33s}
.dots i:nth-child(3){animation-delay:-4.66s}
/* nos pseudo-elementos os 3 pontos são um box-shadow só: animar a opacidade
   do conjunto já preserva a graduação interna (.4 / .7 / 1) */
.eyebrow::before,.eyebrow.center::after{animation:respira 7.5s ease-in-out infinite}
.eyebrow.center::after{animation-delay:-3.75s}
.stitch::after{animation:respira 6.4s ease-in-out infinite}
/* o ponto do cursor não respira: ele é o ponteiro, precisa ser firme */
.cur .d{animation:none}
/* No celular a camada ambiente sai: são ~58 animações infinitas na home,
   o aparelho é o mais fraco e o efeito é imperceptível nessa tela. */
@media(max-width:760px){
  .dots i,.eyebrow::before,.eyebrow.center::after,.stitch::after{animation:none}
}

/* ---------- 4. FOLLOW-THROUGH: a sombra chega depois ----------
   O card sobe e a sombra o alcança 90ms atrasada. É o detalhe que
   faz parecer objeto com peso, não retângulo que salta. */
.q,.chan,.mvv .box{
  transition:transform var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-slow) var(--ease) 90ms;
}
.svc img,.car .it .frame img,.galeria .it .frame img,.unit img,.ig-it img{
  transition:transform 1.1s var(--ease);   /* a foto continua depois do card parar */
}

/* =========================================================
   rev.08 (13/08) — SUPERFÍCIE E FUNDO
   O site estava chapado: cada seção era um retângulo de tinta
   sólida. Aqui a superfície ganha matéria (trama de linho),
   luz (washes quentes) e os motivos da marca em escala grande
   atrás do conteúdo. Tudo em CSS — zero imagem, zero KB.
   ========================================================= */
:root{
  /* trama de linho: dois gradientes cruzados de 1px. É a textura
     certa pra uma tapeçaria — e custa nada comparado a um PNG. */
  --trama:
    repeating-linear-gradient(0deg,  rgba(42,62,50,.058) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(42,62,50,.046) 0 1px, transparent 1px 5px);
  /* no escuro a mesma força vira "tela de mosquiteiro": o olho lê a grade,
     não a matéria. Metade da opacidade e passo maior. */
  --trama-escura:
    repeating-linear-gradient(0deg,  rgba(246,243,235,.026) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(246,243,235,.018) 0 1px, transparent 1px 7px);
}

/* luz entrando por cima + a trama por baixo de tudo */
body{
  background-color:var(--ivory);
  background-image:
    radial-gradient(1150px 640px at 6% -14%, rgba(169,144,92,.13), transparent 62%),
    radial-gradient(980px 560px at 104% 2%,  rgba(147,163,146,.13), transparent 60%),
    var(--trama);
}

/* 🔴 "menos opaco": a faixa alternada deixou de ser tinta sólida e virou
   véu — a trama e a luz do body atravessam, então a alternância continua
   legível mas o bloco não parece mais um retângulo pintado por cima. */
.alt{background:rgba(238,233,220,.5)}
.page-hero{background:rgba(238,233,220,.55)}
.alt .chips span{background:rgba(246,243,235,.72)}

/* seções claras ganham profundidade nas bordas em vez de corte seco */
section{position:relative}
section.alt::after,.page-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(169,144,92,.28) 22%,rgba(169,144,92,.28) 78%,transparent);
}

/* ---- fundos escuros: matéria + vinheta + brilho de latão ---- */
.dark,.cta-band,.manifesto,.hero-v{position:relative;isolation:isolate}
.dark::before,.cta-band::before,.manifesto::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(720px 380px at 82% 12%, rgba(169,144,92,.16), transparent 64%),
    radial-gradient(620px 420px at 8% 96%, rgba(147,163,146,.10), transparent 62%),
    var(--trama-escura);
}
/* vinheta: fecha os cantos e joga o olho pro meio */
.dark::after,.cta-band::after,.manifesto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 50% 45%, transparent 44%, rgba(11,16,12,.42));
}

/* ---- os três pontos da marca em escala de pôster, atrás do texto ----
   É o motivo do logo virando elemento gráfico — não um blob genérico. */
.manifesto .wrap,.cta-band .wrap{position:relative;z-index:1}
/* 🔴 Parada dura (`0 62px, transparent 63px`) desenha um DISCO de borda
   nítida — leu como três chapas, não como marca d'água. Com raio grande
   e queda longa vira luz, que é o que uma marca d'água tem que ser. */
.manifesto::before{
  background:
    radial-gradient(circle 230px at 13% 108%, rgba(195,172,123,.13), transparent 70%),
    radial-gradient(circle 230px at 26% 108%, rgba(195,172,123,.085), transparent 70%),
    radial-gradient(circle 230px at 39% 108%, rgba(195,172,123,.05), transparent 70%),
    radial-gradient(760px 400px at 86% 10%, rgba(169,144,92,.15), transparent 64%),
    var(--trama-escura);
}

/* ---- scrim do hero: profundidade E legibilidade ----
   Medido no pixel: o eyebrow em latão claro caía em 1,37 de contraste
   sobre o trecho claro da foto (mínimo AA é 4,5). Um véu radial ancorado
   atrás da coluna de texto resolve os dois problemas de uma vez — dá
   volume ao fundo e devolve o texto pra cima do limite. */
/* latão um tom acima SÓ no hero: escurecer mais o scrim começaria a apagar
   a foto do showroom. Com este tom o eyebrow passa de 4,03 para 5,0. */
.hero-v .eyebrow{color:#D6C199}
.hero-v .eyebrow::before{
  background:rgba(214,193,153,.45);
  box-shadow:9px 0 0 rgba(214,193,153,.75), 18px 0 0 #D6C199;
}
.hero-v .wrap{position:relative;z-index:2}
.hero-v .wrap::before{
  content:"";position:absolute;inset:-14vh -10vw -14vh -14vw;z-index:-1;pointer-events:none;
  background:radial-gradient(84% 92% at 20% 46%,
    rgba(9,14,10,.88) 0%, rgba(9,14,10,.74) 34%, rgba(9,14,10,.36) 62%, transparent 82%);
}
@media(max-width:760px){
  .hero-v .wrap::before{
    inset:-10vh -12vw;
    background:radial-gradient(96% 74% at 50% 56%,
      rgba(9,14,10,.74) 0%, rgba(9,14,10,.58) 46%, rgba(9,14,10,.24) 72%, transparent 88%);
  }
}

/* ---- costura fantasma: a linha de costura em tamanho de arquitetura ---- */
.hist::before,.story::before{
  content:"";position:absolute;top:-60px;bottom:-60px;left:-4vw;width:1px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(169,144,92,.34) 0 9px,transparent 9px 19px);
}
.story{position:relative}
@media(max-width:900px){.hist::before,.story::before{display:none}}

/* =========================================================
   rev.09 (13/08) — MÉTODO E DIFERENCIAIS
   Os numerais 01–05 eram contorno a 22% de opacidade: quase
   não se liam e não reagiam a nada. E os 6 cards de
   diferenciais eram só texto sobre fundo.
   ========================================================= */

/* ---- numerais do Método: contraste + reação ---- */
.step .num{
  -webkit-text-stroke:1.2px rgba(42,62,50,.46);   /* era 1px a .22 */
  color:rgba(42,62,50,.045);                       /* leve enchimento: dá corpo */
  transition:color var(--t-base) var(--ease),transform var(--t-base) var(--ease),
             opacity var(--t-base) var(--ease),-webkit-text-stroke-color var(--t-base) var(--ease);
}
.step h3,.step .stitch{transition:color var(--t-base) var(--ease),max-width var(--t-slow) var(--ease)}

/* o passo sob o ponteiro (ou em cena, no celular) acende;
   os irmãos recuam — é o que faz o olho seguir um de cada vez */
.step:hover .num,.step.ativo .num{
  -webkit-text-stroke-color:var(--brass);
  color:rgba(169,144,92,.20);
  transform:translateY(-5px);
}
.step:hover h3,.step.ativo h3{color:var(--brass-d)}
.step:hover .stitch,.step.ativo .stitch{max-width:150px}
.steps:hover .step:not(:hover) .num{opacity:.42}
@media(hover:none){ .steps:hover .step:not(:hover) .num{opacity:1} }

/* ---- diferenciais: cada card ganhou a foto do ponto que ele afirma ---- */
.method .m .mf{
  margin:0 0 24px;overflow:hidden;aspect-ratio:4/3;background:var(--linen);
}
.method .m .mf img{width:100%;height:100%;object-fit:cover;display:block}
.method .m:hover .mf img{transform:scale(1.05)}
/* a barra de latão sai do topo do card e passa a ancorar embaixo da foto */
.method .m{border-top:none;padding-top:0}
.method .m .k{position:static;display:block;width:34px;height:1px;margin-bottom:20px;transition:width var(--t-base) var(--ease)}
.method .m:hover .k{width:74px}

/* o hover da faixa de tablet nao passa por --lift, entao leva regra propria */
@media(prefers-reduced-motion:reduce) and (min-width:761px) and (max-width:1023px){
  .ig-reel:hover,.ig-reel:focus-visible{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cur{display:none}
  .step .num,.step h3,.step .stitch{transition:none}
  body::before,body.saindo::before{animation:none;display:none}
  .topbar,header.site,.scroll-cue{animation:none}
  /* NAO redeclarar transform aqui. No .ig-reel o transform faz DUAS coisas:
     centralizar (layout) e o pulinho do hover (animacao). Redeclarar matava
     as duas - e como esta regra nao tem trava de largura e vem DEPOIS dos
     blocos de tablet/celular, o translate de desktop voltava neles: o card
     subia 35px no celular e 110px no tablet, saindo pra cima do hero.
     Aqui so' o que e' animacao: a transicao e o pulinho (via --lift). */
  .ig-reel,.ig-reel video{transition:none}
  .ig-reel:hover,.ig-reel:focus-visible{--lift:0}
  .dots i,.eyebrow::before,.eyebrow.center::after,.stitch::after{animation:none}
  .w,.rv:not(.in) .w{opacity:1;transform:none;transition:none}
  .rv:not(.in).tw,.rv:not(.in).tw.fromL,.rv:not(.in).tw.fromR{transform:none}
  .rv.ph,.rv.frame,.rv.unit,.rv.ig-it,
  .rv:not(.in).ph,.rv:not(.in).frame,.rv:not(.in).unit,.rv:not(.in).ig-it{clip-path:none;transition:none}
  .rv:not(.in).frame img,.rv:not(.in).ph img{transform:none}
  body.cur-on,body.cur-on *{cursor:auto}
  .btn,.btn:active{transform:none}
  .prog i{transition:none}
  .mvv .vals li{opacity:1;transform:none;transition:none}
  .rv[data-i],.rv[data-i] .stitch{transition-delay:0s}
  .rv,.rv .stitch{opacity:1;transform:none;transition:none}
  .rv .ph,.rv .frame,.rv .unit,.rv .ig-it{clip-path:none;transition:none}
  .rv .frame img,.rv .ph img{transform:none}
  [data-plx]{transform:none!important}
  .hero-v .bg video,.hero-v .bg .poster{animation:none}
  .scroll-cue::after,.wa-float::before{animation:none}
}


/* ============================================================
   rev.09 (25/08) - BLOCOS NOVOS DA V2
   ============================================================ */

/* ---------- Consultoria: 1 foto + topicos ----------
   Eram 6 fichas com 6 fotos. Viraram UMA foto e uma lista, porque
   seis miniaturas competindo entre si nao deixavam ler nenhuma. */
.consult-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:54px;align-items:center;margin-top:54px;
}
/* rev.06: o cabecalho da secao saiu a pedido da cliente. A margem de 54px
   existia so' pra separar do cabecalho - sem ele, o respiro de 104px da
   secao ja' basta. Presa a :first-child: se o cabecalho voltar, a margem
   volta junto, sem ninguem lembrar de mexer aqui. */
.consult-grid:first-child{margin-top:0}
@media(max-width:900px){.consult-grid{grid-template-columns:1fr;gap:34px}}
.consult-grid .frame{margin:0}
/* rev.10: o problema era o ARQUIVO, nao o enquadramento no CSS. A foto
   vinha de um recorte deitado 760x570 tirado de um original VERTICAL de
   1172x2007 - por isso a testa ficava no limite e todo aspect-ratio aqui
   so' escolhia por onde cortar mal. Agora o arquivo ja nasce 4:5 do
   original, com ar acima da cabeca e a mao no tecido dentro do quadro:
   o cover vira empate exato e nada e' recortado, no desktop e no celular. */
.consult-grid .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}

.topicos{display:block}
.topicos li{
  position:relative;padding:15px 0 15px 30px;
  border-bottom:1px solid var(--line);
}
.topicos li:last-child{border-bottom:0}
/* o marcador e o mesmo ponto do logo, nao um bullet generico */
.topicos li::before{
  content:"";position:absolute;left:7px;top:25px;
  width:6px;height:6px;border-radius:50%;background:var(--brass);opacity:.5;
}
.topicos b{
  display:block;font-family:var(--ff-d);font-size:20px;font-weight:500;
  letter-spacing:.02em;color:var(--g700);line-height:1.3;margin-bottom:4px;
}
.topicos span{display:block;font-size:14.5px;color:var(--muted);line-height:1.65}

/* o "destaque" que a cliente pediu: o primeiro topico ganha moldura de
   latao. E o item que abre a conversa - e o que a Brasilina vende antes
   do tecido -, entao e ele que sai da lista e vira cartao. */
.topicos .destaque{
  background:rgba(169,144,92,.09);border:1px solid rgba(169,144,92,.34);
  border-radius:2px;padding:20px 22px 20px 46px;margin-bottom:10px;
}
.topicos .destaque::before{left:22px;top:30px;width:7px;height:7px;opacity:1}
.topicos .destaque b{color:var(--brass-d)}

/* ---------- Estrutura: so o showroom ---------- */
/* rev.06: as fotos do showroom chegaram. A real (sofa verde + logo) abre
   o bloco em faixa larga; as tres do espaco vem embaixo, em pe. */
.showroom-fotos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-top:52px;align-items:stretch;
}
.showroom-fotos .frame{margin:0}
.showroom-fotos .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.showroom-fotos .frame.larga{grid-column:1 / -1}
.showroom-fotos .frame.larga img{aspect-ratio:16/7}
@media(max-width:760px){
  .showroom-fotos{grid-template-columns:1fr 1fr}
  .showroom-fotos .frame.larga img{aspect-ratio:16/9}
  /* em duas colunas as tres fotos do espaco dariam 2+1 e sobraria um
     buraco na ultima linha. A ultima fecha a fileira em faixa larga. */
  .showroom-fotos .frame:last-child{grid-column:1 / -1}
  .showroom-fotos .frame:last-child img{aspect-ratio:16/9}
}
@media(max-width:480px){
  .showroom-fotos{grid-template-columns:1fr}
  /* em coluna unica nao ha fileira pra fechar, entao a regra :last-child
     acima nao se aplica: sem isto a ultima foto (o quarto, 800x1000) vira
     uma faixa 16/9 de 218px e perde a cabeceira. */
  .showroom-fotos .frame:last-child img{aspect-ratio:4/5}
}

/* ---------- Contato: cada canal com o seu icone ---------- */
.chan .ic{display:block;width:26px;height:26px;color:var(--brass);margin-bottom:8px}
.chan .ic svg{width:100%;height:100%;display:block}
/* so os desenhos CHEIOS (whatsapp, instagram, facebook) levam fill;
   os de linha ja trazem stroke="currentColor" e fill="none" no proprio svg */
.chan .ic svg:not([stroke]){fill:currentColor}
.chan.hero-c .ic{width:34px;height:34px;color:var(--brass-l)}

section>.wrap,.page-hero>.wrap{position:relative;z-index:1}

/* ============================================================
   rev.07 - MOTION NO TEXTO

   A rev.09 desligou o reveal porque a cliente reclamou de rolagem
   lenta "principalmente nas imagens". O diagnostico continua valendo,
   entao aqui o movimento tem tres travas:

   1. NENHUMA IMAGEM ANIMA. So' texto. A foto continua pintando assim
      que decodifica, sem esperar nada.
   2. So' opacity e transform - o compositor resolve, nao ha layout
      nem repaint. Zero propriedade que suje o quadro.
   3. O gatilho dispara 200px ANTES do bloco entrar em cena. Quando a
      pessoa chega, o texto ja' esta' assentando. Era esse o "lento"
      da rev.09: o elemento esperava aparecer pra so' entao comecar.

   A trava de seguranca e' a mais importante: o estado escondido so'
   existe sob html.mo, e quem escreve .mo e' o JS, depois de confirmar
   que o IntersectionObserver existe. Sem JS, com JS quebrado ou com
   erro no meio do caminho, o texto nasce e permanece VISIVEL.
   Ver a memoria "motion nao pode apagar o site".

   Personalidade: Premium/Elegance - 520ms, curva --ease (a assinatura
   que o site ja' usa em toda transicao), 14px de deslocamento, sem
   overshoot. Tapecaria de alto padrao nao quica.
   ============================================================ */

html.mo .tx{opacity:0;translate:0 14px}
/* bloco que a pessoa ja' passou: aparece seco. Animar o que ninguem esta'
   olhando so' custa quadro - era o que fazia a pagina inteira virar camada
   de composicao de uma vez. */
html.mo .tx.ja{opacity:1;translate:none;transition:none}
html.mo .tx.vem{
  opacity:1;translate:none;
  transition:opacity .52s var(--ease) var(--tx-d,0ms),
             translate .52s var(--ease) var(--tx-d,0ms);
}

/* --- camada secundaria: o filete de latao da citacao se desenha ---
   O texto e' o ator principal; o filete entra depois e por cima, que e'
   o que tira o ar de "tudo apareceu junto". */
html.mo .tx.pull{border-left-color:transparent}
html.mo .tx.pull::before{
  content:"";position:absolute;left:0;top:0;width:1px;height:100%;
  background:var(--brass);transform:scaleY(0);transform-origin:top;
}
html.mo .tx.pull.vem::before{
  transform:scaleY(1);
  transition:transform .62s var(--ease) calc(var(--tx-d,0ms) + 130ms);
}
.story .pull{position:relative}

/* --- o topo nao espera ninguem ---
   Aqui o texto nasce OPACO e so' assenta 12px. O primeiro quadro ja'
   tem pixel na tela, entao o LCP nao anda pra tras - e e' a primeira
   tela que forma a impressao de "site lento". */
@keyframes tx-assenta{from{translate:0 12px}to{translate:none}}
.hero-v .rv > *{animation:tx-assenta .58s var(--ease) both}
.hero-v .rv > *:nth-child(2){animation-delay:.07s}
.hero-v .rv > *:nth-child(3){animation-delay:.14s}
.hero-v .rv > *:nth-child(4){animation-delay:.21s}

/* quem pediu menos movimento nao recebe nenhum */
@media(prefers-reduced-motion:reduce){
  html.mo .tx,html.mo .tx.vem,html.mo .tx.ja{opacity:1;translate:none;transition:none}
  html.mo .tx.pull{border-left-color:var(--brass)}
  html.mo .tx.pull::before{display:none}
  .hero-v .rv > *{animation:none}
}


/* =========================================================
   rev.12 - BLOG (blog/index.html e blog/*.html)

   Lista e artigo usam o que o site ja tem: .page-hero, .tabs, .frame,
   .pending e .cta-band. Aqui mora so o que e' novo.
   Nenhuma imagem anima (regra da rev.07): o movimento do cartao e' a
   linha de latao que corre embaixo da foto e a seta do "Ler artigo".
   ========================================================= */

/* aviso de conteudo de exemplo: variante compacta do .pending */
.pending.aviso{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:16px 22px;margin-bottom:48px}
.pending.aviso p{font-size:13.5px;line-height:1.6;flex:1 1 280px}

/* categoria, data e tempo de leitura (numeros em Jost, como no resto do site) */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.post-meta .cat{color:var(--brass-d);font-weight:500}
.post-meta a.cat:hover{color:var(--g700)}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--brass);opacity:.7;flex:0 0 auto}

.ler{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--g700)}
.ler .ar{font-family:var(--ff-d);font-size:17px;letter-spacing:0;transition:transform .3s}

/* barra de filtro: as abas do portfolio + contador a direita */
.blog-barra{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:1px solid var(--line);margin-bottom:52px}
.blog-barra .tabs{border-bottom:none;margin-bottom:0;min-width:0}
.blog-barra .count{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);padding-bottom:17px;white-space:nowrap}
@media(max-width:620px){
  .blog-barra .count{display:none}
  /* A faixa rola de lado, como no portfolio (rev.09), e a 5a categoria nasce
     fora da tela. O esmaecido na borda avisa que tem mais; o respiro a direita
     deixa a ultima aba inteira quando a faixa chega ao fim. */
  .blog-barra .tabs{padding-right:44px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
}

/* artigo em destaque (o mais recente) */
.post-destaque{position:relative;display:grid;grid-template-columns:1.2fr 1fr;background:var(--paper);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.post-destaque:hover{border-color:rgba(169,144,92,.55);box-shadow:var(--shadow)}
.post-destaque .frame img{height:100%;aspect-ratio:auto;min-height:360px}
.post-destaque .txt{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.post-destaque .post-meta{margin-top:22px}
.post-destaque h2{font-size:clamp(28px,3vw,40px);margin:14px 0 16px}
.post-destaque p{font-size:15.5px;color:var(--muted);max-width:44ch}
@media(max-width:900px){
  .post-destaque{grid-template-columns:1fr}
  .post-destaque .frame img{min-height:0;aspect-ratio:16/10}
  .post-destaque .txt{padding:30px 26px 36px}
}
.blog-costura{margin:72px 0 64px}
@media(max-width:760px){.blog-costura{margin:52px 0 44px}}

/* grade de artigos */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
@media(max-width:960px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.posts{grid-template-columns:1fr;gap:48px}}
.post-card{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.post-card .frame{width:100%}
.post-card .frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.post-card:hover .frame::after{transform:scaleX(1)}
.post-card .frame img{aspect-ratio:4/3}
.post-card .post-meta{margin:22px 0 12px}
.post-card h3{font-size:25px;line-height:1.22;margin-bottom:12px;transition:color .3s}
.post-card p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.post-card:hover h3{color:var(--g600)}
.post-card:hover .ler .ar,.post-destaque:hover .ler .ar{transform:translateX(4px)}

/* O cartao inteiro e' clicavel sem aninhar bloco dentro de <a>: o link do
   titulo estica um ::after por cima do cartao. */
.post-card h3 a::after,.post-destaque h2 a::after{content:"";position:absolute;inset:0;z-index:1}
@supports selector(:has(*)){
  .post-card h3 a:focus-visible,.post-destaque h2 a:focus-visible{outline:none}
  .post-card:has(h3 a:focus-visible),.post-destaque:has(h2 a:focus-visible){outline:2px solid var(--brass);outline-offset:6px}
}

/* O filtro esconde com o atributo hidden. Ele so' funciona pela regra
   interna do navegador [hidden]{display:none} - e o display:flex/grid
   escrito acima VENCE essa regra. Sem estas linhas o filtro nao some nada. */
.post-card[hidden],.post-destaque[hidden],.blog-costura[hidden]{display:none}

/* ---------- artigo ---------- */
.page-hero.artigo-hero{padding-bottom:118px}
.page-hero.artigo-hero h1{max-width:21ch;font-size:clamp(34px,4.3vw,54px)}
.artigo-hero .post-meta{margin-bottom:20px}
.artigo{padding-top:0}
/* a capa sobe por cima do fim do hero: o linho vira moldura da foto */
.artigo-capa{position:relative;z-index:1;max-width:1040px;margin:-80px auto 0}
.artigo-capa img{aspect-ratio:16/9}
@media(max-width:760px){
  .page-hero.artigo-hero{padding-bottom:84px}
  /* De ponta a ponta: com os 5vw de margem, sobravam duas faixas de 20px ao
     lado da foto onde o fim do hero (e a marca-d'agua) aparecia cortado em
     degrau. Sem margem nao existe faixa. */
  .artigo-capa{margin:-56px -5vw 0}
}

.prose{max-width:690px;margin:72px auto 0;font-size:17.5px;line-height:1.85}
@media(max-width:620px){.prose{font-size:16.5px;margin-top:48px}}
.prose > * + *{margin-top:1.15em}
.prose > p:first-of-type::first-letter{
  float:left;font-family:var(--ff-d);font-weight:500;font-size:4.3em;line-height:.82;
  margin:.08em .12em 0 0;color:var(--g700);
}
.prose h2{font-size:clamp(27px,3vw,34px);line-height:1.18;margin-top:2.2em}
.prose h2::before{content:"";display:block;width:52px;border-top:1px dashed rgba(169,144,92,.75);margin-bottom:24px}
.prose h2 + p{margin-top:.7em}
.prose blockquote{
  margin:2.1em 0;padding:6px 0 6px 30px;border-left:1px solid var(--brass);
  font-family:var(--ff-d);font-style:italic;font-size:clamp(23px,2.7vw,30px);line-height:1.38;color:var(--g700);
}
.prose figure{margin:2.4em 0}
.prose figure .frame img{aspect-ratio:16/10}
.prose figcaption{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.prose .tag{
  position:absolute;left:14px;top:14px;z-index:1;background:rgba(19,26,21,.8);color:var(--ivory);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;padding:6px 11px;
}
.prose .pending.aviso{margin:0 0 2.6em}

/* caixa pratica: linho com a "costura" tracejada por dentro, como a faixa de CTA */
.caixa{position:relative;background:var(--linen);padding:34px 38px;margin:2.4em 0}
.caixa::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(169,144,92,.45);pointer-events:none}
.caixa h3{font-size:23px;margin-bottom:14px}
.caixa ul{display:grid;gap:10px}
.caixa li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.65}
.caixa li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--brass)}
@media(max-width:620px){.caixa{padding:28px 24px}}

.assinatura{
  display:flex;align-items:center;gap:16px;margin-top:3.2em;padding-top:28px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}


/* =========================================================
   rev.08 (18/09) — pedidos da Amanda
   ========================================================= */

/* Selo "Entre Tramas". Ele fica FORA do .sec-head de proposito: o motor de
   motion descarta qualquer bloco que tenha <img> dentro, e com o selo dentro
   do cabecalho o cabecalho inteiro deixaria de animar. */
.metodo-head{position:relative}
.metodo-head .selo{display:block;width:120px;height:auto;margin:0 auto 30px}
@media(min-width:1100px){
  .metodo-head .selo{position:absolute;right:0;top:0;width:150px;margin:0}
}

/* Foto que nao pode cortar cabeca: vale a proporcao do proprio arquivo,
   no lugar do quadrado de .frame img. */
.frame.retrato img{aspect-ratio:auto}

/* Foto alinhada pelo topo do texto ao lado, e nao pelo centro. */
.story.topo{align-items:start}

/* "O resultado de fazer com metodo": topicos no lugar das etiquetas. */
.ganhos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 40px;max-width:600px;margin:34px auto 0;text-align:left;
}
@media(max-width:620px){.ganhos{grid-template-columns:1fr}}
.ganhos li{position:relative;padding-left:24px;font-size:16.5px;color:var(--ink)}
.ganhos li::before{
  content:"";position:absolute;left:0;top:12px;width:12px;height:1px;background:var(--brass);
}
.on-dark .ganhos li,.dark .ganhos li{color:var(--ivory)}

/* Linha que nao pode deixar a ultima palavra sozinha embaixo. */
.lead.uma-linha{max-width:76ch;text-wrap:balance}


/* =========================================================
   rev.09 (18/09) — hover em tudo, e barato
   Regra da casa: hover so' anima transform/opacity/cor. Largura
   ou max-width no hover obriga o navegador a refazer o layout da
   secao inteira a cada entrada e saida do ponteiro.
   ========================================================= */

/* --- sublinhados que varriam animando WIDTH (layout) viram scaleX (GPU) --- */
nav.main a.lnk::after,
.svc .go::after,
footer.site .cols a::after,
.topbar a:not(.social a)::after{
  width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
nav.main a.lnk:hover::after,nav.main a.lnk.on::after,
.svc:hover .go::after,.svc .go:hover::after,
footer.site .cols a:hover::after,
.topbar a:not(.social a):hover::after{transform:scaleX(1)}

/* o tracinho do metodo tambem crescia por width */
.method .m .k{width:74px;transform:scaleX(.46);transform-origin:left;
  transition:transform var(--t-base) var(--ease)}
.method .m:hover .k{width:74px;transform:scaleX(1)}

/* --- o que nao tinha hover nenhum e agora tem --- */
.ganhos li{transition:color var(--t-base) var(--ease)}
.ganhos li::before{transition:transform var(--t-base) var(--ease);transform-origin:left}
.ganhos li:hover{color:var(--brass-d)}
.ganhos li:hover::before{transform:scaleX(1.9)}

.tabs button:hover{color:var(--g700)}
.tabs button:hover::after{transform:scaleX(.55)}
.tabs button.on:hover::after{transform:scaleX(1)}

/* cartao de post: a foto acompanha os outros cartoes do site */
.post-card .frame img,.post-destaque .frame img{
  transition:transform var(--t-slow) var(--ease);
}
.post-card:hover .frame img,.post-destaque:hover .frame img{transform:scale(1.05)}

/* o link "Saiba mais" ja' e' cor de latao: no hover ele ESCURECE, senao a
   regra seria uma cor trocada por ela mesma. */
.svc .go{transition:color var(--t-base) var(--ease)}
.svc:hover .go,.svc .go:hover{color:var(--g700)}


/* =========================================================
   rev.09 (18/09) — o hover nao pode fugir do ponteiro
   ========================================================= */

/* Cartoes que NAO sao link: sobem, e a saia invisivel segura o ponteiro. */
.svc::after,.q::after,.mvv .box::after,.post-destaque::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}
.svc,.q,.mvv .box,.post-destaque{position:relative}

/* Elementos que SAO link: crescem em vez de subir. Uma caixa que cresce nunca
   sai de baixo do ponteiro - e nao deixa faixa clicavel invisivel embaixo. */
.chan:hover{transform:scale(1.015)}
footer.site .social a:hover{transform:scale(1.14)}
.wa-float:hover{transform:scale(1.07)}


/* rev.09 (18/09) — respiro ambiente so' roda na secao em cena.
   Quem liga e' o JS (classe .em-cena). Se o JS nao rodar, tudo fica pausado
   em um quadro visivel: o efeito some, a pagina nao. */
.dots i,.eyebrow::before,.eyebrow.center::after,.stitch::after{animation-play-state:paused}
.em-cena .dots i,.em-cena .eyebrow::before,.em-cena .eyebrow.center::after,
.em-cena .stitch::after{animation-play-state:running}