:root{
  --red:#e3132a;
  --beige:#d5b572;
  --darkbeige:#523d0f;
  --bg:#000;
  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --radius:18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--text);
}

a {
  color: var(--beige);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* HERO */
.hero{
  position:relative;
  min-height:65vh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
}

.heroBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.heroContent{
  position:relative;
  width:min(520px,92vw);
  text-align:center;
  padding-bottom:30px;
}

.logo{
  width:80px;
  height:80px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  margin:0 auto 10px;
  display:block;
}
.logo.is-hidden{ display:none; }

.heroTitle{
  font-weight:900;
  font-size:clamp(28px,8vw,52px);
  line-height:1;
  margin:0;
}
.heroTitle span{
  font-size:clamp(36px,10vw,68px);
}

.heroSub{
  font-weight:800;
  margin:10px 0;
  font-size:14px;
}

.heroSteps{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:13px;
  margin-bottom:18px;
}
.heroSteps i{
  width:5px;
  height:5px;
  background:var(--beige);
  border-radius:50%;
}

.heroBtn{
  background:var(--beige);
  border:none;
  color:var(--darkbeige);
  font-weight:900;
  padding:12px 18px;
  border-radius:10px;
  cursor:pointer;
}

/* TÍTULO */
.sectionTitle{
  text-align:center;
  padding:30px 10px 10px;
}
.sectionTitle h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}
.sectionTitle h3{
  margin:6px 0 0;
  font-size:22px;
  font-weight:800;
}

/* CARDS */
.cards{
  display:flex;
  justify-content:center;
  padding:20px 0 40px;
}

.cardsWrap{
  width:min(1140px,96vw);
  display:grid;
  gap:16px;
  padding:0 12px;
  grid-template-columns:1fr;
}

@media(min-width:640px){
  .cardsWrap{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .cardsWrap{ grid-template-columns:repeat(3,1fr); }
}

.cardLink{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  transition:transform .3s ease, filter .3s ease;
}
.cardLink:hover{
  transform:scale(1.03);
  filter:brightness(1.05);
}

.cardImg{
  width:100%;
  display:block;
  border-radius:var(--radius);
}

/* =========================================================
   RODAPÉ BANNER (como na foto)
   ========================================================= */

.ctaFooter{
  position:relative;
  width:100%;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* imagem de fundo */
.ctaBg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: contrast(1.05) saturate(1.05);
}

/* “faixa/gradiente” avermelhado (efeito da imagem) */
.ctaOverlay{
  position:absolute;
  inset:0;
  /* background:
    linear-gradient(to right,
      rgba(227,19,42,.88) 0%,
      rgba(227,19,42,.35) 35%,
      rgba(0,0,0,.15) 50%,
      rgba(227,19,42,.30) 70%,
      rgba(227,19,42,.70) 100%
    ); */
    background:
    linear-gradient(to right, 
    rgb(154 117 45) 0%, 
    rgb(59 48 22) 35%, 
    rgb(22 18 9) 50%, 
    rgb(91 62 34) 70%, 
    rgb(154 120 39) 100%);
  mix-blend-mode: screen;
  opacity: .85;
}

/* container central dos textos */
.ctaInner{
  position:relative;
  width:min(1100px, 92vw);
  text-align:center;
  padding: 28px 14px;
}

.ctaKicker{
  font-size: 14px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 10px;
}

/* título grande */
.ctaTitle{
  font-weight: 900;
  /* font-size: clamp(38px, 6vw, 78px); */
  font-size: clamp(18px, 6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* tarja branca só atrás de 1 palavra (igual ao “Inicie”) */
.ctaTitle .hl{
  position:relative;
  display:inline-block;
  padding: .06em .22em .08em;
  margin-right: .10em;
  color: var(--beige);
  border: solid #d5b572 1px;
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(0,0,0,.3);
}

.ctaTitle .hl::before{
  content:"";
  position:absolute;
  inset: 58% -6% 8% -6%;
  background:#fff;
  border-radius: 2px;
  z-index:-1;
}


/* cor do restante do título (vermelho forte, como na foto) */
.ctaTitle .red{
  color: var(--red);
}

/* cor do restante do título (vermelho forte, como na foto) */
.ctaTitle .red{
  color: var(--darkbeige);
}

/* LEGAL */
.legal{
  text-align:center;
  padding: 18px 12px 26px;
  background:#000;
  color: rgba(255,255,255,.35);
  font-size: 12px;
}