/* ===========================================================================
 * Manarte — o tema visual do site.
 *
 * Por que este arquivo existe: até a v1.26 o visual inteiro do site morava num
 * <style> colado num widget HTML do Elementor. O plugin gerava o HTML das
 * seções, mas a aparência ficava fora dele. Na prática isso significava três
 * coisas ruins: nenhuma melhoria de visual podia ser testada aqui, cada
 * entrega exigia recolar CSS na mão, e um dia o HTML gerado e o CSS colado
 * iam discordar sem ninguém perceber.
 *
 * Agora o tema mora aqui, versionado junto do HTML que ele veste. O CSS colado
 * continua funcionando: ele vem depois, no corpo da página, e ganha por ordem.
 * Quando o <style> colado for apagado, este assume sozinho — e é aí que as
 * melhorias desta versão aparecem.
 *
 * Os tokens (cor, raio, densidade, fonte) são escritos pelo PHP a partir de
 * Manarte › Aparência. Ver inc/aparencia.php.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * Tokens
 * Ficam nos dois escopos: .mnt é o site colado, .mntx são os blocos soltos.
 * ------------------------------------------------------------------------- */
.mnt, .mntx{
  --papel:#F4F7FA;
  --papel-2:#EDF2F7;
  --branco:#FFFFFF;
  --linha:#DEE5EC;
  --linha-forte:#C9D5E1;
  --tinta:#0E2233;
  --tinta-2:#55677A;
  --tinta-3:#7C8FA3;
  --azul:#1B6FC0;
  --azul-forte:#155A9E;
  --azul-claro:#E9F1FB;
  --marinho:#062A4A;
  --marinho-2:#0B3A63;
  /* Título é cor de TEXTO; marinho é cor de FUNDO. Enquanto eram a mesma
     variável, o modo escuro escurecia o fundo e o título junto, e as
     perguntas frequentes ficavam pretas sobre preto. */
  --titulo:#062A4A;
  --ciano:#6FD6F8;
  --ok:#1E7A4B;
  --erro:#B3261E;

  --raio:14px;
  --raio-g:20px;
  --raio-p:10px;

  --sombra-1:0 1px 2px rgba(6,42,74,.05), 0 2px 8px rgba(6,42,74,.04);
  --sombra-2:0 2px 6px rgba(6,42,74,.06), 0 12px 28px rgba(6,42,74,.08);
  --sombra-3:0 4px 12px rgba(6,42,74,.08), 0 24px 56px rgba(6,42,74,.12);

  --env:1200px;
  --folga:clamp(18px,4vw,28px);
  --secao-y:clamp(56px,8vw,104px);

  --fonte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fonte-tit:var(--fonte);

  --anda:.22s cubic-bezier(.4,0,.2,1);
}

/* Modo escuro. Só entra quando o site pede — a escolha vive em Aparência e
   chega como data-cor no <html> ou no próprio bloco. O seletor de sistema
   fica no fim do arquivo, condicionado a data-cor="auto". */
.mnt[data-cor="escuro"], .mntx[data-cor="escuro"],
[data-mnt-cor="escuro"] .mnt, [data-mnt-cor="escuro"] .mntx{
  --papel:#0B1620;
  --papel-2:#101E2B;
  --branco:#13212F;
  --linha:#22364A;
  --linha-forte:#2E465F;
  --tinta:#E8F0F7;
  --tinta-2:#A3B6C8;
  --tinta-3:#8096AB;
  --azul:#63AEF2;
  --azul-forte:#8CC5FA;
  --azul-claro:#13304D;
  --marinho:#071A2B;
  --marinho-2:#0C2740;
  --titulo:#F2F7FC;
  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
  --sombra-3:0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */
.mnt{
  font-family:var(--fonte);
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mnt *,.mnt *::before,.mnt *::after{box-sizing:border-box;}
.mnt img{max-width:100%;height:auto;display:block;}
.mnt [hidden]{display:none!important;}

/* Rolagem suave só para quem não pediu silêncio de movimento. */
@media (prefers-reduced-motion:no-preference){
  html:has(.mnt){scroll-behavior:smooth;}
}
/* O topo é fixo: âncora sem folga põe o título embaixo da barra. */
.mnt [id]{scroll-margin-top:96px;}

.mnt .env{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--folga);}

/* Títulos: escala fluida, uma régua só para o site inteiro. */
.mnt h1{font-family:var(--fonte-tit);font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.06;
  letter-spacing:-.032em;font-weight:700;color:var(--titulo);margin:0 0 18px;}
.mnt h2{font-family:var(--fonte-tit);font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.14;
  letter-spacing:-.024em;font-weight:700;color:var(--titulo);margin:0 0 14px;}
.mnt h3{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.28;letter-spacing:-.012em;
  font-weight:600;color:var(--titulo);margin:0 0 8px;}
.mnt h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 14px;}
.mnt p{margin:0 0 14px;line-height:1.65;color:var(--tinta-2);}
.mnt p:last-child{margin-bottom:0;}
.mnt a{color:var(--azul);}

/* O foco tem de aparecer em cima de qualquer fundo: dois anéis, um claro e
   um escuro, para o contorno não sumir no azul-marinho nem no branco. */
.mnt a:focus-visible,.mnt button:focus-visible,.mnt summary:focus-visible,
.mnt input:focus-visible,.mnt select:focus-visible,.mnt textarea:focus-visible,
.mntx a:focus-visible,.mntx button:focus-visible,.mntx summary:focus-visible{
  outline:2px solid var(--azul);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.7);border-radius:6px;
}
.mnt .escuro a:focus-visible,.mnt .escuro button:focus-visible,
.mnt .faixa a:focus-visible,.mnt .rodape a:focus-visible{
  outline-color:#fff;box-shadow:0 0 0 4px rgba(6,42,74,.6);
}

/* Pular para o conteúdo. Primeiro item tabulável da página: quem chega de
   teclado ou leitor de tela não precisa varrer o menu inteiro toda vez. */
.mnt-pular{position:absolute;left:0;top:-200px;z-index:999;
  padding:12px 20px;background:var(--marinho);color:#fff;border-radius:0 0 10px 0;
  font:600 .95rem/1 var(--fonte);text-decoration:none;}
.mnt-pular:focus{top:0;}

