/* ═══════════════════════════════════════════════════════════════════════════
   [NOME DA EMPRESA] — folha de estilo única.

   ORDEM: tokens · base · utilidades · componentes · seções (na ordem do HTML)
   · responsivo · redução de movimento.

   REGRA QUE VALE PARA TUDO: nada aqui pode gerar rolagem horizontal. Todo
   elemento que estoura a largura (imagem em parallax, marquee, grid largo)
   está dentro de um pai com `overflow:hidden`. É o defeito mais comum em
   página deste tipo e o mais fácil de deixar passar no desktop.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Base: carvão → aço. Sem azul: o brief pede grafite, e cinza com um toque
     de azul (o "cinza frio" que todo mundo usa) já puxa para lá sozinho. */
  --carvao:#0b0c0e;
  --breu:#121317;
  --grafite:#191b1f;
  --grafite-2:#212428;
  --aco:#6c747e;
  --prata:#b0b8c1;
  --nevoa:#e7e9ec;
  --papel:#f4f5f6;
  --branco:#fff;

  /* Cobre industrial. Aparece em botão, indicador, linha e hover — nunca em
     área grande, senão a página deixa de ser metálica e vira laranja. */
  --acento:#c66028;
  --acento-cl:#e8884a;
  --acento-esc:#8d4319;

  --borda:rgba(255,255,255,.10);
  --borda-cl:rgba(11,12,14,.12);

  --f-tit:'Archivo',system-ui,-apple-system,sans-serif;
  --f-txt:'Inter',system-ui,-apple-system,sans-serif;

  --r-g:26px; --r-m:18px; --r-p:12px;
  --gut:clamp(18px,4.5vw,64px);
  --max:1440px;

  --t-rap:.22s cubic-bezier(.22,.7,.3,1);
  --t-med:.45s cubic-bezier(.22,.7,.3,1);
  --t-len:.9s cubic-bezier(.16,.72,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* O atributo `hidden` vale display:none pela folha do navegador — que QUALQUER
   `display` do autor derrota. Isso mordeu de verdade aqui: `.modal` tem
   `position:fixed;inset:0;display:flex`, então o modal "fechado" continuava
   ocupando a tela inteira e engolia todo clique da página. O mesmo valia para
   `.drawer`, `.abas-pn` e `#orc-voltar` (herdando `.btn{display:inline-flex}`).
   Uma linha resolve para sempre, inclusive para o que vier depois. */
[hidden]{display:none!important}
html{
  scroll-behavior:smooth;
  /* A navbar é fixa; sem isto uma âncora para uma seção esconde o título dela
     atrás da barra. */
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--carvao); color:var(--nevoa);
  font-family:var(--f-txt); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* trava mestra contra rolagem lateral */
}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--acento);color:#fff}

:focus-visible{outline:2px solid var(--acento-cl);outline-offset:3px;border-radius:4px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--acento);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700
}
.pular:focus{left:0}

/* ── utilidades ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.etiq{
  display:inline-block;font-family:var(--f-tit);font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acento);margin-bottom:18px
}
.etiq.claro{color:var(--acento-cl)}

.tit-g{
  font-family:var(--f-tit);font-weight:900;
  font-size:clamp(2.4rem,7.4vw,6.4rem);line-height:.96;letter-spacing:-.035em;
  text-transform:uppercase;text-wrap:balance
}
.tit-m{
  font-family:var(--f-tit);font-weight:800;
  font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance
}
.claro{color:var(--branco)}
.corpo{font-size:clamp(15px,1.15vw,17.5px);line-height:1.72;color:var(--aco);max-width:56ch}
.corpo.claro{color:rgba(255,255,255,.74)}

/* `.ln` recorta a linha para o texto poder subir de dentro dela. É o que dá o
   reveal de tipografia grande sem precisar de biblioteca. */
.ln{display:block;overflow:hidden}
.ln > .rev{display:block}

/* Textura metálica no trecho de destaque. Fallback: se o navegador não
   suportar background-clip:text, o texto continua legível em prata. */
.metalico{
  color:var(--prata);
  background:linear-gradient(100deg,#6d757f 0%,#e9edf1 26%,#9aa3ad 46%,#fff 62%,#7d858f 82%,#c3cad2 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .metalico{-webkit-text-fill-color:transparent;color:transparent}
}

.regua{display:block;height:1px;width:0;background:var(--borda-cl);margin:26px 0 24px;transition:width 1.1s cubic-bezier(.16,.72,.24,1) .15s}
.regua.dentro{width:100%}

/* reveal base — o JS só acrescenta .dentro */
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,.72,.24,1),transform .8s cubic-bezier(.16,.72,.24,1)}
.rev.dentro{opacity:1;transform:none}

.sec-topo{margin-bottom:clamp(36px,5vw,68px);max-width:760px}
.sec-topo-linha{display:flex;gap:clamp(24px,4vw,64px);align-items:flex-end;justify-content:space-between;max-width:none;flex-wrap:wrap}
.sec-topo-ap{max-width:38ch}

/* ── botões ───────────────────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--branco); --bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--f-tit);font-weight:700;font-size:14px;letter-spacing:.02em;
  transition:background var(--t-rap),color var(--t-rap),border-color var(--t-rap),transform var(--t-rap);
  white-space:nowrap;overflow:hidden;max-width:100%
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-med)}
.btn:hover svg{transform:translateX(5px)}
.btn-g{min-height:56px;padding:0 30px;font-size:15px}
.btn-bloco{width:100%}

.btn-acento{--bg:var(--acento);--fg:#fff;--bd:var(--acento)}
.btn-acento:hover{--bg:var(--acento-cl);--bd:var(--acento-cl)}
/* Brilho que atravessa o botão principal — a microanimação do CTA. */
.btn-acento::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transition:transform .75s cubic-bezier(.16,.72,.24,1)
}
.btn-acento:hover::after{transform:translateX(120%) skewX(-18deg)}

