@font-face{font-family:Manrope;src:url(../assets/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--preto:#000;--grafite:#1A1A1A;--off:#F5F5F5;--apoio:#BDBDBD;--recuado:#7A7A7A;--vermelho:#FF0000;--chapado:#D10000}
*{box-sizing:border-box;margin:0}
html{background:var(--preto);color:var(--apoio);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
body{min-height:100vh}
.wrap{width:min(100% - 2.5rem,46rem);margin-inline:auto}
.pular{position:absolute;left:-999px;top:0;background:var(--off);color:var(--preto);padding:.6rem 1rem;z-index:10}
.pular:focus{left:0}
.rascunho{background:var(--grafite);color:var(--off);font:600 .7rem/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.7rem 1rem}
.banner{background:var(--preto)}
.banner img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;object-position:60% 50%}
h1,h2,h3{font-family:Manrope,sans-serif;color:var(--off);font-weight:300}
h1{font-size:clamp(1.9rem,6.4vw,3.3rem);line-height:1.12;letter-spacing:.01em;margin:.9rem 0 1.4rem}
h2{font-size:clamp(1.5rem,4.6vw,2.2rem);line-height:1.18;margin:.7rem 0 1.2rem}
h3{font-size:1.08rem;font-weight:400;line-height:1.3}
.etq{font:600 .72rem/1.4 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--apoio)}
.centro{text-align:center}
.topo{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(3rem,8vw,5rem)}
.lead{font-size:1.1rem;color:var(--off);max-width:38rem;margin-bottom:2rem}
.botao{display:inline-block;background:var(--off);color:var(--preto);font:600 .8rem/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:1.1rem 2rem;border-radius:999px;text-decoration:none;min-height:44px}
.botao:hover{background:#fff}
a:focus-visible,.botao:focus-visible{outline:2px solid var(--off);outline-offset:4px}
.faixa{border-block:1px solid var(--grafite);padding:2rem 0}
.numeros{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem;margin-top:1.4rem;text-align:center}
.val{display:block;font:300 1.1rem/1.2 Manrope,sans-serif;color:var(--off)}
.rot{display:block;margin-top:.4rem;font-size:.82rem;line-height:1.35}
.bloco{padding:clamp(3rem,8vw,5rem) 0;border-bottom:1px solid var(--grafite)}
.bloco>p+p{margin-top:1rem}
.grade,.fora ul{list-style:none;padding:0;display:grid;gap:.7rem;margin:1.8rem 0}
.grade li,.fora li{background:var(--grafite);padding:.9rem 1.1rem;font-size:.95rem;color:var(--off)}
.fecho{color:var(--off);margin-top:1.8rem}
.diagrama{display:grid;grid-template-columns:1fr;gap:.6rem;align-items:center;margin:2.2rem 0 1rem;text-align:center}
.caixa{border:1px solid var(--recuado);padding:1.2rem 1rem;font:400 1rem/1.3 Manrope,sans-serif;color:var(--off)}
.seta{justify-self:center;width:1px;height:1.6rem;background:var(--recuado)}
.legenda{font-size:.88rem;text-align:center}
.etapas,.passos{list-style:none;padding:0;counter-reset:n;margin-top:1.8rem}
.etapas li,.passos li{counter-increment:n;display:grid;grid-template-columns:2.4rem 1fr;gap:0 .6rem;padding:1.2rem 0;border-top:1px solid var(--grafite)}
.etapas li::before,.passos li::before{content:counter(n);grid-row:span 2;font:300 1.3rem/1.2 Manrope,sans-serif;color:var(--apoio)}
.etapas p,.passos p{font-size:.95rem;margin-top:.3rem}
.fora{margin-top:2rem;border-left:2px solid var(--recuado);padding-left:1.1rem}
.fora h3{margin-bottom:.4rem}
.preco .grande{font:300 clamp(1.6rem,8vw,3rem)/1.1 Manrope,sans-serif;color:var(--off);text-align:center;margin:1.4rem 0}
.cond{font-size:.92rem;margin-top:.4rem}
.final{padding:clamp(3rem,8vw,5rem) 0;text-align:center}
.final .botao{margin-top:1.6rem}
.ps{padding-bottom:3rem;font-size:.92rem}
.ps a{color:var(--off);text-underline-offset:3px}
.rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding:2rem 0 3rem;border-top:1px solid var(--grafite);font:400 .75rem/1.4 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ph{display:inline-block;border:1px dashed var(--recuado);background:var(--grafite);color:var(--off);padding:0 .45em;font-size:.9em;letter-spacing:0;text-transform:none;font-family:Inter,sans-serif}
.corte{position:relative;display:inline-block;white-space:nowrap}
.corte::after{content:"";position:absolute;left:-3%;right:-6%;top:52%;height:.16em;background:url(../assets/risco.svg) center/100% 100% no-repeat}
@media(min-width:720px){
  .numeros{grid-template-columns:repeat(4,1fr)}
  .grade,.fora ul{grid-template-columns:1fr 1fr}
  .diagrama{grid-template-columns:1fr auto 1fr auto 1fr}
  .seta{width:2.2rem;height:1px}
  .banner img{aspect-ratio:21/8}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* catálogo (produtos.html) */
.voltar{display:block;padding:1.4rem 0 0;font:600 .72rem/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--apoio);text-decoration:none}
.voltar:hover,.discreto:hover{color:var(--off)}
.discreto{color:inherit;text-decoration:none}
.cab{text-align:center;padding:clamp(2.5rem,7vw,4.5rem) 0 1rem}
.cab .lead{margin-inline:auto;margin-bottom:0;color:var(--apoio)}
.nivel{padding:clamp(2.2rem,6vw,3.5rem) 0}
.nivel h2{margin:.5rem 0 .6rem}
.nivel>p:not(.etq){max-width:36rem}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.8rem}
.card{position:relative;background:var(--grafite);border:1px solid #262626;border-radius:1rem;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;text-align:center;align-items:center}
.card h3{font-size:1.35rem;font-weight:300}
.card .nome,.card .promessa{font-size:.95rem}
.card .nome{color:var(--off)}
.card .valor{font:300 1.9rem/1.2 Manrope,sans-serif;color:var(--off);margin-top:.4rem}
.card .cond{font-size:.8rem;margin:0;color:var(--recuado)}
.card .botao{margin-top:auto;width:100%;text-align:center}
.card .botao{margin-top:.6rem}
.selo{align-self:center;font:600 .66rem/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--off);border:1px solid var(--recuado);border-radius:999px;padding:.4rem .8rem}
.card.largo{text-align:left;align-items:flex-start}
.card.largo .botao{width:auto}
.encerra{padding:clamp(2.5rem,7vw,4rem) 0 3rem;text-align:center;color:var(--apoio);font-size:.95rem}
@media(min-width:720px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(15rem,20rem));justify-content:start}
  .card.largo{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem 2rem}
  .card.largo .corpo{flex:1 1 20rem;display:flex;flex-direction:column;gap:.7rem}
  .card.largo .botao{margin-top:0}
}
