/* ===========================================================
   WEN, versão GURROFFÊ, sob medida.

   Camada de pele, carrega DEPOIS do wen.css. Mesma estrutura da
   versão Solarys, aparência de outro patamar. É isso que sustenta
   a diferença de preço na hora de mostrar as duas lado a lado.

   O que muda em relação ao site base, e o porquê:

   1. TIPOGRAFIA. Oswald condensada em caixa alta lê como esporte
      e academia, não como acabamento de alto padrão. Entra
      Cormorant Garamond, serifada, em peso leve e tamanho grande.
      Serifada leve e grande é o truque mais antigo de luxo, é o
      que revista de arquitetura usa há décadas. Corpo em Jost,
      geométrica, que segura o contraste sem competir.

   2. PALETA. Preto puro com dourado saturado é cara de template.
      O preto vira quase-preto quente, o dourado vira latão
      envelhecido dessaturado, e o texto vira osso em vez de
      branco. Branco puro sobre preto puro vibra e cansa a vista.

   3. RESPIRO. Tudo mais espaçado. Espaço em branco é o item mais
      caro de um layout, e é o que o olho lê como sofisticação.

   4. TRAÇO. Borda de 1px cheia vira fio de meio pixel. Cartão com
      sombra vira cartão sem sombra nenhuma. Canto arredondado
      some. Nada de degradê em botão.

   5. FORMULÁRIO. Caixa com borda vira campo com linha embaixo,
      que é como formulário de marca cara se comporta.
   =========================================================== */

:root{
  /* Preto com cinza chapado lê como template padrão. O que faz parecer
     caro não é cor nova, é PROFUNDIDADE: cada nível de fundo puxa mais
     para o marrom quente, e o metal ganha saturação em vez de virar
     cinza dourado. Cinco camadas de fundo em vez de duas. */
  --carvao:#0C0B09;      /* base */
  --carvao2:#141210;     /* faixa alternada */
  --pedra:#1B1713;       /* cartão, já claramente amarronzado */
  --pedra2:#241E17;      /* cartão destacado */
  --pedra3:#2E2619;      /* topo de gradiente */
  --linha:#342B21;       /* fio quente e visível, não cinza morto */
  --linha2:#463A29;      /* fio de destaque */
  --bronze:#B2914F;      /* latão com saturação de verdade */
  --bronze3:#8A6E36;     /* latão escuro, pé do gradiente */
  --bronze2:#E3D0A8;     /* champanhe quente */
  --claro:#F1EADD;       /* osso */
  --suave:#8F8578;
  --verde:#6E9C74;
  --vermelho:#C4736A;
}

/* profundidade: um brilho quentíssimo e quase invisível no topo da página.
   sozinho ninguém nota, tirando ele a página fica visivelmente mais barata */
body{
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(178,145,79,.10), transparent 68%),
    radial-gradient(760px 420px at 92% 12%, rgba(178,145,79,.05), transparent 70%),
    var(--carvao);
  background-attachment:fixed;
}

body{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.008em;
}

