/* ==========================================================================
   BSS Corretora — design system
   ========================================================================== */

:root{
  --verde-900:#0A3A66;
  --verde-800:#0F5EA8;
  --verde-700:#1573C7;
  --verde-600:#2794E0;
  --verde-500:#4FB0F5;
  --verde-100:#E3F0FC;
  --verde-50:#F3F8FE;

  --tinta-900:#0E1B16;
  --tinta-700:#33463F;
  --tinta-500:#5B6E67;
  --tinta-300:#8FA39C;

  --branco:#FFFFFF;
  --borda:#E3EFEA;

  --whatsapp:#25D366;

  --fonte-titulo:'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto:'Inter', 'Segoe UI', system-ui, sans-serif;

  --raio:14px;
  --raio-lg:24px;
  --sombra:0 12px 32px rgba(11,74,56,.10);
  --sombra-sm:0 4px 14px rgba(11,74,56,.08);

  --largura-max:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:112px; }
body{
  margin:0;
  font-family:var(--fonte-texto);
  color:var(--tinta-900);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--fonte-titulo);
  color:var(--tinta-900);
  margin:0 0 .6em;
  line-height:1.18;
  font-weight:600;
}
p{ margin:0 0 1em; color:var(--tinta-700); }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--largura-max);
  margin:0 auto;
  padding:0 24px;
}

.secao{ padding:96px 0; }
.secao--alt{ background:var(--verde-50); }
.secao__topo{ max-width:680px; margin:0 0 48px; }
.secao__topo.centro{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--verde-700);
  background:var(--verde-100);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.titulo-secao{ font-size:clamp(1.7rem,3vw,2.35rem); }
.subtitulo-secao{ font-size:1.05rem; color:var(--tinta-500); }

/* -------------------------------------------------- Botões -------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primario{
  background:var(--verde-700);
  color:var(--branco);
  box-shadow:var(--sombra-sm);
}
.btn--primario:hover{ background:var(--verde-800); box-shadow:var(--sombra); }
.btn--whatsapp{ background:var(--whatsapp); color:var(--branco); }
.btn--whatsapp:hover{ background:#1fb958; }
.btn--fantasma{
  background:transparent;
  border-color:var(--borda);
  color:var(--tinta-900);
}
.btn--fantasma:hover{ border-color:var(--verde-700); color:var(--verde-800); }
.btn--branco{ background:var(--branco); color:var(--verde-800); }
.btn--branco:hover{ background:var(--verde-50); }
.btn--bloco{ width:100%; }
.btn svg{ width:18px; height:18px; flex:none; }

.cta-secao{
  margin-top:36px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.cta-secao.centro{ justify-content:center; }

/* -------------------------------------------------- Logo -------------------------------------------------- */
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.logo__marca{
  width:38px;
  aspect-ratio:1536/455;
  background-color:var(--verde-800);
  -webkit-mask:url('../img/logo-bss.png') no-repeat center / contain;
          mask:url('../img/logo-bss.png') no-repeat center / contain;
  flex:none;
}
.logo--claro .logo__marca{ background-color:var(--branco); }
.logo--somente-icone .logo__marca{ width:250px; }
.logo__texto{ display:flex; flex-direction:column; line-height:1.1; }
.logo__texto strong{
  font-family:var(--fonte-titulo);
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--tinta-900);
}
.logo__texto span{
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-500);
}
.logo--claro .logo__texto strong{ color:var(--branco); }
.logo--claro .logo__texto span{ color:rgba(255,255,255,.7); }

/* -------------------------------------------------- Header -------------------------------------------------- */
.cabecalho{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}
.cabecalho__linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0;
}
.nav-principal{ display:flex; align-items:center; gap:6px; }
.nav-principal a{
  padding:10px 14px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:500;
  color:var(--tinta-700);
  transition:background .15s ease, color .15s ease;
}
.nav-principal a:hover,
.nav-principal a.ativo{ background:var(--verde-100); color:var(--verde-800); }
.cabecalho__acoes{ display:flex; align-items:center; gap:10px; }

.menu-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--borda);
  background:var(--branco);
  align-items:center;
  justify-content:center;
  flex:none;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  content:'';
  display:block;
  width:20px; height:2px;
  background:var(--tinta-900);
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }
.menu-toggle.aberto span{ background:transparent; }
.menu-toggle.aberto span::before{ top:0; transform:rotate(45deg); }
.menu-toggle.aberto span::after{ top:0; transform:rotate(-45deg); }

