/* ==========================================================================
   Exclusiva Home Decor · sistema visual
   Preto e dourado, aspecto de loja/catálogo.
   Tipografia: Playfair Display (títulos) + Inter (texto). A fonte do site
   antigo (Pirulen) foi descartada por decisão do Gê: ilegível em texto.
   ========================================================================== */

:root{
  /* base */
  --preto:#0B0B0B;
  --preto-2:#141312;
  --preto-3:#1E1C1A;
  --grafite:#2A2724;

  /* dourado: 2 tons. O claro é pro que fica sobre preto (contraste alto),
     o escuro é pro texto sobre fundo claro (o claro reprova em AA). */
  --ouro:#C9A227;
  --ouro-claro:#E6C978;
  --ouro-escuro:#8A6D12;

  /* neutros */
  --branco:#FFFFFF;
  --areia:#F7F4EF;
  --areia-2:#EFEAE1;
  --borda:#DED7CB;
  --borda-escura:#332F2A;

  /* texto */
  --txt:#1C1A17;
  --txt-suave:#5B554C;
  --txt-claro:#EFEAE1;
  --txt-claro-suave:#B3ABA0;

  --raio:14px;
  --raio-p:8px;
  --max:1200px;
  --h-topo:5.25rem;   /* altura da faixa do menu flutuante */
  --gap:clamp(1.25rem,3vw,2.5rem);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sombra:0 10px 30px rgba(0,0,0,.10);
  --sombra-f:0 18px 46px rgba(0,0,0,.16);
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-topo) + 1rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--sans);font-size:1rem;line-height:1.7;
  color:var(--txt);background:var(--branco);overflow-wrap:break-word;
  padding-top:var(--h-topo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ouro-escuro)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ouro);outline-offset:3px;border-radius:2px
}
hr{border:0;border-top:1px solid var(--borda);margin:2.5rem 0}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;color:var(--preto);margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2rem,4.6vw,3.35rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1rem}

.container{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--preto);color:#fff;padding:.8rem 1.3rem}
.pular:focus{left:0}

/* ------------------------------------------------------------- utilidades */
.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro-escuro);margin:0 0 .8rem
}
.secao{padding:clamp(3rem,7vw,5.5rem) 0}
.secao--areia{background:var(--areia)}
.secao--preta{background:var(--preto);color:var(--txt-claro)}
.secao--preta h2,.secao--preta h3{color:var(--branco)}
.secao--preta .eyebrow{color:var(--ouro-claro)}
.secao-topo{max-width:62ch;margin:0 0 clamp(1.75rem,4vw,2.75rem)}
.secao-topo p{color:var(--txt-suave);font-size:1.05rem}
.secao--preta .secao-topo p{color:var(--txt-claro-suave)}

/* ---------------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:.98rem;line-height:1;
  text-decoration:none;padding:1rem 1.75rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s,background .18s,color .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn--ouro{background:var(--ouro);color:#100D04;border-color:var(--ouro)}
.btn--ouro:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.btn--linha{background:transparent;color:var(--preto);border-color:var(--preto)}
.btn--linha:hover{background:var(--preto);color:var(--branco)}
.secao--preta .btn--linha{color:var(--branco);border-color:rgba(255,255,255,.45)}
.secao--preta .btn--linha:hover{background:var(--branco);color:var(--preto)}
.btn-linha-grupo{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}
/* icone do WhatsApp dentro do CTA: acompanha o tamanho da fonte do botao */
.btn .ico-zap{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto;display:block}

/* ------------------------------------------------------------------ topo
   Menu em pilula flutuante. O header e FIXO e o corpo ganha um respiro do
   tamanho dele (--h-topo); so a hero volta pra tras com margem negativa, pra
   pilula boiar sobre a foto. Nas outras paginas ela boia sobre o fundo claro.

   ATENCAO: nada de backdrop-filter, filter ou transform no .topo-in. Qualquer
   um dos tres faz o .topo-in virar bloco de contencao e a gaveta do mobile
   (position:fixed) fica presa dentro da pilula. O vidro vai no ::before, que
   nao tem filho nenhum pra prender. */
.topo{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;
  border:0;padding-top:.9rem;transition:top .3s ease}
/* Some ao rolar pra baixo, volta ao rolar pra cima. Anima TOP, nao transform:
   transform no .topo faria dele bloco de contencao e a gaveta (position:fixed)
   ficaria presa dentro do header. */
.topo--oculto{top:calc(-1 * (var(--h-topo) + 2rem))}
@media (prefers-reduced-motion:reduce){.topo{transition:none}}
.topo:has(.menu.aberto){z-index:140}
.topo-in{position:relative;display:flex;align-items:center;gap:1.25rem;
  padding:.55rem .6rem .55rem 1.5rem;border-radius:999px}
