:root{
  --navy:#001f3f;
  --royal:#00a2ff;
  --royal-dark:#0077cc;
  --bg:#f8f9fc;
  --text:#333;
  --muted:#050109;
  --card:#fff;
  --ring:#e6eef9;
  --danger:#b00020;
  --ok:#145a2a;
  --ok-bg:#e6fff1;
  --ok-br:#b7efcd;

/* ===== Layout do herói em 2 colunas ===== */
.hero{
  display: grid;
  grid-template-columns: minmax(0,1fr) 520px; /* texto à esquerda | imagem à direita */
  gap: 32px;
  align-items: start; /* alinha pelo topo */
}

/* Coluna esquerda vira uma coluna flex para empilhar CTA + card */
.hero-left{
  display: flex;
  flex-direction: column;
}

/* Mantém o card perto do botão e visual limpo */
.cta{ margin-bottom: 8px; }

/* ===== Card do Blog ===== */
.hero-blog-card{
  margin-top: 16px;
  background: linear-gradient(135deg, #0a3d77, #0f58a8);
  color: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  max-width: 520px;
}

.hbc-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.hbc-dot{ width:14px; height:14px; border-radius:4px; background:#4cc0ff; display:inline-block; }
.hbc-title{ font-size:1.15rem; font-weight:800; margin:0; }
.hbc-desc{ margin:6px 0 12px; color:#f0f0ec; line-height:1.5; font-size:.98rem; }

.hbc-btn{
  display:inline-block;
  background:#3b8ac2;   /* já começa azul */
  color:#e3eff1;           /* texto branco visível */
  text-decoration:none;
  font-weight:700;
  padding:10px 16px;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:transform .2s ease, background .2s ease;
}
.hbc-btn:hover{ background:#005fcc; transform:translateY(-1px); }

/* ===== Imagem da direita “mais retangular” (mais alta) ===== */
.hero-right{ display:flex; align-items:flex-start; }
.hero-img{
  width:500%;
  height: 430px;            /* ajuste fino: 340–380px até alinhar a base com o card */
  object-fit: center;        /* preenche sem distorcer */
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.12);
}

/* Responsivo: empilha no mobile */
@media (max-width: 992px){
  .hero{
    grid-template-columns: 1fr;
  }
  .hero-img{
    height: 360px; /* menor no mobile */
  }
  .hero-blog-card{
    max-width: 100%;
  }
}


/* Base */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none}

/* Header (barra superior) */
header{
  position:sticky;top:0;z-index:1000;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 28px;box-shadow:0 2px 8px rgba(0,0,0,.08)
}
.logo{font-weight:700;color:var(--royal);font-size:20px}
nav ul{list-style:none;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
nav a{color:#fff;font-size:15px}
nav a:hover{color:var(--royal)}
.btn{border:none;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600}
.btn-royal{background:var(--royal);color:#fff}
.btn-royal:hover{background:var(--royal-dark)}
.btn-outline{background:transparent;border:1px solid #ffffff33;color:#fff}
.btn-outline:hover{border-color:#fff}

/* Layout geral */
.container{max-width:1140px;margin:0 auto;padding:28px}
.section{margin:60px auto 10px}
.section h2{font-size:28px;color:var(--navy);margin-bottom:14px}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;margin:32px auto 8px}
.hero h1{font-size:38px;line-height:1.15;color:var(--navy);margin-bottom:10px}
.hero p{font-size:18px;color:var(--muted)}
.hero .cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.hero img{width:100%;border-radius:16px}

/* Como funciona */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{background:var(--card);padding:18px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.step b{color:var(--navy)}

/* Planos */
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.plano{background:var(--card);padding:20px;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center;border:1px solid #eef3fb}
.plano h3{color:var(--navy);margin-bottom:6px}
.price{font-size:28px;font-weight:700;color:var(--navy);margin:8px 0}
.plano ul{list-style:none;text-align:left;margin:10px 0 14px 0}
.plano ul li{margin:6px 0;color:var(--muted)}
.plano .btn{width:100%}

/* FAQ */
details{background:#fff;border:1px solid #eef3fb;border-radius:12px;padding:14px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600;color:var(--navy)}

/* Termos */
.terms{background:#fff;border:1px solid #eef3fb;border-radius:12px;padding:20px;line-height:1.7;color:#444}

/* Modal genérico (login, etc.) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.45);z-index:2000;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 18px 40px rgba(2,6,23,.15);width:min(92vw,420px);position:relative}
.close{position:absolute;right:10px;top:8px;border:none;background:transparent;font-size:22px;cursor:pointer}
.form label.block{display:block;margin-top:10px}

/* Drawer – Assistente de Planos */
.drawer{position:fixed;right:20px;bottom:90px;width:360px;max-width:92vw;background:#fff;border:1px solid #eef3fb;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:none;z-index:1600;overflow:hidden}
.drawer header{background:var(--navy);color:#fff;padding:12px 14px;border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:space-between}
.drawer .body{padding:14px}
.drawer.show{display:block}

/* Chat flutuante */
.chat-widget{position:fixed;right:20px;bottom:20px;z-index:1500}
.fab{width:58px;height:58px;border-radius:50%;background:var(--royal);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.chat-panel{position:fixed;right:20px;bottom:90px;width:380px;max-width:95vw;background:#fff;border:1px solid #eef3fb;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:none;overflow:hidden}
.chat-panel.show{display:block}
.chat-tabs{display:flex}
.chat-tabs button{flex:1;padding:10px;border:none;background:#f2f6fc;color:#555;cursor:pointer;font-weight:600}
.chat-tabs button.active{background:#fff;border-bottom:2px solid var(--royal);color:var(--navy)}
.chat-header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #eef3fb}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #eef3fb}
.chat-body{height:280px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{padding:10px 12px;border-radius:12px;max-width:80%}
.msg.bot{background:#f2f6fc;align-self:flex-start}
.msg.user{background:#e8f6ff;align-self:flex-end}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eef3fb}
.chat-input input{flex:1;border:1px solid var(--ring);border-radius:12px;padding:10px 12px}

/* WhatsApp */
.wa{position:fixed;left:20px;bottom:20px;z-index:1400}
.wa a{display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 14px;border-radius:999px;box-shadow:0 10px 30px rgba(37,211,102,.4);font-weight:700}

/* Rodapé */
footer{margin:40px 0 90px 0;text-align:center;color:#666}
footer b{color:#222}

/* Modal fullscreen – Abertura de empresa */
.fullscreen-modal{position:fixed; inset:0; z-index:2500; background:#fff; display:none; overflow:auto}
.fullscreen-modal[aria-hidden="false"]{display:block}
.fullscreen-header{
  position:sticky; top:0; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.fullscreen-header h3{margin:0;font-size:18px}
.fullscreen-body{max-width:1100px;margin:0 auto;padding:20px}
.fullscreen-close{
  border:1px solid #ffffff33; background:transparent; color:#fff;
  border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600;
}

/* Formulários (reuso) */
.form-card{background:#fff;border:1px solid #eef3fb;border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:1fr 1fr 1fr}
label{font-size:14px;color:#222}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--ring);border-radius:10px;font-size:15px}
.hint{font-size:12px;color:#777}
.success{background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok);padding:16px;border-radius:12px}
.error{color:var(--danger);font-size:12px;margin-top:6px;display:none}

/* Responsivo */
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .g-2,.g-3{grid-template-columns:1fr}
}

/* ===== Mensagem de sucesso do formulário ===== */
.success {
  display: none;
  padding: 16px;
  background: #eafaf1;
  border: 1px solid #c6efd6;
  border-radius: 8px;
  color: #0b6b3a;
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
}


/* ===========================
   MENU RESPONSIVO (NOVO)
   =========================== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* quando a tela for menor (celular/tablet) */
@media (max-width: 860px) {
  header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
  }

  nav {
    width: 100%;
    display: none;
    flex-direction: column;
    background: var(--navy);
    padding: 12px 0;
  }

  header.open nav {
    display: flex;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 14px;
  }

  nav a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
}