/* ---------------------------------------------------------------------------
 * Etiqueta de seção
 * ------------------------------------------------------------------------- */
.mnt .etiqueta{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--azul);}
.mnt .etiqueta::before{content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--azul),transparent);}
.mnt .escuro .etiqueta,.mnt .faixa .etiqueta{color:var(--ciano);}
.mnt .escuro .etiqueta::before,.mnt .faixa .etiqueta::before{
  background:linear-gradient(90deg,var(--ciano),transparent);}

.mnt .cabeca{max-width:64ch;margin-bottom:clamp(28px,4vw,46px);}
.mnt .cabeca p:not(.etiqueta){font-size:clamp(1rem,1.7vw,1.1rem);color:var(--tinta-2);}

/* ---------------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------------- */
.mnt .btn,.mnt a.btn,.mnt button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 26px;border-radius:var(--raio-p);
  font:600 .96rem/1 var(--fonte);text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--anda),border-color var(--anda),color var(--anda),
             box-shadow var(--anda),transform var(--anda);
}
.mnt .btn svg{width:18px;height:18px;flex:none;fill:currentColor;}
.mnt .btn-cheio{background:var(--azul);color:#fff;
  box-shadow:0 6px 18px rgba(27,111,192,.28);}
.mnt .btn-cheio:hover{background:var(--azul-forte);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(27,111,192,.34);}
.mnt .btn-cheio:active{transform:translateY(0);}
.mnt .btn-linha{background:var(--branco);color:var(--titulo);border-color:var(--linha-forte);}
.mnt .btn-linha:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px);}
.mnt .btn-claro{background:#fff;color:var(--marinho);}
.mnt .btn-claro:hover{background:var(--azul-claro);color:var(--azul);transform:translateY(-2px);}

/* ---------------------------------------------------------------------------
 * Topo
 * ------------------------------------------------------------------------- */
.mnt .topo{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--branco) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--anda),box-shadow var(--anda),background var(--anda);}
.mnt .topo[data-fixo="1"]{border-bottom-color:var(--linha);box-shadow:var(--sombra-1);}
.mnt .topo-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);height:74px;}

.mnt .marca{flex:none;display:flex;align-items:center;text-decoration:none;
  font-weight:700;color:var(--titulo);letter-spacing:-.02em;}
.mnt .marca img{height:38px;width:auto;}

.mnt .menu{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);margin-inline:auto;}
.mnt .menu a{position:relative;padding:8px 2px;font-size:.93rem;font-weight:500;
  color:var(--tinta-2);text-decoration:none;transition:color var(--anda);}
.mnt .menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;
  transition:transform var(--anda);}
.mnt .menu a:hover{color:var(--marinho);}
.mnt .menu a:hover::after,.mnt .menu a[aria-current="true"]::after{transform:scaleX(1);}
.mnt .menu a[aria-current="true"]{color:var(--marinho);font-weight:600;}
.mnt .menu-acesso{color:var(--azul)!important;font-weight:600!important;}

.mnt .topo-dir{display:flex;align-items:center;gap:10px;margin-left:auto;}

/* Idioma */
.mnt .idioma{position:relative;}
.mnt .globo{width:42px;height:42px;display:grid;place-items:center;flex:none;
  border:1px solid var(--linha);border-radius:50%;background:var(--branco);cursor:pointer;
  transition:border-color var(--anda),background var(--anda);}
.mnt .globo:hover{border-color:var(--azul);}
.mnt .globo::before{content:"";width:19px;height:19px;
  background:currentColor;color:var(--tinta-2);
  -webkit-mask:var(--globo-svg) center/contain no-repeat;
  mask:var(--globo-svg) center/contain no-repeat;}
.mnt{--globo-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.6 5.7 3.6 9s-1.1 6.4-3.6 9c-2.5-2.6-3.6-5.7-3.6-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E");}
.mnt .idioma-lista{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;
  padding:6px;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--anda),transform var(--anda),visibility var(--anda);}
.mnt .idioma-lista[data-aberto="1"]{opacity:1;visibility:visible;transform:none;}
.mnt .idioma-lista button{display:block;width:100%;padding:10px 12px;text-align:left;
  font:500 .9rem/1.2 var(--fonte);color:var(--tinta);background:none;border:0;
  border-radius:8px;cursor:pointer;transition:background var(--anda);}
.mnt .idioma-lista button:hover{background:var(--papel);}
.mnt .idioma-lista button[aria-pressed="true"]{color:var(--azul);font-weight:600;
  background:var(--azul-claro);}

/* Hambúrguer: some no desktop, e vira X quando abre. */
.mnt .hamburguer{display:none;width:44px;height:44px;flex:none;padding:0;
  background:none;border:1px solid var(--linha);border-radius:var(--raio-p);
  cursor:pointer;place-content:center;gap:5px;}
.mnt .hamburguer span{display:block;width:19px;height:2px;border-radius:2px;
  background:var(--titulo);transition:transform var(--anda),opacity var(--anda);}
.mnt .hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mnt .hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mnt .hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------------------------------------------------------------------
 * Abertura
 * ------------------------------------------------------------------------- */
.mnt .abertura{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,86px) clamp(52px,8vw,96px);
  background:
    radial-gradient(1100px 520px at 88% -8%, color-mix(in srgb,var(--azul) 13%,transparent), transparent 62%),
    radial-gradient(760px 420px at 4% 8%, color-mix(in srgb,var(--ciano) 9%,transparent), transparent 60%),
    var(--papel);}
/* Malha discreta: dá textura ao fundo sem virar enfeite que compete com o
   título. 1px em 34px, quase no limite do que o olho registra. */
.mnt .abertura::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--marinho) 5%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--marinho) 5%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
  mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);}
.mnt .abertura .env{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,5vw,64px);align-items:center;}

.mnt .abertura h1 .az{color:var(--azul);}
.mnt .chamada{max-width:56ch;font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.6;}
.mnt .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}

.mnt .selo-linha{display:flex;flex-direction:column;gap:9px;margin-top:30px;}
/* O selo tem três filhos (o visto, o começo e a parte em negrito) e precisa
   ler como UMA frase. Em flex, cada filho vira coluna e a frase quebra no
   meio; com o visto fora do fluxo, o texto volta a correr inline. */