.topo-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  /* quase opaca de proposito: com .74 a pilula sobre as paginas de fundo
     claro virava um retangulo cinza lavado. O blur fica so pelo brilho. */
  background:rgba(18,17,16,.95);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(201,162,39,.20);
  box-shadow:0 10px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
/* navegador sem backdrop-filter: fundo cheio, senao o texto some sobre a foto */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo-in::before{background:rgba(18,17,16,.98)}
}

/* A logo horizontal ja traz o nome e o "home decor": nao repetir em texto
   do lado, senao a marca aparece duas vezes no cabecalho. */
.marca{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* medida pela ALTURA, nao pela largura: a proporcao da arte ja mudou uma vez
   (a horizontal esticada saiu de 4,42 pra 5,96) e travar por largura fazia a
   logo encolher sozinha na troca do arquivo. */
.marca img{height:36px;width:auto;display:block}
@media (max-width:520px){.marca img{height:30px}}

.menu-btn{margin-left:auto;display:none;flex-direction:column;gap:5px;background:none;
  border:0;cursor:pointer;padding:.6rem;color:var(--branco)}
.menu-btn span{display:block;width:26px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{margin-inline:auto}
.menu > .btn{display:none}          /* só na gaveta do mobile */
.menu-topo{display:none}            /* idem: a logo do header já está ali */
.menu > ul{list-style:none;display:flex;align-items:center;gap:.35rem 1.4rem;margin:0;padding:0}
.menu a{font-size:.92rem;font-weight:500;color:var(--txt-claro);text-decoration:none;
  padding:.5rem 0;display:inline-block;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--branco);border-bottom-color:var(--ouro)}
.topo .btn{padding:.72rem 1.35rem;font-size:.9rem;flex:0 0 auto}

/* O menu vira gaveta lateral no mobile: a regra completa esta la embaixo,
   em "mobile: menu lateral". Aqui so o botao hamburguer. */
@media (max-width:1000px){
  .menu-btn{display:flex}
  .menu > ul{flex-direction:column;align-items:stretch;gap:0}
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--preto);color:var(--txt-claro);overflow:hidden;
  margin-top:calc(-1 * var(--h-topo));padding-top:var(--h-topo);
  min-height:100svh;display:flex;align-items:center}
@supports not (height:100svh){.hero{min-height:100vh}}
.hero-fundo{position:absolute;inset:0;z-index:0}
.hero-fundo picture,.hero-fundo img{width:100%;height:100%;display:block}
.hero-fundo img{object-fit:cover;object-position:center 32%}
/* dois véus: um escurece o geral, o outro puxa o preto pro lado do texto,
   pra garantir contraste AA sem apagar a foto */
.hero-fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(11,11,11,.92) 0%,rgba(11,11,11,.78) 42%,rgba(11,11,11,.42) 72%,rgba(11,11,11,.55) 100%),
             linear-gradient(to top,rgba(11,11,11,.75),transparent 55%)}
.hero-in{position:relative;z-index:1;width:min(100% - 2.5rem,var(--max));margin-inline:auto;
  padding:clamp(3.5rem,9vw,6rem) 0}
