/* =========================================================
   AFETTO Ambientes — páginas institucionais e de produto
   Folha única, sem framework. Mobile-first.
   ========================================================= */

/* ---------- Fontes self-hosted (sem requisição externa) ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(/assets/paginas/fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/paginas/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/paginas/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/paginas/fonts/poppins-latin-600-normal.woff2) format("woff2")}
/* Fallback com métricas ajustadas: a troca de fonte não desloca o layout (CLS) */
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:113.73%;ascent-override:92.33%;descent-override:30.78%;line-gap-override:8.79%}

/* ---------- Tokens ---------- */
:root{
  --preto:#000;          /* preto da marca (manual: C0 M0 Y0 K100) */
  --texto:#222;          /* texto corrido */
  --grafite:#636466;     /* cinza da versão monocromática do manual */
  --pedra:#f3f2ef;       /* fundo neutro claro */
  --linha:#dcdad6;       /* filetes */
  --latao:#9c7b45;       /* dourado: uso pontual (foco, marcadores) */
  --branco:#fff;
  --ficha:#1d1b19;       /* painel escuro da ficha técnica */
  --f:Poppins,"Poppins Fallback",system-ui,sans-serif;
  --wrap:74rem;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:clamp(4rem,9vw,7rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;font:300 1rem/1.7 var(--f);color:var(--texto);background:var(--branco);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration-color:var(--latao);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--latao);outline-offset:3px}
h1,h2,h3{font-weight:500;color:var(--preto);line-height:1.2;margin:0 0 var(--s2)}
h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);letter-spacing:-.02em;font-weight:400}
h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);letter-spacing:-.01em;font-weight:400}
h3{font-size:1.15rem}
p{margin:0 0 var(--s2);max-width:68ch}
strong{font-weight:500;color:var(--preto)}
ul,ol{padding-left:1.1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--preto);color:var(--branco);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--texto)}
.muted{color:var(--grafite)}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;font:500 .95rem/1 var(--f);text-decoration:none;border:1px solid var(--preto);border-radius:2px;background:var(--preto);color:var(--branco);cursor:pointer}
.btn:hover{background:var(--branco);color:var(--preto)}
.btn--ghost{background:transparent;color:var(--preto)}
.btn--ghost:hover{background:var(--preto);color:var(--branco)}
.btn--claro{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.btn--claro:hover{background:transparent;color:var(--branco)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

/* ---------- Cabeçalho ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;min-height:4.25rem;gap:var(--s2)}
.topo__logo img{height:30px;width:auto}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;background:none;cursor:pointer;padding:0}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:1.5px;background:var(--preto);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-7px}
.menu-btn span::after{position:absolute;top:7px}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--branco);border-bottom:1px solid var(--linha)}
.nav.is-open{display:block}
.nav ul{list-style:none;margin:0;padding:var(--s2) var(--gut) var(--s3)}
.nav a{display:block;padding:.75rem 0;text-decoration:none;font-weight:400;border-bottom:1px solid var(--linha)}
.nav a[aria-current="page"],.nav a.is-section{font-weight:500;color:var(--preto)}
.nav .nav__cta{margin-top:var(--s2);border:0}
.nav .nav__cta a{border:1px solid var(--preto);text-align:center;background:var(--preto);color:var(--branco)}
@media (min-width:60em){
  .menu-btn{display:none}
  .nav{display:block;position:static;border:0;background:none}
  .nav ul{display:flex;align-items:center;gap:1.75rem;padding:0}
  .nav a{border:0;padding:.5rem 0;font-size:.95rem}
  .nav a[aria-current="page"],.nav a.is-section{box-shadow:inset 0 -1px 0 var(--preto)}
  .nav .nav__cta{margin:0}
  .nav .nav__cta a{padding:.7rem 1.2rem}
}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.85rem;color:var(--grafite);padding-top:var(--s3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--linha)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s4) var(--s5)}
.hero__grid{display:grid;gap:var(--s4);align-items:end}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--pedra)}
.hero__media--wide img{aspect-ratio:3/2}
@media (max-width:59.99em){.hero__media img{aspect-ratio:4/3}}
.hero__media figcaption{font-size:.85rem;color:var(--grafite);margin-top:.6rem}
@media (min-width:60em){
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5)}
  .hero__grid--wide{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .hero__texto{padding-bottom:var(--s3)}
}

/* ---------- Seções ---------- */
.secao{padding-block:var(--s6);border-top:1px solid var(--linha)}
.secao--pedra{background:var(--pedra);border-top:0}
.secao__cab{max-width:44rem;margin-bottom:var(--s4)}
.duas{display:grid;gap:var(--s4)}
@media (min-width:60em){.duas{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}.duas--centro{align-items:center}}
.figura img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--pedra)}
.figura--wide img{aspect-ratio:3/2}
.figura figcaption{font-size:.85rem;color:var(--grafite);margin-top:.6rem}

/* Lista com travessão (padrão da marca) */
.lista{list-style:none;padding:0;margin:0 0 var(--s3)}
.lista li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid var(--linha)}
.lista li::before{content:"";position:absolute;left:0;top:1.3rem;width:.9rem;height:1px;background:var(--latao)}