.mnt .selo{display:block;position:relative;padding-left:28px;font-size:.92rem;
  line-height:1.5;color:var(--tinta-2);}
.mnt .selo b{color:var(--tinta);font-weight:600;}
.mnt .selo i{position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--azul-claro) var(--visto-svg) center/10px no-repeat;}
.mnt{--visto-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6FC0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");}

/* Ficha técnica */
.mnt .ficha{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-g);box-shadow:var(--sombra-3);overflow:hidden;}
.mnt .ficha-topo{display:flex;align-items:center;gap:10px;padding:16px 22px;
  background:linear-gradient(180deg,var(--papel-2),var(--papel));
  border-bottom:1px solid var(--linha);font-size:.84rem;letter-spacing:.02em;
  color:var(--titulo);}
.mnt .ficha-topo b{font-weight:700;}
.mnt .ficha-topo i{width:8px;height:8px;margin-left:auto;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent);}
.mnt .ficha dl{margin:0;padding:6px 22px 18px;}
.mnt .ficha .item{padding:13px 0;border-bottom:1px solid var(--linha);}
.mnt .ficha .item:last-child{border-bottom:0;}
.mnt .ficha dt{font-size:.73rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:4px;}
.mnt .ficha dd{margin:0;font-size:.98rem;font-weight:600;color:var(--titulo);line-height:1.35;}
.mnt .ficha dd small{display:block;margin-top:2px;font-size:.84rem;font-weight:400;
  color:var(--tinta-2);}

/* Marca d'água: o símbolo da marca, grande e quase transparente. */
.mnt .dagua{position:absolute;right:-6%;top:50%;width:min(520px,52vw);aspect-ratio:1;
  transform:translateY(-50%);pointer-events:none;opacity:.05;
  background:var(--simb,none) center/contain no-repeat;}
.mnt .rodape .dagua{opacity:.06;right:-4%;}

/* ---------------------------------------------------------------------------
 * Faixa "Quem atendemos"
 * ------------------------------------------------------------------------- */
.mnt .faixa{padding-block:clamp(34px,5vw,56px);color:#fff;
  background:linear-gradient(135deg,var(--marinho),var(--marinho-2) 55%,var(--azul-forte));}
.mnt .faixa .env{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,50px);align-items:center;}
.mnt .faixa h2{color:#fff;font-size:clamp(1.25rem,2.4vw,1.72rem);margin:0;}

/* ---------------------------------------------------------------------------
 * Seções
 * ------------------------------------------------------------------------- */
.mnt .secao{padding-block:var(--secao-y);background:var(--branco);}
.mnt .secao-clara{background:var(--papel);}
.mnt .escuro{color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(900px 420px at 80% 0%,color-mix(in srgb,var(--azul) 24%,transparent),transparent 60%),
             linear-gradient(160deg,var(--marinho),#04182C);}
.mnt .escuro h2,.mnt .escuro h3{color:#fff;}
.mnt .escuro p{color:#A9C6E2;}

/* Etapas */
/* auto-fit e não 4 colunas fixas: o campo de cada etapa é texto livre, e em
   container estreito quatro colunas fixas quebram a palavra letra a letra. */
.mnt .etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;}
.mnt .etapa{position:relative;padding:26px 22px 24px;border-radius:var(--raio);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  transition:background var(--anda),border-color var(--anda),transform var(--anda);}
.mnt .etapa:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);}
/* Etiqueta, não bolinha: o campo do painel costuma trazer "Etapa 01", e
   texto de sete letras dentro de um círculo de 38px quebra em duas linhas
   tortas. Largura livre resolve, e o número continua em destaque. */
.mnt .etapa .num{display:inline-flex;align-items:center;height:26px;padding:0 11px;
  margin-bottom:14px;border-radius:999px;background:rgba(111,214,248,.16);
  color:var(--ciano);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums;}
/* O fio que liga uma etapa à outra. Some no último e no celular, onde as
   etapas deixam de estar lado a lado. */
.mnt .etapa::after{content:"";position:absolute;right:-10px;top:38px;width:12px;height:1px;
  background:rgba(255,255,255,.2);}
@media (max-width:1040px){.mnt .etapa::after{display:none;}}
.mnt .etapa:last-child::after{display:none;}

.mnt .escuro-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-top:clamp(28px,4vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.14);}
.mnt .escuro-pe p{margin:0;max-width:56ch;font-size:1.02rem;color:#C6D9EA;}

/* Compromissos */
.mnt .compromissos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.mnt .compromisso{position:relative;padding:30px 26px 28px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-1);
  transition:box-shadow var(--anda),transform var(--anda),border-color var(--anda);}
.mnt .compromisso:hover{box-shadow:var(--sombra-2);transform:translateY(-3px);
  border-color:var(--linha-forte);}
/* O número é ornamento, e ornamento não se lê em voz alta. */
.mnt .marca-num{position:absolute;right:20px;top:14px;font-size:2.6rem;font-weight:700;
  letter-spacing:-.05em;line-height:1;color:var(--papel-2);pointer-events:none;
  -webkit-user-select:none;user-select:none;}
.mnt .compromisso h3{position:relative;padding-top:6px;}
.mnt .compromisso h3::before{content:"";display:block;width:30px;height:3px;margin-bottom:14px;
  border-radius:3px;background:linear-gradient(90deg,var(--azul),var(--ciano));}

/* ---------------------------------------------------------------------------
 * Contato
 * ------------------------------------------------------------------------- */
.mnt .contato-cartao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,48px);padding:clamp(26px,4vw,44px);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);
  box-shadow:var(--sombra-2);}
.mnt .contato-dir{display:grid;gap:10px;align-content:start;}
.mnt .canal{display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  text-decoration:none;color:inherit;
  transition:border-color var(--anda),background var(--anda),transform var(--anda);}
.mnt a.canal:hover{border-color:var(--azul);background:var(--azul-claro);transform:translateX(3px);}
.mnt .canal .ico{flex:none;display:grid;place-items:center;width:42px;height:42px;
  border-radius:11px;background:var(--azul-claro);color:var(--azul);}
.mnt .canal .ico svg{width:21px;height:21px;}
.mnt .canal-rot{display:block;font-size:.75rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3);}
.mnt .canal-val{display:block;font-size:.98rem;font-weight:600;color:var(--titulo);
  overflow-wrap:break-word;}