/* ---------- 1. tipografia serifada ---------- */
h1,h2,h3,.tit{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  text-transform:none;
  letter-spacing:.005em;
  line-height:1.08;
}
h1{font-size:clamp(2.9rem,7vw,5.6rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3{font-size:1.6rem;font-weight:400;letter-spacing:0;line-height:1.25}
.capa h1 em{font-style:italic;font-weight:300;color:var(--bronze2)}

/* o itálico da serifada é o detalhe que mais entrega refino,
   então ele aparece nos pontos de ênfase e em nenhum outro lugar */
.slogan-wen{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:300;
  font-size:1.45rem;letter-spacing:.01em;text-transform:none;
  color:var(--bronze2);margin:0 0 14px;
}

/* etiquetas pequenas: caixa alta, fina, muito espaçada.
   é o contraponto que faz a serifada grande parecer maior ainda */
.olho,.menu,.selo span,.rodape h4,.passo,.tarja,.onde,.regiao{
  font-family:'Jost',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.68rem;
}
.olho{color:var(--bronze2);opacity:.9}
.rodape h4{color:var(--bronze2);font-size:.66rem;letter-spacing:.3em}
.topo .marca .nome{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:1.75rem;letter-spacing:.3em;text-transform:uppercase;
}
.topo .marca .sub{font-family:'Jost',sans-serif;font-size:.52rem;letter-spacing:.42em;color:var(--suave)}
.selo b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:2.3rem;color:var(--bronze2)}
.motivo .n{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:2.4rem;letter-spacing:0;
  color:var(--bronze2);opacity:.55;
}

/* ---------- 3. respiro ---------- */
section{padding:clamp(84px,11vw,150px) 0}
.capa{padding:clamp(110px,15vw,200px) 0 clamp(90px,11vw,150px)}
.wrap{width:min(1240px,90vw)}
.legenda{font-size:1.06rem;line-height:1.85;max-width:62ch;color:var(--suave)}
.capa h1{margin:22px 0 0;max-width:15ch}
.capa .cta{margin-top:52px;gap:18px}
.selos{margin-top:76px;padding-top:38px;gap:52px}

/* ---------- 4. traço fino, nada de sombra ou canto redondo ---------- */
*,*::before,*::after{border-radius:0 !important}
/* os flutuantes são exceção: botão redondo é convenção de app de mensagem,
   e quadrado ali parece defeito, não decisão de design */
.zap,.insta,.flutuantes a{border-radius:50% !important}

/* ---------- grade de 3, não de 5 ----------
   auto-fit com minmax abria 5 colunas em tela larga e sobrava um card
   sozinho na segunda linha, com um rombo de espaço vazio do lado. */
.motivos.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.motivos.tres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.motivos.tres{grid-template-columns:1fr}}
.motivos.tres .motivo p{font-size:.94rem;line-height:1.8}

/* ---------- cartões com gradiente, não com cor chapada ---------- */
.mat,.obra,.motivo,.tabela-cx,.destaque{
  background:linear-gradient(168deg,var(--pedra2) 0%,var(--pedra) 46%,var(--carvao2) 100%);
}
.obra{transition:border-color .45s,transform .45s cubic-bezier(.22,.61,.36,1)}
.obra:hover{border-color:var(--linha2);transform:translateY(-4px)}
.obra .foto img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.obra:hover .foto img{transform:scale(1.045)}
.obra .selo-o{
  background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze3) 100%);
  border:0;color:#0C0B09;font-weight:500;
}

/* ---------- os fios ganham degradê, some o traço morto ---------- */
.fio{background:linear-gradient(90deg,var(--bronze) 0%,var(--bronze3) 100%);opacity:1;width:64px}
.selos{border-top:0;position:relative}
.selos::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--linha2) 0%,var(--linha) 40%,transparent 100%)}
.mat,.obra,.motivo,.tabela-cx,.destaque,.form-area,.duvidas details{
  box-shadow:none !important;
  border-color:var(--linha);
}
.fio{width:52px;height:1px;background:var(--bronze);opacity:.6}
header{background:rgba(10,9,8,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.tarja{background:var(--carvao2);border-bottom:1px solid var(--linha);color:var(--suave);padding:12px 14px}
.tarja b{color:var(--bronze2);font-weight:400}
.menu{gap:38px;color:var(--suave)}
.menu a{position:relative;padding-bottom:3px}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze2);transition:right .38s cubic-bezier(.22,.61,.36,1)}
.menu a:hover{color:var(--claro)}
.menu a:hover::after{right:0}

/* ---------- botão de contorno, sem preenchimento chapado ---------- */
.bt{
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  padding:19px 44px;
  background:transparent;color:var(--bronze2);
  border:1px solid var(--bronze);
  transition:background .4s cubic-bezier(.22,.61,.36,1),color .4s;
}
.bt:hover{background:var(--bronze);color:#0A0908;border-color:var(--bronze)}
.bt.fina{border-color:var(--linha);color:var(--claro)}
.bt.fina:hover{background:transparent;border-color:var(--bronze2);color:var(--bronze2)}
.bt.pequeno{padding:13px 26px;font-size:.64rem;letter-spacing:.22em}

/* ---------- 5. formulário de linha, sem caixa ---------- */
.campo label{
  font-family:'Jost',sans-serif;font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--suave);
}
.campo input,.campo select,.campo textarea{
  background:transparent;
  border:0;border-bottom:1px solid var(--linha);
  padding:13px 2px;
  font-family:'Jost',sans-serif;font-weight:300;font-size:1rem;
  transition:border-color .35s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-bottom-color:var(--bronze2);box-shadow:none;
}
/* placeholder tem que ser discreto, não invisível.
   #4E483F dava 2.2 de contraste, que some em tela de celular no sol. */