/* Fotos já existentes no servidor: proporção fixa, sem CLS */
.foto{width:100%;object-fit:cover;background:var(--pedra)}
.foto--43{aspect-ratio:4/3}.foto--45{aspect-ratio:4/5}.foto--32{aspect-ratio:3/2}
.figura .foto{aspect-ratio:4/3}

/* ---------- Ficha técnica: painel escuro emoldurado por madeirado real ---------- */
.ficha{padding:.7rem;border-radius:3px;background:#4a3524 url(/assets/paginas/img/textura-madeirado-escuro.webp) center/cover;max-width:26rem}
.ficha__in{background:var(--ficha);color:#e9e6e1;padding:var(--s3);border-radius:2px 2px 2rem 2px}
.ficha h3,.ficha h2{color:var(--branco);font-size:1rem;font-weight:500;margin-bottom:var(--s2)}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;font-size:.92rem}
.ficha dt{color:#a9a39b}
.ficha dd{margin:0;color:var(--branco);font-weight:400}

/* ---------- Números da operação ---------- */
.fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:0;border-top:1px solid var(--preto)}
.fatos div{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--linha)}
.fatos dt{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);font-weight:300;color:var(--preto);line-height:1.1}
.fatos dd{margin:.4rem 0 0;font-size:.95rem;color:var(--grafite);max-width:22ch}

/* ---------- Etapas (sequência real) ---------- */
.etapas{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:e}
.etapas li{counter-increment:e;display:grid;grid-template-columns:3rem 1fr;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--linha)}
.etapas li::before{content:counter(e);font-size:1.5rem;font-weight:300;color:var(--latao);line-height:1.2}
.etapas h3{margin-bottom:.35rem}
.etapas p{margin:0}
@media (min-width:60em){.etapas{grid-template-columns:repeat(4,1fr);gap:var(--s3)}.etapas li{grid-template-columns:1fr;border-top:1px solid var(--preto)}}

/* ---------- Hub de produto ---------- */
.itens{display:grid;gap:var(--s5)}
.item{display:grid;gap:var(--s3);align-items:center}
.item__media{background:var(--pedra)}
.item__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.item__media .ilustra{aspect-ratio:4/3;padding:12%}
.item h2 a{text-decoration:none}
.item h2 a:hover{text-decoration:underline}
.item__mais{font-weight:500;color:var(--preto)}
@media (min-width:60em){
  .item{grid-template-columns:5fr 6fr;gap:var(--s5)}
  .item:nth-child(even){grid-template-columns:6fr 5fr}
  .item:nth-child(even) .item__media{order:2}
}

/* ---------- Ilustrações técnicas (SVG em traço) ---------- */
.ilustra{display:flex;align-items:center;justify-content:center;background:var(--pedra);color:var(--preto)}
.ilustra svg{width:100%;height:auto;max-height:100%}
.ilustra .realce{stroke:var(--latao)}
.ilustra--quadro{aspect-ratio:1/1;padding:14%}
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mosaico .ilustra{aspect-ratio:1/1;padding:10%}
@media (max-width:59.99em){.ilustra--quadro{aspect-ratio:4/3;padding:8% 18%}}

