/* =====================================================================
   maximasti.com — folha ÚNICA do site (#225-c, 30/07/2026)
   Substitui bootstrap.min.css + style.css + animacao.css + carrousel.css
   + card.css. Sem framework, sem jQuery, sem webfont externa.
   Linguagem visual espelhada da página Guia (guia.maximasti.com), a pedido
   do Gabriel: paleta navy/azul, tipografia de sistema, cartões com ícone,
   hero em gradiente, dark mode.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --navy-900:#002240; --navy-800:#003A6B; --navy-700:#004C89;
  --blue-600:#0177D7; --blue-500:#0088F6; --blue-300:#7FC4FF;
  --ink:#0E1D2C; --body:#3E5568; --muted:#6B8199;
  --bg:#F4F8FC; --card:#FFFFFF; --line:#E1EAF3;
  --shadow:0 1px 2px rgba(0,42,80,.06), 0 12px 32px -12px rgba(0,42,80,.18);
  --radius:16px;
  --nav-h:68px;
  color-scheme:light dark;
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--body); overflow-wrap:break-word;
  font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.2; margin:0; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:var(--blue-600); text-decoration:none; font-weight:600}
a:hover{text-decoration:underline}
/* height:auto é OBRIGATÓRIO: os <img> declaram width/height reais (p/ o browser
   reservar espaço) e, sem isto, o atributo height vira altura fixa e o
   aspect-ratio das figuras é ignorado — a foto virava retrato no celular. */
img{max-width:100%; display:block; height:auto}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:2px; border-radius:4px}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- ícone genérico (SVG stroke) ---------- */
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- NAV ----------
   Sem barra branca (pedido do Gabriel, 30/07): a nav é NAVY, a mesma cor do
   topo do hero, então o cabeçalho e o início da página viram um bloco só.
   Logo CENTRALIZADO: grid 1fr / auto / 1fr põe o centro no meio exato,
   independente do tamanho das laterais. */
.nav{position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:var(--navy-900); border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{height:100%; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px}
.nav-esq{display:flex; align-items:center; gap:6px; min-width:0}
.nav-dir{display:flex; align-items:center; justify-content:flex-end; min-width:0}

.brand{display:flex; align-items:center; justify-content:center; gap:11px}
.brand:hover{text-decoration:none}
/* o PNG atual tem o texto em cinza escuro, que desaparece no navy — até chegar
   a versão clara do logo, o filtro o deixa branco (silhueta), que é legível e
   sóbrio. Ao trocar o arquivo, remover o filter. */
.brand img{width:auto; height:34px; filter:brightness(0) invert(1)}

.nav-links{display:flex; align-items:center; gap:2px}
/* nowrap + padding curto: com 5 itens numa coluna de ~460px os nomes quebravam
   em duas linhas ("Quem somos", "Fale conosco"). */
.nav-links a{padding:9px 10px; border-radius:9px; font-size:15px; color:#CFE3F5;
  font-weight:600; white-space:nowrap}
.nav-links a:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none}
.nav-links a.on{color:var(--blue-300)}
.so-mob{display:none}                  /* duplicata dos 2 links da direita, só p/ o painel mobile */

/* o botão de menu: presente e elegante — contorno azul-claro, vidro por cima do navy */
.burger{display:none; width:44px;height:44px; align-items:center; justify-content:center;
  background:rgba(127,196,255,.12); border:1px solid rgba(127,196,255,.32);
  border-radius:12px; color:#fff; cursor:pointer; transition:background .15s ease}
.burger:hover{background:rgba(127,196,255,.22)}
.burger .i{width:24px;height:24px}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15.5px; line-height:1.25; padding:12px 22px; border-radius:12px;
  border:0; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600)); color:#fff;
  box-shadow:0 10px 24px -10px rgba(1,119,215,.85)}
.btn:hover{text-decoration:none; color:#fff; transform:translateY(-1px);
  box-shadow:0 14px 28px -10px rgba(1,119,215,.95)}