.btn-linha{--bd:var(--borda);--fg:var(--nevoa)}
.btn-linha:hover{--bd:var(--prata);--bg:rgba(255,255,255,.06)}
.material .btn-linha,.orc .btn-linha{--bd:var(--borda-cl);--fg:var(--carvao)}
.material .btn-linha:hover,.orc .btn-linha:hover{--bg:rgba(11,12,14,.05);--bd:rgba(11,12,14,.3)}

/* ── cursor (só ponteiro fino; o JS nem cria no toque) ─────────────────── */
.cursor,.cursor-anel{opacity:0;transition:opacity .2s}
.cursor.vivo,.cursor-anel.vivo{opacity:1}
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--acento-cl);pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cursor-anel{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid rgba(255,255,255,.34);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .28s,height .28s,border-color .28s,background .28s}
.cursor-anel.ativo{width:62px;height:62px;border-color:var(--acento-cl);background:rgba(198,96,40,.12)}

/* ── navbar ───────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:900;transition:background var(--t-med),backdrop-filter var(--t-med),box-shadow var(--t-med)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;max-width:var(--max);margin-inline:auto;padding:22px var(--gut);transition:padding var(--t-med)}
.nav.densa{background:rgba(11,12,14,.72);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 1px 0 var(--borda),0 18px 40px -30px rgba(0,0,0,.9)}
.nav.densa .nav-in{padding-block:13px}

.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-tit);font-weight:800;letter-spacing:-.02em;min-height:44px}   /* alvo de toque: a marca tem 25px de altura sozinha */
.logo-mark{display:flex;gap:3px;align-items:flex-end;height:22px}
.logo-mark i{display:block;width:4px;background:var(--prata);border-radius:1px}
.logo-mark i:nth-child(1){height:12px}
.logo-mark i:nth-child(2){height:22px;background:var(--acento)}
.logo-mark i:nth-child(3){height:16px}
.logo-txt{font-size:15px;text-transform:uppercase}
/* Logo MT (22/10/2026): imagem branca com fundo transparente — só vai em fundo
   escuro (topo e rodapé). Altura fixa; a largura acompanha a proporção, então
   uma logo trocada pelo Cloud com outro formato não deforma. */
.logo-img{display:block;height:30px;width:auto;max-width:96px;object-fit:contain}

.nav-links{display:flex;gap:clamp(14px,2vw,30px)}
.nav-links a{position:relative;font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.68);padding:6px 0;transition:color var(--t-rap)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acento);transition:width var(--t-med)}
.nav-links a:hover,.nav-links a.atual{color:#fff}
.nav-links a:hover::after,.nav-links a.atual::after{width:100%}

.nav-acoes{display:flex;align-items:center;gap:12px}
.btn-nav{min-height:42px;padding:0 20px;font-size:13px}

.hamb{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.hamb i{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform var(--t-med),opacity var(--t-rap)}
.hamb[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.hamb[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:899;background:var(--carvao);
  display:flex;flex-direction:column;justify-content:center;gap:40px;padding:104px var(--gut) 40px;
  opacity:0;transform:translateY(-10px);transition:opacity var(--t-med),transform var(--t-med)}
.drawer.aberto{opacity:1;transform:none}
.drawer-nav{display:flex;flex-direction:column;gap:6px}
.drawer-nav a{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--borda);
  font-family:var(--f-tit);font-weight:800;font-size:clamp(26px,8vw,40px);text-transform:uppercase;letter-spacing:-.03em}
.drawer-nav .num{font-size:11px;letter-spacing:.2em;color:var(--acento);font-weight:700}
.drawer-pe{display:flex;flex-direction:column;gap:14px}
.drawer-wpp{text-align:center;font-size:13px;color:var(--aco)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-midia{position:absolute;inset:-8% 0 -8%;z-index:-3;will-change:transform}
.hero-midia img{width:100%;height:100%;object-fit:cover}
.hero-veu{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(11,12,14,.82) 0%,rgba(11,12,14,.34) 34%,rgba(11,12,14,.72) 72%,var(--carvao) 100%)}
/* Brilho que segue o mouse. O JS só escreve --mx/--my; sem JS fica centrado. */
.hero-brilho{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46vw 46vw at calc(50% + var(--mx,0px)) calc(46% + var(--my,0px)),rgba(198,96,40,.14),transparent 62%)}
.hero-in{padding-bottom:clamp(96px,14vh,168px);padding-top:140px}
.olho{font-family:var(--f-tit);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--acento-cl);margin-bottom:22px}
.hero-h1{margin-bottom:26px;color:#fff}
.hero-sub{font-size:clamp(15px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.76);max-width:46ch;margin-bottom:38px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.scroll-ind{position:absolute;left:var(--gut);bottom:30px;display:flex;align-items:center;gap:14px;
  font-family:var(--f-tit);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.scroll-ind .trilho{position:relative;display:block;width:1px;height:52px;background:rgba(255,255,255,.18);overflow:hidden}
.scroll-ind .trilho i{position:absolute;left:0;top:0;width:100%;height:20px;background:var(--acento-cl);animation:desce 2.1s cubic-bezier(.6,0,.4,1) infinite}
@keyframes desce{0%{transform:translateY(-100%)}100%{transform:translateY(320%)}}

/* ── material (claro) ─────────────────────────────────────────────────── */
.material{background:var(--papel);color:var(--carvao);padding-block:clamp(72px,11vw,150px);overflow:hidden}
.material .corpo{color:#4b5158}
.material-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);align-items:center}
.material-f{border-radius:var(--r-m);overflow:hidden;will-change:transform}
.material-f img{width:100%;aspect-ratio:3/4;object-fit:cover}
.material-f.a{margin-top:56px}
.material-f.b{margin-bottom:64px}
.material-txt .tit-g{color:var(--carvao)}
.material-lista{list-style:none;margin-top:26px;display:grid;gap:11px}
.material-lista li{position:relative;padding-left:26px;font-size:14.5px;color:#4b5158}
.material-lista li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:1px;background:var(--acento)}

/* ── bento de categorias ──────────────────────────────────────────────── */
.cats{background:var(--carvao);padding-block:clamp(72px,11vw,150px)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cat{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--grafite);
  border:1px solid var(--borda);min-height:250px;display:flex;align-items:flex-end;
  transition:border-color var(--t-med),transform var(--t-med)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,.72,.24,1),filter var(--t-med);filter:grayscale(.25) brightness(.66)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(11,12,14,.9) 100%);transition:opacity var(--t-med)}