/* Acabamentos em laca: brilho representado, não cores específicas */
.lacas{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s3);list-style:none;padding:0;margin:0}
.laca__chip{aspect-ratio:1/1;border-radius:2px;margin-bottom:.75rem}
.laca--fosco .laca__chip{background:#3d4147}
.laca--brilho .laca__chip{background:linear-gradient(135deg,#1f2a33 0%,#3a4c5c 38%,#dfe7ee 50%,#3a4c5c 62%,#1f2a33 100%)}
.laca--metal .laca__chip{background:linear-gradient(120deg,#6d6252 0%,#b9a888 30%,#efe4cc 48%,#8f8068 70%,#5d5345 100%)}

/* ---------- Layout com aside (páginas de produto) ---------- */
.com-aside{display:grid;gap:var(--s5)}
@media (min-width:60em){.com-aside{grid-template-columns:minmax(0,1fr) 16rem;gap:var(--s5)}.lateral{position:sticky;top:6rem;align-self:start}}
.lateral{border-top:1px solid var(--preto);padding-top:var(--s2);font-size:.95rem}
.lateral h2{font-size:1rem;font-weight:500;margin-bottom:var(--s1)}
.lateral ul{list-style:none;padding:0;margin:0 0 var(--s3)}
.lateral a{display:block;padding:.5rem 0;text-decoration:none;border-bottom:1px solid var(--linha)}
.lateral a[aria-current="page"]{font-weight:500;color:var(--preto);box-shadow:inset 2px 0 0 var(--latao);padding-left:.75rem}
.lateral .btn{display:flex;width:100%;justify-content:center;padding:.75rem 1rem;border:1px solid var(--preto);color:var(--branco)}
.lateral .btn:hover{color:var(--preto)}

/* ---------- FAQ ---------- */
.faq{max-width:48rem}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 2.5rem var(--s3) 0;position:relative;font-weight:500;color:var(--preto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.7rem;height:.7rem;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding-bottom:var(--s3);margin:0}

/* ---------- Faixa de chamada ---------- */
.chamada{background:var(--preto);color:#d9d6d1;padding-block:var(--s6)}
.chamada h2{color:var(--branco);max-width:24ch}
.chamada p{max-width:52ch}

/* ---------- Rodapé ---------- */
.rodape{background:var(--preto);color:#bdb9b3;font-size:.92rem;padding-block:var(--s5) var(--s3);border-top:1px solid #2a2a2a}
.rodape__grid{display:grid;gap:var(--s4)}
.rodape img{height:38px;width:auto;margin-bottom:var(--s2)}
.rodape h2{color:var(--branco);font-size:.95rem;font-weight:500;margin-bottom:var(--s1)}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{padding:.3rem 0}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--branco);text-decoration:underline}
.rodape address{font-style:normal}
.rodape__base{max-width:none;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid #2a2a2a;font-size:.82rem;color:#8a8680}
@media (min-width:60em){.rodape__grid{grid-template-columns:2fr 1fr 1fr 1fr}}


/* =========================================================
   v2 — home, landing, formulário, política, 404
   ========================================================= */
.btn--sm{min-height:40px;padding:.55rem 1rem;font-size:.88rem}
.btn--full{width:100%;justify-content:center}
.topo--min .wrap{min-height:4rem}
.selo{display:inline-block;margin:var(--s1) 0 0;padding:.5rem .9rem;border:1px solid var(--latao);font-size:.92rem}

/* Lista de links com filete (home e 404) */
.linhas{list-style:none;padding:0;margin:0 0 var(--s3);border-top:1px solid var(--preto)}
.linhas a{display:grid;gap:.15rem;padding:var(--s2) 2rem var(--s2) 0;border-bottom:1px solid var(--linha);text-decoration:none;position:relative}
.linhas a::after{content:"";position:absolute;right:.5rem;top:50%;width:.55rem;height:.55rem;border-top:1.5px solid;border-right:1.5px solid;transform:translateY(-50%) rotate(45deg)}
.linhas a:hover .linha__t{text-decoration:underline;text-decoration-color:var(--latao)}
.linha__t{font-weight:500;color:var(--preto)}
.linha__d{font-size:.92rem;color:var(--grafite)}
.erro404{min-height:60vh}
.erro404 .linhas{max-width:40rem;margin-top:var(--s4)}

/* Etapas em coluna (landing) */
.etapas--col{grid-template-columns:1fr!important;margin-top:var(--s3)}
.etapas--col li{grid-template-columns:2.5rem 1fr!important;border-top:1px solid var(--linha)!important;padding:var(--s2) 0}

/* Formulário */
.form-box{background:var(--branco);padding:clamp(1.25rem,3vw,2.25rem);border:1px solid var(--linha)}
.campo{margin-bottom:var(--s2)}
.campo label{display:block;font-weight:500;font-size:.92rem;color:var(--preto);margin-bottom:.35rem}
.campo input,.campo select{width:100%;min-height:48px;padding:.7rem .85rem;font:400 1rem/1.3 var(--f);color:var(--texto);background:var(--branco);border:1px solid #b9b6b1;border-radius:2px;appearance:none}
.campo select{background:var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.5rem}
.campo input:focus,.campo select:focus{outline:2px solid var(--latao);outline-offset:0;border-color:var(--preto)}
.campo__erro{display:none;margin:.35rem 0 0;font-size:.85rem;color:#a4251c}
.is-erro input,.is-erro select{border-color:#a4251c}
.is-erro .campo__erro,.campo__erro.is-visivel{display:block}
.campo--check{display:grid;grid-template-columns:1.25rem 1fr;gap:.6rem;align-items:start;margin:var(--s3) 0 .25rem}
.campo--check input{width:1.2rem;height:1.2rem;min-height:0;margin:.2rem 0 0;padding:0;appearance:auto;accent-color:var(--preto)}
.campo--check label{font-weight:300;font-size:.88rem;margin:0}
.form .btn{margin-top:var(--s3)}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form__status{margin:var(--s2) 0 0;font-size:.9rem;color:#a4251c;min-height:1.2em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-ok{padding:var(--s2) 0}
.form-ok h3{font-size:1.3rem}
.form-ok:focus{outline:none}

/* Política de privacidade */
@media (min-width:60em){.com-aside--esq{grid-template-columns:16rem minmax(0,1fr)}}
.pol{max-width:46rem}
.pol__sec{padding-bottom:var(--s4)}
.pol__sec h2{font-size:1.35rem;font-weight:500}
.pol__n{color:var(--latao);font-weight:400}
.pol__toc summary{cursor:pointer;font-weight:500;color:var(--preto);padding:.25rem 0 .75rem;list-style:none}
.pol__toc summary::-webkit-details-marker{display:none}
.pol__toc ol{list-style:none;padding:0;margin:0}
.pol__toc a{font-size:.9rem}
@media (min-width:60em){.pol__toc summary{pointer-events:none}}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.topo,.lateral,.chamada,.rodape{display:none}}