/* Diagnostico de maturidade em prospeccao, versao enxuta (25/10/2026): so a pagina /diagnostico-de-maturidade/ carrega
   este arquivo, depois do diagnostico.css, de onde vem a casca (cartao, topo, medidor, barras, porta do e-mail).
   Uma pergunta por tela. Cores so por variavel do style.css; movimento so com transform e opacity. */
.mat .diag-dims{grid-template-columns:repeat(2,minmax(0,1fr))}
.mat .diag-acoes .btn-linha[hidden]{display:none}

/* a pergunta */
.mat-q{border:0;margin:0;padding:0;min-width:0}
.mat-q legend{float:left;width:100%;padding:0;margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.012em;font-weight:600;color:var(--tinta);text-wrap:balance}
.mat-ops{clear:both;display:flex;flex-direction:column;gap:10px;padding-top:clamp(20px,2.2vw,28px);max-width:720px}
.mat-ops label,.mat-chips label{position:relative;display:block}
.mat-ops input,.mat-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mat-ops span{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 18px;border:1.5px solid var(--borda-forte);border-radius:16px;background:var(--superficie);font-size:16.5px;line-height:1.35;font-weight:500;color:var(--tinta);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.mat-ops kbd{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--borda-forte);font:inherit;font-size:13px;font-weight:600;color:var(--tinta-3);background:var(--plano);transition:background .15s ease,color .15s ease,border-color .15s ease}
.mat-ops label:hover span,.mat-chips label:hover span{border-color:var(--acao)}
.mat-ops label:active span,.mat-chips label:active span{transform:scale(.985)}
.mat-ops input:checked+span{border-color:var(--acao);background:var(--acao-fraca);color:var(--acao-tinta);font-weight:600}
.mat-ops input:checked+span kbd{background:var(--acao);border-color:var(--acao);color:#fff}
.mat-ops input:focus-visible+span,.mat-chips input:focus-visible+span{outline:3px solid var(--acao);outline-offset:2px}
.mat-atalho{margin:18px 0 0;font-size:13px;color:var(--tinta-3)}
.mat-atalho[hidden]{display:none}
.mat .diag-trilho{gap:3px}
@media(hover:none){.mat-ops kbd{display:none}.mat-atalho{display:none}}

/* chips do passo opcional */
.mat-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.mat-chips span{display:flex;align-items:center;min-height:42px;padding:8px 15px;border:1.5px solid var(--borda-forte);border-radius:99px;background:var(--superficie);font-size:14.5px;line-height:1.35;color:var(--tinta);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.mat-chips input:checked+span{border-color:var(--acao);background:var(--acao-fraca);color:var(--acao-tinta);font-weight:600}
.mat-chips-peq span{min-height:38px;padding:6px 13px;font-size:14px}

/* resultado */
.mat-res-barras{grid-template-columns:repeat(4,minmax(0,1fr))}
.mat-meio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;margin-top:clamp(22px,2.4vw,30px)}
.mat-fortes ul{flex-direction:column;gap:12px}
.mat-proj{padding:18px 20px;border-radius:18px;background:var(--azul-claro);border:1px solid var(--borda)}
.mat-proj-rot{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acao-tinta)}
.mat-proj-txt{margin:8px 0 0;font-size:16px;line-height:1.5;font-weight:500;color:var(--tinta)}
.mat-proj-escada{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:end;height:118px;margin-top:16px}
.mat-degrau{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.mat-degrau i{display:block;height:calc(var(--h) * 78px);border-radius:8px 8px 4px 4px;background:var(--borda);transform-origin:bottom;transform:scaleY(.2);opacity:.6;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.mat-revela .mat-degrau i{transform:none;opacity:1}
.mat-degrau.feito i{background:color-mix(in srgb,var(--acao) 35%,var(--borda))}
.mat-degrau.hoje i{background:var(--acao)}
.mat-degrau.alvo i{background:repeating-linear-gradient(135deg,var(--bom) 0 6px,color-mix(in srgb,var(--bom) 55%,transparent) 6px 12px)}
.mat-degrau b{margin-top:6px;font-size:13px;font-weight:700;color:var(--tinta);text-align:center}
.mat-degrau span{font-size:11px;line-height:1.2;color:var(--tinta-3);text-align:center;overflow-wrap:anywhere}
.mat-degrau.hoje b,.mat-degrau.hoje span{color:var(--acao-tinta);font-weight:700}
.mat-degrau.alvo b,.mat-degrau.alvo span{color:var(--bom-tinta,var(--bom));font-weight:700}
.mat-lac-tit{margin:0 0 14px;font-size:19px;font-weight:600;color:var(--tinta)}
.mat-lacunas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mat-lacunas>li{padding:18px 20px;border:1px solid var(--borda);border-radius:18px;background:var(--plano)}
.mat-lac-cab{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:center;margin-bottom:12px}
.mat-lac-cab i{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:var(--critico);color:#fff}
.mat-lac-cab b{font-size:16px;color:var(--tinta)}
.mat-lac-cab span{font-size:13px;color:var(--tinta-3)}
.mat-lacunas dl{margin:0}
.mat-lacunas dt{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--tinta-3)}
.mat-lacunas dd{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.mat-lacunas dd:last-child{color:var(--tinta)}
.mat .diag-detalhe{margin-top:clamp(22px,2.4vw,30px)}

/* o passo opcional, depois do resultado */
.mat-extras{margin-top:clamp(18px,2vw,24px);border:1px solid var(--borda);border-radius:18px;background:var(--superficie)}
.mat-extras summary{display:flex;flex-direction:column;gap:4px;padding:16px 20px;cursor:pointer;list-style:none}
.mat-extras summary::-webkit-details-marker{display:none}
.mat-extras summary b{font-size:16px;color:var(--tinta)}
.mat-extras summary b::after{content:" +";color:var(--acao)}
.mat-extras[open] summary b::after{content:" \2212"}
.mat-extras summary span{font-size:14px;line-height:1.45;color:var(--tinta-2)}
.mat-extras-corpo{padding:0 20px 20px}
.mat-x{border:0;margin:18px 0 0;padding:0;min-width:0}
.mat-x:first-child{margin-top:4px}
.mat-x legend{float:left;width:100%;padding:0;margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--tinta-2)}
.mat-x .mat-chips{clear:both;padding-top:0}
.mat-cnpj{margin-top:16px}
.mat-cnpj input{max-width:320px}
.mat-extras-ok{font-size:14px;color:var(--tinta-2)}

/* texto abaixo da ferramenta */
.mat-niveis{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.mat-niveis li{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:16px;padding:14px 18px;border-radius:14px;background:var(--superficie);border:1px solid var(--borda)}
.mat-niveis b{color:var(--tinta)}
.mat-niveis span{color:var(--tinta-2);line-height:1.5}

@media(max-width:1000px){.mat-res-barras{grid-template-columns:repeat(2,minmax(0,1fr))}.mat-lacunas,.mat-meio{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .mat .diag-dims{grid-template-columns:minmax(0,1fr)}
  .mat-res-barras{grid-template-columns:minmax(0,1fr)}
  .mat-niveis li{grid-template-columns:minmax(0,1fr);gap:4px}
  .mat-ops span{font-size:15.5px;padding:10px 14px}
  .mat-degrau span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.mat-degrau i{transition:none;transform:none;opacity:1}}

/* VISTA UNICA (Luis, 26/10/2026: "mais condensada na altura e alargada na largura, para caber em uma visao unica da
   tela"): a pagina comeca no cartao, que ocupa a largura da faixa; o titulo vira o h1, as 8 dimensoes ficam em 4
   colunas e o painel da nota parcial fica compacto. */
main>section.sec.diag-sec.mat-sec{padding:clamp(14px,1.6vw,24px) 0 clamp(28px,3vw,48px)}
.mat.diag{max-width:none;padding:clamp(18px,2vw,30px) clamp(20px,2.4vw,40px)}
.mat .diag-cab{max-width:none;margin-bottom:clamp(12px,1.4vw,20px)}
.mat .diag-cab .olho{margin-bottom:6px}
.mat .diag-cab h1{max-width:none;margin:0;font-size:clamp(24px,2.2vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:600;color:var(--tinta)}
.mat .diag-cab p{max-width:96ch;margin-top:6px;font-size:clamp(15px,1.05vw,16.5px);line-height:1.5}
.mat .diag-corpo{grid-template-columns:minmax(0,1fr) 270px;gap:clamp(18px,2.2vw,32px)}
.mat .diag-mede{margin:0 0 10px}
.mat .diag-dims{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mat .diag-dims li{padding:11px 12px;column-gap:10px;row-gap:2px;grid-template-columns:28px minmax(0,1fr);align-items:start;align-content:start;border-radius:14px}
.mat .diag-dims li i{align-self:start}
.mat .diag-dims i{width:28px;height:28px;font-size:13px}
.mat .diag-dims b{font-size:15px;line-height:1.3}
.mat .diag-dims span{font-size:13px;line-height:1.35}
.mat .diag-inicio .diag-acoes{margin-top:16px}
.mat .diag-painel{top:86px;padding:14px 18px;border-radius:18px}
.mat .diag-painel .diag-medidor{width:88px;height:88px}
.mat .diag-painel .diag-medidor-num b{font-size:28px}
.mat .diag-painel .diag-medidor-num span{font-size:11px;margin-top:2px}
.mat .diag-painel-rot{margin:6px 0 10px}
.mat .mat-painel-barras{gap:7px}
.mat .mat-painel-barras li{row-gap:3px}
.mat .mat-painel-barras .diag-barra-rot{font-size:12.5px;line-height:1.25}
.mat .mat-painel-barras .diag-barra-num{font-size:12px}
.mat .mat-painel-barras .diag-barra{height:6px}
.mat .diag-escala{margin:10px 0 0;font-size:11.5px;line-height:1.4}
.mat .diag-privado{margin-top:12px}
@media(max-width:1200px){.mat .diag-dims{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.mat .diag-corpo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.mat .diag-dims{grid-template-columns:minmax(0,1fr)}}
/* O RESULTADO NA LARGURA INTEIRA (Luis, 27/10/2026: "aproveitar mais este espaco em branco a direita da tela, tem de ser
   mais wide e evitar rolar"). No fim, a coluna da nota parcial some, e a grade deixava os 270px dela vazios. Em tela
   larga, a nota e as 8 barras dividem a primeira linha, e as 3 lacunas sobem para a primeira tela. */
.mat.diag-no-fim .diag-corpo{grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){
.mat.diag-no-fim .diag-res.ativa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,3.4vw,56px);align-items:center}
.mat.diag-no-fim .diag-res.ativa>*{grid-column:1/-1}
.mat.diag-no-fim .diag-res.ativa>.diag-res-topo{grid-column:1;border-bottom:0;padding-bottom:0}
.mat.diag-no-fim .diag-res.ativa>.mat-res-barras{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;border-bottom:0;padding:0}
.mat.diag-no-fim .diag-res.ativa>.mat-meio{margin-top:26px;padding-top:26px;border-top:1px solid var(--borda)}
}
/* os 8 cartoes com a mesma altura (Luis, 28/10/2026: "tem de ter a mesma altura") */
.mat .diag-dims{grid-auto-rows:1fr}
.mat .diag-dims li{height:100%}
/* os botoes na grade dos cartoes (Luis, 28/10/2026: "realinhar os botoes abaixo dos containers / realinhar o Leva de 3 a
   5 minutos. abaixo o do botao Refazer o Diagnóstico"): cada botao com a largura de uma coluna dos cartoes, e o tempo
   embaixo do Refazer; sem o Refazer (primeira visita), o tempo fica embaixo do Comecar */
.mat .diag-acoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
.mat .diag-acoes .btn,.mat .diag-acoes .btn-linha{width:100%;justify-content:center;margin:0}
.mat .diag-acoes .diag-tempo{grid-column:2;text-align:center;margin:4px 0 0}
.mat .diag-acoes:has(.btn-linha[hidden]) .diag-tempo{grid-column:1}
@media(max-width:1200px){.mat .diag-acoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mat .diag-acoes{grid-template-columns:minmax(0,1fr)}.mat .diag-acoes .diag-tempo{grid-column:1}}
@media(min-width:1201px){.mat .diag-acoes .btn,.mat .diag-acoes .btn-linha{white-space:nowrap;padding-inline:10px;font-size:14.5px}}
/* ABERTURA REDIAGRAMADA (Luis, 29/10/2026: "acredito q pode melhorar bastante, pense profundamente e rediagrame").
   Antes da primeira pergunta, o painel da nota parcial (0 de 100) nao dizia nada e roubava a coluna da direita: ele so
   aparece durante as perguntas. No lugar, o cabecalho segue o visual do site (titulo a esquerda, apoio a direita a
   partir de 1.100 px) e mostra a escada dos 5 niveis que o resultado vai dizer. As 8 dimensoes e os botoes ganham a
   largura toda e continuam na mesma grade (cartoes da mesma altura e botoes alinhados as colunas, pedidos de 28/10).
   O rotulo sai das maiusculas, e no celular cada cartao tem a altura do proprio texto. */
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-painel{display:none}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-corpo{grid-template-columns:minmax(0,1fr)}
.mat.diag-em-curso .mat-cab-escada,.mat.diag-no-fim .mat-cab-escada{display:none}
.mat .diag-mede{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta-2);margin:0 0 12px}
.mat-cab-escada{margin-top:16px}
.mat-cab-escada p{margin:0 0 10px;font-size:14px;font-weight:600;line-height:1.4;color:var(--tinta-2)}
.mat-escada-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:start}
.mat-escada-mini li{display:grid;grid-template-rows:118px auto auto;min-width:0} /* barras mais altas (Luis, 29/10/2026: "pode aumentar um pouco a altura, tem espaco") */
.mat-escada-mini i{align-self:end}
.mat-escada-mini i{display:block;height:calc(18px + var(--n) * 20px);border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--acao) calc(14% + var(--n) * 16%),var(--borda))}
.mat-escada-mini b{margin-top:6px;font-size:13px;line-height:1;color:var(--tinta)}
.mat-escada-mini span{margin-top:3px;font-size:12px;line-height:1.25;color:var(--tinta-3);overflow-wrap:anywhere}
@media(min-width:1100px){
  .mat .diag-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,96px);align-items:end;margin-bottom:clamp(20px,2vw,32px)}
  .mat .diag-cab .olho{grid-column:1}
  .mat .diag-cab h1{grid-column:1;grid-row:2;font-size:clamp(30px,2.6vw,44px);line-height:1.08}
  .mat .diag-cab>p{grid-column:1;grid-row:3;margin:10px 0 0;max-width:72ch}
  .mat .diag-cab .mat-cab-escada{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}
  .mat .diag-cab{align-items:start}
}
@media(max-width:600px){
  .mat .diag-dims{grid-auto-rows:auto}
  .mat .diag-dims li{height:auto}
  .mat-escada-mini span{font-size:10.5px}
}
/* a secao do diagnostico comeca perto do topo: a folga grande de .sec do visual novo empurrava o cartao para baixo */
main>section.sec.diag-sec.mat-sec{--sec-y:clamp(16px,2vw,32px)}
/* o tempo no texto de apoio, em negrito (Luis, 29/10/2026) */
.mat .diag-cab .mat-tempo{display:block;margin-top:6px;font-weight:700;color:var(--tinta)} /* na linha de baixo do texto de apoio (Luis, 29/10/2026) */