.cat:hover{border-color:rgba(198,96,40,.55)}
.cat:hover img{transform:scale(1.07);filter:grayscale(0) brightness(.78)}
.cat-in{position:relative;z-index:2;padding:clamp(20px,2.4vw,30px);width:100%}
.cat-n{font-family:var(--f-tit);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--acento-cl)}
.cat h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(19px,2vw,27px);letter-spacing:-.02em;
  text-transform:uppercase;margin:8px 0 0;color:#fff;transition:transform var(--t-med)}
.cat p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height var(--t-med),opacity var(--t-med),margin var(--t-med)}
.cat:hover h3,.cat:focus-visible h3{transform:translateY(-4px)}
.cat:hover p,.cat:focus-visible p{max-height:90px;opacity:1;margin-top:8px}
.cat-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--f-tit);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-cl)}
.cat-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-med)}
.cat:hover .cat-cta svg{transform:translateX(5px)}

/* Foto de produto com fundo branco (telha, tela, esquadria de catálogo) dentro
   de um bento escuro: com o filtro padrão o card vira uma mancha clara e
   parece colado de outro site. Aqui o fundo desce junto com a foto e o texto
   continua legível por cima. */
.cat-claro img{filter:grayscale(.18) brightness(.46) contrast(1.06)}
.cat-claro:hover img{filter:grayscale(0) brightness(.62) contrast(1.02)}
.cat-claro::after{background:linear-gradient(180deg,rgba(11,12,14,.28) 0%,rgba(11,12,14,.94) 100%)}

/* O oposto: as imagens geradas por código já nascem escuras (luminância ~80
   de 255), e com o `brightness(.66)` padrão o card vira um retângulo preto —
   foi o que aconteceu com "Ferro". Aqui a foto sobe até aparecer, e o texto
   segue legível porque o gradiente de baixo não mudou. */
.cat-escuro img{filter:grayscale(.25) brightness(1.15) contrast(1.04)}
.cat-escuro:hover img{filter:grayscale(0) brightness(1.3) contrast(1.02)}

.cat-xl{grid-column:span 3;grid-row:span 2;min-height:520px}
.cat-alt{grid-column:span 3}
.cat{grid-column:span 2}
.cat-larga{grid-column:span 4}
/* Ocupa a linha inteira e fecha o bento. Com `span 2` ele sobrava sozinho no
   canto e os outros dois terços viravam um buraco preto — assimetria vira
   descuido quando não tem nada do outro lado. */
.cat-acento{grid-column:span 6;background:linear-gradient(110deg,var(--acento-esc),var(--acento) 62%);
  border-color:transparent;min-height:0}
.cat-acento .cat-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:center;
  padding-block:clamp(26px,3.4vw,44px)}
.cat-acento .cat-cta{margin-top:0;white-space:nowrap}
.cat-acento::after{display:none}
.cat-acento p{max-height:none;opacity:1;margin-top:8px;color:rgba(255,255,255,.88)}
.cat-acento .cat-n,.cat-acento .cat-cta{color:#fff}

/* ── vitrine (catálogo) ───────────────────────────────────────────────────
   Card = foto + nome + link. Nada de descrição ou medida (decisão de 22/10).
   A área da foto é um "estúdio" branco: foto de produto recortada fica
   inteira (contain) e o `multiply` funde o branco dela no branco do card,
   sem o retângulo de borda. `.vit-cheia` = foto de ambiente, preenche. */
.vitrine{background:var(--breu);border-top:1px solid var(--borda);padding-block:clamp(72px,11vw,150px)}
.vit-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.vit-filtros button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--borda);
  font-family:var(--f-tit);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--prata);
  transition:background var(--t-rap),border-color var(--t-rap),color var(--t-rap)}
.vit-filtros button:hover{border-color:var(--prata);color:#fff}
.vit-filtros button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#fff}

.vit-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.vit-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-m);overflow:hidden;background:var(--grafite);
  border:1px solid var(--borda);transition:border-color var(--t-med),transform var(--t-med)}