/* -------------------------------------------------- Hero -------------------------------------------------- */
.hero{
  position:relative;
  padding:76px 0 96px;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(65% 60% at 90% -8%, rgba(120,190,255,.45) 0%, rgba(120,190,255,0) 60%),
    radial-gradient(55% 55% at 4% 108%, rgba(21,115,199,.55) 0%, rgba(21,115,199,0) 60%),
    linear-gradient(135deg, var(--verde-900) 0%, var(--verde-800) 45%, var(--verde-600) 100%);
  z-index:-1;
}
.hero__grade{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero .eyebrow{
  background:rgba(255,255,255,.14);
  color:var(--branco);
}
.hero__titulo{ font-size:clamp(2.1rem,4vw,3.1rem); color:var(--branco); }
.hero__titulo em{
  font-style:normal;
  color:var(--verde-100);
}
.hero__texto{ font-size:1.08rem; max-width:52ch; color:rgba(255,255,255,.82); }
.hero__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.hero .btn--fantasma{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.4);
  color:var(--branco);
}
.hero .btn--fantasma:hover{ background:rgba(255,255,255,.18); border-color:var(--branco); color:var(--branco); }
.hero__selos{
  display:flex;
  gap:28px;
  margin-top:44px;
  flex-wrap:wrap;
}
.hero__selo{ display:flex; flex-direction:column; }
.hero__selo strong{ font-family:var(--fonte-titulo); font-size:1.5rem; color:var(--branco); }
.hero__selo span{ font-size:.85rem; color:rgba(255,255,255,.68); }

.hero__figura{ position:relative; }
.hero__foto{
  border-radius:var(--raio-lg);
  overflow:hidden;
  box-shadow:var(--sombra);
  aspect-ratio:4/5;
}
.hero__foto img{ width:100%; height:100%; object-fit:cover; }
.hero__flutuante{
  position:absolute;
  left:-24px;
  bottom:32px;
  background:var(--branco);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:250px;
}
.hero__flutuante .icone-check{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--verde-100);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.hero__flutuante .icone-check svg{ width:20px; height:20px; color:var(--verde-700); }
.hero__flutuante strong{ display:block; font-size:.9rem; }
.hero__flutuante span{ font-size:.78rem; color:var(--tinta-500); }

/* -------------------------------------------------- Lista de check -------------------------------------------------- */
.lista-check{ display:grid; gap:14px; }
.lista-check li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.98rem;
  color:var(--tinta-700);
}
.lista-check li svg{
  width:20px; height:20px;
  flex:none;
  color:var(--verde-700);
  margin-top:1px;
}

/* -------------------------------------------------- Sobre -------------------------------------------------- */
.sobre__grade{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:64px;
  align-items:start;
}
.sobre__lista{ margin-top:28px; grid-template-columns:1fr 1fr; display:grid; gap:16px 24px; }

.cartao-responsavel{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border-radius:var(--raio);
  background:var(--verde-50);
  border:1px solid var(--borda);
}
.cartao-responsavel img{
  width:56px; height:56px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.cartao-responsavel strong{ display:block; font-size:1rem; color:var(--tinta-900); }
.cartao-responsavel span{ font-size:.88rem; color:var(--tinta-500); }

/* -------------------------------------------------- Parceiros -------------------------------------------------- */
.parceiros__grupos{ display:grid; gap:36px; }
.parceiros__grupo h3{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--verde-700);
  margin-bottom:16px;
}
.parceiros__pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  padding:10px 18px;
  border:1px solid var(--borda);
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  color:var(--tinta-700);
  background:var(--branco);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.pill:hover{ border-color:var(--verde-600); color:var(--verde-800); transform:translateY(-2px); }

