/* ===========================================================================
 * Manarte — estilo Moderno (v1.39)
 *
 * A cara nova. Não é um tema novo: é uma camada por cima do tema que já
 * existe, ligada em Manarte › Site › Aparência › Estilo. Desligou, volta tudo
 * ao que era — o que importa quando a mudança é grande e o site está no ar.
 *
 * O que muda, em uma frase: a página deixa de ser uma sequência de caixas
 * brancas do mesmo tamanho e passa a ter RITMO — uma abertura que ocupa a
 * tela, respiro entre as seções, e uma chamada só no fim.
 *
 * Quatro decisões que sustentam o resto:
 *
 *   1. TIPOGRAFIA GRANDE. O título da abertura vai a 4rem no desktop. Site de
 *      serviço vende pelo que promete na primeira linha, e primeira linha
 *      pequena não promete nada.
 *   2. UM BOTÃO PRINCIPAL POR TELA. Dois botões cheios lado a lado dividem a
 *      atenção e não dobram o clique.
 *   3. SOMBRA COLORIDA, NÃO CINZA. Sombra cinza sobre fundo azulado suja;
 *      sombra tingida do próprio azul afunda o cartão sem sujar.
 *   4. NADA DE VALOR. Continua valendo a regra do site inteiro: preço é
 *      conversa, não vitrine.
 * ========================================================================= */

.mnt, .mntx {
  --mo-raio:22px;
  --mo-raio-p:14px;
  --mo-sombra:0 2px 4px rgba(11,58,99,.04), 0 12px 28px rgba(11,58,99,.09);
  --mo-sombra-alta:0 4px 10px rgba(11,58,99,.07), 0 28px 60px rgba(11,58,99,.16);
  --mo-borda:1px solid color-mix(in srgb, var(--azul) 12%, transparent);
}

/* ---------------------------------------------------------------------------
 * Topo: barra flutuante
 * Colada no alto e com fundo translúcido, ela vira parte da abertura em vez
 * de uma faixa carimbada por cima dela.
 * ------------------------------------------------------------------------- */
.mnt .topo{
  background:color-mix(in srgb, var(--branco) 78%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.mnt .topo[data-rolou="1"]{
  border-bottom-color:color-mix(in srgb, var(--azul) 12%, transparent);
  box-shadow:0 6px 24px rgba(11,58,99,.06);
}
.mnt .menu a{border-radius:var(--raio-btn);padding:7px 13px;transition:background .2s,color .2s;}
.mnt .menu a:hover{background:var(--azul-claro);}

/* ---------------------------------------------------------------------------
 * Abertura
 * Fundo de luz em vez de cor chapada: dois focos suaves e uma malha fina. A
 * malha é o que impede o degradê de parecer um erro de renderização.
 * ------------------------------------------------------------------------- */
.mnt .abertura{
  position:relative;
  padding-block:clamp(48px,7vw,104px);
  background:
    radial-gradient(760px 420px at 12% -6%, color-mix(in srgb, var(--azul) 16%, transparent), transparent 62%),
    radial-gradient(620px 380px at 92% 8%, color-mix(in srgb, var(--ciano) 20%, transparent), transparent 58%),
    var(--papel);
  overflow:hidden;
}
/* O quadriculado saiu da abertura (v1.40).
   Ele existia para o degradê não parecer erro de renderização — mas isso é
   resolver um problema com outro: textura de fundo que ninguém pediu é
   decoração, e decoração disputa com o texto que precisa ser lido primeiro.
   O degradê sozinho, mais contido, resolve sem precisar de malha. */
.mnt .abertura > *{position:relative;z-index:1;}

/* v1.55 — coluna única, centralizada (a ficha técnica saiu). O título ganha a
   largura toda e quebra em duas linhas equilibradas em vez de três. */
.mnt .abertura h1{
  font-size:clamp(2.1rem,5.2vw,4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
}
.mnt .abertura .etiqueta{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--branco) 82%, transparent);
  border:var(--mo-borda);
  box-shadow:0 1px 2px rgba(11,58,99,.05);
  letter-spacing:.04em;
}
.mnt .abertura .etiqueta::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.mnt .abertura .chamada{font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.6;max-width:56ch;}

/* ---------------------------------------------------------------------------
 * Chave na mão — o que você entrega pronto
 *
 * Era uma tira de três colunas SEM TÍTULO, encostada na abertura. Três
 * afirmações aparecendo do nada não são lidas como prova: são lidas como
 * "o que é isso?". Agora é uma seção com nome, e as quatro etapas são uma
 * lista ordenada de verdade — porque entregar chave na mão tem ordem, e a
 * ordem é parte do que está sendo dito.
 * ------------------------------------------------------------------------- */
.mnt .turnkey{padding-block:clamp(44px,5.5vw,72px);}
.mnt .turnkey-cabeca{max-width:46ch;margin-bottom:clamp(26px,3.4vw,40px);}
.mnt .turnkey-cabeca h2{margin:10px 0 0;}
/* A explicação de "turnkey" e a linha de escopo. As duas existem para a seção
   não ser lida como "tudo incluso"; por isso ficam legíveis, e não em cinza de
   nota de rodapé. --tinta-2 é o mesmo tom já medido nos rótulos. */
.mnt .turnkey-apoio{margin:12px 0 0;max-width:62ch;color:var(--tinta-2);
  font-size:clamp(.94rem,1.5vw,1.02rem);line-height:1.6;}
.mnt .turnkey-pe{margin:clamp(18px,2.4vw,26px) 0 0;max-width:68ch;
  color:var(--tinta-2);font-size:.92rem;line-height:1.55;}
/* v1.55 — em tela larga o título fica de um lado e a explicação do outro. Com o
   cabeçalho preso a 46ch o título quebrava em três linhas e o resto da linha
   ficava em branco: um vazio de 700 px em cima das quatro etapas. Cada peça
   que o painel apagar deixa a outra no seu lugar (colunas explícitas). */
@media (min-width:1000px){
  .mnt .turnkey-cabeca{max-width:none;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,7vw,110px);align-items:end;}
  .mnt .turnkey-cabeca > .etiqueta{grid-column:1 / -1;}
  .mnt .turnkey-cabeca > h2{grid-column:1;}
  .mnt .turnkey-cabeca > .turnkey-apoio{grid-column:2;margin:0 0 6px;max-width:none;}
}