.vit-card:hover{border-color:rgba(198,96,40,.55);transform:translateY(-4px)}
.vit-foto{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(120% 95% at 50% 38%,#fff 0%,#f3f4f5 62%,#e7e9ec 100%)}
.vit-foto img{width:100%;height:100%;object-fit:contain;padding:clamp(14px,7%,34px);mix-blend-mode:multiply;
  transition:transform 1s cubic-bezier(.16,.72,.24,1)}
.vit-cheia img{object-fit:cover;padding:0;mix-blend-mode:normal}
/* Portões: fotos em pé cortadas no quadro 4:3 — `object-position` escolhe o trecho
   que aparece (o 1º corta fora a marca d'água do canto superior da foto). */
.vit-foto img[data-slot="prod-portao-preto"]{object-position:50% 62%}
.vit-foto img[data-slot="prod-portao-ripado-preto"]{object-position:50% 50%}
.vit-foto img[data-slot="prod-portao-ripado-marrom"]{object-position:50% 38%}
.vit-card:hover .vit-foto img{transform:scale(1.05)}
.vit-in{flex:1;display:flex;flex-direction:column;gap:16px;padding:clamp(18px,1.8vw,26px)}
.vit-in h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(17px,1.45vw,21px);line-height:1.2;
  letter-spacing:-.015em;color:#fff;text-wrap:balance}
.vit-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:32px;
  font-family:var(--f-tit);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-cl);
  border-bottom:1px solid rgba(232,136,74,.35);transition:color var(--t-rap),border-color var(--t-rap)}
.vit-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-med)}
.vit-card:hover .vit-cta{color:#fff;border-color:var(--acento)}
.vit-card:hover .vit-cta svg{transform:translateX(5px)}
/* O link cobre o card inteiro: tocar na foto também pede orçamento. */
.vit-cta::after{content:"";position:absolute;inset:0}
.vit-entra{animation:vitEntra .5s cubic-bezier(.16,.72,.24,1)}
@keyframes vitEntra{from{opacity:0;transform:translateY(12px)}}

/* "Também em estoque": produtos que a empresa vende mas ainda sem foto.
   Lista de links (pílulas), sem marcador cinza fingindo ser foto. */
.vit-mais{margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--borda);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.vit-mais ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vit-mais a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;
  border:1px solid var(--borda);font-size:13.5px;color:var(--prata);transition:border-color var(--t-rap),color var(--t-rap)}
.vit-mais a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-med)}
.vit-mais a:hover{border-color:var(--acento);color:#fff}
.vit-mais a:hover svg{transform:translateX(4px)}

/* ── ripados ──────────────────────────────────────────────────────────────
   Seção clara (papel), como a "Fundamento": quebra o escuro entre catálogo e
   números. Topo = texto + foto dos três tons lado a lado; embaixo, uma
   amostra por tom, em pé, com o link de orçamento daquele tom. */
.rip{background:var(--papel);color:var(--carvao);padding-block:clamp(72px,11vw,150px);overflow:hidden}
.rip .corpo{color:#4b5158}
.rip .tit-g{color:var(--carvao)}
.rip-topo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,88px);align-items:center}
.rip-txt .btn{margin-top:30px}
.rip-destaque{border-radius:var(--r-g);overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,12,14,.35)}
.rip-destaque img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rip-tons{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);margin-top:clamp(40px,6vw,80px)}
.rip-tom{position:relative}
.rip-f{border-radius:var(--r-m);overflow:hidden;background:#e7e9ec}
.rip-f img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1s cubic-bezier(.16,.72,.24,1)}
.rip-tom:hover .rip-f img{transform:scale(1.06)}
.rip-tom a{display:flex;flex-direction:column;gap:4px;padding-top:14px}
.rip-tom a::after{content:"";position:absolute;inset:0}
.rip-tom b{font-family:var(--f-tit);font-weight:800;font-size:clamp(15px,1.2vw,18px);letter-spacing:-.01em}
.rip-tom span{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-tit);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.rip-tom span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-med)}
.rip-tom:hover span svg{transform:translateX(4px)}
@media (max-width:960px){
  .rip-topo{grid-template-columns:1fr}
  .rip-tons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .rip-tons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rip-tons li:last-child{grid-column:span 2}
  .rip-tons li:last-child .rip-f img{aspect-ratio:2/1}
  .vit-mais{flex-direction:column;align-items:flex-start}
}

