/* ============================================================
   VSI MÓVEIS DE FIBRA — Site institucional
   Paleta e tipografia conforme Manual de Marca oficial.
   Madeira Nobre #4F2918 · Terracota VSI #BF5400
   Linho Natural #FEF9E0 · Grafite Urbano #303030 · Azul Profundo #111C2D
   ============================================================ */

/* ---------- FONTES DA MARCA ---------- */
@font-face{font-family:'Kallisto';src:url('../fonts/Kallisto-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Kallisto';src:url('../fonts/Kallisto-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Kallisto';src:url('../fonts/Kallisto-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  /* Tipografia — para trocar os títulos por uma serifada, altere só esta linha */
  --fonte-titulo:'Kallisto','Poppins',sans-serif;
  --fonte-texto:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --madeira:#4F2918;
  --terracota:#BF5400;
  --terracota-esc:#A44700;
  --linho:#FEF9E0;
  --grafite:#303030;
  --azul:#111C2D;
  --azul-claro:#1B2C43;

  --superficie:#FFFDF3;
  --texto:#4A3B31;
  --texto-sec:#7C6A5D;
  --borda:rgba(79,41,24,.14);
  --borda-forte:rgba(79,41,24,.24);

  --whatsapp:#1EA65A;

  --sombra-sm:0 1px 2px rgba(79,41,24,.06), 0 2px 8px rgba(79,41,24,.05);
  --sombra-md:0 4px 12px rgba(79,41,24,.07), 0 12px 32px rgba(79,41,24,.07);
  --sombra-lg:0 8px 24px rgba(17,28,45,.10), 0 24px 64px rgba(17,28,45,.10);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:100px;
  --container:1200px;
  --header-h:76px;

  /* Trama VSI — padrão gráfico da marca */
  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%234F2918' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M-24 48a24 24 0 0 1 48 0'/%3E%3Cpath d='M24 48a24 24 0 0 1 48 0'/%3E%3Cpath d='M72 48a24 24 0 0 1 48 0'/%3E%3Cpath d='M0 24a24 24 0 0 1 48 0'/%3E%3Cpath d='M48 24a24 24 0 0 1 48 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--linho);color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--fonte-titulo);color:var(--azul);margin:0;line-height:1.16;font-weight:500;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--terracota);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.secao{padding-block:clamp(64px,8vw,110px)}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-weight:600;font-size:.95rem;letter-spacing:.01em;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:0 0 auto}

.btn--primario{background:var(--terracota);color:#fff;box-shadow:0 4px 14px rgba(191,84,0,.28)}
.btn--primario:hover{background:var(--terracota-esc);box-shadow:0 8px 22px rgba(191,84,0,.34)}

.btn--contorno{border:1.5px solid var(--borda-forte);color:var(--azul);background:transparent}
.btn--contorno:hover{border-color:var(--azul);background:rgba(17,28,45,.04)}

.btn--claro{background:var(--linho);color:var(--azul)}
.btn--claro:hover{background:#fff}

.btn--contorno-claro{border:1.5px solid rgba(254,249,224,.35);color:var(--linho)}
.btn--contorno-claro:hover{border-color:var(--linho);background:rgba(254,249,224,.08)}

.btn--wpp{background:var(--whatsapp);color:#fff;box-shadow:0 4px 14px rgba(30,166,90,.28)}
.btn--wpp:hover{background:#178C4B;box-shadow:0 8px 22px rgba(30,166,90,.34)}

.btn--bloco{width:100%}

/* ---------- CABEÇALHOS DE SEÇÃO ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:18px;
}
.etiqueta--centro{justify-content:center}
.etiqueta--claro{color:#E9A76B}

.cabecalho{max-width:720px}
.cabecalho--centro{margin-inline:auto;text-align:center}
.cabecalho--largo{max-width:900px}
.cabecalho--largo h2{font-size:clamp(1.7rem,3.3vw,2.6rem)}
.cabecalho h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
.cabecalho p{margin-top:18px;font-size:clamp(1rem,1.4vw,1.09rem);color:var(--texto-sec);line-height:1.7}

/* ============================================================
   HEADER
   ============================================================ */
.cabecalho-site{
  position:sticky;top:0;z-index:100;
  background:rgba(17,28,45,.94);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease, box-shadow .25s ease;
}
.cabecalho-site.rolado{border-bottom-color:rgba(254,249,224,.16);box-shadow:0 2px 20px rgba(17,28,45,.22)}
.cabecalho-site .container{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marca img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.9rem;font-weight:500;color:rgba(254,249,224,.86);position:relative;padding-block:6px;
  transition:color .2s ease;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;background:#E9A76B;
  transition:width .25s ease;border-radius:2px;
}
.nav a:hover{color:var(--linho)}
.nav a:hover::after{width:100%}
.cabecalho-site .btn{padding:12px 22px;font-size:.88rem}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--linho)}
.menu-btn:hover{background:rgba(254,249,224,.1)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--linho)}
.hero::before{
  content:'';position:absolute;inset:0;background-image:var(--trama);
  background-size:112px 56px;opacity:.019;pointer-events:none;
}
.hero .container{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,60px);align-items:center;
  padding-block:clamp(48px,6vw,88px);
}
.hero-texto{max-width:600px}
.hero-texto h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.1}
.hero-texto p{margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--texto-sec);line-height:1.7;max-width:520px}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-acoes .btn{padding:15px 26px;font-size:.92rem}
.hero-selos{
  display:flex;flex-wrap:nowrap;align-items:flex-start;gap:14px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--borda);
}
.hero-selo{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:.74rem;font-weight:500;line-height:1.45;color:var(--texto-sec);
}
.hero-selo svg{color:var(--terracota);flex:0 0 auto}

/* Carrossel */
.carrossel{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sombra-lg);background:#EDE6CE;aspect-ratio:3/2;
}
.carrossel-trilha{position:absolute;inset:0}
.carrossel-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
}
.carrossel-slide.ativo{opacity:1}
.carrossel-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.carrossel-nav{
  position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:2;
}
.carrossel-ponto{
  width:8px;height:8px;border-radius:50%;background:rgba(254,249,224,.5);
  transition:width .3s ease, background-color .3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.carrossel-ponto.ativo{width:26px;border-radius:6px;background:var(--linho)}
.carrossel-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;
  background:rgba(254,249,224,.9);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-sm);opacity:0;transition:opacity .25s ease, background-color .2s ease;
}
.carrossel:hover .carrossel-seta{opacity:1}
.carrossel-seta:hover{background:#fff}
.carrossel-seta--ant{left:14px}
.carrossel-seta--prox{right:14px}

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.diferenciais{background:var(--superficie);border-block:1px solid var(--borda)}
.diferenciais .container{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);
  padding-block:clamp(38px,4.5vw,56px);
}
.dif{display:flex;flex-direction:column;gap:12px}
.dif-icone{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(191,84,0,.09);color:var(--terracota);
}
.dif h3{font-size:1.02rem;font-weight:500}
.dif p{font-size:.9rem;color:var(--texto-sec);line-height:1.6}