.mnt .prova{
  list-style:none;margin:0;padding:0;counter-reset:etapa;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(18px,2.4vw,30px);
}
/* Sem caixa, sem borda, sem sombra: quatro cartões brancos em cima de papel
   quase branco só acrescentam contorno. O que separa as etapas é o espaço e
   o fio de cima — menos bordas, mais espaçamento. */
.mnt .prova-item{
  padding-top:16px;border-top:2px solid var(--azul-claro);
}
.mnt .prova-item:first-child{border-top-color:var(--azul);}
/* A numeração vem do CSS, não do texto: quem edita os campos não precisa
   renumerar nada ao tirar ou pôr uma etapa. */
.mnt .prova-item strong{display:block;font-size:1rem;color:var(--titulo);font-weight:600;
  letter-spacing:-.01em;}
.mnt .prova-item strong::before{
  counter-increment:etapa;content:counter(etapa,decimal-leading-zero);
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--azul);margin-bottom:8px;}
.mnt .prova-item span{display:block;margin-top:6px;font-size:.89rem;
  color:var(--tinta-2);line-height:1.55;max-width:34ch;}

/* ---------------------------------------------------------------------------
 * Ritmo das seções
 * ------------------------------------------------------------------------- */
.mnt .secao{padding-block:clamp(52px,7.5vw,108px);}
.mnt .cabeca{max-width:64ch;}
.mnt .cabeca h2{
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.1;letter-spacing:-.03em;font-weight:700;
}
.mnt .etiqueta{font-size:.76rem;font-weight:700;letter-spacing:.09em;}

/* ---------------------------------------------------------------------------
 * Cartões
 * Canto maior, sombra tingida, e a borda azulando no passar do mouse. Nada de
 * transformar o cartão inteiro em outra cor: mudar a cor de fundo no hover
 * faz o texto piscar e o olho perder a linha que estava lendo.
 * ------------------------------------------------------------------------- */