/* -------------------------------------------------- Blocos produto (imagem + texto) -------------------------------------------------- */
.produto{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.produto--invertido .produto__midia{ order:2; }
.produto--invertido .produto__conteudo{ order:1; }
.produto__midia{ position:relative; }
.produto__foto{
  border-radius:var(--raio-lg);
  overflow:hidden;
  box-shadow:var(--sombra);
  aspect-ratio:5/4;
}
.produto__foto img{ width:100%; height:100%; object-fit:cover; }
.produto__lista{ margin:28px 0 32px; grid-template-columns:1fr 1fr; display:grid; gap:14px 20px; }

/* -------------------------------------------------- Diferencial -------------------------------------------------- */
.diferencial__grade{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.diferencial__card{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-lg);
  padding:28px 22px;
  text-align:left;
}
.diferencial__card .icone-check{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--verde-100);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.diferencial__card .icone-check svg{ width:22px; height:22px; color:var(--verde-700); }
.diferencial__card p{
  font-size:.94rem;
  color:var(--tinta-700);
  margin:0;
  font-weight:500;
}

/* -------------------------------------------------- Faixa CTA -------------------------------------------------- */
.faixa-cta{
  background:linear-gradient(120deg,var(--verde-800),var(--verde-600));
  border-radius:var(--raio-lg);
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  color:var(--branco);
}
.faixa-cta h2, .faixa-cta p{ color:var(--branco); }
.faixa-cta h2{ margin-bottom:.35em; }
.faixa-cta p{ margin:0; color:rgba(255,255,255,.85); max-width:46ch; }
.faixa-cta__acoes{ display:flex; gap:14px; flex-wrap:wrap; }

/* -------------------------------------------------- Rodapé -------------------------------------------------- */
.rodape{
  background:var(--tinta-900);
  color:rgba(255,255,255,.82);
  padding:80px 0 28px;
}
.rodape__topo{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.rodape__titulo{ color:var(--branco); font-size:clamp(1.6rem,3vw,2.1rem); }
.rodape__texto{ color:rgba(255,255,255,.72); max-width:44ch; }
.rodape__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.rodape__contatos{ display:grid; gap:18px; margin-top:8px; }
.rodape__contato{ display:flex; align-items:flex-start; gap:14px; }
.rodape__contato .icone-check{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.rodape__contato .icone-check svg{ width:19px; height:19px; color:var(--verde-500); }
.avatar-brayan{
  width:40px; height:40px;
  border-radius:50%;
  flex:none;
  position:relative;
  overflow:visible;
}
.avatar-brayan img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.avatar-brayan::after{
  content:'';
  position:absolute;
  right:-1px; bottom:-1px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--whatsapp);
  border:2px solid var(--tinta-900);
}
.rodape__contato strong{ display:block; color:var(--branco); font-size:.95rem; }
.rodape__contato span{ font-size:.88rem; color:rgba(255,255,255,.65); }

.form-cotacao{
  background:var(--branco);
  border-radius:var(--raio-lg);
  padding:32px;
  box-shadow:var(--sombra);
}
.form-cotacao h3{ font-size:1.2rem; }
.form-cotacao p{ font-size:.9rem; }
.campo{ margin-bottom:16px; }
.campo label{
  display:block;
  font-size:.84rem;
  font-weight:600;
  color:var(--tinta-700);
  margin-bottom:6px;
}
.campo input,
.campo select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--borda);
  font-family:inherit;
  font-size:.95rem;
  color:var(--tinta-900);
  background:var(--verde-50);
  transition:border-color .15s ease, background .15s ease;
}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--verde-600);
  background:var(--branco);
}
.campo-linha{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.rodape__base{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-top:28px;
  font-size:.84rem;
  color:rgba(255,255,255,.55);
}
.rodape__redes{ display:flex; gap:10px; }
.rodape__redes a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.rodape__redes a:hover{ background:var(--verde-700); border-color:var(--verde-700); }
.rodape__redes svg{ width:16px; height:16px; }

/* -------------------------------------------------- WhatsApp flutuante -------------------------------------------------- */
.whats-flutuante{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--whatsapp);
  color:var(--branco);
  padding:14px 20px 14px 14px;
  border-radius:999px;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  font-weight:600;
  font-size:.92rem;
  animation:pulso-whats 2.6s ease-in-out infinite;
}
.whats-flutuante svg{ width:26px; height:26px; }
@keyframes pulso-whats{
  0%,100%{ box-shadow:0 10px 26px rgba(37,211,102,.4); }
  50%{ box-shadow:0 10px 30px rgba(37,211,102,.65); }
}

/* -------------------------------------------------- Responsivo -------------------------------------------------- */
@media (max-width:980px){
  .nav-principal{ display:none; }
  .menu-toggle{ display:flex; }
  .cabecalho__acoes .btn span{ display:none; }

  .hero__grade{ grid-template-columns:1fr; }
  .hero__figura{ order:-1; }
  .hero__flutuante{ left:16px; }

  .sobre__grade{ grid-template-columns:1fr; gap:40px; }
  .sobre__lista{ grid-template-columns:1fr; }

  .produto,
  .produto--invertido .produto__midia,
  .produto--invertido .produto__conteudo{ order:initial; }
  .produto{ grid-template-columns:1fr; gap:36px; }
  .produto__lista{ grid-template-columns:1fr; }

  .diferencial__grade{ grid-template-columns:repeat(2,1fr); }

  .rodape__topo{ grid-template-columns:1fr; gap:48px; }

  .faixa-cta{ padding:40px 28px; text-align:center; justify-content:center; }
  .faixa-cta__acoes{ justify-content:center; }
}

@media (max-width:640px){
  .secao{ padding:64px 0; }
  .hero{ padding:44px 0 64px; }
  .hero__selos{ gap:20px; }
  .diferencial__grade{ grid-template-columns:1fr; }
  .campo-linha{ grid-template-columns:1fr; }
  .whats-flutuante span{ display:none; }
  .whats-flutuante{ padding:14px; }
  .form-cotacao{ padding:24px; }
  .rodape__base{ flex-direction:column; align-items:flex-start; }
}

/* -------------------------------------------------- Menu mobile -------------------------------------------------- */
.nav-mobile{
  display:none;
  position:fixed;
  inset:76px 0 0 0;
  background:var(--branco);
  z-index:55;
  padding:24px;
  overflow-y:auto;
}
.nav-mobile.aberto{ display:block; }
.nav-mobile a{
  display:block;
  padding:16px 4px;
  font-size:1.15rem;
  font-weight:600;
  border-bottom:1px solid var(--borda);
  color:var(--tinta-900);
}
.nav-mobile a.ativo{ color:var(--verde-800); }
.nav-mobile .btn{ margin-top:24px; }