/* fim do diagnostico (29/10/2026): baixar em azul, falar com a equipe em verde (o verde do Confirmar codigo), dossie exemplo em branco */
.mat .diag-acoes .btn[hidden]{display:none}
.mat .diag-detalhe .diag-acoes .btn,.mat .diag-detalhe .diag-acoes .btn-linha{min-height:46px}
.mat .diag-acoes .btn-equipe{background:#15803d;border-color:#15803d;color:#fff}
.mat .diag-acoes .btn-equipe:hover,.mat .diag-acoes .btn-equipe:focus-visible{background:#166534;border-color:#166534;color:#fff}
/* MAIS ALTURA NA ABERTURA (Luis, 29/10/2026: "esta muito achatado este espacamento das linhas na altura, deixar mais alta
   esta secao e container"): folga antes e depois do cartao, mais respiro dentro dele e entre os blocos, e linhas
   mais abertas nos textos. Vale para a abertura; as perguntas e o resultado ficam como estavam. */
main>section.sec.diag-sec.mat-sec{--sec-y:clamp(32px,4.4vw,72px)}
.mat:not(.diag-em-curso):not(.diag-no-fim).diag{padding:clamp(28px,3.2vw,56px) clamp(22px,2.8vw,52px)}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-cab{margin-bottom:clamp(28px,3vw,48px)}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-cab .olho{margin-bottom:12px}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-cab h1{line-height:1.16}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-cab>p{margin-top:16px;line-height:1.7}
.mat:not(.diag-em-curso):not(.diag-no-fim) .mat-cab-escada p{margin-bottom:14px;line-height:1.5}
.mat:not(.diag-em-curso):not(.diag-no-fim) .mat-escada-mini span{margin-top:5px;line-height:1.4}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-mede{margin:0 0 16px}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-dims{gap:12px}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-dims li{padding:18px 18px;row-gap:6px}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-dims b{line-height:1.4}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-dims span{line-height:1.55}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-inicio .diag-acoes{margin-top:28px;gap:12px}
.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-privado{margin-top:24px;line-height:1.6}
@media(min-width:1100px){.mat:not(.diag-em-curso):not(.diag-no-fim) .diag-cab{row-gap:0}}

/* O CAMINHO COM A GOSEEK (Luis, 29/10/2026): depois das 3 lacunas, o nivel de hoje e os degraus que a implantacao e
   o uso da plataforma sobem (js/maturidade.js, mostrarPromessa; textos em maturidade-24-10/promessa_2910.py) */
.mat-promessa{margin-top:clamp(22px,2.4vw,30px);padding:clamp(20px,2.4vw,28px);border-radius:20px;background:transparent;border:1px solid var(--borda)}
.mat-promessa[hidden]{display:none}
.mat-promessa-rot{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--acao-tinta)}
.mat-promessa-sub{margin:8px 0 0;font-size:clamp(19px,1.6vw,23px);line-height:1.3;font-weight:600;color:var(--tinta)}
.mat-promessa-hoje{margin:12px 0 0;font-size:clamp(16px,1.25vw,18px);line-height:1.55;font-weight:500;color:var(--tinta);max-width:70ch}
.mat-promessa-lead{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--tinta-2);max-width:78ch}
.mat-promessa-passos-rot{margin:22px 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--tinta-3)}
.mat-promessa-passos{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;counter-reset:passo}
.mat-promessa-passos>li{position:relative;padding:16px 18px;border-radius:16px;background:var(--plano);border:1px solid var(--borda);border-top:3px solid color-mix(in srgb,var(--acao) calc(14% + var(--n) * 16%),var(--borda))}
.mat-promessa-passos>li.hoje{border-top-color:var(--borda);border-style:dashed;border-top-style:solid;background:transparent}
.mat-promessa-passos>li+li::before{content:"";position:absolute;left:-10px;top:26px;width:8px;height:8px;border-top:2px solid var(--tinta-3);border-right:2px solid var(--tinta-3);transform:translateX(-2px) rotate(45deg);opacity:.55}
.mat-promessa-cab{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center}
.mat-promessa-cab i{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--acao);color:#fff}
.mat-promessa-passos>li.hoje .mat-promessa-cab i{background:var(--borda);color:var(--tinta-2)}
.mat-promessa-cab b{font-size:15px;line-height:1.3;color:var(--tinta)}
.mat-promessa-cab small{font-size:12px;color:var(--tinta-3)}
.mat-promessa-passos p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.mat-promessa-junto{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--azul-claro);font-size:15px;line-height:1.6;font-weight:500;color:var(--tinta)}
@media(max-width:800px){.mat-promessa-passos{grid-auto-flow:row}.mat-promessa-passos>li+li::before{left:26px;top:-9px;transform:rotate(135deg)}}

