@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* ===========================================================
   Design Memorável: visual renovado, no estilo do catálogo
   Poppins em tudo, títulos leves com barra dourada, rótulos
   espaçados, painéis cinza claro e um brilho dourado suave
   nos cantos das seções. Carregado depois dos estilos do site.
   =========================================================== */
:root{
  --fonte:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --fonte-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --cor-texto:#0E1018;
  --cor-texto-suave:#5C5E6D;
  --cor-primaria:#0E1018;
  --cor-fundo-alt:#F6F6F4;
  --cor-borda:#E8E8E3;
  --cor-destaque:#FFD00B;
  --cor-destaque-clara:#FFE066;
  --cor-destaque-escuro:#9A7A00;
  --radius:10px;
  --sombra:0 14px 34px rgba(14,16,24,.08);
  --brilho:rgba(255,208,11,.20);
}

body{font-family:var(--fonte);color:var(--cor-texto);letter-spacing:0}
p{color:var(--cor-texto-suave)}
.lead{font-weight:300;color:var(--cor-texto-suave)}
strong,b{font-weight:600}

/* ---------- títulos ---------- */
h1,h2,h3,h4{font-family:var(--fonte-display);color:var(--cor-texto);letter-spacing:-.01em}
h1{font-weight:600;line-height:1.1}
h2{font-weight:300;line-height:1.18}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.7rem)}
.secao-titulo h2,.sobre-grid h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
h3{font-weight:600}

/* barra dourada curta embaixo dos títulos de seção, como no catálogo */
.secao-titulo h2::after,
.secao-titulo h3::after,
.sobre-grid h2::after,
.hero h1::after,
.dm-capa h1::after{
  content:"";display:block;width:46px;height:5px;margin-top:18px;background:var(--cor-destaque);border-radius:1px
}
.secao-centro h2::after,.secao-centro h3::after{margin-left:auto;margin-right:auto}

/* rótulo pequeno, espaçado e escuro */
.eyebrow{
  font-family:var(--fonte);font-size:.68rem;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cor-texto)
}
.eyebrow::before,.eyebrow-traco::before{background:var(--cor-destaque) !important}

/* ---------- botões ---------- */
.btn{border-radius:8px;font-family:var(--fonte);font-weight:600;letter-spacing:.01em}
.btn-primario{background:var(--cor-primaria);color:#fff}
.btn-primario:hover{background:var(--cor-destaque);color:var(--cor-primaria)}
.btn-secundario{border-color:var(--cor-borda);color:var(--cor-primaria);background:#fff}
.btn-secundario:hover{border-color:var(--cor-destaque);background:#FFF9E0}

/* ---------- fundos com brilho dourado suave ---------- */
section.hero{
  background:
    radial-gradient(640px 460px at 100% 0%, var(--brilho), rgba(255,208,11,0) 70%),
    radial-gradient(420px 320px at 0% 100%, rgba(255,208,11,.07), rgba(255,208,11,0) 70%),
    #fff
}
section.bg-alt{
  background:
    radial-gradient(560px 380px at 0% 0%, rgba(255,208,11,.13), rgba(255,208,11,0) 70%),
    var(--cor-fundo-alt)
}
section:not(.bg-alt):not(.hero):not(.dm-capa){
  background:
    radial-gradient(520px 360px at 100% 0%, rgba(255,208,11,.10), rgba(255,208,11,0) 70%),
    #fff
}
.dm-capa{
  background:
    radial-gradient(640px 420px at 100% 0%, var(--brilho), rgba(255,208,11,0) 70%),
    var(--cor-fundo-alt)
}

/* ---------- cartões ---------- */
.produto-card,.passo-card,.destaque-card,.depoimento-card{
  border-radius:var(--radius);border:1px solid var(--cor-borda);background:#fff;box-shadow:none
}
.produto-card:hover,.passo-card:hover,.destaque-card:hover{box-shadow:var(--sombra)}
.produto-foto{background:var(--cor-fundo-alt)}
.produto-info h3{text-transform:uppercase;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.hero-visual,.sobre-visual{border-radius:14px}

/* número em quadrado dourado, como nos passos do catálogo */
.passo-numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:4px;background:var(--cor-destaque);
  color:var(--cor-texto) !important;font-family:var(--fonte);font-weight:700;font-size:.95rem;line-height:1;
  -webkit-text-fill-color:currentColor;opacity:1
}
.passo-card h3,.destaque-card h3{font-size:1.02rem}
.depoimento-estrelas{color:var(--cor-destaque)}

/* catálogo com busca */
.cb-conteudo>.secao-titulo h3{font-weight:300}
.cb-card{border-radius:var(--radius)}
.cb-info h5{font-family:var(--fonte)}

/* ---------- topo e rodapé ---------- */
header{border-bottom:1px solid var(--cor-borda)}
.nav-links a{font-family:var(--fonte);font-weight:500}
footer{box-shadow:inset 0 -6px 0 var(--cor-destaque)}

/* ===========================================================
   Celular: cabeçalho compacto, margens laterais e respiros menores
   =========================================================== */
@media (max-width:860px){
  header .container.nav{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:10px 12px;padding:10px 16px
  }
  header .logo,header .logo img{height:38px !important;width:auto !important}
  header .nav-cta{display:contents}
  header .nav-cta .btn{grid-column:2;grid-row:1;justify-self:end;padding:9px 14px;font-size:.8rem;white-space:nowrap}
  header .menu-toggle{grid-column:3;grid-row:1}
  header .busca-produto{grid-column:1/-1;grid-row:2;width:100%;max-width:none}
  header .busca-caixa{padding:8px 16px}
  header .busca-produto input{font-size:.9rem}
  .container{padding-left:18px;padding-right:18px}

  section{padding-top:56px !important;padding-bottom:56px !important}
  section.hero{padding-top:20px !important;padding-bottom:44px !important}
  .hero-grid{gap:28px}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  .secao-titulo h2,.sobre-grid h2{font-size:clamp(1.55rem,6.6vw,2rem)}
  .eyebrow{letter-spacing:.22em;font-size:.64rem}
  .hero .btn{flex:1 1 auto;justify-content:center}

  /* catálogo: a coluna não pode crescer além da tela */
  .cb-corpo{grid-template-columns:minmax(0,1fr) !important}
  .cb-conteudo,.cb-lateral{min-width:0}
  .cb-conteudo>.secao-titulo h3{font-size:1.6rem}
}