.campo input::placeholder,.campo textarea::placeholder{color:#6E6659}
.form-area{background:transparent;border:0;padding:0}
.simul{background:var(--carvao2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}

/* ---------- capa: fio vertical no lugar da textura de bolinha ----------
   a malha de pontos do site base tem cara de padrão de template.
   uma coluna de fios verticais bem apagados lê como planta baixa. */
.capa::before{
  opacity:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(168,144,94,.055) 0 1px, transparent 1px 128px);
  background-size:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
}

/* ---------- cartões: fundo quase igual ao fundo, só o fio separa ---------- */
.mat,.obra,.motivo,.tabela-cx{background:var(--pedra);border:1px solid var(--linha)}
.motivo{padding:38px 32px}
.destaque{background:var(--pedra2);border:1px solid var(--linha)}
.duvidas summary{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:400}
.duvidas summary::after{color:var(--bronze2);font-weight:300}

/* ---------- simulador, os controles também ficam refinados ---------- */
.esc,.cor,.ex-amb,.solta{border-color:var(--linha);transition:border-color .35s}
.esc{font-family:'Jost',sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:13px 20px}
.esc.on{background:var(--bronze);border-color:var(--bronze);color:#0A0908}
.cor.on{border-color:var(--bronze2);box-shadow:inset 0 0 0 1px var(--bronze2)}
.passo{font-family:'Jost',sans-serif;color:var(--suave)}
/* o passo ativo da base é um bloco chapado de latão. bloco chapado é
   justamente o que a versão Solarys usa. aqui vira fio embaixo, que
   é mais discreto e mais caro. o texto volta pro champanhe, que sobre
   quase-preto lê bem, ao contrário de champanhe sobre latão. */
.passo.on{background:transparent;color:var(--bronze2);box-shadow:inset 0 -2px 0 var(--bronze)}
.passo.feito{color:var(--suave);opacity:.85}

/* ---------- flutuantes ---------- */
.flutuantes{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.flutuantes .zap{position:static;right:auto;bottom:auto}
.insta{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(45deg,#F09433 0%,#DC2743 45%,#BC1888 100%);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.insta:hover{transform:scale(1.07)}
@media(max-width:720px){
  .flutuantes{right:14px;bottom:14px;gap:10px}
  .insta{width:48px;height:48px}
}

/* ---------- comparação em cartão ----------
   O nível de cada coluna é tratado como o PREÇO de um plano:
   serifada grande, sozinha na linha. É o que o olho lê primeiro
   e é a única informação que precisa ser lida primeiro. */
/* fio de 1px entre os cartões em vez de borda em cada um, igual
   ao bloco de motivos: dois cartões vizinhos com borda própria
   viram um traço de 2px, e traço grosso é o que entrega template. */
.planos{gap:1px;background:var(--linha)}
.plano{background:var(--pedra);border:0;padding:44px 38px}
.plano.destaque{background:var(--pedra2)}
/* o contorno do destaque é outline e não box-shadow de propósito:
   a regra de cartão lá em cima zera box-shadow com !important. */
.plano.destaque{outline:1px solid var(--bronze);outline-offset:-1px}
.plano .fita{
  background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze3) 100%);
  color:#0C0B09;font-family:'Jost',sans-serif;font-weight:500;
  font-size:.6rem;letter-spacing:.24em;top:0;right:0;padding:8px 16px;
}
.plano h3{font-size:1.9rem}
.plano .p-sub{font-size:.96rem;line-height:1.75;margin-bottom:28px}
.p-l{padding:14px 0}
/* O "Baixo / Médio / Alto" era 1,75rem, quase do tamanho do título do
   cartão, com o rótulo em 0,62rem do lado. A diferença era tão grande
   que lia como erro de montagem, não como hierarquia. Agora o valor
   manda dentro da linha dele e o título continua mandando no cartão. */
.p-l span{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.2em;color:var(--suave)}
.p-l b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1.2rem;line-height:1.1}
.p-itens li{font-size:.92rem;line-height:1.8;padding-left:24px}
.p-itens li::before{top:12px;width:5px;height:5px;background:var(--bronze);opacity:.8}
.p-fecho{font-size:.86rem;line-height:1.75;margin:24px 0 30px}
@media(max-width:720px){.plano{padding:32px 26px}}

/* ---------- região ---------- */
/* .regiao já entra na regra de etiqueta lá em cima, então as cidades
   herdam caixa alta e o espaçamento largo. Aqui só o traço. */
.cidade{padding:13px 22px;border-color:var(--linha);font-size:.7rem}
a.cidade{transition:border-color .35s,color .35s}
a.cidade:hover{border-color:var(--bronze2);color:var(--bronze2)}
.g-nota{font-family:'Jost',sans-serif;font-weight:300;font-size:.9rem;line-height:1.85}

/* ---------- menu ----------
   o gap sai, porque a separação agora é o fio entre um item e outro */
.menu{gap:0}
.menu a{padding:6px 17px}
.menu a::after{left:17px;right:calc(100% - 17px)}
.menu a:hover::after{right:17px}
@media(max-width:1180px){.menu a{padding:6px 11px;letter-spacing:.14em}
  .menu a::after{left:11px;right:calc(100% - 11px)}
  .menu a:hover::after{right:11px}}
/* no celular o menu quebra em duas linhas centradas, e aí ele precisa
   ser apertado: cabeçalho grudado no topo que ocupa um quarto da tela
   é cabeçalho atrapalhando, não ajudando */
@media(max-width:980px){
  .menu a{padding:3px 9px;font-size:.6rem;letter-spacing:.09em}
  .menu a::after{display:none}
}

/* ---------- capa: os selos agora carregam frase ---------- */
.selo b{font-size:1.9rem}
.selo span{font-family:'Jost',sans-serif;font-weight:300;font-size:.88rem;letter-spacing:.01em;
           text-transform:none;line-height:1.65}

/* ---------- motivos soltos ---------- */
.motivos.solta{gap:16px}
.motivos.solta .motivo{padding:44px 34px;background:var(--pedra)}
.motivos.solta .motivo .n{opacity:.5}
.motivos.solta .motivo p{font-size:.94rem;line-height:1.8}

/* ---------- amostras de cor ---------- */
.amostra-c{background:var(--pedra);border-color:var(--linha)}
.amostra-c img{height:148px}
.amostra-c figcaption{padding:20px 22px 22px}
.amostra-c b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1.4rem;
             letter-spacing:0;text-transform:none;color:var(--bronze2);line-height:1.2}
.amostra-c em{font-family:'Jost',sans-serif;font-size:.6rem;letter-spacing:.28em;margin-top:10px}
.cor small{font-family:'Jost',sans-serif;font-weight:300;font-size:.76rem}
.cor em{font-family:'Jost',sans-serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- explicação da IA e guia dos passos ---------- */
.aviso-ia{background:var(--pedra2);border-color:var(--linha);border-left-color:var(--bronze);padding:clamp(24px,3vw,36px)}
.aviso-ia .ia-tit{font-family:'Jost',sans-serif;font-weight:400;font-size:.62rem;letter-spacing:.3em}
.aviso-ia p,.ia-chega li{font-family:'Jost',sans-serif;font-weight:300;line-height:1.85}
.passo-diz{font-family:'Jost',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.8}

/* ---------- faixa da IA e piscinas ---------- */
.faixa-ia{background:var(--pedra2);border-color:var(--bronze);padding:20px 24px;margin-top:32px}
.faixa-ia:hover{background:var(--pedra3)}
.faixa-ia .ia-selo{background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze3) 100%);
                   border:0;color:#0C0B09;font-family:'Jost',sans-serif;font-weight:500;
                   font-size:.56rem;letter-spacing:.26em;padding:7px 13px}
