/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1565C0; --blue-dark:#0f4a94;
  --bg:#0f172a; --text:#222; --muted:#505e73;
  --card:rgba(15,23,42,.04); --stroke:rgba(15,23,42,.08);
  --whats:#25D366; --whats-dark:#1ebe5d;
}
html,body{height:100%}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:#fff; color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ===== Header ===== */
.topbar {
  background: #0048b6; /* cor azul escuro */
  border-bottom: 1px solid #ccc; /* pode ajustar ou tirar */
}
.topbar .container{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo{height:64px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:900;font-size:24px;letter-spacing:.5px;color:#fff}
.brand-slogan{font-size:13px;color:#e6eefc}
.menu-toggle{display:none;font-size:22px;background:transparent;border:0;color:#fff;cursor:pointer}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:#e8eef9;text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{color:#fff}

/* ===== Hero (branco) ===== */
.hero{background:#fff;padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(34px,6vw,60px);color:#0e0882;letter-spacing:-.5px;margin-bottom:8px}
.hero p{color:#3b475a;font-size:18px;margin-bottom:18px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bullets{display:flex;gap:14px;flex-wrap:wrap;list-style:none;color:#3b475a}
.bullets li{padding-left:10px;border-left:3px solid var(--blue)}
.mockup img {
  max-width: 300px; /* ajusta o tamanho máximo */
  width: 100%;      /* faz a logo se adaptar */
  height: auto;     /* mantém proporção */
  display: block;
  margin: 0 auto;   /* centraliza */
}
/* Buttons */
.btn{padding:12px 18px;border-radius:10px;font-size:16px;text-decoration:none;display:inline-block}
.btn-outline{border:1px solid #3b475a;color:#3b475a;background:transparent}
.btn-outline:hover{background:#f3f6fb}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.22)}
.btn-whats{background:var(--whats);color:#fff;border:1px solid var(--whats)}
.btn-whats:hover{background:var(--whats-dark);border-color:var(--whats-dark)}

/* ===== Sections ===== */
.section{padding:44px 0}
.section.alt{background:#f7f9fd}

/* Cards serviços */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card .ico {
  margin-bottom: 12px;
}

.card .ico img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 8px;
  background: #f9f9f9;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

.card p {
  font-size: 14px;
  color: #555;
}

/* Marcas */
/* Marcas */
.brands {
  text-align: center;
  margin: 40px 0;
}

.brands h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #0f172a;
}

.brands ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.brands li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background: #f9f9f9;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  transition: transform 0.2s ease;
}

.brands li:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.brands img {
  width: 22px;
  height: auto;
  object-fit: contain;
}

/* Depoimentos */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.t-card{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.t-card blockquote{color:#0f172a;font-size:15.5px;margin-bottom:8px}
.t-card figcaption{color:#6c7b91;font-size:14px}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700;color:#0f172a}
.faq p{color:#42516a;margin-top:8px}

/* Contato */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:12px}
.contact-form label{display:block;margin-bottom:12px;color:#2b3a56;font-size:14px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #cfd8ea;background:#fff;color:#1b2435;margin-top:6px}
.form-actions{display:flex;gap:10px;margin-top:8px;align-items:center}
.contact-info p{color:#3b475a;margin-bottom:8px}

/* CTA Sticky */
.cta-sticky{position:sticky;bottom:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(6px);border-top:1px solid #e7eefc;padding:10px 0;display:none}
.cta-sticky .btn{width:100%;text-align:center}

/* Whats FAB */
.whats-fab{position:fixed;right:18px;bottom:18px;background:var(--whats);color:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;box-shadow:0 10px 24px rgba(37,211,102,.4)}

/* Footer */
.footer{border-top:1px solid #e7eefc;background:#f7f9fd;padding:18px 0}
.footer small{color:#546784}

/* ===== Responsive ===== */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:78px;left:0;right:0;background:var(--blue);border-bottom:1px solid var(--blue-dark);display:none;flex-direction:column;gap:12px;padding:12px 16px 16px;z-index:40}
  .nav.open{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .mockup{height:180px;margin-top:8px}
  .cards{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .cta-sticky{display:block}
}