:root{
  --secondary:#172A3A;
  --ink:#2b2b30;
  --muted:#5f6672;
  --bg-1:#F5F5F5;
  --bg-2:#E5E1D8;
  --card:#ffffff;
  --line:#eee;
  --shadow:0 18px 45px rgba(20,10,38,0.10);
  --wrap-w:1100px;
  --wrap-p:92%;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 520px at 50% -160px, var(--bg-2), transparent 70%),
    linear-gradient(180deg, var(--bg-1), #ffffff 30%, var(--bg-1) 100%);
}
.container{max-width:var(--wrap-w);width:var(--wrap-p);margin-inline:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:12px 16px;font-weight:700;text-decoration:none;transition:transform .18s,box-shadow .18s}
.btn--small{padding:8px 12px}
.btn--primary{color:#fff;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 10px 24px rgba(68,13,15,.28)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--full{width:100%;justify-content:center}
.muted{opacity:.9}
.site-header{position:sticky;top:0;z-index:1300;background:#ffffffE6;backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #ececec}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-badge{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;border-radius:10px;padding:6px 10px;font-weight:800}
.brand-name{font-weight:700;color:#1f2226}
.nav-links{display:flex;gap:16px;align-items:center}
.nav-link{padding:8px 12px;border-radius:10px;text-decoration:none;color:#2d2f33;font-weight:500;transition:background .18s,color .18s}
.nav-link:hover{background:var(--bg-2);color:#14191e}
.nav-link.is-active{color:#fff;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 10px 24px rgba(68,13,15,.28)}
.nav-toggle{display:none;border:0;background:#fff;font-size:24px;width:40px;height:40px;border-radius:12px;box-shadow:0 8px 18px rgba(10,12,28,.08)}
.nav-dropdown{position:relative}
.nav-link--dropdown{display:flex;align-items:center;gap:4px}
.dropdown-menu{display:none;position:absolute;top:110%;left:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.08);padding:8px}
.nav-dropdown.open .dropdown-menu{display:block}
.dropdown-item{display:block;padding:10px 12px;border-radius:8px;color:#2b2b30;text-decoration:none}
.dropdown-item:hover{background:#f1efea}
@media (max-width:720px){
  .nav-toggle{display:inline-grid}
  .nav-links{display:none}
  html.nav-open{overflow:hidden}
  html.nav-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:1200;animation:fadeIn .2s ease both}
  .container.nav.is-open .nav-links{
    display:flex;flex-direction:column;gap:10px;position:fixed;left:50%;top:calc(64px + 12px);transform:translateX(-50%);
    width:min(420px,calc(100vw - 32px));padding:16px 14px;text-align:center;background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px) saturate(1.2);border:1px solid rgba(0,0,0,.06);border-radius:14px;
    box-shadow:0 22px 48px rgba(10,12,28,.22);transform-origin:top center;z-index:1400;animation:menu-pop .22s ease-out
  }
  .container.nav.is-open .nav-links .nav-link{display:block;padding:10px 12px;border-radius:10px;background:transparent;font-weight:600;color:#2d2f33}
  .container.nav.is-open .nav-links .nav-link:hover{background:var(--bg-2)}
  .container.nav.is-open .nav-links .nav-link.is-active{width:max-content;margin:6px auto;padding:8px 14px;border-radius:999px;color:#fff;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 10px 24px rgba(68,13,15,.22)}
  .btn--primary{display:none}
  .container.nav.is-open .nav-dropdown{position:static}
  .container.nav.is-open .dropdown-menu{position:static;display:block;min-width:unset;margin-top:4px;padding:6px;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 26px rgba(0,0,0,.08)}
  .container.nav.is-open .dropdown-item{padding:10px 12px;border-radius:8px}
}
@keyframes menu-pop{from{opacity:0;transform:translate(-50%,-6px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero{padding:54px 0 22px;text-align:center}
.title{margin:0 0 6px;color:var(--brand);font-weight:800;letter-spacing:-.02em;font-size:clamp(34px,6vw,60px)}
.lead{margin:0;color:#3f5468;font-weight:500}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;padding:18px 0 40px}
.info h2{margin:0 0 16px;font-size:28px}
.info-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px}
.info-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:flex-start}
.info-list h3{margin:.2rem 0 .25rem;font-size:16px}
.info-list p{margin:0;color:#4b5967}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e9edf0;color:var(--secondary);font-size:20px;box-shadow:inset 0 0 0 1px rgba(23,42,58,.08)}
.map{padding:8px}
.map iframe{display:block;width:100%;height:240px;border-radius:12px}
.form{padding:20px}
.form h2{margin:0 0 14px}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:14px;margin-bottom:6px;color:#364353}
.field input,
.field textarea{width:100%;padding:12px 12px;border:1px solid #e1e1e1;border-radius:10px;outline:none;font:inherit;color:var(--ink);background:#fff}
.field input:focus,
.field textarea:focus{border-color:#c9b8b4;box-shadow:0 0 0 3px rgba(68,13,15,.15)}
.form-msg{margin:10px 0 0;font-weight:600}
.form-msg.ok{color:#2f9d62}
.form-msg.err{color:#a23}
.site-footer{padding:38px 0 44px;margin-top:18px;background:var(--secondary);color:#fff}
.footer__grid{display:grid;grid-template-columns:1.3fr .9fr 1.2fr .8fr;gap:22px}
.footer__title{margin:0 0 10px}
.footer__list{list-style:none;margin:0;padding:0}
.footer__list li{margin:6px 0}
.footer__list a{color:#fff;text-decoration:none}
.footer__list a:hover{text-decoration:underline}
.footer__copy{margin-top:20px;text-align:center;opacity:.9}
.brand--invert .brand-badge{background:linear-gradient(180deg,#ffffff,var(--bg-2));color:#fff}
.brand--invert .brand-name{color:#fff}
@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr}
  .map iframe{height:260px}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .footer__grid{grid-template-columns:1fr}
}

/* ==== PADRONIZAÇÃO NAV + LOGOS (igual às outras páginas) ==== */

/* header */
.header__wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:80px; gap:10px;
}
.site-header{
  position:sticky; top:0; z-index:1300;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid #ececec;
}

/* logo no header */
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand__logo{ display:flex; align-items:center; height:50px; }
.brand__logo img{ height:100%; width:auto; max-height:50px; object-fit:contain; }

/* nav padrão */
.nav{ display:flex; align-items:center; flex:1; justify-content:flex-end; gap:8px; position:relative; }
.nav__toggle{ display:none; border:0; background:transparent; font-size:24px; cursor:pointer; }
.nav__list{ display:flex; gap:8px; list-style:none; margin:0; padding:0; align-items:center; margin-right:10px; }
.nav-link{
  color:#2d2f33; text-decoration:none; font-weight:500;
  padding:6px 10px; border-radius:8px; transition:background .18s,color .18s;
  white-space:nowrap; font-size:14px;
}
.nav-link:hover{ background:var(--bg-2); color:#14191e; }
.nav-link.is-active{ color:#fff; background:linear-gradient(180deg, var(--brand-2), var(--brand)); }
.has-caret{ display:flex; align-items:center; gap:4px; }

/* botão header */
.header__btn{ white-space:nowrap; flex-shrink:0; }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; }
.btn--primary{ color:#fff; background:linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow:0 10px 24px rgba(68,13,15,.28); }

/* mobile menu igual às outras páginas */
@media (max-width: 780px){
  .nav__toggle{
    display:inline-grid; place-items:center; width:40px; height:40px; border:0; background:#fff; border-radius:12px;
    box-shadow:0 8px 18px rgba(10,12,28,.08); transition:transform .18s ease, box-shadow .18s ease;
  }
  .nav__toggle:hover{ transform:translateY(-1px); }
  .nav__list{
    position:absolute; top:80px; right:0; display:none; flex-direction:column; gap:10px; padding:12px; width:min(92vw, 320px);
    background:rgba(255,255,255,.92); backdrop-filter:blur(8px) saturate(1.2); border:1px solid rgba(0,0,0,.06); border-radius:14px;
    box-shadow:0 22px 48px rgba(10,12,28,.22); transform-origin:top right; animation:menu-pop .22s ease-out; margin-right:0;
  }
  .nav.is-open .nav__list{ display:flex; }
  .nav__list .nav-link{ display:block; padding:10px 12px; border-radius:10px; background:transparent; font-size:15px; }
  .nav__list .nav-link:hover{ background:var(--bg-2); }
  @media (max-width: 780px){
  .nav__toggle{
    display:inline-grid; place-items:center; width:40px; height:40px; border:0; background:#fff; border-radius:12px;
    box-shadow:0 8px 18px rgba(10,12,28,.08); transition:transform .18s ease, box-shadow .18s ease;
  }
  .nav__toggle:hover{ transform:translateY(-1px); }

  .nav__list{
    position:absolute; top:80px; right:0; display:none; flex-direction:column; gap:10px; padding:12px; width:min(92vw, 320px);
    background:rgba(255,255,255,.92); backdrop-filter:blur(8px) saturate(1.2); border:1px solid rgba(0,0,0,.06); border-radius:14px;
    box-shadow:0 22px 48px rgba(10,12,28,.22); transform-origin:top right; animation:menu-pop .22s ease-out; margin-right:0;
  }
  .nav.is-open .nav__list{ display:flex; }

  .nav__list .nav-link{
    display:block; padding:10px 12px; border-radius:10px; background:transparent; font-size:15px;
  }
  .nav__list .nav-link:hover{ background:var(--bg-2); }

  /* >>> ESTA REGRA FALTA E RESOLVE O “CONTATO EM BRANCO” <<< */
  .nav__list .nav-link.is-active{
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    color:#fff;
  }

  .header__btn{ display:none !important; }
  .nav.is-open .btn--primary{
    display:inline-block !important; margin-top:10px; text-align:center; width:100%; order:999; font-size:15px;
  }

  @keyframes menu-pop{
    from{opacity:0; transform:scale(.98) translateY(-6px)}
    to{opacity:1; transform:none}
  }
}

  .header__btn{ display:none !important; }
  .nav.is-open .btn--primary{ display:inline-block !important; margin-top:10px; text-align:center; width:100%; order:999; font-size:15px; }

  @keyframes menu-pop{ from{opacity:0; transform:scale(.98) translateY(-6px)} to{opacity:1; transform:none} }
}

/* logo no footer (invertida) */
.brand--invert .brand__logo{ height:65px; }
.brand--invert .brand__logo img{ max-height:45px; }

/* Esconde marca antiga (badge/texto) nesta página */
.brand-badge, .brand-name{ display:none !important; }

/* ===== Aumentar só a logo da NAV (não mexe no footer) ===== */
:root{
  --nav-logo: 84px;    /* ajuste o tamanho que quiser */
  --header-h: 88px;    /* altura da barra para acomodar a logo maior */
}

.site-header .brand__logo{
  height: var(--nav-logo);
}
.site-header .brand__logo img{
  max-height: var(--nav-logo);
}

/* mantém a barra alinhada e o menu mobile no lugar */
.site-header .header__wrap{
  height: var(--header-h);
}
@media (max-width: 780px){
  .nav__list{ top: var(--header-h); }
}

/* Botão flutuante do WhatsApp (global) */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); /* respeita safe area no iOS */
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  text-decoration: none;
  font-size: 28px; line-height: 1;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 9999;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.whatsapp-fab:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.whatsapp-fab:active{ transform: translateY(0); }

/* Se tiver outro botão flutuante (ex.: ajuda '?'), suba um pouco este aqui:  */
@media (min-width: 0){
  /* descomente se precisar empilhar acima de outro FAB
  .whatsapp-fab{ bottom: 86px; }
  */
}

/* Tamanhos em mobile */
@media (max-width: 780px){
  .whatsapp-fab{ right: 14px; width: 54px; height: 54px; font-size: 26px; }
}

/* ==== TROCA DO VERMELHO PARA AZUL (OVERRIDE GLOBAL) ==== */
:root{
  /* Novo tema azul (usa o mesmo “tom” do --secondary) */
  --brand:   #172A3A;   /* principal */
  --brand-2: #1e4a66;   /* variação p/ gradiente */
  --brand-3: #256086;   /* variação p/ destaque */

  /* Gradiente da CTA em azul */
  --grad-cta: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 55%, #0f1f2b 100%);
}

/* Botões e estados que tinham RGBA fixo em vermelho */
.btn--primary{
  /* sombra azulada */
  box-shadow: 0 10px 24px rgba(23,42,58,.28);
}
.btn--ghost{
  color: var(--brand);
  /* borda azulada com alpha (antes usava o vermelho) */
  border: 1px solid rgba(23,42,58,.28);
}

/* Ativo no menu mobile já usa var(--brand), então nada a fazer. */

/* Hovers que usavam a borda “vermelha” translúcida */
.card-feature:hover{
  border-color: rgba(23,42,58,.22);
  box-shadow: 0 18px 44px rgba(23,42,58,.15);
}
.process-item:hover{
  border-color: rgba(23,42,58,.22);
  box-shadow: 0 16px 36px rgba(23,42,58,.12);
}

/* Ícones dos cards: fundo mais neutro azulado + ícone na cor da brand */
.card-feature__icon{
  background: #e6edf5; /* antes: #f0e9e4 */
  color: var(--brand);
}

/* Ações/links já pegam var(--brand); mantemos para garantir consistência */
.pi__action{ color: var(--brand); }

/* No menu mobile (ativo), manter o gradiente em azul */
@media (max-width: 780px){
  .nav__list .nav-link.is-active{
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    color:#fff;
  }
}

.foot {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
}

.developer-credit {
  text-align: center;
  margin-top: 10px;
}

.developer-credit small {
  color: #ffffff;
  font-size: 0.85rem;
  opacity: 0.9;
}

.developer-credit a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.developer-credit a:hover {
  text-decoration: underline;
  color: var(--accent-2);
}