/* BARRA DE ENTRADA (Luis, 29/10/2026: a entrada no padrao do formulario da home, css/visual.css #inicio .form): o
   campo e o botao azul na mesma moldura, sem caixa cinza; o codigo e o erro abrem embaixo (js/maturidade.js) */
.mat .mat-barra{display:flex;align-items:center;gap:6px;width:100%;max-width:600px;margin:28px 0 0;padding:6px;border:1px solid var(--borda-forte);border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-1);transition:border-color .15s ease,box-shadow .15s ease}
.mat .mat-barra:focus-within{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fraca)}
.mat .mat-barra input[type="email"]{flex:1 1 auto;min-width:0;height:48px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;outline:none;color:var(--tinta);font:inherit;font-size:16px}
.mat .mat-barra input[type="email"]::placeholder{color:var(--tinta-3)}
.mat .mat-barra input[type="email"]:focus,.mat .mat-barra input[type="email"]:focus-visible{border:0;box-shadow:none;outline:none}
.mat .mat-barra input[readonly]{color:var(--tinta-2)}
.mat .mat-barra .btn{flex:0 0 auto;height:48px;min-height:48px;margin:0;padding:0 22px;border-radius:8px;font-size:15px;font-weight:600;white-space:nowrap}
.mat .mat-barra-porta{max-width:600px;margin-top:14px}
.mat .mat-barra-porta[hidden]{display:none}
.mat .mat-barra-porta .diag-erro{margin:10px 0 0}
.diag:not(.diag-vivo) .diag-inicio .mat-barra{display:none}
@media(max-width:560px){
  .mat .mat-barra{flex-direction:column;align-items:stretch}
  .mat .mat-barra .btn{width:100%}
}

/* AS 3 LACUNAS ALINHADAS (Luis, 29/10/2026: "deixar os 3 na mesma altura, alinhados"): nas tres colunas, o Problema, a
   Solucao e o Onde a GoSeek entra comecam na mesma altura; cada linha tem a altura do texto mais longo (subgrid) */
@media(min-width:1001px){
  .mat-lacunas{grid-template-rows:repeat(7,auto);row-gap:0}
  .mat-lacunas>li{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start}
  .mat-lacunas>li dl{display:contents}
}
@media(max-width:560px){.mat-escada-mini li{grid-template-rows:84px auto auto}.mat-escada-mini i{height:calc(12px + var(--n) * 14px)}}
/* rotulos das lacunas em preto e negrito (Luis, 29/10/2026: "as palavras Problema e Solução na cor preta, negrito" e "Idem, onde a goseek entra, mas mantenha a goseek no padrao negrito e cor do logo"); a marca leva o Go azul do span.marca-nome */
.mat-lacunas dt{color:#0b0d10;font-weight:700}