.faixa-ia .ia-txt{font-family:'Jost',sans-serif;font-weight:300;font-size:.94rem;line-height:1.75}
.pisc-nome{font-family:'Jost',sans-serif;font-weight:400;font-size:.64rem;letter-spacing:.24em}

/* ---------- serviços e catálogo ---------- */
.serv{padding:34px 30px;background:var(--pedra)}
.serv b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1.35rem;
        letter-spacing:0;text-transform:none;color:var(--bronze2);line-height:1.2;margin-bottom:9px}
.serv span{font-family:'Jost',sans-serif;font-weight:300;font-size:.9rem;line-height:1.7}
.cat-tit{font-family:'Jost',sans-serif;font-weight:400;font-size:.62rem;letter-spacing:.3em;color:var(--bronze2);opacity:.9}
.cat-nota{font-family:'Jost',sans-serif;font-weight:300;line-height:1.85}
.cat-nomes .cidade{padding:10px 16px;font-size:.62rem}

/* ---------- galeria de obras ---------- */
.og-fase{font-family:'Jost',sans-serif;font-weight:400;font-size:.6rem;letter-spacing:.28em;padding:8px 15px}
.og-txt h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.og-txt p{font-family:'Jost',sans-serif;font-weight:300;line-height:1.85}
.og-fatos li{font-family:'Jost',sans-serif;font-weight:300;font-size:.88rem}
.og-fatos li::before{background:var(--bronze);opacity:.8}
.og-seta{border-color:var(--linha);transition:background .3s,border-color .3s,color .3s}