.mntx .servico,.mntx .projeto,.mnt .contato-cartao,.mnt-form,
.mntx .serv-q,.mnt .canal,.mntx .faq-item{
  border-radius:var(--mo-raio)!important;
}
.mntx .servico,.mntx .projeto,.mnt .contato-cartao{
  border:var(--mo-borda);box-shadow:var(--mo-sombra);
}
.mntx .servico:hover,.mntx .projeto:hover{
  box-shadow:var(--mo-sombra-alta);
  border-color:color-mix(in srgb, var(--azul) 28%, transparent);
}
.mnt .canal{border-radius:var(--mo-raio-p)!important;}

/* Um botão cheio por tela. A forma é a mesma do clássico: quadrado de pontas
   arredondadas. A pílula foi embora — ela lê como etiqueta, não como ação, e
   deixava o topo parecendo uma fileira de selos. */
.mnt .btn,.mntx .btn,.mnt-form-btn{border-radius:var(--raio-btn)!important;}
.mnt .btn-cheio,.mntx .btn-cheio{
  box-shadow:0 2px 6px color-mix(in srgb, var(--azul) 28%, transparent),
             0 10px 24px color-mix(in srgb, var(--azul) 22%, transparent);
}
.mnt .btn-cheio:hover,.mntx .btn-cheio:hover{
  box-shadow:0 4px 10px color-mix(in srgb, var(--azul) 34%, transparent),
             0 16px 34px color-mix(in srgb, var(--azul) 26%, transparent);
}

/* ---------------------------------------------------------------------------
 * Faixa azul
 * ------------------------------------------------------------------------- */
/* O recuo da faixa é UM número, e mora aqui.
   Ele estava escrito duas vezes — na faixa e na chamada — e a consulta de
   celular zerava só a margem, não a compensação. Variável única: mexer no
   recuo acerta a margem e a compensação no mesmo gesto. */
.mnt{--faixa-recuo:clamp(0px,2vw,24px);}

/* A faixa recua da borda; o TEXTO dentro dela não.
   Sem isto, o recuo empurrava o conteúdo junto e as duas faixas escuras
   começavam 20px à direita de todas as outras seções em 1024px. Ninguém lê
   isso como "20px" — lê como página torta.

   Compensar o padding resolvia numas larguras e estragava em outras: quando o
   .env bate no próprio limite ele passa a ser CENTRALIZADO, e aí quem manda
   no eixo não é mais o padding. Corrigir o padding é remédio para o sintoma.

   A causa é outra: deslocar a caixa da seção muda o bloco que contém o .env.
   Então a seção deixa de se deslocar. Ela ocupa a largura inteira, igual a
   todas as outras — e o recuo vira PINTURA, num pseudo-elemento. O eixo do
   texto passa a não depender da largura da tela, e o vigia não precisa mais
   de número mágico nenhum. */
.mnt .faixa,
.mnt .cta-final{
  position:relative;isolation:isolate;
  margin-inline:0;border-radius:0;background:none;
}
.mnt .faixa::after,
.mnt .cta-final::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0 var(--faixa-recuo);
  border-radius:clamp(0px,3vw,34px);
}