.btn .i{width:17px;height:17px}
.btn-lg{font-size:16.5px; padding:15px 28px}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(1200px 600px at 78% -10%, #0a5fa8 0%, transparent 60%),
             linear-gradient(160deg,#013463 0%,#002240 55%,#001a33 100%)}
.hero .stars{position:absolute; inset:0; opacity:.5; pointer-events:none}
/* 1 coluna: as fotos do hero e do "quem somos" saíram por pedido do Gabriel
   (30/07). Sem a imagem à direita o bloco à esquerda ficava desequilibrado,
   então o hero é centrado — combina com o logo centralizado da nav. */
.hero-in{position:relative; padding:76px 24px 84px; text-align:center}
.tag{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-300);
  background:rgba(127,196,255,.12); border:1px solid rgba(127,196,255,.28);
  padding:7px 15px; border-radius:999px}
.tag::before{content:""; width:7px;height:7px;border-radius:50%; background:var(--blue-300);
  box-shadow:0 0 0 4px rgba(127,196,255,.22)}
.hero h1{color:#fff; font-size:clamp(34px,5.2vw,54px); margin:22px auto 16px; font-weight:800;
  max-width:26ch; text-wrap:balance}
.hero .lead{font-size:clamp(17.5px,2.2vw,20.5px); color:#BBD6EE; max-width:56ch; margin-inline:auto}

/* hero compacto (páginas internas) */
.hero.sm .hero-in{padding:60px 24px 64px}
.hero.sm h1{font-size:clamp(30px,4.4vw,44px); margin:18px auto 14px; max-width:30ch}
.hero.sm .lead{max-width:60ch}

/* ---------- SEÇÕES ---------- */
section{padding:76px 0}
/* a âncora tem de parar com o topo da seção EXATAMENTE sob a nav: com folga
   sobrando, aparecia uma faixa da seção anterior ao chegar em /#servicos.
   scroll-margin no alvo (e não scroll-padding no html) para não somar os dois. */
section[id]{scroll-margin-top:var(--nav-h)}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:12px}
h2{font-size:clamp(26px,3.6vw,34px); font-weight:800}
.sub{margin-top:12px; font-size:17.5px; max-width:62ch}
.center{text-align:center}
.center .sub{margin-inline:auto}

/* ---------- PILARES (faixa de 3) ---------- */
.pilares{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:38px}
.pilar{min-width:0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow)}
.pilar .ico{width:44px;height:44px;border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg,#EAF4FE,#DCEDFD); color:var(--blue-600); margin-bottom:16px}
.pilares{text-align:left}          /* o cabeçalho da seção centraliza; o cartão, não */
.pilar h3{font-size:18px; margin-bottom:7px}
.pilar p{font-size:15.5px; line-height:1.6}

/* ---------- SERVIÇOS ---------- */
.servicos{background:linear-gradient(180deg,#FFFFFF,#F4F8FC)}
/* flex (e não grid auto-fit) porque são 5 cards: no grid a última linha fica
   com um buraco à direita; aqui os 2 últimos ficam centralizados. */
.cards{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:40px}
.card{flex:1 1 292px; max-width:360px; min-width:0; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,42,80,.06), 0 26px 44px -18px rgba(0,42,80,.28)}
.card .ico{width:46px;height:46px;border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--blue-500),var(--navy-800)); color:#fff; margin-bottom:18px;
  box-shadow:0 8px 18px -8px rgba(0,58,107,.75)}
.card .ico .i{width:23px;height:23px}
.card h3{font-size:18.5px; margin-bottom:9px}
/* linha de benefício: diz PARA QUE serve o card antes da lista de itens */
.card-lead{font-size:15px; line-height:1.5; color:var(--muted); margin-bottom:16px}
.card ul{display:grid; gap:9px}
.card li{position:relative; padding-left:24px; font-size:15.5px; line-height:1.5}
.card li::before{content:""; position:absolute; left:2px; top:.55em; width:11px;height:7px;
  border-left:2px solid var(--blue-500); border-bottom:2px solid var(--blue-500);
  transform:rotate(-45deg)}
/* link p/ a página do serviço: margin-top:auto encosta no rodapé do cartão
   (o .card é flex-column), então cartões de alturas diferentes alinham o link */
.card-link{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px;
  font-size:15px}
.card-link .i{width:16px;height:16px}

/* ---------- PARCEIROS ---------- */
.logos{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:40px}
.logos li{flex:0 0 auto; width:156px; height:88px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:0 1px 2px rgba(0,42,80,.05); transition:box-shadow .18s ease, transform .18s ease}
.logos li:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.logos img{max-height:44px; width:auto; object-fit:contain;
  transition:filter .55s ease, opacity .55s ease; transition-delay:var(--d,0ms)}
/* O logo ACENDE quando entra na tela (pedido do Gabriel, 30/07): o cinza só
   existe quando o JS assume o controle (.js-reveal), então sem JS ninguém vê
   logo apagado. O hover continua acendendo, como antes. */