/* ---------- assistente ---------- */
.chat{background:var(--pedra);border:1px solid var(--linha)}
.chat-topo{padding:20px 26px}
.chat-topo b{font-family:'Jost',sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.28em}
.chat-topo>div span{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.02em}
.chat-fala{padding:26px}
.fala{font-family:'Jost',sans-serif;font-weight:300;font-size:.95rem;line-height:1.8;padding:15px 20px}
.fala.wen{background:var(--carvao);border-color:var(--linha)}
.fala.eu{background:var(--pedra2);border-color:var(--linha2)}
.sugestao{border-color:var(--bronze);background:var(--pedra2);padding:20px 22px}
.sugestao .s-tit{font-family:'Jost',sans-serif;font-weight:400;font-size:.62rem;letter-spacing:.28em}
.sugestao .s-det{font-family:'Jost',sans-serif;font-weight:300;line-height:1.75}
.chat-atalhos{padding:0 26px 20px}
.chat-atalhos button{font-family:'Jost',sans-serif;font-weight:300;font-size:.8rem;padding:10px 16px;transition:border-color .35s,color .35s}
/* o campo do chat segue a regra do resto do site: linha embaixo,
   não caixa. caixa com borda é o que a versão barata usa. */
.chat-linha{padding:20px 26px;align-items:flex-end}
.chat-linha input{
  background:transparent;border:0;border-bottom:1px solid var(--linha);
  padding:13px 2px;font-family:'Jost',sans-serif;font-weight:300;font-size:1rem;
  transition:border-color .35s;
}
.chat-linha input:focus{border-bottom-color:var(--bronze2)}
.chat-linha input::placeholder{color:#6E6659}
.ponte-chat{background:var(--pedra2);border-color:var(--linha);padding:22px 26px}
.ponte-chat b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:1.35rem;letter-spacing:0;text-transform:none;
  color:var(--bronze2);margin-bottom:5px;
}
.ponte-chat span{font-family:'Jost',sans-serif;font-weight:300;font-size:.9rem;line-height:1.7}

/* ---------- rodapé ---------- */
footer{padding:88px 0 44px;border-top:1px solid var(--linha)}
.rodape a:hover{color:var(--bronze2)}
.rodape-fim{margin-top:60px;padding-top:28px;font-size:.72rem;letter-spacing:.06em}

@media(max-width:720px){
  body{font-size:16px}
  .bt{padding:17px 30px;letter-spacing:.2em}
  .selos{gap:32px;margin-top:52px}
  .motivo{padding:30px 24px}
}