.hero-txt{max-width:47rem}
/* 22ch quebra o titulo em 3 linhas; com 16ch caia em 4. */
.hero h1{color:var(--branco);max-width:min(22ch,100%);text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .eyebrow{color:var(--ouro-claro)}
.hero-sub{font-size:clamp(1.02rem,1.6vw,1.16rem);color:#DCD7CF;max-width:52ch}
.hero .btn--linha{color:var(--branco);border-color:rgba(255,255,255,.55);
  background:rgba(11,11,11,.28);backdrop-filter:blur(2px)}
.hero .btn--linha:hover{background:var(--branco);color:var(--preto);border-color:var(--branco)}

/* ---------------------------------------------------------------- grades */
.grade{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* 6 modelos em 3 colunas fecham 2 linhas certas; com auto-fit dava 4+2 */
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grade--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grade--3{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--raio);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--ouro)}
/* quadrado, nao 4/3: as fotos de cortina sao verticais (9:16) e no 4/3
   sobrava so 42% da altura. No 1/1 sobra 56%, que ja mostra o trilho e o
   caimento na mesma imagem. */
.card-foto{aspect-ratio:1/1;background:var(--areia-2);overflow:hidden}
.card-foto img{width:100%;height:100%;object-fit:cover}
.card-corpo{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{margin:0}
.card p{color:var(--txt-suave);font-size:.96rem;margin:0}
.card-cta{margin-top:auto;padding-top:.9rem;font-weight:600;font-size:.92rem;color:var(--ouro-escuro)}
.card-cta::after{content:" →"}

/* --------------------------------------------------------------- passos */
/* na pagina de produto o .passos e um <ol> (semantica de sequencia); sem
   list-style:none o navegador desenha "1." em cima do circulo dourado. */
.passos{counter-reset:passo;list-style:none;padding:0;margin:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.passo{position:relative;padding-top:3.4rem}
.passo::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.15rem;font-weight:600;
  background:var(--ouro);color:#100D04
}
.passo h3{font-size:1.08rem;margin-bottom:.35rem}
.passo p{color:var(--txt-suave);font-size:.96rem;margin:0}
.secao--preta .passo p{color:var(--txt-claro-suave)}
.nota{margin-top:2rem;font-size:.92rem;color:var(--txt-suave);border-left:3px solid var(--ouro);padding-left:1rem}
.secao--preta .nota{color:var(--ouro-claro)}

/* --------------------------------------------------------------- números */
.numeros{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  list-style:none;padding:0;margin:0;align-items:stretch}
.numero{background:var(--preto-2);border:1px solid var(--borda-escura);border-radius:var(--raio);
  padding:1.4rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;min-height:132px}
.numero svg{width:24px;height:24px;stroke:var(--ouro);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
/* balance reparte as linhas por igual: sem isso sobra uma palavra solta embaixo */
.numero span{font-family:var(--serif);font-size:.98rem;color:var(--branco);line-height:1.32;
  text-wrap:balance;margin-top:auto}

/* ------------------------------------------------------------------- faq */
.faq{max-width:74ch;margin-inline:auto}
#faq .secao-topo{margin-inline:auto;text-align:center}
.faq details{border-bottom:1px solid var(--borda);padding:.3rem 0}
.secao--preta .faq details{border-bottom-color:var(--borda-escura)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.1rem;font-weight:600;
  color:var(--preto);padding:1.1rem 2.5rem 1.1rem 0;position:relative;list-style:none}
.secao--preta .faq summary{color:var(--branco)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:.9rem;font-size:1.6rem;
  line-height:1;color:var(--ouro);font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .resposta{padding:0 0 1.3rem;color:var(--txt-suave);max-width:72ch}
.secao--preta .faq .resposta{color:var(--txt-claro-suave)}

/* ------------------------------------------------------------ item/produto */
/* stretch, nao start: com "start" a foto parava na altura do 4/3 e sobrava um
   vazio enorme embaixo dela enquanto a coluna de texto seguia. */
.item-topo{display:grid;gap:clamp(1.75rem,4vw,3.25rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
@media (min-width:901px){
  /* a foto passa a preencher a linha inteira da grade; o object-fit do <img>
     ja recorta pelo centro, entao nada distorce. O min-height segura o caso de
     pagina com texto curto. */
  .item-topo > .item-foto{aspect-ratio:auto;min-height:26rem}
  .item-topo > .item-foto picture{display:block;height:100%}
}
/* o titulo entrou pra dentro da coluna: sem isso ele herda o tamanho de h1 de
   pagina inteira e estoura a coluna, que foi o "titulo por cima da foto". */
.item-topo h1{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:.65rem}
.item-topo .eyebrow{margin-bottom:.35rem}
@media (max-width:900px){.item-topo{grid-template-columns:1fr}}
.item-foto{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);aspect-ratio:4/3;background:var(--areia-2)}
.item-foto img{width:100%;height:100%;object-fit:cover}
.especificacoes{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.65rem}
.especificacoes li{position:relative;padding-left:1.6rem;color:var(--txt-suave)}
.especificacoes li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  background:var(--ouro);border-radius:2px}
/* saiu da caixa bege: contraste fraco sobre fundo claro e cara de aviso solto */
.pra-quem{margin:1.5rem 0 0;padding:0 0 0 1rem;border-left:3px solid var(--ouro);
  font-size:.98rem;color:var(--txt-suave);line-height:1.6}
.pra-quem strong{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ouro-escuro);margin-bottom:.3rem}

/* ------------------------------------------------------------ depoimentos */
.depoimentos{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.depoimento{margin:0;background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:1.6rem}
.depoimento blockquote{margin:0 0 .9rem;font-size:1rem;color:var(--txt-suave)}
.depoimento figcaption{font-weight:600;font-size:.92rem}

/* ----------------------------------------------------------------- blog */
.posts{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.post-card{display:flex;flex-direction:column;gap:.6rem;background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio);padding:1.5rem;
  text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--ouro)}
.post-cat{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro-escuro)}
.post-card h3{font-size:1.15rem;margin:0}
.post-card p{color:var(--txt-suave);font-size:.94rem;margin:0}

/* -------------------------------------------------------------- pendência */
.pendente{
  background:#FFF8E1;border:1px dashed #C9A227;border-radius:var(--raio-p);
  padding:1rem 1.2rem;margin:1.5rem 0;font-size:.92rem;color:#5C4708
}
.pendente strong{display:block;margin-bottom:.25rem;letter-spacing:.04em;text-transform:uppercase;font-size:.74rem}

/* ---------------------------------------------------------------- rodapé */
.rodape{background:var(--preto);color:var(--txt-claro-suave);padding:clamp(2.5rem,5vw,4rem) 0 1.5rem}
.rodape-in{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rodape h2{color:var(--branco);font-size:1.05rem;margin-bottom:.9rem}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.rodape a{color:var(--txt-claro);text-decoration:none}
.rodape a:hover{color:var(--ouro-claro)}
.rodape .marca-logo{width:190px;height:auto;display:block;margin-bottom:1.1rem}
.creditos{border-top:1px solid var(--borda-escura);margin-top:2.5rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.84rem}
.creditos p{margin:0}

/* -------------------------------------------------------------- whatsapp */
.zap{position:fixed;right:1.1rem;bottom:1.1rem;z-index:95;background:#25D366;border:0;
  width:58px;height:58px;border-radius:50%;cursor:pointer;padding:0;
  box-shadow:0 10px 26px rgba(0,0,0,.32);display:inline-flex;align-items:center;
  justify-content:center;transition:transform .18s,background .18s}
.zap:hover{background:#1EB757;transform:scale(1.06)}
.zap svg{width:32px;height:32px;fill:#fff}

/* ----------------------------------------------------------------- form */
.modal{border:0;border-radius:var(--raio);padding:0;max-width:29rem;width:calc(100% - 2rem);
  box-shadow:0 26px 64px rgba(0,0,0,.35)}
.modal::backdrop{background:rgba(0,0,0,.62)}
.modal-in{padding:1.9rem}
.modal h2{font-size:1.5rem;margin-bottom:.3rem}
.modal > form.fecha{position:absolute;top:.5rem;right:.75rem;margin:0}
.modal .fecha button{background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--txt-suave)}

.form-lead{display:grid;gap:.9rem;margin-top:1.2rem}
.form-lead label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.form-lead input,.form-lead select,.form-lead textarea{
  width:100%;font:inherit;font-size:.98rem;padding:.8rem .95rem;color:var(--txt);
  border:1px solid var(--borda);border-radius:var(--raio-p);background:var(--branco)}
.form-lead input:focus,.form-lead select:focus{border-color:var(--ouro)}
.form-lead .btn{width:100%;margin-top:.3rem}
.form-erro{display:block;margin-top:.35rem;font-size:.85rem;color:#B3261E}
.form-consent{font-size:.8rem;color:var(--txt-suave);margin:.9rem 0 0;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media print{
  .topo,.rodape,.zap,.modal,.pular{display:none}
  .secao{padding:.5rem 0}
  .hero,.secao--preta{background:none!important;color:#000!important}
}

/* ----------------------------------------------------------------- artigo */
.artigo{max-width:74ch}
.artigo h2{margin-top:2.4rem;font-size:clamp(1.35rem,2.6vw,1.85rem)}
.artigo p{font-size:1.05rem;color:var(--txt)}
.artigo-meta{font-size:.86rem;color:var(--txt-suave);border-bottom:1px solid var(--borda);
  padding-bottom:1rem;margin-bottom:2rem}
.foto-pendente{background:#FFF8E1;border:1px dashed #C9A227;border-radius:var(--raio-p);
  padding:2rem 1rem;text-align:center;font-size:.85rem;color:#5C4708}
.depoimento .aval-nota{margin:0 0 .7rem;color:var(--ouro);font-size:1rem;letter-spacing:.12em}
.depoimento figcaption span{font-weight:400;color:var(--txt-suave)}
.fonte-aval{font-size:.84rem;color:var(--txt-suave);margin:1.2rem 0 0}

/* ------------------------------------------------------------- carrossel */
/* A fita sai do container e ocupa a tela toda: dentro dos 1200px do container
   as bordas em blur comiam 12% do trecho visivel e a linha parecia curta.
   O estouro lateral e absorvido pelo overflow-x:clip do body (linha 45). */
.carrossel{position:relative;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
.carrossel-fita{display:flex;gap:var(--gap);width:max-content;
  animation:desliza 64s linear infinite}
.carrossel:hover .carrossel-fita,
.carrossel:focus-within .carrossel-fita{animation-play-state:paused}
.carrossel{padding:.4rem 0 1rem}
.carrossel .depoimento{flex:0 0 clamp(270px,24vw,340px);margin:0;padding:1.35rem 1.4rem;
  display:flex;flex-direction:column}
.carrossel .depoimento .aval-nota{font-size:.9rem;margin-bottom:.5rem}
.carrossel .depoimento blockquote{margin:0 0 .8rem;font-size:.92rem;line-height:1.6}
/* texto cortado em 7 linhas: as avaliacoes tem tamanhos muito diferentes e
   sem isso um card de 12 linhas estica a fita inteira */
.carrossel .depoimento blockquote p{display:-webkit-box;-webkit-line-clamp:8;
  -webkit-box-orient:vertical;overflow:hidden;margin:0}
.carrossel .depoimento figcaption{margin-top:auto;font-size:.85rem}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gap)/2))}}
@media (prefers-reduced-motion:reduce){
  .carrossel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .carrossel-fita{animation:none}
}

/* --------------------------------------------------- mobile: menu lateral */
@media (max-width:1000px){
  /* a gaveta continua RETANGULAR: a pilula e so do header */
  .menu{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(84vw,340px);
    display:flex;flex-direction:column;
    background:var(--preto-2);border-left:1px solid var(--borda-escura);border-bottom:0;
    border-radius:0;padding:1.45rem 1.6rem 2rem;max-height:none;overflow-y:auto;
    margin:0;transform:translateX(100%);transition:transform .28s ease;
    box-shadow:-18px 0 46px rgba(0,0,0,.45);z-index:120}
  .menu.aberto{display:flex;transform:translateX(0)}
  /* logo no alto da gaveta, na mesma altura do X do header */
  .menu-topo{display:block;padding-bottom:1.35rem;margin-bottom:.2rem;
    border-bottom:1px solid var(--borda-escura);
    margin-inline:-1.6rem;padding-inline:1.6rem}
  .menu-topo img{height:32px;width:auto;display:block}
  /* divisorias de ponta a ponta, como no exemplo */
  .menu > ul{margin-inline:-1.6rem}
  .menu > ul > li{border-bottom:1px solid var(--borda-escura)}
  .menu a{display:block;padding:1.05rem 1.6rem;font-size:1.02rem;border-bottom:0}
  .menu a:hover,.menu a[aria-current="page"]{border-bottom:0;background:rgba(201,162,39,.08)}
  .menu-btn{position:relative;z-index:130;margin-left:auto}
  /* o CTA fica mais pra baixo, descolado da ultima opcao */
  .menu > .btn{display:inline-flex;width:100%;margin-top:2.6rem}
  .topo-in > .btn{display:none}   /* estourava a largura do header no mobile */
  .topo-in{gap:.75rem}
  .fundo-menu{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:110;border:0;
    padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
}

/* ------------------------------------------- mobile: conteudo centralizado */
@media (max-width:700px){
  .hero-txt,.secao-topo,.artigo{text-align:center;margin-inline:auto}
  .hero h1,.hero-sub{max-width:none;margin-inline:auto}
  .hero-fundo::after{background:linear-gradient(to bottom,rgba(11,11,11,.55),rgba(11,11,11,.88))}
  .btn-linha-grupo{justify-content:center}
  .btn{width:100%;max-width:22rem}
  .card-corpo,.passo,.numero{text-align:center}
  .passo{padding-top:3.6rem}
  .passo::before{left:50%;transform:translateX(-50%)}
  .numero{align-items:center}
  .especificacoes li{padding-left:0;text-align:center}
  .especificacoes li::before{display:none}
  .pra-quem{text-align:center;border-left:0;border-top:3px solid var(--ouro);
    border-radius:0 0 var(--raio-p) var(--raio-p)}
  .nota{border-left:0;border-top:3px solid var(--ouro);padding:1rem 0 0;text-align:center}
  .faq summary{text-align:left}
  .rodape-in{text-align:center}
  .rodape .marca-logo{margin-inline:auto}
  .rodape .lista li,.rodape ul li{padding-left:0}
  .creditos{justify-content:center;text-align:center}
  .artigo h2{text-align:center}
  .artigo p{text-align:left}
  /* faixas novas das paginas de produto: no celular viram uma coluna so e,
     alinhadas a esquerda, ficam com cara de lista solta. Centralizar cola
     elas com o resto do conteudo mobile, que ja e centralizado. */
  .ficha-card{text-align:center}
  .ficha-card svg{margin-inline:auto}
  .dor,.numero-card{text-align:center}
  .numero-card svg{margin-inline:auto}
  .grade-cidades li{justify-content:center}
}

/* a base .ficha: sem display:grid o grid-template-columns nao faz efeito */
.ficha{display:grid;margin:1.6rem 0 0}

/* ficha em cards: rotulo/valor separados por linha fina tinham peso visual
   nenhum no meio de uma LP. Cada campo virou cartao com icone. */
.ficha--larga{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:0;
  border:0}
.ficha-card{position:relative;background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:1.5rem 1.4rem 1.35rem;display:block;
  box-shadow:0 1px 2px rgba(11,11,11,.04);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ficha-card:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.45);
  box-shadow:0 12px 26px rgba(11,11,11,.09)}
/* fio dourado no topo, igual ao card de dor: amarra as duas faixas */
.ficha-card::before{content:"";position:absolute;left:1.4rem;right:1.4rem;top:0;
  height:2px;background:linear-gradient(90deg,var(--ouro),rgba(201,162,39,0));
  border-radius:2px}
/* o icone ganha um disco claro em vez de flutuar solto */
.ficha-card svg{width:20px;height:20px;fill:none;stroke:var(--ouro-escuro);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  display:block;padding:9px;box-sizing:content-box;margin-bottom:.95rem;
  background:rgba(201,162,39,.10);border-radius:50%}
.ficha-card dt{font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-suave);margin:0 0 .3rem}
.ficha-card dd{margin:0;font-family:var(--serif);font-size:1.06rem;
  color:var(--preto);line-height:1.35}
@media (max-width:900px){.ficha--larga{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ficha--larga{grid-template-columns:1fr}}
.faixa-ficha{padding-block:clamp(2rem,4vw,3rem)}
.faixa-ficha .pra-quem{margin-top:1.4rem}

/* faixa 2: dores */
.grade-dores{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.dor{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:1.5rem 1.4rem;border-top:3px solid var(--ouro)}
.dor h3{font-size:1.05rem;margin:0 0 .5rem}
.dor p{margin:0;font-size:.93rem;color:var(--txt-suave);line-height:1.6}
.secao--areia .dor{background:var(--branco)}

/* faixa 4: resultados */
.grade-res{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.numero-card{background:var(--preto-2);border:1px solid var(--borda-escura);
  border-radius:var(--raio);padding:1.6rem 1.4rem}
.numero-card svg{width:26px;height:26px;fill:none;stroke:var(--ouro);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem;display:block}
.numero-card h3{color:var(--branco);font-size:1.05rem;margin:0 0 .45rem}
.numero-card p{margin:0;font-size:.92rem;color:var(--txt-claro-suave);line-height:1.6}

/* faixa 6: o local */
.item-topo--local{align-items:center}
.grade-local{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.local-foto{border-radius:var(--raio-p);overflow:hidden;aspect-ratio:1/1;
  background:var(--areia-2)}
.local-foto img{width:100%;height:100%;object-fit:cover;display:block}
.endereco{margin:1.2rem 0 0;font-size:.95rem;color:var(--txt-suave)}
.endereco strong{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ouro-escuro);margin-bottom:.25rem}

/* faixa 9: cta final */
.secao--fim .titulo-fim{font-size:clamp(2rem,4.4vw,3rem);line-height:1.12;color:var(--branco)}

@media (max-width:700px){
  .item-topo--local{gap:2rem}
  .secao--fim .titulo-fim br{display:none}
}

/* CTA que vive DENTRO de uma coluna de texto acompanha o alinhamento do texto.
   O .secao-cta centraliza, o que numa coluna a esquerda parecia desalinhado. */
.item-topo .secao-cta{justify-content:flex-start}
@media (max-width:700px){.item-topo .secao-cta{justify-content:center}}


/* ==================================================================== lupa */
/* foto clicavel: so a que nao e link. O cursor e o realce dizem isso. */
.temlupa{cursor:zoom-in;position:relative}
.temlupa::after{content:"";position:absolute;inset:0;background:rgba(11,11,11,0);
  transition:background .2s ease;pointer-events:none}
.temlupa:hover::after,.temlupa:focus-visible::after{background:rgba(11,11,11,.14)}
.temlupa:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}

/* o escurecimento fica no proprio dialog, nao so no ::backdrop: o dialog ja
   ocupa a tela inteira, e assim o fundo escuro nao depende de suporte a
   ::backdrop (que alguns navegadores e o headless nao pintam). */
.lupa{border:0;padding:0;background:rgba(11,11,11,.94);max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden}
.lupa::backdrop{background:rgba(11,11,11,.94)}
.lupa figure{margin:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:clamp(1rem,4vw,3rem)}
.lupa img{max-width:100%;max-height:calc(100vh - 8rem);width:auto;height:auto;
  object-fit:contain;border-radius:var(--raio-p);display:block}
.lupa figcaption{color:var(--txt-claro);font-size:.9rem;text-align:center;
  max-width:52ch;margin:0}
.lupa-fechar,.lupa-nav{position:fixed;background:rgba(20,19,18,.72);color:var(--branco);
  border:1px solid rgba(255,255,255,.22);cursor:pointer;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.lupa-fechar{top:1rem;right:1rem;width:44px;height:44px;font-size:1.6rem}
.lupa-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem}
.lupa-ant{left:1rem}
.lupa-prox{right:1rem}
.lupa-fechar:hover,.lupa-nav:hover{background:var(--ouro);color:var(--preto);
  border-color:var(--ouro)}
.lupa-fechar:focus-visible,.lupa-nav:focus-visible{outline:3px solid var(--ouro);
  outline-offset:2px}
/* uma foto so: nao mostra as setas */
.lupa--una .lupa-nav{display:none}
@media (max-width:700px){
  .lupa-nav{width:42px;height:42px;font-size:1.7rem}
  .lupa-ant{left:.4rem} .lupa-prox{right:.4rem}
  .lupa img{max-height:calc(100vh - 10rem)}
}
@media (prefers-reduced-motion:reduce){.temlupa::after{transition:none}}

/* --------------------------------------------------------- cidades atendidas */
/* era uma lista de bolinhas; virou grade de cartoes com pino, que le melhor e
   deixa claro que sao 11 cidades, nao um paragrafo comprido. */
.grade-cidades{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.grade-cidades li{display:flex;align-items:center;gap:.65rem;background:var(--branco);
  border:1px solid var(--borda);border-radius:999px;padding:.7rem 1.1rem;
  font-size:.95rem;color:var(--txt)}
.grade-cidades svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ouro);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* WhatsApp da pagina de contato: e um <button> que abre o popup, mas tem que
   parecer o link que era antes (regra da agencia: nunca wa.me direto). */
.link-zap{background:none;border:0;padding:0;font:inherit;color:var(--ouro-escuro);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-zap:hover{color:var(--preto)}
.link-zap:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:4px}

/* no rodape escuro o mesmo botao herda a cor clara dos links de la */
.rodape .link-zap{color:var(--txt-claro);text-decoration:none}
.rodape .link-zap:hover{color:var(--ouro-claro)}

/* ==========================================================================
   RESTAURADO: regras perdidas em edicoes por recorte de trecho.
   Conferir com _build/checar_css.py depois de mexer neste arquivo.
   ========================================================================== */

/* CTA de fim de secao vai centralizado em todas, mesmo nas de conteudo
   alinhado a esquerda: e o unico botao da faixa e o olho procura no meio.
   `.item-topo .secao-cta` (mais especifica) continua alinhando a esquerda
   quando o CTA vive dentro de uma coluna de texto. */
.secao-cta{margin-top:2.25rem;justify-content:center}
.secao--preta .secao-cta,.secao--areia .secao-cta{margin-top:2.25rem}

/* cabecalho de secao centralizado, usado nas faixas das LPs */
.secao-topo--centro{text-align:center;margin-inline:auto;max-width:44rem}
.secao-topo--centro p{margin-top:.4rem}


/* ------------------------------------------------------------ hero interna
   Categoria e produto usam a mesma hero da home; herdam o min-height:100svh
   do .hero, entao aqui so muda tipografia e veu. */
.hero--interna h1{max-width:min(18ch,100%)}
.hero--interna .hero-sub{max-width:46ch}
.hero--interna .hero-fundo::after{
  background:linear-gradient(to right,rgba(11,11,11,.90) 0%,rgba(11,11,11,.74) 46%,rgba(11,11,11,.38) 78%,rgba(11,11,11,.50) 100%),
             linear-gradient(to top,rgba(11,11,11,.70),transparent 60%)}
@media (max-width:700px){
  .hero--interna .hero-in{padding-block:clamp(3rem,12vw,4.5rem)}
  /* no celular o texto centraliza e cairia sobre a parte clara da foto:
     o veu precisa ser vertical, nao horizontal. */
  .hero--interna .hero-fundo::after{
    background:linear-gradient(to bottom,rgba(11,11,11,.78),rgba(11,11,11,.94))}
}

/* --------------------------------------------------------------- migalhas */
.migalhas{margin:0 0 .9rem}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.15rem .5rem;margin:0;padding:0;font-size:.82rem;color:var(--txt-suave)}
.migalhas li{display:flex;align-items:center;gap:.5rem}
.migalhas li+li::before{content:"/";color:var(--borda);font-size:.9em}
.migalhas a{color:var(--txt-suave);text-decoration:none;border-bottom:1px solid transparent}
.migalhas a:hover{color:var(--ouro-escuro);border-bottom-color:currentColor}
.migalhas [aria-current="page"]{color:var(--txt)}
@media (max-width:700px){.migalhas ol{justify-content:center}}

/* ------------------------------------------------------ credito do rodape */
.assinatura{margin:0;font-size:.82rem;color:#8C857A;white-space:nowrap}
.assinatura a{color:var(--ouro-claro);text-decoration:none}
.assinatura a:hover{text-decoration:underline}
.link-politica{margin-left:.9rem;color:var(--txt-claro);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28)}
.link-politica:hover{color:var(--ouro-claro);border-bottom-color:var(--ouro-claro)}
@media (max-width:700px){
  .assinatura{white-space:normal}
  .link-politica{display:block;margin:.5rem 0 0}
}

/* -------------------------------------------------------- banner de cookies
   fixed de proposito: banner que empurra o layout e o maior ofensor de CLS. */
.cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:130;
  background:var(--preto-2);border:1px solid var(--borda-escura);
  border-radius:var(--raio);padding:1.1rem 1.3rem;color:var(--txt-claro);
  box-shadow:0 18px 44px rgba(0,0,0,.45);font-size:.9rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  justify-content:space-between;max-width:var(--max);margin-inline:auto}
.cookies p{margin:0;max-width:62ch}
.cookies a{color:var(--ouro-claro)}
.cookies-bt{display:flex;gap:.7rem;flex-wrap:wrap}
.cookies-bt .btn{padding:.6rem 1.1rem;font-size:.86rem;width:auto}
@media (max-width:700px){
  .cookies{left:.7rem;right:.7rem;bottom:.7rem;padding:1rem;text-align:center;
    justify-content:center}
  .cookies-bt{justify-content:center;width:100%}
}

/* Slogan da empresa. Vive no rodape sob a logo e no fim da home: e assinatura,
   nao chamada, entao nao repete em toda faixa. */
.slogan{margin:.55rem 0 .2rem;font-family:var(--serif);font-style:italic;
  font-size:1.05rem;color:var(--ouro-claro);letter-spacing:.01em}
.secao--fim .slogan{margin:0 0 1.1rem;font-size:1.15rem;text-align:center}

/* Faixa da foto de obra. A unica caixa do site sem aspect-ratio: a foto
   vertical do cliente aparece inteira, sem cover cortando o alto do trilho.
   O texto centraliza na coluna ao lado, senao fica boiando no topo de uma
   foto 9:16 que e muito mais alta que ele. */
.item-topo--obra{align-items:center}
.item-foto--inteira{aspect-ratio:auto;background:transparent;box-shadow:none}
.item-foto--inteira img{width:100%;height:auto;display:block;
  border-radius:var(--raio);box-shadow:var(--sombra)}
@media (min-width:901px){
  /* vence a regra que estica .item-foto pra linha inteira da grade */
  .item-topo > .item-foto--inteira{min-height:0}
  .item-topo > .item-foto--inteira picture{height:auto}
  /* Coluna com largura FIXA, nao fracao. A foto e 9:16, entao a altura sai da
     largura: em fracao de meia pagina dava 760px ao lado de um texto de 240px
     e virava paredao; em 18rem caiu pra 510px e ficou pequena demais. 24rem
     da ~680px, que e o meio termo. Fixa tambem porque assim a foto nao cresce
     junto com o monitor e encosta na margem do container. */
  .item-topo--obra{grid-template-columns:24rem minmax(0,1fr)}
  .item-topo--obra > div:last-child{max-width:44rem}
}
@media (max-width:900px){
  /* uma coluna so: sem limite a foto ocuparia a tela inteira de altura */
  .item-foto--inteira{max-width:20rem;margin-inline:auto}
}
.item-topo--obra .secao-cta{justify-content:flex-start}
@media (max-width:900px){
  .item-topo--obra .secao-cta{justify-content:center}
}

/* Veu leve, so nas heros de foto escura ou de close. Com o veu padrao (.92 na
   esquerda) uma foto assim vira mancha marrom e o produto some, que e a
   armadilha ja anotada em FOTO_CAT: "close chapado vira borrao cinza atras do
   veu escuro". Antes de aliviar eu medi o contraste do texto branco:
   desktop 7.84:1 e celular 5.04:1, contra os 4.5:1 que o AA exige.
   Nao da pra aliviar mais: o voil claro cai justo na faixa do texto e o veu
   mais leve que testei reprovou (4.17 no desktop, 3.16 no celular). */
.hero--veu-leve .hero-fundo::after{
  background:linear-gradient(to right,rgba(11,11,11,.88) 0%,rgba(11,11,11,.70) 42%,rgba(11,11,11,.32) 72%,rgba(11,11,11,.44) 100%),
             linear-gradient(to top,rgba(11,11,11,.64),transparent 55%)}
@media (max-width:700px){
  .hero--veu-leve .hero-fundo::after{
    background:linear-gradient(to bottom,rgba(11,11,11,.48),rgba(11,11,11,.80))}
}

/* Card mais alto para grade de foto vertical. No quadrado, a foto 9:16 da
   Wave mostrava so 56% da altura e o card parecia um zoom no tecido; em 4/5
   sobem pra 70%. Nao vale como padrao: a cozinha e o quarto sao 16:9 e no 4/5
   cairiam de 56% pra 45% da largura. */
.grade--alta .card-foto{aspect-ratio:4/5}