/* specs: usado pelo modal de projetos */
.specs{margin:26px 0 28px;display:grid;gap:0;border-top:1px solid var(--borda-cl)}
.specs > div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--borda-cl)}
.specs dt{font-family:var(--f-tit);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8b9199}
.specs dd{font-size:14px;text-align:right;color:#2b3036}

/* ── jornada (scroll fixo) ────────────────────────────────────────────── */
.jornada{position:relative;background:var(--carvao)}
.jornada-trilho{height:340vh}
.jornada-fixo{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.jornada-midia{position:absolute;inset:0}
.jornada-midia .jm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity 1s cubic-bezier(.16,.72,.24,1),transform 1.6s cubic-bezier(.16,.72,.24,1);filter:grayscale(.2) brightness(.6)}
.jornada-midia .jm.ativo{opacity:1;transform:scale(1)}
.jornada-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.55),rgba(11,12,14,.2) 40%,rgba(11,12,14,.94))}
.jornada-hud{position:relative;padding-bottom:clamp(56px,9vh,110px);width:100%}
.jornada-passos{position:relative;min-height:clamp(120px,17vh,190px)}
.jp{position:absolute;inset:auto auto 0 0;display:flex;align-items:baseline;gap:18px;
  font-family:var(--f-tit);font-weight:800;font-size:clamp(1.6rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.035em;
  text-transform:uppercase;color:#fff;opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.72,.24,1),transform .6s cubic-bezier(.16,.72,.24,1)}
.jp.ativo{opacity:1;transform:none}
.jp b{font-size:12px;letter-spacing:.2em;color:var(--acento-cl);flex:none}
.jornada-barra{display:block;height:2px;background:rgba(255,255,255,.14);margin-top:34px}
.jornada-barra i{display:block;height:100%;width:0;background:var(--acento);transition:width .2s linear}

/* ── números ──────────────────────────────────────────────────────────── */
.nums{background:var(--breu);padding-block:clamp(56px,8vw,110px);border-block:1px solid var(--borda)}
/* Dois números, não quatro. `1fr` esticaria cada bloco por meia tela e o
   rótulo ficaria perdido longe do algarismo; `max-content` deixa os dois
   juntos à esquerda, com a régua vertical separando — parece decisão, e não
   grid que sobrou de um layout maior.

   E como dois blocos deixavam dois terços da linha vazios no desktop, a nota
   subiu para o mesmo eixo, alinhada pela base: fecha a largura sem precisar
   inventar um terceiro número. */
.nums .wrap{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(22px,5vw,80px);flex-wrap:wrap}
.nums-grid{display:grid;grid-template-columns:repeat(2,max-content);
  justify-content:start;gap:clamp(30px,7vw,110px)}
.num{border-left:1px solid var(--borda);padding-left:clamp(16px,2vw,28px)}
.num-v{display:block;font-family:var(--f-tit);font-weight:900;font-size:clamp(2.3rem,5.4vw,4.6rem);
  line-height:1;letter-spacing:-.045em;color:#fff}
.num-r{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--aco)}
.nums-nota{font-size:12px;color:#5a6069;max-width:24ch;text-align:right;margin-bottom:4px}

/* ── projetos ─────────────────────────────────────────────────────────── */
.proj{background:var(--carvao);padding-block:clamp(72px,11vw,150px)}
.mason{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pc{position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--borda);min-height:260px;
  grid-column:span 2;text-align:left;transition:border-color var(--t-med)}
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,.72,.24,1),filter var(--t-med);filter:grayscale(.3) brightness(.68)}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,12,14,.9));opacity:.85;transition:opacity var(--t-med)}
.pc:hover{border-color:rgba(198,96,40,.55)}
.pc:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.8)}
.pc:hover::after{opacity:1}
.pc-in{position:relative;z-index:2;display:block;padding:22px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.pc-in em{font-style:normal;font-family:var(--f-tit);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acento-cl)}
.pc-in strong{display:block;margin-top:7px;font-family:var(--f-tit);font-weight:800;font-size:clamp(17px,1.8vw,23px);
  letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.pc-seta{position:absolute;right:20px;top:20px;width:36px;height:36px;border:1px solid var(--borda);border-radius:50%;
  opacity:0;transform:translateY(-6px);transition:opacity var(--t-med),transform var(--t-med),background var(--t-med)}
.pc-seta::before,.pc-seta::after{content:"";position:absolute;background:#fff}
.pc-seta::before{left:11px;top:17px;width:14px;height:1.5px}
.pc-seta::after{right:11px;top:12px;width:1.5px;height:12px;transform:rotate(-45deg);transform-origin:top right}
.pc:hover .pc-seta{opacity:1;transform:none;background:var(--acento)}
.pc-alta{grid-column:span 3;grid-row:span 2;min-height:540px}
.pc-larga{grid-column:span 4}

/* ── modal ────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.modal-fundo{position:absolute;inset:0;background:rgba(6,7,9,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-cx{position:relative;width:min(1080px,100%);max-height:88svh;overflow:auto;overscroll-behavior:contain;
  background:var(--grafite);border:1px solid var(--borda);border-radius:var(--r-g);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  transform:translateY(18px) scale(.985);opacity:0;transition:transform var(--t-med),opacity var(--t-med)}
.modal.aberto .modal-cx{transform:none;opacity:1}
.modal-x{position:absolute;right:12px;top:10px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(11,12,14,.6);color:#fff;font-size:26px;line-height:1}
.modal-img img{width:100%;height:100%;min-height:280px;object-fit:cover}
.modal-txt{padding:clamp(22px,3vw,40px)}
.modal-txt h3{font-family:var(--f-tit);font-weight:900;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px;color:#fff}
.modal-txt .specs{border-color:var(--borda)}
.modal-txt .specs > div{border-color:var(--borda)}
.modal-txt .specs dd{color:var(--nevoa)}

/* ── precisão (parallax) ──────────────────────────────────────────────── */
.precisao{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.precisao-midia{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.precisao-midia img{width:100%;height:100%;object-fit:cover}
.precisao-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,12,14,.92),rgba(11,12,14,.42) 62%,rgba(11,12,14,.66))}
.precisao-in{padding-block:clamp(60px,10vw,120px)}
.precisao-in .corpo{margin-top:20px}

/* ── por que ──────────────────────────────────────────────────────────── */
.porque{background:var(--carvao);padding-block:clamp(72px,11vw,150px)}
.porque-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:start}
.porque-img{margin-top:34px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--borda)}
.porque-img img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.25) brightness(.78);transition:opacity var(--t-med)}
.porque-lista{list-style:none;counter-reset:p;border-top:1px solid var(--borda)}
.porque-lista li{display:flex;gap:clamp(14px,2vw,28px);padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--borda);
  cursor:default;transition:padding var(--t-med)}