.mnt .faixa::after{
  background:
    /* O brilho era ciano a 24%: sobre o marinho ele subia a luz do canto a
       ponto de a etiqueta de segmento cair para 4,08:1 ali. Azul e mais
       escuro que ciano na mesma proporcao. */
    radial-gradient(520px 300px at 88% 0%, color-mix(in srgb, var(--azul) 20%, transparent), transparent 60%),
    linear-gradient(135deg, var(--marinho), var(--marinho-2) 58%,
      #0A5577);
}
.mnt .faixa-num strong{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.04em;}

/* ---------------------------------------------------------------------------
 * Perguntas frequentes
 * Linha larga, respiro grande e o sinal girando. FAQ apertada não é lida: a
 * pessoa bate o olho, vê parede de texto e rola.
 * ------------------------------------------------------------------------- */
.mntx .faq-lista{display:grid;gap:10px;}
.mntx details.faq-item{
  border:var(--mo-borda);border-radius:var(--mo-raio)!important;
  background:var(--branco);box-shadow:var(--mo-sombra);
  transition:box-shadow .25s,border-color .25s;
}
.mntx details.faq-item[open]{
  box-shadow:var(--mo-sombra-alta);
  border-color:color-mix(in srgb, var(--azul) 26%, transparent);
}
.mntx .faq-item summary{
  padding:20px clamp(18px,2.4vw,26px);
  font-size:clamp(1rem,1.5vw,1.1rem);font-weight:600;color:var(--titulo);
  gap:18px;min-height:0;
}
.mntx .faq-item .faq-resposta,.mntx .faq-item > div{
  padding:0 clamp(18px,2.4vw,26px) 22px;
  font-size:1rem;line-height:1.65;color:var(--tinta-2);max-width:78ch;
}

/* ---------------------------------------------------------------------------
 * Chamada final
 *
 * A classe é .cta-final e não .chamada: .chamada já é o parágrafo da abertura,
 * e a colisão pintou o parágrafo do topo com o degradê da seção do fim. Erro
 * que só aparece olhando — o CSS não avisa quando dois donos escolhem o mesmo
 * nome.
 * Uma só, antes do rodapé, com um botão. O site inteiro caminha para cá.
 * ------------------------------------------------------------------------- */
.mnt .cta-final{
  padding-block:clamp(48px,7vw,92px);
  color:#fff;
}
.mnt .cta-final::after{
  background:
    radial-gradient(620px 340px at 84% 4%, color-mix(in srgb, var(--azul) 20%, transparent), transparent 62%),
    /* --azul-forte CLAREIA no modo escuro, de proposito: e cor de texto
       azul sobre fundo escuro. Numa faixa que e sempre escura, isso subia a
       ponta do degrade ate quase branco e o texto branco sumia. */
    linear-gradient(140deg, var(--marinho), var(--marinho-2) 62%,
      #0A5577);
}
/* A malha segue o mesmo recuo da pintura, senão ela vazaria para as bordas
   que a faixa não ocupa. */
/* Aqui também saiu o quadriculado. Nenhuma área do site usa malha. */
.mnt .cta-final .env{position:relative;z-index:1;text-align:center;}
.mnt .cta-final h2{
  margin:0 auto 14px;max-width:20ch;color:#fff;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;
}
.mnt .cta-final p{margin:0 auto 26px;max-width:56ch;font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.6;color:#DCE9F4;}
/* align-items:center e nao o stretch padrao: o botao com icone e o sem
   icone tem alturas diferentes, e esticados ficam desencontrados na base. */
.mnt .cta-final .cta-acoes{display:flex;gap:12px;justify-content:center;
  align-items:center;flex-wrap:wrap;}
.mnt .cta-final .btn-linha{border-color:rgba(255,255,255,.4);color:#fff;background:transparent;}
.mnt .cta-final .btn-linha:hover{border-color:#fff;background:rgba(255,255,255,.1);}
/* A regra dos paragrafos desta secao ja poe margem embaixo; aqui a margem
   tem de ser em cima, e a de baixo sumir. */
.mnt .cta-final .cta-pe{margin:22px auto 0!important;font-size:.88rem;color:#DCE9F4;}

/* ---------------------------------------------------------------------------
 * Rodapé
 * ------------------------------------------------------------------------- */
.mnt .rodape{margin-top:0;border-radius:0;}

/* ---------------------------------------------------------------------------
 * Movimento
 * Discreto e curto. Quem pediu menos movimento no aparelho não recebe nada —
 * e isso não é opção de painel, é respeito a uma escolha que a pessoa já fez.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .mnt .prova-item{transition:transform .25s;}
  .mnt .prova-item:hover{transform:translateY(-2px);}
}

/* ---------------------------------------------------------------------------
 * Celular
 * ------------------------------------------------------------------------- */
@media (max-width:760px){
  .mnt .abertura{padding-block:36px 44px;}
  .mnt .abertura h1{font-size:clamp(1.95rem,8.4vw,2.5rem);line-height:1.08;}
  .mnt .prova{grid-template-columns:1fr;}
  /* No celular a faixa continua sendo um cartao, e nao uma barra de ponta a
     ponta: o proprio .mnt ja tem folga lateral, entao forcar sangria exigiria
     margem negativa do tamanho exato dessa folga — o tipo de acerto que
     quebra no dia em que a folga mudar. */
  .mnt{--faixa-recuo:0px;}
  .mnt .faixa::after,.mnt .cta-final::after,.mnt .cta-final::before{border-radius:18px;}
  .mnt .cta-final .cta-acoes .btn{width:100%;justify-content:center;}
}

/* No escuro o vidro do topo precisa de outro ponto de partida, senão vira uma
   mancha clara sobre a página escura. */
[data-mnt-cor="escuro"] .mnt .topo{
  background:color-mix(in srgb, var(--papel) 80%, transparent);
}
@media (prefers-color-scheme: dark){
  [data-mnt-cor="auto"] .mnt .topo{
    background:color-mix(in srgb, var(--papel) 80%, transparent);
  }
}

/* ---------------------------------------------------------------------------
 * O briefing curto
 *
 * Seis perguntas, e a tela precisa parecer seis — não um formulário. Por isso
 * uma coluna só, largura de leitura, e nenhuma borda em volta do conjunto: a
 * moldura faria parecer "cadastro", que é exatamente o que afasta.
 * ------------------------------------------------------------------------- */
.mnt .briefe .briefe-apoio{margin:12px 0 0;max-width:58ch;color:var(--tinta-2);
  font-size:clamp(.94rem,1.5vw,1.02rem);line-height:1.6;}

.mnt .briefe-tipo{max-width:42ch;margin:clamp(22px,3vw,32px) 0 clamp(18px,2.4vw,26px);}
.mnt .briefe-tipo label{display:block;margin-bottom:7px;font-weight:600;color:var(--titulo);}
.mnt .briefe-tipo select{width:100%;}

.mnt .briefe-grupo{display:grid;gap:clamp(16px,2.2vw,22px);max-width:62ch;}

.mnt .briefe-campo{margin:0;}
.mnt .briefe-campo label{display:block;margin-bottom:7px;font-weight:600;
  color:var(--titulo);line-height:1.4;}
.mnt .briefe-campo input[type=text],
.mnt .briefe-campo textarea,
.mnt .briefe-campo select{width:100%;box-sizing:border-box;}
.mnt .briefe-campo small{display:block;margin-top:6px;color:var(--tinta-2);
  font-size:.86rem;line-height:1.5;}

.mnt .briefe-nota{margin:clamp(18px,2.4vw,24px) 0 0;max-width:58ch;
  color:var(--tinta-2);font-size:.92rem;line-height:1.55;}

.mnt .briefe-ir{margin:clamp(18px,2.4vw,26px) 0 0;}

/* Em tela larga o cabeçalho fica de um lado e as perguntas do outro. Uma coluna
   de 62 caracteres colada à esquerda de um contêiner de 1180 px deixava metade
   da seção em branco. O cabeçalho acompanha a rolagem enquanto as perguntas
   passam, e só existe coluna quando existe cabeçalho. */
@media (min-width:1000px){
  .mnt .briefe .briefe-2col{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);
    column-gap:clamp(40px,6vw,88px);align-items:start;}
  .mnt .briefe .briefe-2col > .cabeca{grid-column:1;grid-row:1 / span 8;position:sticky;top:110px;margin:0;}
  .mnt .briefe .briefe-2col > :not(.cabeca){grid-column:2;}
  .mnt .briefe .briefe-2col .briefe-tipo{margin-top:0;max-width:none;}
  .mnt .briefe .briefe-2col .briefe-grupo{max-width:none;}
}

/* v1.55 — Perguntas frequentes: o título à esquerda (grudado enquanto a lista
   rola) e a lista à direita. Antes a lista ficava centralizada, em 860 px,
   embaixo de um título alinhado à esquerda: duas margens diferentes na mesma
   seção. Sem cabeçalho (os três textos apagados no painel) a lista volta a
   ficar sozinha e centralizada. */
@media (min-width:1000px){
  .mnt #perguntas > .env{display:grid;grid-template-columns:minmax(240px,4fr) minmax(0,8fr);
    column-gap:clamp(40px,6vw,96px);align-items:start;}
  .mnt #perguntas > .env > .cabeca{grid-column:1;position:sticky;top:110px;margin:0;}
  .mnt #perguntas > .env > .mntx.faq{grid-column:2;max-width:none;margin-inline:0;}
  .mnt #perguntas > .env > .mntx.faq:only-child{grid-column:1 / -1;max-width:860px;margin-inline:auto;}
}

@media (max-width:640px){
  .mnt .briefe-ir .btn{display:block;width:100%;text-align:center;}
}