:root{
  --ink:#111;
  --cta:#e63946;      /* vermelho do logo para o CTA */
  --brand:#ffb800;    /* amarelo do banner */
  --line:#eaeaea;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.45}
.container{width:min(1200px,92vw);margin:auto}

/* Header */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
}
.brand .logo{
  height:52px;  /* logo maior no desktop */
  width:auto;
  display:block;
}

/* Menus + CTA encostados à direita */
.nav-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.menu{ display:flex; gap:18px; align-items:center; font-weight:600; }
.menu a{ color:var(--ink); text-decoration:none; }
.menu a:hover{ text-decoration:underline; }

.btn{ padding:10px 16px; border-radius:999px; font-weight:700; display:inline-block; text-decoration:none; }
.btn-cta{ background:var(--cta); color:#fff; }

/* Icone hambúrguer */
.hamb{ display:none; background:none; border:0; width:36px; height:36px; flex-direction:column; gap:6px; justify-content:center; }
.hamb span{ display:block; height:3px; background:#111; }

/* Menu mobile */
.mobile-menu{
  display:none; flex-direction:column; gap:12px;
  padding:16px 20px; background:#fff; border-top:1px solid var(--line);
}
.mobile-menu a{ font-weight:600; color:var(--ink); }
body.menu-open .mobile-menu{ display:flex; }

/* CTA só no desktop */
.cta-desktop{ display:inline-block; }

@media (max-width:900px){
  .menu{ display:none; }
  .cta-desktop{ display:none; }  /* CTA some no mobile */
  .hamb{ display:flex; }
  .brand .logo{ height:40px; }   /* logo menor no mobile */
}

/* Banner */
.hero{ background:var(--brand); padding:60px 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.hero-text h1{ font-size:42px; margin-bottom:12px; }
.hero-text .highlight{ text-decoration:underline; }
.hero-text p{ margin-bottom:20px; font-size:18px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-fill{ background:#111; color:#fff; }
.btn-ghost{ border:2px solid #111; color:#111; }

/* Card com logo no banner */
.card{
  background:#fff; padding:20px; border-radius:16px;
  box-shadow:4px 4px 0 #111; display:flex; align-items:center; justify-content:center; min-height:120px;
}
.card img{ max-width:180px; height:auto; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-text h1{ font-size:32px; }
  .card img{ max-width:120px; }
}