@font-face{font-family:'Anton';src:url('fonts/anton.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mont';src:url('fonts/montserrat.ttf') format('truetype');font-weight:400 600;font-display:swap}
@font-face{font-family:'Mont';src:url('fonts/montserrat-bold.ttf') format('truetype');font-weight:700 900;font-display:swap}

:root{
  --preto:#111; --cinza:#5F5F5F; --vermelho:#D92B22; --vermelho-vivo:#FF3131;
  --bege:#C9A78A; --bege-claro:#F5F0EA; --linha:#E7E1D9; --branco:#fff;
  --display:'Anton',Impact,sans-serif; --texto:'Mont',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--branco); color:var(--preto); text-align:center;
  font-family:var(--texto); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; margin-inline:auto}
h1,h2,h3,p{margin:0}
a{color:inherit; text-decoration:none}
ol,ul{margin:0; padding:0; list-style:none}

.topo{background:var(--preto); padding:14px 20px}
.topo__marca{display:flex; align-items:baseline; gap:10px; justify-content:center}
.topo__logo{font-family:var(--display); font-size:22px; color:var(--vermelho-vivo); letter-spacing:.02em}
.topo__sub{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.6)}

main{width:min(880px,91vw); margin-inline:auto; padding-bottom:60px}

.kicker{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--vermelho);
  font-weight:700; margin-bottom:12px}
.hero{padding:clamp(34px,5vw,56px) 0 clamp(24px,3vw,34px)}
.hero h1{font-family:var(--display); font-size:clamp(30px,5vw,52px); line-height:1.03; text-transform:uppercase}
.hero__sub{margin:16px auto 0; max-width:52ch; color:var(--cinza)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:16px; letter-spacing:.02em; text-transform:uppercase;
  padding:14px 28px; background:var(--vermelho); color:#fff; border:0; cursor:pointer;
  transition:transform .2s, background .2s; line-height:1.1;
  box-shadow:0 12px 26px -16px rgba(217,43,34,.8);
}
.btn:hover{background:var(--vermelho-vivo); transform:translateY(-2px)}
.btn--linha{background:transparent; color:var(--vermelho); box-shadow:inset 0 0 0 1.5px var(--vermelho)}
.btn--linha:hover{background:var(--vermelho); color:#fff}
.btn--pequeno{font-size:14px; padding:11px 22px}

.produtos{display:grid; gap:clamp(20px,3vw,30px)}
.produto--principal{
  display:grid; grid-template-columns:220px 1fr; gap:clamp(20px,3.4vw,38px);
  align-items:center; text-align:left;
  border:2px solid var(--vermelho); padding:clamp(20px,3vw,30px);
  background:linear-gradient(180deg, rgba(217,43,34,.05), rgba(217,43,34,.01));
}
.produto--principal img{width:100%; border:1px solid var(--linha)}
.selo{display:inline-block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; background:var(--vermelho); padding:5px 12px; margin-bottom:12px; font-weight:700}
.produto__texto h2{font-family:var(--display); font-size:clamp(22px,3vw,30px);
  text-transform:uppercase; line-height:1.06}
.produto__meta{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cinza); margin:8px 0 12px}
.produto__texto p{font-size:15px; color:var(--cinza); max-width:44ch}
.acoes{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

.grade{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,24px)}
.card{border:1px solid var(--linha); padding:24px 20px; text-align:left;
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.card:hover{border-color:var(--vermelho); transform:translateY(-3px)}
.card__num{font-family:var(--display); font-size:26px; color:var(--vermelho); margin-bottom:8px}
.card h3{font-family:var(--display); font-size:19px; text-transform:uppercase; line-height:1.12; margin-bottom:8px}
.card p{font-size:14.5px; color:var(--cinza)}
.card__meta{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bege); margin-top:12px !important}
.card .btn{margin-top:auto; align-self:flex-start; margin-top:18px}

.como{margin-top:clamp(44px,6vw,72px); padding-top:clamp(30px,4vw,44px); border-top:2px solid var(--preto)}
.como h2{font-family:var(--display); font-size:clamp(24px,3.4vw,34px); text-transform:uppercase; margin-bottom:22px}
.passos{display:grid; gap:14px; max-width:600px; margin-inline:auto; text-align:left}
.passos li{padding-left:38px; position:relative; font-size:15.5px; color:var(--cinza)}
.passos li strong{color:var(--preto)}
.passos li::before{counter-increment:p; content:counter(p); position:absolute; left:0; top:1px;
  width:24px; height:24px; border-radius:50%; background:var(--vermelho); color:#fff;
  font-family:var(--display); font-size:13px; display:grid; place-items:center}
.passos{counter-reset:p}
.como__aviso{margin-top:24px; font-size:13.5px; color:var(--cinza)}
.como__aviso strong{color:var(--vermelho)}

.rodape{margin-top:clamp(44px,6vw,72px); padding-top:24px; border-top:1px solid var(--linha);
  font-size:12px; color:var(--cinza)}
.rodape p{margin-bottom:8px}

@media (max-width:760px){
  .produto--principal{grid-template-columns:1fr; text-align:center}
  .produto--principal img{max-width:190px}
  .produto__texto p{max-width:none}
  .acoes{justify-content:center}
  .grade{grid-template-columns:1fr}
  .card{text-align:center; align-items:center}
  .card .btn{align-self:center}
  .passos li{text-align:left}
}