/* ============================================================
   PROJETOS
   ============================================================ */
.filtros{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:40px;
}
.filtro{
  padding:11px 21px;border-radius:var(--r-pill);border:1.5px solid var(--borda);
  font-size:.86rem;font-weight:500;color:var(--texto-sec);background:var(--superficie);
  transition:all .2s ease;white-space:nowrap;
}
.filtro:hover{border-color:var(--borda-forte);color:var(--azul)}
.filtro.ativo{background:var(--azul);border-color:var(--azul);color:var(--linho);font-weight:600}

.categoria-info{
  text-align:center;max-width:680px;margin:44px auto 0;
  min-height:112px;
}
.categoria-info[hidden]{display:none}
.categoria-info h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.categoria-info p{margin-top:14px;color:var(--texto-sec);font-size:1.02rem;line-height:1.7}

.galeria-wrap{position:relative;margin-top:40px}
.galeria{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.galeria::-webkit-scrollbar{display:none}
.galeria-item{
  /* <figure> vem com margin 1em 40px do navegador — zerar, senão o carrossel
     ganha 80px extras por card e o passo das setas sai errado. */
  margin:0;
  flex:0 0 calc((100% - 60px) / 3.3);scroll-snap-align:start;
  position:relative;border-radius:var(--r-md);overflow:hidden;background:#EDE6CE;
  aspect-ratio:4/5;box-shadow:var(--sombra-sm);cursor:zoom-in;
  transition:transform .3s ease, box-shadow .3s ease;
}
.galeria-item:hover{transform:translateY(-4px);box-shadow:var(--sombra-md)}
.galeria-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease}
.galeria-item:hover img{transform:scale(1.05)}
.galeria-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 15px;
  background:linear-gradient(to top,rgba(17,28,45,.82),transparent);
  color:var(--linho);font-size:.83rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease, transform .3s ease;
}
.galeria-item:hover figcaption{opacity:1;transform:translateY(0)}