.porque-lista li:hover,.porque-lista li.ativo{padding-left:14px}
.pl-n{font-family:var(--f-tit);font-weight:900;font-size:clamp(20px,2.6vw,32px);letter-spacing:-.03em;color:#3c4148;
  flex:none;transition:color var(--t-med),transform var(--t-med);transform-origin:left center}
.porque-lista li:hover .pl-n,.porque-lista li.ativo .pl-n{color:var(--acento);transform:scale(1.24)}
.porque-lista h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(17px,1.9vw,23px);letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;margin-bottom:0;transition:margin var(--t-med)}
.porque-lista p{font-size:14px;line-height:1.65;color:var(--aco);max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--t-med),opacity var(--t-med),margin var(--t-med)}
.porque-lista li:hover p,.porque-lista li.ativo p{max-height:110px;opacity:1;margin-top:8px}

/* ── showroom ─────────────────────────────────────────────────────────── */
.show{background:var(--breu);padding-block:clamp(72px,11vw,150px)}
.show-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px);border-top:1px solid var(--borda);padding-top:30px}
.show-info p{font-size:15px;line-height:1.7;color:var(--nevoa)}

/* ── profissionais ────────────────────────────────────────────────────── */
.prof{background:linear-gradient(160deg,var(--grafite),var(--carvao) 70%);padding-block:clamp(72px,11vw,150px)}
.prof-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,72px);align-items:center}
.prof .corpo{margin:22px 0 32px}
.prof-lista{list-style:none;display:grid;gap:12px}
.prof-lista li{padding:20px 22px;border:1px solid var(--borda);border-radius:var(--r-m);background:rgba(255,255,255,.03);
  transition:border-color var(--t-med),background var(--t-med),transform var(--t-med)}
.prof-lista li:hover{border-color:rgba(198,96,40,.5);background:rgba(255,255,255,.055);transform:translateX(6px)}
.prof-lista b{display:block;font-family:var(--f-tit);font-size:15px;letter-spacing:-.01em;color:#fff;margin-bottom:4px}
.prof-lista span{font-size:13.5px;line-height:1.6;color:var(--aco)}

/* ── orçamento ────────────────────────────────────────────────────────── */
.orc{background:var(--papel);color:var(--carvao);padding-block:clamp(72px,11vw,150px)}
.orc-cx{background:#fff;border:1px solid var(--borda-cl);border-radius:var(--r-g);padding:clamp(22px,3.4vw,52px);max-width:920px;
  box-shadow:0 1px 2px rgba(11,12,14,.04),0 30px 70px -50px rgba(11,12,14,.5)}
.orc-prog{height:2px;background:rgba(11,12,14,.09);border-radius:2px;margin-bottom:clamp(26px,3vw,42px);overflow:hidden}
.orc-prog i{display:block;height:100%;width:33.33%;background:var(--acento);transition:width var(--t-med)}
.orc-passo{border:0;min-width:0}
.orc-passo legend{display:block;font-family:var(--f-tit);font-weight:800;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.025em;margin-bottom:22px;color:var(--carvao)}
.orc-n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acento);margin-bottom:8px}
.orc-ops{display:flex;flex-wrap:wrap;gap:10px}
.orc-ops label{position:relative;display:block}
.orc-ops input{position:absolute;opacity:0;width:0;height:0}
.orc-ops span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;
  border:1px solid var(--borda-cl);font-family:var(--f-tit);font-weight:700;font-size:14px;letter-spacing:.02em;
  cursor:pointer;transition:border-color var(--t-rap),background var(--t-rap),color var(--t-rap)}