.mnt .canal .seta{margin-left:auto;color:var(--tinta-3);font-size:1.05rem;
  transition:color var(--anda),transform var(--anda);}
.mnt a.canal:hover .seta{color:var(--azul);transform:translate(2px,-2px);}

/* ---------------------------------------------------------------------------
 * Rodapé
 * ------------------------------------------------------------------------- */
.mnt .rodape{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,72px) 26px;
  color:#C6D9EA;background:linear-gradient(170deg,var(--marinho),#04182C);}
.mnt .rodape-in{position:relative;display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,44px);}
.mnt .rodape .logo-pe{height:40px;width:auto;margin-bottom:16px;}
.mnt .rodape p{color:#9FBBD4;font-size:.93rem;max-width:42ch;}
.mnt .rodape h4{color:#fff;}
.mnt .rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.mnt .rodape li{font-size:.92rem;line-height:1.45;}
.mnt .rodape a{color:#C6D9EA;text-decoration:none;transition:color var(--anda);}
.mnt .rodape a:hover{color:#fff;}

.mnt .redes{display:flex;gap:9px;margin-top:18px;}
.mnt .rede{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:background var(--anda),border-color var(--anda),transform var(--anda);}
.mnt .rede svg{width:19px;height:19px;fill:#C6D9EA;}
.mnt .rede:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);
  transform:translateY(-2px);}
.mnt .rede:hover svg{fill:#fff;}

.mnt .rodape-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:clamp(28px,4vw,42px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#8AA8C4;}
.mnt .rodape-cnpj{margin-left:8px;opacity:.8;}

/* ---------------------------------------------------------------------------
 * WhatsApp flutuante
 * ------------------------------------------------------------------------- */
.mnt .zap,a.zap{position:fixed;right:20px;bottom:20px;z-index:70;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform var(--anda),box-shadow var(--anda);}
a.zap svg{width:28px;height:28px;fill:#fff;}
a.zap:hover{transform:scale(1.06);box-shadow:0 12px 32px rgba(37,211,102,.5);}
/* Pulso de uma vez só, na entrada. Chamar atenção sem ficar piscando o dia
   inteiro ao lado do texto que a pessoa está tentando ler. */
@media (prefers-reduced-motion:no-preference){
  a.zap::after{content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid #25D366;animation:mnt-pulso 2.4s ease-out 3;}
}
@keyframes mnt-pulso{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.7);opacity:0;}}

/* ---------------------------------------------------------------------------
 * Barra de leitura e voltar ao topo
 * ------------------------------------------------------------------------- */
.mnt-progresso{position:fixed;left:0;top:0;z-index:80;height:3px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--azul,#1B6FC0),var(--ciano,#6FD6F8));}
@media (prefers-reduced-motion:reduce){.mnt-progresso{display:none;}}

.mnt-topo-btn{position:fixed;right:20px;bottom:88px;z-index:70;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--linha,#DEE5EC);border-radius:50%;
  background:var(--branco,#fff);color:var(--marinho,#062A4A);cursor:pointer;
  box-shadow:0 6px 18px rgba(6,42,74,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s,border-color .2s;}
.mnt-topo-btn[data-ver="1"]{opacity:1;visibility:visible;transform:none;}
.mnt-topo-btn:hover{border-color:var(--azul,#1B6FC0);color:var(--azul,#1B6FC0);}
.mnt-topo-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---------------------------------------------------------------------------
 * Telas menores
 * ------------------------------------------------------------------------- */
@media (max-width:1040px){
  .mnt .etapas{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mnt .etapa:nth-child(2n)::after{display:none;}
  .mnt .rodape-in{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .mnt .abertura .env,.mnt .faixa .env,.mnt .contato-cartao{grid-template-columns:1fr;}
  .mnt .compromissos{grid-template-columns:1fr;}
  .mnt .dagua{opacity:.035;}

  .mnt .hamburguer{display:grid;}
  /* a.btn-topo e não .btn-topo: a regra do botão usa .mnt a.btn, que ganha
     de uma classe sozinha — o botão continuava na tela e empurrava 94px
     de rolagem lateral no celular. */
  .mnt a.btn-topo,.mnt .btn.btn-topo{display:none!important;}
  /* O menu vira uma folha que desce do topo. Posição fixa e não absoluta:
     dentro de um header sticky, absoluta rola junto e some da tela. */
  .mnt .menu{position:fixed;left:0;right:0;top:74px;z-index:59;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:8px var(--folga) 18px;
    background:var(--branco);border-bottom:1px solid var(--linha);
    box-shadow:var(--sombra-2);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--anda),transform var(--anda),visibility var(--anda);}
  .mnt .menu[data-aberto="1"]{opacity:1;visibility:visible;transform:none;}
  .mnt .menu a{padding:15px 4px;font-size:1rem;border-bottom:1px solid var(--linha);}
  .mnt .menu a:last-child{border-bottom:0;}
  .mnt .menu a::after{display:none;}
}

@media (max-width:640px){
  .mnt .etapas{grid-template-columns:1fr;}
  .mnt .etapa::after{display:none;}
  .mnt .rodape-in{grid-template-columns:1fr;}
  .mnt .acoes .btn{width:100%;}
  .mnt .escuro-pe .btn{width:100%;}
  .mnt-topo-btn{bottom:84px;right:16px;}
  a.zap{right:16px;bottom:16px;}
}

/* Movimento reduzido: nada se move, nada aparece de leve. */
@media (prefers-reduced-motion:reduce){
  .mnt *,.mntx *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .mnt .btn:hover,.mnt .compromisso:hover,.mnt .etapa:hover,.mnt .rede:hover{transform:none!important;}
}

/* Mais contraste: quem liga isso no sistema quer borda que se vê, não
   sombra que se adivinha. */
@media (prefers-contrast:more){
  .mnt,.mntx{--linha:#8EA3B7;--tinta-2:#334656;--tinta-3:#4A5F73;}
  .mnt .btn-linha,.mnt .canal,.mnt .compromisso{border-width:2px;}
}

/* Impressão: o que interessa é o conteúdo e o contato. */
@media print{
  .mnt .topo,.mnt .zap,a.zap,.mnt-topo-btn,.mnt-progresso,.mnt .hamburguer,
  .mnt .idioma,.mnt .acoes{display:none!important;}
  .mnt .escuro,.mnt .faixa,.mnt .rodape{background:#fff!important;color:#000!important;}
  .mnt .escuro *,.mnt .faixa *,.mnt .rodape *{color:#000!important;}
  .mnt .abertura{background:#fff!important;}
}

/* Modo automático: segue o sistema, e só quando o site pediu "auto". */
@media (prefers-color-scheme:dark){
  .mnt[data-cor="auto"], .mntx[data-cor="auto"],
  [data-mnt-cor="auto"] .mnt, [data-mnt-cor="auto"] .mntx{
    --papel:#0B1620;
    --papel-2:#101E2B;
    --branco:#13212F;
    --linha:#22364A;
    --linha-forte:#2E465F;
    --tinta:#E8F0F7;
    --tinta-2:#A3B6C8;
    --tinta-3:#8096AB;
    --azul:#63AEF2;
    --azul-forte:#8CC5FA;
    --azul-claro:#13304D;
    --marinho:#071A2B;
    --marinho-2:#0C2740;
    --titulo:#F2F7FC;
    --sombra-1:0 1px 2px rgba(0,0,0,.4);
    --sombra-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
    --sombra-3:0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45);
  }
}

/* ===========================================================================
 * Perguntas frequentes
 *
 * É <details> nativo: abre sem JavaScript, é anunciado corretamente pelo
 * leitor de tela e o navegador já sabe procurar texto lá dentro. O que o JS
 * acrescenta é a busca e o filtro por assunto — coisas que, faltando, deixam
 * a lista funcionando do mesmo jeito.
 * ========================================================================= */

.mntx.faq{max-width:860px;margin-inline:auto;}

.mntx .faq-topo{display:grid;gap:14px;margin-bottom:clamp(20px,3vw,28px);}
.mntx .faq-busca{position:relative;}
.mntx .faq-busca::before{content:"";position:absolute;left:16px;top:50%;width:17px;height:17px;
  margin-top:-8px;pointer-events:none;opacity:.55;
  background:var(--lupa) center/contain no-repeat;}
.mntx{--lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355677A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");}
.mntx .faq-busca input{width:100%;height:50px;padding:0 16px 0 44px;
  font:inherit;font-size:.96rem;color:var(--tinta);
  background:var(--branco);border:1px solid var(--linha);border-radius:999px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .18s,box-shadow .18s;}
.mntx .faq-busca input:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 18%,transparent);}
.mntx .faq-busca input::placeholder{color:var(--tinta-3);opacity:1;}
/* O X nativo do type=search some no Safari e aparece torto no Chrome. */
.mntx .faq-busca input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}

.mntx .faq-grupos{margin-bottom:0;}

.mntx .faq-lista{display:grid;gap:10px;}

.mntx details.faq-q{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);overflow:hidden;
  transition:border-color .18s,box-shadow .18s;}
.mntx details.faq-q[open]{border-color:color-mix(in srgb,var(--azul) 45%,var(--linha));
  box-shadow:var(--sombra-1);}
.mntx details.faq-q:hover{border-color:var(--linha-forte);}

.mntx .faq-q summary{display:flex;align-items:center;gap:16px;
  min-height:60px;padding:16px 20px;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:600;line-height:1.4;color:var(--titulo);}
.mntx .faq-q summary::-webkit-details-marker{display:none;}
.mntx .faq-q summary:focus-visible{outline:2px solid var(--azul);outline-offset:-2px;}
.mntx .faq-p{flex:1 1 auto;min-width:0;}

/* O sinal é um mais que vira menos girando. Dois traços, não um caractere:
   assim ele gira de verdade em vez de trocar de glifo. */
.mntx .faq-sinal{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--azul-claro);transition:background .18s;}
.mntx .faq-sinal::before,
.mntx .faq-sinal::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:var(--azul);
  transition:transform .22s cubic-bezier(.4,0,.2,1);}
.mntx .faq-sinal::after{transform:rotate(90deg);}
.mntx details.faq-q[open] .faq-sinal::after{transform:rotate(0);}
.mntx details.faq-q[open] .faq-sinal{background:var(--azul);}
.mntx details.faq-q[open] .faq-sinal::before,
.mntx details.faq-q[open] .faq-sinal::after{background:#fff;}

.mntx .faq-r{padding:0 20px 20px 20px;}
.mntx .faq-r p{margin:0!important;max-width:68ch;font-size:.97rem;line-height:1.7;
  color:var(--tinta-2);}

/* Abre deslizando, onde o navegador souber fazer isso sem script. */
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .mntx details.faq-q::details-content{height:0;overflow:hidden;
      transition:height .26s ease,content-visibility .26s allow-discrete;}
    .mntx details.faq-q[open]::details-content{height:auto;}
  }
}

.mntx .faq-nada{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:18px!important;padding:16px 20px;border-radius:var(--raio);
  background:var(--papel);border:1px dashed var(--linha-forte);}
.mntx .faq-nada a{color:var(--azul);font-weight:600;text-decoration:none;}
.mntx .faq-nada a:hover{text-decoration:underline;}

.mntx .faq-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:clamp(24px,3.5vw,36px);padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--linha);}
.mntx .faq-pe p{margin:0!important;font-size:1rem;font-weight:600;color:var(--titulo);}
.mntx .faq-pe-acoes{display:flex;flex-wrap:wrap;gap:10px;}

@media (max-width:640px){
  .mntx .faq-q summary{padding:14px 16px;font-size:.96rem;gap:12px;}
  .mntx .faq-r{padding:0 16px 16px;}
  .mntx .faq-pe{flex-direction:column;align-items:stretch;}
  .mntx .faq-pe-acoes .btn{width:100%;}
}

/* O botão de claro/escuro veste o mesmo círculo do globo de idioma. */
.mnt .mnt-cor-btn::before{
  -webkit-mask:var(--sol-svg) center/contain no-repeat;
  mask:var(--sol-svg) center/contain no-repeat;}
.mnt .mnt-cor-btn[data-escuro="1"]::before{
  -webkit-mask:var(--lua-svg) center/contain no-repeat;
  mask:var(--lua-svg) center/contain no-repeat;}
.mnt{
  --sol-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5'/%3E%3C/svg%3E");
  --lua-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z'/%3E%3C/svg%3E");}

/* ===========================================================================
 * Seções que usam .bloco
 *
 * "Do começo ao fim" (cadeia) e o orçamento em três perguntas nasceram antes
 * do tema e montam <section class="bloco"><div class="dentro">. Sem estilo
 * aqui elas viravam duas faixas brancas altíssimas no meio da página — que é
 * exatamente como apareceram no primeiro teste desta versão.
 * ========================================================================= */

.mnt .bloco{padding-block:var(--secao-y);background:var(--branco);}
.mnt .bloco .dentro{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--folga);}
.mnt .bloco > .dentro > h2{max-width:20ch;}
.mnt .bloco .sub{max-width:64ch;margin-bottom:clamp(24px,3.5vw,38px);
  font-size:clamp(1rem,1.7vw,1.1rem);color:var(--tinta-2);}

/* Xadrez de fundo: duas seções claras encostadas viram uma faixa só, e o
   visitante perde a noção de onde um assunto acaba e outro começa. */
.mnt .bloco:nth-of-type(even){background:var(--papel);}
.mnt .secao + .bloco,
.mnt .bloco + .secao-clara{background:var(--papel);}
.mnt .bloco + .bloco{background:var(--branco);}

/* ===========================================================================
 * Defesa contra o tema do WordPress
 *
 * Temas de bloco aplicam text-transform, letter-spacing e margem a todo
 * título e lista do conteúdo. Dentro do site isso aparece como nome de etapa
 * em CAIXA ALTA e marcador de lista onde já há um desenho — coisas que ninguém
 * pediu e que só se descobrem olhando a tela. Aqui a régua é a nossa.
 * ========================================================================= */

.mnt h1,.mnt h2,.mnt h3,.mnt h4,.mnt h5,.mnt h6,
.mntx h1,.mntx h2,.mntx h3,.mntx h4,.mntx h5,.mntx h6{
  text-transform:none;font-family:var(--fonte-tit);}
/* A etiqueta de seção é a única que é maiúscula de propósito. */
.mnt .etiqueta,.mntx.serv-pag h2,.mntx.caso h2,.mntx.ramo-pag h2,
.mnt .etapa .num,.mnt .ficha dt,.mnt .canal-rot,.mnt .rodape h4{
  text-transform:uppercase;}

.mnt ul,.mnt ol{margin:0;padding:0;}
.mnt li{list-style:none;}
.mnt li::marker{content:"";}

/* O tema costuma limitar a largura de tudo o que é filho do conteúdo. */
.mnt,.mnt .env,.mnt .bloco,.mnt .bloco .dentro,.mnt .secao,.mnt .faixa,
.mnt .abertura,.mnt .rodape{max-width:none;}
.mnt .env,.mnt .bloco .dentro{max-width:var(--env);}

/* O resultado do orçamento vive numa caixa azul-marinho. O tema do WordPress
   pinta parágrafo e título do conteúdo com a cor do texto dele, e o prazo —
   que é a resposta inteira da seção — saía cinza-escuro sobre azul-escuro. */
.mntx .est-saida .est-prazo,
.mntx .est-saida .est-faixa,
.mntx .est-frente h3{color:#fff;}
.mntx .est-saida .est-rotulo,
.mntx .est-saida .est-resumo,
.mntx .est-saida .est-aviso{color:#A9C6E2;}

/* ===========================================================================
 * Palco de projetos e alvos de toque
 * ========================================================================= */

/* O portfólio da página inicial anda de lado. Sem overflow declarado, os
   cartões saem pela direita e o celular ganha rolagem lateral — foi assim
   que apareceram 262px de imagem fora da tela no primeiro teste. */
.mnt .proj-palco{position:relative;}
.mnt .proj-palco .projetos,
.mntx [data-proj-trilho]{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);
  grid-template-columns:none;gap:22px;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;}
.mnt .proj-palco .projetos::-webkit-scrollbar{display:none;}
.mnt .proj-palco .projeto{scroll-snap-align:start;}
@media (min-width:1100px){
  .mnt .proj-palco .projetos{grid-auto-columns:minmax(0,calc(50% - 11px));}
}

.mnt .seta-p{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:42px;height:42px;padding:0;
  border:1px solid var(--linha);border-radius:50%;background:var(--branco);
  cursor:pointer;box-shadow:var(--sombra-2);
  transition:opacity .2s,border-color .2s,transform .2s;}
.mnt .proj-palco[data-setas="0"] .seta-p{opacity:0;pointer-events:none;}
.mnt .seta-p svg{width:18px;height:18px;fill:none;stroke:var(--titulo);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.mnt .seta-p:hover{border-color:var(--azul);}
.mnt .seta-p:hover svg{stroke:var(--azul);}
.mnt .seta-p:disabled{opacity:.3;cursor:default;}
.mnt .seta-p.ant{left:-16px;}
.mnt .seta-p.prox{right:-16px;}
@media (max-width:1100px){
  .mnt .seta-p.ant{left:4px;}
  .mnt .seta-p.prox{right:4px;}
}

/* Alvo de toque: 24px é o mínimo da WCAG 2.2 para link dentro de lista de
   texto. Vale para o rodapé e para o menu, onde o dedo erra com facilidade. */
.mnt .rodape li a,.mnt .menu a,.mnt .rodape-base a{
  display:inline-flex;align-items:center;min-height:26px;}

/* O link da política, embaixo da caixa de aceite, é o alvo mais errado do
   formulário: fica colado na caixa e tinha 17px de altura. */
.mnt-form .mnt-form-priv{display:inline-flex;align-items:center;min-height:26px;}

/* ===========================================================================
 * Nada estoura a tela
 *
 * minmax(330px,1fr) num container de 360px com folga lateral não cabe: o
 * grid respeita o mínimo e empurra 18px para fora, e o celular ganha uma
 * rolagem lateral que ninguém consegue explicar olhando o desenho. min() com
 * 100% resolve sem mudar nada no desktop.
 * ========================================================================= */

.mntx .cad-trilhos{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));}
.mntx .est-opcoes{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));}
.mntx .est-escopo{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.mntx .serv-entregas,.mntx .ramo-servicos,.mntx .serv-indice,.mntx .ramo-indice{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.mntx.dep-grade{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}

/* Filho de grid ou flex não encolhe abaixo do próprio conteúdo sem isto. */
.mnt .env > *,.mnt .contato-cartao > *,.mnt .rodape-in > *,
.mnt .etapas > *,.mnt .compromissos > *{min-width:0;}

/* O cartão de contato tem padding em clamp(); no celular, a soma do padding
   com a largura do canal passava 4px da tela. A folga interna encolhe junto. */
@media (max-width:560px){
  .mnt .contato-cartao{padding:20px 16px;}
  .mnt .canal{padding:13px 14px;gap:11px;}
}

/* ===========================================================================
 * Acertos do modo escuro
 * ========================================================================= */

/* A logo do topo é desenhada para fundo claro. No escuro entra a do rodapé,
   que é a versão para fundo escuro — as duas saem no HTML e o CSS escolhe,
   para não depender de JavaScript nem piscar a errada no carregamento. */
.mnt .marca .marca-escura{display:none;}
[data-mnt-cor="escuro"] .mnt .marca .marca-clara{display:none;}
[data-mnt-cor="escuro"] .mnt .marca .marca-escura{display:block;}
@media (prefers-color-scheme:dark){
  [data-mnt-cor="auto"] .mnt .marca .marca-clara{display:none;}
  [data-mnt-cor="auto"] .mnt .marca .marca-escura{display:block;}
}

/* Botão de linha no escuro: fundo de cartão com texto claro tinha contraste
   de 2:1. Vira contorno sobre o próprio fundo da seção. */
[data-mnt-cor="escuro"] .mnt .btn-linha{background:transparent;}
[data-mnt-cor="escuro"] .mnt .btn-claro{background:var(--azul);color:#06121C;}
@media (prefers-color-scheme:dark){
  [data-mnt-cor="auto"] .mnt .btn-linha{background:transparent;}
  [data-mnt-cor="auto"] .mnt .btn-claro{background:var(--azul);color:#06121C;}
}

/* A faixa e a seção escura já são escuras por natureza: no modo escuro elas
   precisam de um tom PRÓPRIO, senão somem dentro do fundo da página. */
[data-mnt-cor="escuro"] .mnt .faixa,
[data-mnt-cor="escuro"] .mnt .escuro,
[data-mnt-cor="escuro"] .mnt .rodape{
  background:linear-gradient(160deg,#0C1D2B,#132D45);}
[data-mnt-cor="escuro"] .mnt .abertura{
  background:radial-gradient(1100px 520px at 88% -8%,rgba(99,174,242,.14),transparent 62%),
             var(--papel);}
@media (prefers-color-scheme:dark){
  [data-mnt-cor="auto"] .mnt .faixa,
  [data-mnt-cor="auto"] .mnt .escuro,
  [data-mnt-cor="auto"] .mnt .rodape{background:linear-gradient(160deg,#0C1D2B,#132D45);}
  [data-mnt-cor="auto"] .mnt .abertura{
    background:radial-gradient(1100px 520px at 88% -8%,rgba(99,174,242,.14),transparent 62%),
               var(--papel);}
}

/* As perguntas da página de serviço ganham o mesmo acordeão das perguntas
   frequentes. Eram duas caixas parecidas e diferentes na mesma marca — e é
   justamente esse tipo de "quase igual" que faz um site parecer remendado. */
.mntx details.serv-q{border-radius:var(--raio);transition:border-color .18s,box-shadow .18s;}
.mntx details.serv-q[open]{border-color:color-mix(in srgb,var(--azul) 45%,var(--linha));
  box-shadow:var(--sombra-1);}
.mntx .serv-q summary{min-height:60px;padding:16px 20px;gap:16px;color:var(--titulo);}
.mntx .serv-q summary::after{content:"";flex:none;position:relative;width:22px;height:22px;
  margin-left:auto;border-radius:50%;background:var(--azul-claro);
  background-image:var(--mais-svg);background-size:11px;background-position:center;
  background-repeat:no-repeat;transition:background-color .18s,transform .22s;}
.mntx details.serv-q[open] summary::after{background-color:var(--azul);
  background-image:var(--menos-svg);transform:rotate(180deg);}
.mntx{
  --mais-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231B6FC0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  --menos-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");}
.mntx .serv-q p{padding:0 20px 20px!important;font-size:.97rem;line-height:1.7;}

/* Links de "ler mais" dentro dos cartões: são alvo de toque e precisam de
   altura própria, não só da linha de texto. */
.mntx .servico-mais a,.mntx .projeto-caso a,.mntx .faq-nada a{
  display:inline-flex;align-items:center;min-height:26px;}

/* O miolo do orçamento e da corrente tem largura própria (780px e 1040px),
   menor que a da seção. Sem acertar o container, o título encostava na
   margem esquerda e o conteúdo ficava centralizado — dois eixos diferentes
   na mesma seção, que é o tipo de desalinhamento que se sente antes de se
   perceber. */
.mnt #estimativa > .dentro{max-width:calc(780px + var(--folga) * 2);}
.mnt #cadeia > .dentro{max-width:calc(1040px + var(--folga) * 2);}

/* Os itens do menu de idioma passaram a ser links quando cada idioma tem
   endereço próprio. Vestem igual aos botões que eram antes. */
.mnt .idioma-lista a{display:block;width:100%;padding:10px 12px;
  font:500 .9rem/1.2 var(--fonte);color:var(--tinta);text-decoration:none;
  border-radius:8px;transition:background var(--anda);}
.mnt .idioma-lista a:hover{background:var(--papel);}
.mnt .idioma-lista a[aria-current="true"]{color:var(--azul);font-weight:600;
  background:var(--azul-claro);}

/* ===========================================================================
 * Raio-X do site
 *
 * A tela tem uma ordem de leitura só: campo → nota → o que falta → conversar.
 * A nota é grande porque é o gancho; a lista é longa porque é ela que
 * convence. Quem falta vem antes de quem está de pé, de propósito: a página
 * existe para mostrar trabalho a fazer.
 * ========================================================================= */

.mntx.raiox{max-width:820px;margin-inline:auto;}

.mntx .rx-linha{display:flex;gap:10px;}
.mntx .rx-linha input{flex:1 1 auto;min-width:0;height:56px;padding:0 18px;
  font:inherit;font-size:1.02rem;color:var(--tinta);background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio-p);
  -webkit-appearance:none;appearance:none;
  transition:border-color .16s,box-shadow .16s;}
.mntx .rx-linha input:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 18%,transparent);}
.mntx .rx-linha input::placeholder{color:var(--tinta-3);opacity:1;}
.mntx button.rx-btn{flex:none;height:56px;min-width:190px;}

.mntx .rx-girando{display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:mnt-gira .7s linear infinite;}
.mntx [data-indo="1"] .rx-girando{display:block;}
.mntx button.rx-btn:disabled{opacity:.75;cursor:default;}

.mntx .rx-erro{margin:10px 0 0!important;font-size:.9rem;color:#B3261E;}
.mntx .rx-erro:empty{margin:0!important;}
.mntx .rx-aviso{margin:12px 0 0!important;font-size:.83rem;line-height:1.55;
  color:var(--tinta-3);max-width:70ch;}

/* ------------------------------- o resultado ----------------------------- */
.mntx .rx-saida{margin-top:clamp(24px,3.5vw,34px);}
.mntx .rx-saida:focus{outline:none;}
.mntx .rx-saida:focus-visible{outline:2px solid var(--azul);outline-offset:4px;}

.mntx .rx-cabeca{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,32px);
  padding:clamp(20px,3vw,28px);background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra-2);}

.mntx .rx-nota{flex:none;display:grid;place-items:center;width:112px;height:112px;
  border-radius:50%;background:var(--azul-claro);
  border:3px solid color-mix(in srgb,var(--azul) 40%,transparent);}
.mntx [data-faixa="boa"] .rx-nota{background:rgba(30,122,75,.1);border-color:rgba(30,122,75,.45);}
.mntx [data-faixa="media"] .rx-nota{background:rgba(196,138,10,.12);border-color:rgba(196,138,10,.5);}
.mntx [data-faixa="baixa"] .rx-nota{background:rgba(179,38,30,.1);border-color:rgba(179,38,30,.45);}
.mntx .rx-nota-num{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--azul);font-variant-numeric:tabular-nums;}
.mntx [data-faixa="boa"] .rx-nota-num{color:#1E7A4B;}
.mntx [data-faixa="media"] .rx-nota-num{color:#96690A;}
.mntx [data-faixa="baixa"] .rx-nota-num{color:#B3261E;}
.mntx .rx-nota-rot{margin-top:2px;font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2);}

.mntx .rx-alvo{flex:1 1 300px;min-width:0;}
.mntx .rx-host{display:block;margin-bottom:12px;font-size:1.1rem;font-weight:700;
  color:var(--titulo);overflow-wrap:break-word;}

.mntx .rx-barra{display:grid;grid-template-columns:minmax(80px,120px) 1fr 34px;
  align-items:center;gap:10px;margin-bottom:7px;}
.mntx .rx-barra-nome{font-size:.85rem;color:var(--tinta-2);}
.mntx .rx-trilho{height:7px;border-radius:99px;background:var(--papel-2);overflow:hidden;}
.mntx .rx-trilho i{display:block;height:100%;border-radius:99px;background:var(--azul);
  transition:width .5s cubic-bezier(.4,0,.2,1);}
.mntx .rx-trilho i[data-faixa="boa"]{background:#1E7A4B;}
.mntx .rx-trilho i[data-faixa="media"]{background:#C48A0A;}
.mntx .rx-trilho i[data-faixa="baixa"]{background:#B3261E;}
.mntx .rx-barra-num{font-size:.82rem;font-weight:600;text-align:right;
  color:var(--tinta-2);font-variant-numeric:tabular-nums;}

/* --------------------------------- a lista ------------------------------- */
.mntx .rx-sub{margin:clamp(22px,3vw,30px) 0 12px!important;font-size:.76rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-2);}

.mntx .rx-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:13px;
  padding:14px 16px;margin-bottom:8px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);}
.mntx .rx-item[data-bom="0"]{border-left:3px solid #C48A0A;}
.mntx .rx-item strong{display:block;font-size:.97rem;font-weight:600;line-height:1.4;
  color:var(--titulo);}
.mntx .rx-item p{margin:6px 0 0!important;font-size:.9rem;line-height:1.6;
  color:var(--tinta-2);max-width:66ch;}

.mntx .rx-ico{width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:rgba(30,122,75,.12) var(--rx-ok) center/11px no-repeat;}
.mntx .rx-item[data-bom="0"] .rx-ico{background:rgba(196,138,10,.16) var(--rx-falta) center/4px no-repeat;}
.mntx{
  --rx-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --rx-falta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 24' fill='none' stroke='%2396690A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 5v9M4 19v.5'/%3E%3C/svg%3E");}

.mntx .rx-etq{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;
  background:var(--papel);border:1px solid var(--linha);
  font-size:.72rem;font-weight:600;color:var(--tinta-2);}

.mntx .rx-pe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,30px);
  padding-top:clamp(18px,2.5vw,26px);border-top:1px solid var(--linha);}

@media (max-width:640px){
  .mntx .rx-linha{flex-direction:column;}
  .mntx button.rx-btn{width:100%;min-width:0;}
  .mntx .rx-cabeca{flex-direction:column;align-items:stretch;text-align:center;}
  .mntx .rx-nota{margin-inline:auto;}
  .mntx .rx-host{text-align:center;}
  .mntx .rx-barra{grid-template-columns:minmax(72px,96px) 1fr 30px;}
  .mntx .rx-pe .btn{width:100%;}
}

/* O foco vai para o resultado, e o resultado não pode nascer embaixo do topo
   fixo — é a primeira coisa que a pessoa quer ler. */
.mntx .rx-saida{scroll-margin-top:100px;}

/* O que já está resolvido fica recolhido, com a contagem à vista. */
.mntx details.rx-ok-caixa{margin-top:clamp(18px,2.5vw,26px);}
.mntx .rx-ok-caixa summary{display:flex;align-items:center;gap:10px;min-height:48px;
  padding:12px 16px;cursor:pointer;list-style:none;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-2);}
.mntx .rx-ok-caixa summary::-webkit-details-marker{display:none;}
.mntx .rx-ok-caixa summary::after{content:"";width:9px;height:9px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;}
.mntx .rx-ok-caixa[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.mntx .rx-ok-caixa summary:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
.mntx .rx-ok-caixa > div{padding-top:10px;}