.galeria-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  background:var(--superficie);color:var(--azul);border:1px solid var(--borda);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-md);
  transition:background-color .2s ease, color .2s ease, opacity .2s ease;
}
.galeria-seta:hover{background:var(--azul);color:var(--linho);border-color:var(--azul)}
.galeria-seta[disabled]{opacity:0;pointer-events:none}
.galeria-seta--ant{left:-23px}
.galeria-seta--prox{right:-23px}

.galeria-rodape{display:flex;justify-content:center;margin-top:44px}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(17,28,45,.94);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lightbox.aberto{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--r-md);box-shadow:var(--sombra-lg)}
.lightbox-legenda{
  position:absolute;bottom:32px;left:0;right:0;text-align:center;color:var(--linho);
  font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
}
.lightbox-btn{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(254,249,224,.12);color:var(--linho);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;
}
.lightbox-btn:hover{background:rgba(254,249,224,.24)}
.lightbox-fechar{top:24px;right:24px}
.lightbox--simples .lightbox-ant,
.lightbox--simples .lightbox-prox{display:none}
.lightbox-ant{left:24px;top:50%;transform:translateY(-50%)}
.lightbox-prox{right:24px;top:50%;transform:translateY(-50%)}

/* ============================================================
   COMO FUNCIONA
   ============================================================ */