.logos.js-reveal img{filter:grayscale(1); opacity:.62}
.logos.sem-anim img{transition:none}      /* 1o frame: apaga sem animar (evita o flash) */
.logos.js-reveal li.on img,.logos li:hover img{filter:none; opacity:1}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(900px 400px at 20% 120%, #0a5fa8 0%, transparent 60%),
             linear-gradient(140deg,#013463,#002240)}
.cta .stars{position:absolute; inset:0; opacity:.45; pointer-events:none}
.cta-in{position:relative; text-align:center; padding:80px 24px}
.cta h2{color:#fff}
.cta p{margin:14px auto 30px; color:#BBD6EE; max-width:54ch; font-size:17.5px}
.cta-acts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ---------- FORMULÁRIO ---------- */
/* a página do Fale conosco é SÓ o formulário (pedido do Gabriel, 30/07):
   telefone, e-mail e localização saíram — já existem o botão do WhatsApp e o menu. */
.form-so{max-width:720px; margin:8px auto 0}
.painel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow)}
.campo{margin-bottom:18px}
.campo label{display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:7px}
.campo input,.campo textarea{width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease}
.campo input:focus,.campo textarea:focus{outline:0; border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(1,119,215,.16)}
.campo textarea{resize:vertical; min-height:150px; line-height:1.6}
.campo .hint{margin-top:6px; font-size:13.5px; color:var(--muted)}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:15px; margin:22px 0 24px}
.consent input{width:19px;height:19px;flex:none;margin-top:3px; accent-color:var(--blue-600)}
.alerta{display:flex; gap:13px; align-items:flex-start; border-radius:13px; padding:16px 18px;
  margin-bottom:26px; font-size:15.5px; border:1px solid}
.alerta .i{margin-top:2px}
.alerta b{display:block; color:inherit}
.alerta.ok{background:#ECFAF1; border-color:#B7E7C9; color:#155F35}
.alerta.warn{background:#FFF7E8; border-color:#F5DDAE; color:#7A4E00}
/* ---------- RODAPÉ ----------
   Enxuto por pedido do Gabriel (30/07): só o útil — telefone, e-mail, cidade,
   redes e o crédito. Saíram o nome/slogan repetidos e a coluna de navegação
   (que só repetia o menu do topo). */
footer{background:#01223E; color:#A8C6E0; padding:40px 0 0}
.foot{display:flex; justify-content:center}
.social{display:flex; gap:10px}
.social a{width:40px;height:40px;border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff}
.social a:hover{background:rgba(255,255,255,.15)}
.social .i{width:19px;height:19px; stroke:#fff}
.creditos{margin-top:24px; border-top:1px solid rgba(255,255,255,.12); padding:18px 0 24px;
  font-size:14px; text-align:center}

/* ---------- WhatsApp flutuante ---------- */
.zap{position:fixed; right:18px; bottom:18px; z-index:55; width:58px;height:58px;
  border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.9); transition:transform .15s ease}
.zap:hover{transform:scale(1.06)}
.zap svg{width:30px;height:30px;fill:#fff}

/* ---------- RESPONSIVO ---------- */
@media (max-width:980px){
  .hero-in{padding:64px 24px 72px}
}
@media (max-width:860px){
  /* o menu vira painel navy sob a nav; o CTA entra no painel e o da direita sai */
  .nav-links{position:fixed; inset:var(--nav-h) 0 auto; display:none; flex-direction:column;
    align-items:stretch; gap:2px; margin:0; padding:14px 18px 20px;
    background:var(--navy-900); border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px; font-size:16.5px}
  .nav-dir{display:none}
  .so-mob{display:block}
  .burger{display:flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:54px 0}
  .hero-in{padding:46px 18px 56px}
  .cta-in{padding:60px 18px}
  /* em 1 linha: quebrada em duas, o bullet do ::before desalinha */
  .tag{font-size:10.5px; letter-spacing:.09em; padding:6px 12px}
  .card,.pilar,.painel{padding:22px 20px}
  .logos{gap:12px}
  .logos li{width:calc(50% - 6px); height:78px}
  .creditos{padding-bottom:96px}
}

/* ---------- MODO ESCURO ---------- */
@media (prefers-color-scheme:dark){
  :root{--bg:#0B1622; --card:#12202F; --line:#1F3346; --ink:#EAF2FA; --body:#A9C0D4; --muted:#7C97AE;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7)}
  .servicos{background:linear-gradient(180deg,#0E1B29,#0B1622)}
  .pilar .ico,.contato .ico{background:#16304A; color:var(--blue-300)}
  .logos img{filter:grayscale(1) brightness(1.9); opacity:.8}
  .logos li:hover img{filter:brightness(1.06)}
  .campo input,.campo textarea{background:#0E1B29}
  .alerta.ok{background:#0F2A1C; border-color:#255C3B; color:#9BE3B8}
  .alerta.warn{background:#2C2410; border-color:#5F4B18; color:#F0D79A}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .logos.js-reveal img{filter:none; opacity:1}   /* sem animação: já coloridos */
}

@media print{
  .nav,.zap,.cta{display:none}
  body{background:#fff; font-size:12pt}
  .hero{background:#002240 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  section{padding:24px 0; break-inside:avoid}
  .card,.pilar,.painel{break-inside:avoid}
}