.orc-ops label:hover span{border-color:rgba(11,12,14,.34)}
.orc-ops input:checked + span{background:var(--carvao);border-color:var(--carvao);color:#fff}
.orc-ops input:focus-visible + span{outline:2px solid var(--acento);outline-offset:3px}
.orc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.campo{display:block}
.campo-larga{grid-column:1/-1}
.campo span{display:block;font-family:var(--f-tit);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8b9199;margin-bottom:8px}
.campo input,.campo textarea{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--borda-cl);border-radius:var(--r-p);
  background:#fbfbfc;transition:border-color var(--t-rap),background var(--t-rap)}
.campo textarea{min-height:118px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--acento);background:#fff}
.orc-erro{margin-top:18px;padding:13px 16px;border-radius:var(--r-p);background:#fdeeea;border:1px solid #f3c6b7;color:#8d3b19;font-size:14px}
.orc-pe{display:flex;gap:12px;align-items:center;margin-top:clamp(22px,3vw,36px);flex-wrap:wrap}
.orc-nota{margin-top:16px;font-size:12.5px;color:#8b9199}

/* ── marcas ───────────────────────────────────────────────────────────── */
.marcas{background:var(--carvao);border-block:1px solid var(--borda);padding-block:30px;overflow:hidden}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-fita{display:flex;gap:clamp(36px,6vw,90px);width:max-content;animation:corre 34s linear infinite}
.marquee-fita span{font-family:var(--f-tit);font-weight:800;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.02em;
  text-transform:uppercase;color:#33383f;white-space:nowrap;transition:color var(--t-rap)}
.marquee:hover .marquee-fita span{color:#4a515a}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── depoimentos ──────────────────────────────────────────────────────── */
.depo{background:var(--carvao);padding-block:clamp(60px,9vw,120px)}
.depo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.depo blockquote{border-top:1px solid var(--borda);padding-top:26px}
.estrelas{color:var(--acento-cl);letter-spacing:.14em;font-size:14px}
.depo p{margin:16px 0 22px;font-size:clamp(16px,1.5vw,19px);line-height:1.62;color:var(--nevoa)}
.depo footer b{display:block;font-family:var(--f-tit);font-size:14px;color:#fff}
.depo footer span{font-size:12.5px;color:var(--aco)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{background:var(--carvao);padding-block:clamp(60px,9vw,130px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,72px);align-items:start}
.faq-lista{border-top:1px solid var(--borda)}
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:62px;padding:18px 0;cursor:pointer;
  list-style:none;font-family:var(--f-tit);font-weight:700;font-size:clamp(15px,1.6vw,19px);letter-spacing:-.01em;color:#fff;
  transition:color var(--t-rap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.6px solid var(--acento-cl);border-bottom:1.6px solid var(--acento-cl);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--t-med)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding-bottom:22px;font-size:15px;line-height:1.7;color:var(--aco);max-width:64ch}
.faq details[open] p{animation:abre .4s cubic-bezier(.16,.72,.24,1)}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── CTA final ────────────────────────────────────────────────────────── */
.cta{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.cta-midia{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}
.cta-midia img{width:100%;height:100%;object-fit:cover}
.cta-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--carvao) 0%,rgba(11,12,14,.62) 40%,rgba(11,12,14,.9) 100%)}
.cta-in{padding-block:clamp(70px,11vw,140px)}
.cta-in .corpo{margin:22px 0 36px}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ── rodapé ───────────────────────────────────────────────────────────── */
.rodape{background:var(--breu);border-top:1px solid var(--borda);padding-block:clamp(48px,7vw,84px) 28px}
.rodape-topo{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--borda)}
.rodape-frase{font-family:var(--f-tit);font-size:clamp(15px,2vw,21px);font-weight:700;letter-spacing:-.02em;color:var(--aco)}
.rodape-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding-block:38px}
.rodape-grid ul{list-style:none;display:grid;gap:9px}
.rodape-grid li,.rodape-grid a{font-size:14px;color:var(--aco);transition:color var(--t-rap)}
.rodape-grid a:hover{color:#fff}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico .ico-p{fill:currentColor;stroke:none}
.rod-ct{display:inline-flex;align-items:center;gap:10px}
.rodape-redes{display:flex;gap:10px}
.rodape-redes a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--borda);color:var(--prata);
  transition:color var(--t-rap),border-color var(--t-rap),background var(--t-rap)}
.rodape-redes a:hover{color:#fff;border-color:var(--acento);background:var(--acento)}
.rodape-redes .ico{width:19px;height:19px}
.show-info a{transition:color var(--t-rap)}
.show-info a:hover{color:var(--acento-cl)}
.rodape-fim{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--borda);font-size:12.5px;color:#545a63}

/* ── WhatsApp flutuante ───────────────────────────────────────────────── */
.wpp{position:fixed;right:18px;bottom:18px;z-index:880;display:inline-flex;align-items:center;gap:0;
  height:58px;padding:0 17px;border-radius:999px;background:#1fa855;color:#fff;
  box-shadow:0 10px 34px -12px rgba(31,168,85,.75);transition:gap var(--t-med),padding var(--t-med),background var(--t-rap)}
.wpp svg{width:26px;height:26px;fill:currentColor;flex:none}
.wpp-txt{max-width:0;overflow:hidden;white-space:nowrap;font-family:var(--f-tit);font-weight:700;font-size:14px;
  transition:max-width var(--t-med)}
.wpp:hover{background:#179447;gap:11px;padding-right:22px}
.wpp:hover .wpp-txt{max-width:240px}

/* ═══════════════════════ RESPONSIVO ═══════════════════════ */
@media (max-width:1100px){
  .material-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .material-txt{grid-column:1/-1;order:-1}
  .material-f.a,.material-f.b{margin:0}
  .faq-grid,.porque-grid,.prof-grid{grid-template-columns:minmax(0,1fr)}
  .porque-img{display:none}          /* a imagem que troca não cabe empilhada */
  .depo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:960px){
  .cat-acento{grid-column:span 2}
  .cat-acento .cat-in{grid-template-columns:minmax(0,1fr);gap:14px}
  html{scroll-padding-top:72px}
  .nav-links{display:none}
  .hamb{display:flex}
  .btn-nav{display:none}
  .bento,.mason{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat,.cat-alt,.cat-larga,.cat-xl,.pc,.pc-alta,.pc-larga{grid-column:span 2;grid-row:auto}
  .cat-xl,.pc-alta{min-height:340px}
  .cat,.pc{min-height:230px}
  /* Sem hover no toque: a descrição precisa estar visível de saída. */
  .cat p{max-height:90px;opacity:1;margin-top:8px}
  .porque-lista p{max-height:110px;opacity:1;margin-top:8px}
  .vit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Empilhado, a nota volta para baixo dos números e alinhada à esquerda:
     texto de 12px alinhado à direita num celular fica órfão. */
  .nums-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .nums-nota{text-align:left;max-width:none;margin-bottom:0}
  .modal-cx{grid-template-columns:minmax(0,1fr)}
  .modal-img img{min-height:0;aspect-ratio:16/10}
  .show-info,.rodape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jornada-trilho{height:300vh}
}

@media (max-width:640px){
  /* Rótulo longo com `nowrap` e padding de 30px não cabe em 320px — era o
     CTA "Falar com um especialista" estourando 14px e criando rolagem
     lateral na página inteira. Aqui o texto pode quebrar em duas linhas. */
  .btn{white-space:normal;text-align:center;line-height:1.3;padding-inline:20px}
  .btn-g{padding-inline:24px}
  .prof .btn-g,.cta-btns .btn{width:100%}

  .hero{min-height:92svh}
  .hero-in{padding-top:120px;padding-bottom:112px}
  .hero-ctas .btn{width:100%}
  /* O indicador de scroll sai inteiro. Escondendo só o rótulo (era o que
     estava aqui antes) sobrava o trilho de 1px de largura — um link de
     1×52px, que no dedo é um alvo impossível e no celular não informa nada:
     rolar é o gesto que a pessoa já ia fazer. */
  .scroll-ind{display:none}

  /* Os passos da jornada são absolutos e ancorados pelo RODAPÉ da caixa
     (`inset:auto auto 0 0`). No desktop cada um cabe numa linha, então o
     crossfade troca dois textos na mesma altura e fica limpo. No celular a
     frase quebra em duas linhas, e uma de duas linhas ancorada embaixo sobe
     enquanto a de uma linha fica no lugar: no meio da transição os dois
     apareciam embaralhados. Aqui a âncora vai para o TOPO, e a fonte cai o
     suficiente para a maioria das frases voltar a caber numa linha. */
  .jornada-passos{min-height:96px}
  .jp{inset:0 auto auto 0;font-size:clamp(1.3rem,4.8vw,1.6rem);gap:12px}

  .vit-grid{grid-template-columns:minmax(0,1fr)}
  /* Filtros em rolagem lateral no celular: cinco botões quebrando em três
     linhas empurravam a vitrine para baixo da dobra. A borda direita some
     num degradê para avisar que tem mais. */
  .vit-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .vit-filtros::-webkit-scrollbar{display:none}
  .vit-filtros button{flex:none;min-height:44px}

  .depo-grid{grid-template-columns:minmax(0,1fr)}
  .orc-campos{grid-template-columns:minmax(0,1fr)}
  .orc-ops label{flex:1 1 auto}
  .orc-ops span{width:100%;padding:0 18px}
  .orc-pe .btn{width:100%}
  .rodape-topo{flex-direction:column;align-items:flex-start}
  /* No celular o botão vira círculo: rótulo ocuparia meia tela. */
  .wpp{right:14px;bottom:14px;width:58px;padding:0;justify-content:center}
  .wpp-txt{display:none}
}

@media (max-width:400px){
  /* `.tit-g` tinha piso de 2.4rem (38px): "Vidro que transforma." mede 302px
     nesse tamanho e a coluna de um celular de 320px tem 284px. Como `.ln` é
     `overflow:hidden` para o reveal funcionar, o excedente não transbordava —
     era CORTADO, e a página abria com a manchete sem as últimas letras. Aqui
     o piso cai e a linha inteira cabe. */
  .tit-g{font-size:clamp(1.85rem,8.2vw,2.4rem)}
  .show-info,.rodape-grid{grid-template-columns:minmax(0,1fr)}
  .bento,.mason{grid-template-columns:minmax(0,1fr)}
  .cat,.cat-alt,.cat-larga,.cat-xl,.pc,.pc-alta,.pc-larga{grid-column:span 1}
}

/* Especificação em duas colunas com o valor à direita: bitola longa quebra em
   duas linhas e o bloco fica esfarrapado. Numa tela estreita o rótulo vai
   para cima do valor, que é como se lê uma ficha técnica no papel. */
@media (max-width:520px){
  .specs > div{flex-direction:column;gap:3px;padding:11px 0}
  .specs dd{text-align:left}
}

/* ═══════════════════════ APARELHO SEM MOUSE ═══════════════════════
   `hover:none` é o critério certo aqui, e não a largura: um tablet de 820px
   é dedo igual a um celular de 360px, e foi por medir só a largura que o
   rodapé continuava com alvo de 16px no tablet.

   Link de 14px no rodapé dá 16px de altura de toque. Aqui cada um vira uma
   linha de 44px — o mínimo que se acerta com o dedo sem errar o vizinho. */
@media (hover:none){
  .rodape-grid ul{gap:3px}
  .rodape-grid a{display:flex;align-items:center;min-height:44px}
  /* Sem hover, a descrição do card e o item do "por que" precisam estar
     visíveis de saída — o estado que no desktop aparece no passar do mouse. */
  .cat p{max-height:90px;opacity:1;margin-top:8px}
  /* O botão flutuante do WhatsApp ocupa os 72px do canto inferior e estava
     sentado em cima da linha de copyright. Aqui o rodapé reserva o espaço. */
  .rodape{padding-bottom:84px}
}

/* ═══════════════════════ REDUÇÃO DE MOVIMENTO ═══════════════════════
   Não é "desligar animação": é tirar o que se MOVE e manter o que informa.
   Opacidade fica, deslocamento e loop infinito saem. O JS lê a mesma media
   query e desliga parallax, cursor e count-up. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.14s!important;scroll-behavior:auto!important
  }
  .rev{opacity:1!important;transform:none!important}
  .ln{overflow:visible}
  .marquee-fita{animation:none;transform:none}
  .scroll-ind .trilho i{animation:none}
  .hero-midia,.precisao-midia,.cta-midia,.material-f{transform:none!important}
  .btn-acento::after{display:none}
}