.como-funciona{background:var(--superficie);border-block:1px solid var(--borda)}
.passos{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.passo{
  position:relative;padding:34px 30px 32px;border-radius:var(--r-md);
  background:var(--linho);border:1px solid var(--borda);box-shadow:var(--sombra-sm);
}
.passo-num{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:20px;border-radius:50%;
  background:var(--terracota);color:#fff;
  font-family:var(--fonte-titulo);font-size:1.05rem;font-weight:500;
}
.passo h3{font-size:1.08rem;font-weight:500;margin-bottom:10px}
.passo p{font-size:.92rem;line-height:1.65;color:var(--texto-sec)}
/* Linha ligando os passos, para ler como sequência e não como três cards soltos */
.passo:not(:last-child)::after{
  content:'';position:absolute;top:54px;right:-24px;width:24px;height:1.5px;
  background:var(--borda-forte);
}

/* ============================================================
   GARANTIA & QUALIDADE
   ============================================================ */
.garantia{position:relative;background:var(--azul);color:rgba(254,249,224,.78);overflow:hidden}
.garantia::before{
  content:'';position:absolute;inset:0;background-image:var(--trama);background-size:96px 48px;
  opacity:.05;filter:invert(1);pointer-events:none;
}
.garantia .container{position:relative}
.garantia h2,.garantia h3{color:var(--linho)}
.garantia .cabecalho p{color:rgba(254,249,224,.72)}

.escudo{
  width:74px;height:74px;margin:0 auto 24px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(191,84,0,.16);border:1px solid rgba(233,167,107,.32);color:#E9A76B;
}
.selo-qualidade{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  padding:8px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(233,167,107,.38);color:#E9A76B;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

.cards-garantia{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
}
.card-g{
  padding:32px 26px;border-radius:var(--r-md);
  background:rgba(254,249,224,.045);border:1px solid rgba(254,249,224,.12);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.card-g:hover{background:rgba(254,249,224,.08);border-color:rgba(233,167,107,.3);transform:translateY(-3px)}
.card-g-icone{
  width:44px;height:44px;margin-bottom:20px;color:#E9A76B;
  display:flex;align-items:center;justify-content:center;
}
.card-g h3{font-size:1.02rem;font-weight:500;margin-bottom:11px}
.card-g p{font-size:.89rem;line-height:1.65;color:rgba(254,249,224,.66)}

.faixa-frete{
  margin-top:34px;padding:30px 36px;border-radius:var(--r-md);
  background:linear-gradient(100deg,rgba(191,84,0,.34),rgba(191,84,0,.15));
  border:1px solid rgba(233,167,107,.42);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.faixa-frete-texto{display:flex;align-items:center;gap:20px;min-width:0}
.faixa-frete-icone{
  width:52px;height:52px;flex:0 0 auto;border-radius:16px;
  background:rgba(233,167,107,.16);color:#E9A76B;
  display:flex;align-items:center;justify-content:center;
}
.faixa-frete h3{font-size:1.22rem;font-weight:500;margin-bottom:5px}
.faixa-frete p{font-size:.92rem;color:rgba(254,249,224,.7)}
.faixa-frete .btn{flex:0 0 auto}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depoimentos{background:var(--superficie)}
.grid-depo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.depo{
  position:relative;
  padding:34px 30px;border-radius:var(--r-md);background:var(--linho);
  border:1px solid var(--borda);box-shadow:var(--sombra-sm);
  display:flex;flex-direction:column;
}
/* Espaco para a foto do cliente. Ao receber a foto real, colocar um
   <img> dentro de .depo-foto — o CSS ja recorta em circulo. */
.depo-foto{
  position:absolute;top:26px;right:26px;
  width:58px;height:58px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(191,84,0,.07);border:1.5px dashed var(--borda-forte);
  color:var(--terracota);
}
.depo-foto img{width:100%;height:100%;object-fit:cover}
.depo-foto:has(img){border-style:solid;border-color:var(--borda);background:none}
.depo-aspas{padding-right:70px}
.depo-aspas{color:var(--terracota);opacity:.5;margin-bottom:16px}
.depo p{font-size:.98rem;line-height:1.75;color:var(--texto);flex:1}
.depo-autor{margin-top:22px;padding-top:20px;border-top:1px solid var(--borda)}
.depo-autor strong{display:block;font-size:.94rem;font-weight:600;color:var(--azul)}
.depo-autor span{font-size:.83rem;color:var(--texto-sec)}
/* Variante print: depoimento que é uma captura de conversa do WhatsApp.
   Basta usar <article class="depo depo--print"> com um .depo-print dentro. */
.depo--print{padding:16px}
.depo-print{
  display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--superficie);
  border:1px solid var(--borda);cursor:zoom-in;
}
.depo-print img{width:100%;height:auto;display:block;transition:transform .5s ease}
.depo-print:hover img{transform:scale(1.02)}
.depo--print .depo-autor{margin-top:16px;padding:0 14px 8px;border-top:0}

/* Estado "a preencher" — trocar por depoimentos reais (ver README) */
.depo--vazio{background:transparent;border:1.5px dashed var(--borda-forte);box-shadow:none}
.depo--vazio p{color:var(--texto-sec);font-style:italic}

/* ============================================================
   DÚVIDAS
   ============================================================ */
.faq{max-width:820px;margin:52px auto 0}
.faq-item{border-bottom:1px solid var(--borda)}
.faq-item:first-child{border-top:1px solid var(--borda)}
.faq-pergunta{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;font-size:1.02rem;font-weight:500;color:var(--azul);
  font-family:var(--fonte-titulo);transition:color .2s ease;
}
.faq-pergunta:hover{color:var(--terracota)}
.faq-sinal{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--borda-forte);color:var(--terracota);
  display:flex;align-items:center;justify-content:center;transition:transform .3s ease, background-color .2s ease;
}
.faq-item.aberto .faq-sinal{transform:rotate(45deg);background:rgba(191,84,0,.08)}
.faq-resposta{overflow:hidden;height:0;transition:height .32s ease}
.faq-resposta-interna{padding:0 4px 26px;color:var(--texto-sec);line-height:1.75;font-size:.97rem;max-width:92%}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{position:relative;overflow:hidden;background:var(--madeira);color:rgba(254,249,224,.78)}
.cta-final::before{
  content:'';position:absolute;inset:0;background-image:var(--trama);background-size:96px 48px;
  opacity:.06;filter:invert(1);pointer-events:none;
}
.cta-final .container{position:relative;text-align:center}
.cta-final h2{color:var(--linho);font-size:clamp(1.9rem,3.6vw,2.9rem)}
.cta-final p{margin:20px auto 0;max-width:600px;color:rgba(254,249,224,.72);font-size:1.05rem;line-height:1.7}
.cta-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{background:var(--azul);color:rgba(254,249,224,.6);padding-block:64px 0}
.rodape-topo{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid rgba(254,249,224,.12);
}
.rodape-marca img{height:52px;width:auto;margin-bottom:20px}
.rodape-marca p{font-size:.92rem;line-height:1.7;max-width:340px}
/* Identificação legal: ocupa o vão central da linha de copyright */
.rodape-legal{
  font-size:.82rem;color:rgba(254,249,224,.4);text-align:center;
}
.rodape h4{color:var(--linho);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;font-family:var(--fonte-texto)}
.rodape-lista{display:flex;flex-direction:column;gap:12px}
.rodape-lista a{font-size:.93rem;transition:color .2s ease}
.rodape-lista a:hover{color:var(--linho)}
.rodape-contato a{display:flex;align-items:center;gap:10px}
.rodape-contato svg{color:#E9A76B;flex:0 0 auto}
.rodape-base{
  padding-block:26px 14px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:.82rem;color:rgba(254,249,224,.45);
}
.rodape-base a:hover{color:var(--linho)}

/* ============================================================
   PÁGINAS LEGAIS (política de privacidade / termos de uso)
   ============================================================ */
.legal-topo{
  background:var(--azul);color:rgba(254,249,224,.72);
  padding-block:clamp(48px,6vw,76px) clamp(36px,4vw,52px);
  position:relative;overflow:hidden;
}
.legal-topo::before{
  content:'';position:absolute;inset:0;background-image:var(--trama);
  background-size:112px 56px;opacity:.045;filter:invert(1);pointer-events:none;
}
.legal-topo .container{position:relative}
.legal-topo h1{color:var(--linho);font-size:clamp(1.8rem,3.4vw,2.7rem)}
.legal-data{
  display:inline-block;margin-top:18px;padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(233,167,107,.34);color:#E9A76B;
  font-size:.74rem;font-weight:500;letter-spacing:.06em;
}
.legal-voltar{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-size:.86rem;font-weight:500;color:rgba(254,249,224,.7);
  transition:color .2s ease;
}
.legal-voltar:hover{color:var(--linho)}

.legal-corpo{padding-block:clamp(48px,6vw,80px)}
.legal-corpo .container{max-width:760px}
.legal-intro{
  font-size:1.05rem;line-height:1.75;color:var(--texto);
  padding-bottom:34px;margin-bottom:14px;border-bottom:1px solid var(--borda);
}
.legal-secao{padding-block:26px;border-bottom:1px solid var(--borda)}
.legal-secao:last-of-type{border-bottom:0}
.legal-secao h2{
  font-size:1.12rem;font-weight:500;margin-bottom:14px;
  display:flex;gap:12px;align-items:baseline;
}
.legal-num{
  flex:0 0 auto;color:var(--terracota);font-size:.86rem;font-weight:600;
  font-family:var(--fonte-texto);font-variant-numeric:tabular-nums;
}
.legal-secao p{color:var(--texto-sec);line-height:1.75;margin-bottom:12px}
.legal-secao p:last-child{margin-bottom:0}
.legal-secao a{color:var(--terracota);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.legal-secao a:hover{color:var(--terracota-esc)}
.legal-secao ul{
  margin:12px 0;padding:0;list-style:none;
  display:grid;gap:9px;
}
.legal-secao li{
  position:relative;padding-left:20px;color:var(--texto-sec);line-height:1.65;
}
.legal-secao li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--terracota);opacity:.55;
}
.legal-aviso{
  margin-top:40px;padding:26px 28px;border-radius:var(--r-md);
  background:var(--superficie);border:1px solid var(--borda);
}
.legal-aviso h3{font-size:1.02rem;font-weight:500;margin-bottom:10px}
.legal-aviso p{color:var(--texto-sec);line-height:1.7;font-size:.95rem;margin-bottom:18px}

@media (max-width:640px){
  .legal-secao h2{flex-direction:column;gap:4px}
}

.rodape-credito{
  padding-block:14px 88px;text-align:center;
  border-top:1px solid rgba(254,249,224,.08);
  font-size:.78rem;color:rgba(254,249,224,.4);
}
.rodape-credito a{color:rgba(254,249,224,.72);font-weight:500;transition:color .2s ease}
.rodape-credito a:hover{color:#E9A76B}

/* ---------- AVISO DE COOKIES ---------- */
/* Barra discreta no rodapé. Informa, não bloqueia: as tags já dispararam.
   O JS mede a altura real e joga em --altura-aviso, para o botão do
   WhatsApp subir e não ficar coberto. */
:root{ --altura-aviso:0px; }

.aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px;
  background:rgba(17,28,45,.97);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid rgba(254,249,224,.12);
  box-shadow:0 -6px 24px rgba(17,28,45,.18);
  transform:translateY(100%);
  transition:transform .32s ease;
}
.aviso-cookies.visivel{transform:none}

.aviso-cookies-texto{
  margin:0;max-width:760px;
  font-size:.82rem;line-height:1.55;color:rgba(254,249,224,.78);
}
.aviso-cookies-texto a{color:var(--linho);text-decoration:underline;text-underline-offset:2px}
.aviso-cookies-texto a:hover{color:#E9A76B}

.aviso-cookies-btn{
  flex:0 0 auto;
  padding:10px 26px;border:0;border-radius:var(--r-pill);
  background:var(--terracota);color:#fff;
  font-family:var(--fonte-texto);font-size:.84rem;font-weight:600;
  cursor:pointer;transition:background .2s ease, transform .2s ease;
}
.aviso-cookies-btn:hover{background:var(--terracota-esc);transform:translateY(-1px)}

@media (max-width:640px){
  .aviso-cookies{gap:12px;padding:14px 18px;text-align:center}
  .aviso-cookies-texto{font-size:.78rem}
  .aviso-cookies-btn{width:100%;padding:12px 26px}
}

/* ---------- BOTÃO FLUTUANTE ---------- */
.wpp-flutuante{
  position:fixed;right:22px;bottom:calc(22px + var(--altura-aviso));z-index:90;
  width:58px;height:58px;border-radius:50%;background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(30,166,90,.4);
  transition:transform .22s ease, box-shadow .22s ease, bottom .32s ease;
}
.wpp-flutuante:hover{transform:scale(1.07);box-shadow:0 10px 28px rgba(30,166,90,.5)}

/* ---------- REVELAÇÃO AO ROLAR ---------- */
.js .revelar{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.js .revelar.visivel{opacity:1;transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;gap:38px}
  .hero-texto{max-width:none}
  .diferenciais .container{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr;gap:16px}
  .passo:not(:last-child)::after{display:none}
  .cards-garantia{grid-template-columns:repeat(2,1fr)}
  .grid-depo{grid-template-columns:1fr}
  .rodape-topo{grid-template-columns:1fr 1fr;gap:36px}
  .rodape-marca{grid-column:1/-1}
  .nav{display:none}
  .menu-btn{display:flex}
  .cabecalho-site .btn--primario{display:none}
}
@media (max-width:640px){
  .container{padding-inline:20px}
  .carrossel{aspect-ratio:auto;height:370px;border-radius:var(--r-md)}
  .carrossel-seta{display:none}
  .hero-acoes .btn{width:100%}
  .hero-selos{flex-wrap:wrap;gap:12px 0}
  .hero-selo{flex:1 1 100%;font-size:.82rem}
  .diferenciais .container{grid-template-columns:1fr;gap:26px}
  .cards-garantia{grid-template-columns:1fr}
  .faixa-frete{flex-direction:column;align-items:flex-start;padding:26px 24px}
  .faixa-frete .btn{width:100%}
  .galeria{gap:14px}
  .galeria-item{flex:0 0 calc(100% - 42px)}
  .galeria-seta{display:none}
  .categoria-info{min-height:0}
  /* Filtros viram faixa deslizante: evita 6 linhas de pílulas empilhadas */
  .filtros{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding:4px 20px 10px;
    scrollbar-width:none;
  }
  .filtros::-webkit-scrollbar{display:none}
  .filtro{scroll-snap-align:start}
  .rodape-topo{grid-template-columns:1fr}
  .rodape-base{flex-direction:column;align-items:flex-start;gap:10px}
  .lightbox-ant{left:10px}.lightbox-prox{right:10px}
  .lightbox-btn{width:42px;height:42px}
}

/* ---------- MENU MOBILE ---------- */
.nav-mobile{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;background:var(--azul);
  padding:32px 24px;display:none;flex-direction:column;gap:6px;
  border-top:1px solid rgba(254,249,224,.14);
}
.nav-mobile.aberto{display:flex}
.nav-mobile a{
  padding:16px 4px;font-size:1.05rem;font-weight:500;color:var(--linho);
  border-bottom:1px solid rgba(254,249,224,.14);font-family:var(--fonte-titulo);
}
.nav-mobile .btn{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .revelar{opacity:1;transform:none}
}