/* Layout: coluna central de 1120px, faixas de cor sangrando nas bordas.
   O limao entra uma vez por tela; o corte a 55 graus so' nas aberturas. */
:root{
  --azul:#0054A6; --fundo-azul:#003A73; --limao:#D6E040; --tinta:#12233A;
  --superficie:#FFFFFF; --nevoa:#F4F6F9; --apoio:#DCE7F5; --borda:#C9D6E6; --suave:#4A5A6E;
  --cartao:#FFFFFF; --verde:#157F4C;
  --sans:Figtree,"Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --larg:1120px; --leitura:66ch;
  --corte:120px; --corte-l:84px; /* 120 / 1.428 — o angulo do losango da marca */
  --marca-listras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 120'%3E%3Cg fill='none' stroke='%23003A73' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'%3E%3Cpath d='M0 0 L60 60 L0 120'/%3E%3Cpath d='M22 0 L82 60 L22 120'/%3E%3Cpath d='M44 0 L104 60 L44 120'/%3E%3C/g%3E%3C/svg%3E");
  --marca-whats:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.7.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.27-.2-.57-.35M12.05 21.8a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.43 9.89-9.89 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.9 0-3.17-1.24-6.16-3.48-8.4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --azul:#4D94E0; --fundo-azul:#0B1C30; --tinta:#E8EDF3; --superficie:#0E1725;
  --nevoa:#16233A; --apoio:#1E3355; --borda:#2C405E; --suave:#A9B7C7;
  --cartao:#16233A; --verde:#2E9B66; color-scheme:dark;}}
:root[data-theme="dark"]{
  --azul:#4D94E0; --fundo-azul:#0B1C30; --tinta:#E8EDF3; --superficie:#0E1725;
  --nevoa:#16233A; --apoio:#1E3355; --borda:#2C405E; --suave:#A9B7C7;
  --cartao:#16233A; --verde:#2E9B66; color-scheme:dark;}

*{box-sizing:border-box}
/* ACESSIBILIDADE
   Corpo em 18px, que e' o minimo confortavel para leitura longa no celular,
   e nenhum texto do site abaixo de 14px. Peso minimo 400: nada de 300, que
   some em tela clara. O contraste de cada par de cor foi medido e passa de
   4,5:1 nos dois temas. */
body{background:var(--superficie);color:var(--tinta);font-family:var(--sans);font-size:18px;line-height:1.58;-webkit-font-smoothing:antialiased}
/* foco visivel para quem navega pelo teclado */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[contenteditable]:focus-visible{
  outline:3px solid var(--azul);outline-offset:2px;border-radius:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--superficie)}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--azul)}
button{font:inherit;color:inherit}
.ab-env{max-width:var(--larg);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ab-faixa{width:100%}
.ab-sec{padding-block:clamp(34px,5vw,64px)}
.ab-sec-nevoa{background:var(--nevoa)}
.ab-olho{display:block;font-size:14px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--azul);margin-bottom:12px}
.ab-olho-claro{color:var(--limao)}
.ab-lead{font-size:clamp(17px,1.9vw,20px);color:var(--suave);max-width:var(--leitura);line-height:1.45}
.ab-txt{max-width:var(--leitura);color:var(--suave);margin-top:12px}
.ab-tit-sec{font-size:clamp(24px,3.2vw,35px);max-width:20ch}
.ab-tit-sub{font-size:clamp(19px,2.2vw,23px);margin-bottom:10px}

/* ---------- topo ---------- */
.ab-topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--superficie);border-bottom:1px solid var(--borda)}
.ab-topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:11px;flex-wrap:wrap}
.ab-topo .ab-nav{padding-bottom:7px}
.ab-marca{display:flex;align-items:center;background:none;border:0;cursor:pointer;padding:2px 0}
.ab-marca img{height:42px;width:auto}
/* A LOGO NAO GANHA MAIS CAIXA BRANCA NO TEMA ESCURO.
   Ela tem versao negativa — assets/abazze-logo-clara.png, lockup branco com o
   losango em limao — e quem troca uma pela outra e' o <picture> em
   inc/site-topo.php, pelo prefers-color-scheme. Nao reponha fundo claro
   aqui: a caixa branca aparecia como um retangulo solto no alto da tela. */
.ab-marca picture { display: block; line-height: 0; }
.ab-nav{display:flex;gap:1px;flex-wrap:wrap;margin-left:-9px}
.ab-nav button{background:none;border:0;cursor:pointer;padding:7px 9px;font-size:15px;font-weight:600;color:var(--suave);border-bottom:2px solid transparent}
.ab-nav button[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--limao)}
.ab-nav button:hover{color:var(--tinta)}
/* sumario da pagina */
.ab-sumario{background:var(--nevoa);border-bottom:1px solid var(--borda)}
.ab-sumario .ab-env{display:flex;gap:6px;flex-wrap:wrap;padding-block:9px;align-items:center}
.ab-sumario b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-right:4px}
.ab-sumario a{font-size:15px;font-weight:700;color:var(--azul);text-decoration:none;padding:5px 10px;background:var(--superficie);border:1px solid var(--borda)}
.ab-sumario a:hover{border-color:var(--azul)}

/* ---------- botoes ---------- */
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-weight:800;font-size:16px;padding:14px 22px;text-decoration:none;line-height:1.2;border-radius:0}
.ab-btn-zap{background:var(--verde);color:#fff}
.ab-btn-zap:hover{filter:brightness(.92)}
.ab-btn-azul{background:var(--azul);color:#fff}
.ab-btn-limao{background:var(--limao);color:#12233A}
.ab-btn-linha{background:none;border:2px solid var(--borda);color:var(--tinta)}
.ab-btn-linha:hover{border-color:var(--azul)}
.ab-btn-p{font-size:15px;padding:10px 15px}
.ab-zap-ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}
/* ATENCAO AO EDITAR EM LOTE: os tres seletores abaixo contem o texto
   "wa.me" dentro de aspas. Isso e' o ENDERECO do link, nao um nome de
   classe. Em 27/10/2026 um script que acrescentou o prefixo "ab-" nas
   classes do sistema novo leu o ".me" como classe e gravou "wa.ab-me",
   e a marca do WhatsApp sumiu de todos os botoes do site sem ninguem
   perceber, porque nada quebra: o seletor simplesmente deixa de casar.
   Qualquer substituicao em massa neste arquivo precisa pular o que esta'
   entre aspas. */
/* A MARCA DO WHATSAPP, POSTA PELO PROPRIO ENDERECO DO LINK.
   A regra reconhece o botao pelo href com wa.me, entao vale para os botoes
   de hoje e para qualquer um criado depois, sem precisar lembrar de marcar
   um por um. O desenho herda a cor do texto do botao, entao funciona tanto
   no botao verde quanto no de contorno branco sobre fundo azul. */
a.ab-btn[href*="wa.me"]::before{
  content:"";flex:0 0 auto;width:1.15em;height:1.15em;background-color:currentColor;
  -webkit-mask:var(--marca-whats) center/contain no-repeat;mask:var(--marca-whats) center/contain no-repeat}
/* Botao de contorno que leva ao WhatsApp: a borda fica verde, para a cor
   tambem indicar o destino, menos quando ele esta sobre fundo azul escuro,
   onde o verde perderia contraste e a marca sozinha ja resolve. */
a.ab-btn-linha[href*="wa.me"]{border-color:var(--verde);color:var(--verde)}
.ab-fecho a.ab-btn-linha[href*="wa.me"]{border-color:rgba(255,255,255,.75);color:#fff}

/* ---------- abertura ---------- */
.ab-abre{background:var(--nevoa);position:relative;overflow:hidden}
.ab-abre .ab-env{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,48px);align-items:center;padding-block:clamp(28px,4.5vw,56px)}
.ab-abre h1{font-size:clamp(31px,5.6vw,56px);line-height:1;letter-spacing:-.035em}
.ab-listras{position:absolute;top:-30px;left:-40px;z-index:0;line-height:0;pointer-events:none}
.ab-foto-corte{position:relative;isolation:isolate;margin:0}
/* Imagem larga mantém a proporção dela: o corte de 4:3 comeria a arte. */
.ab-foto-larga img{aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important}
/* Abertura sem foto: o texto ocupa a largura toda em vez de deixar meia
   tela vazia ao lado. */
.ab-abre-texto .ab-env{grid-template-columns:1fr}
/* ONDE O CORTE DA FOTO COMECA.
   Quase toda foto da escola e' vertical, e a caixa e' horizontal: alguma
   coisa vai sair do quadro. Com o corte centralizado, o que saia era a
   cabeca das pessoas. A 20% o quadro fica preso no alto da imagem, que e'
   onde estao os rostos; o que sobra do chao nao faz falta. */
.ab-foto-corte img{position:relative;z-index:1;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center 20%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte-l)) 100%,0 100%)}
.ab-num-linha{display:flex;flex-wrap:wrap;gap:0;margin:20px 0}
.ab-num-linha>div{padding-right:20px;position:relative}
.ab-num-linha>div+div{padding-left:20px}
.ab-num-linha>div+div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--borda);transform:skewX(-35deg)}
.ab-num-linha b{display:block;font-size:clamp(21px,2.8vw,28px);font-weight:800;letter-spacing:-.04em;line-height:1}
.ab-num-linha span{display:block;font-size:14.5px;color:var(--suave);margin-top:5px;max-width:16ch}
.ab-acoes{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- faixa limao ---------- */
.ab-limao-faixa{background:var(--limao);color:#12233A;padding-block:26px}
.ab-limao-faixa .ab-env{display:flex;flex-wrap:wrap;gap:0;align-items:flex-start}
.ab-limao-faixa .ab-n{padding-right:24px;position:relative;max-width:19rem}
.ab-limao-faixa .ab-n+.ab-n{padding-left:24px}
.ab-limao-faixa .ab-n+.ab-n::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:rgba(0,58,115,.3);transform:skewX(-35deg)}
.ab-limao-faixa b{display:block;font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:-.04em;color:#003A73;line-height:1.05}
.ab-limao-faixa span{display:block;font-size:14.5px;color:#243A52;margin-top:6px;max-width:19ch;line-height:1.38}
/* O SELO DA OFERTA.
   Era um retangulo limao chapado. Agora ele e' um bloco da marca: a ponta
   direita e' cortada no angulo de 55 graus do simbolo, e o corte passa so'
   por espaco vazio, nunca por cima do texto, por isso o respiro a direita e'
   maior que o da esquerda. As listras do cubo aparecem de leve atras, no
   canto onde o corte abre. */
.ab-oferta-selo{
  position:relative;display:inline-block;background:var(--limao);color:#12233A;
  padding:15px 78px 15px 22px;margin:18px 0;overflow:hidden;max-width:100%;
  clip-path:polygon(0 0,100% 0,calc(100% - 55px) 100%,0 100%)}
.ab-oferta-selo::before{
  content:"";position:absolute;right:16px;top:-10px;bottom:-10px;width:70px;pointer-events:none;
  background:var(--marca-listras) right center/contain no-repeat;opacity:.5}
.ab-oferta-selo b{position:relative;display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#003A73;margin-bottom:5px}
/* a linha do valor nao quebra no computador: em duas linhas o corte deixa
   de bater com o angulo da marca e o selo perde a forma */
.ab-oferta-selo span{position:relative;display:block;font-size:21px;font-weight:800;letter-spacing:-.022em;line-height:1.1;white-space:nowrap}
/* sobre fundo escuro o selo vira contorno, e ai' o corte sairia pela metade
   da borda: nesse caso o bloco fica inteiro. */
.ab-oferta-selo[style]{clip-path:none;padding-right:22px}
.ab-oferta-selo[style]::before{display:none}
@media (max-width:560px){
  .ab-oferta-selo{padding:13px 46px 13px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%)}
  .ab-oferta-selo::before{width:44px;right:8px}
  .ab-oferta-selo span{font-size:17px;white-space:normal;line-height:1.2}
  .ab-oferta-selo b{font-size:12px}
}

/* ---------- trilha ---------- */
.ab-trilha-azul{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.ab-trilha-azul .ab-env{position:relative;z-index:1}
.ab-trilha-azul .ab-listras{top:-40px;left:auto;right:-20px}
.ab-trilha{list-style:none;margin:0;padding:0}
.ab-trilha li{border-top:1px solid rgba(255,255,255,.22)}
.ab-trilha li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.ab-trilha button{display:flex;width:100%;text-align:left;align-items:baseline;justify-content:space-between;gap:18px;
  padding:17px 0;background:none;border:0;cursor:pointer;color:#fff;font-size:clamp(19px,2.8vw,29px);font-weight:800;letter-spacing:-.03em}
.ab-trilha button:hover{color:var(--limao)}
.ab-trilha small{font-size:15px;font-weight:400;color:rgba(255,255,255,.86);letter-spacing:0;text-align:right}

/* ---------- cartoes e listas ---------- */
.ab-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:16px;margin-top:22px}
.ab-grade-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ab-cartao{background:var(--cartao);border:1px solid var(--borda);padding:20px;min-width:0}
.ab-cartao h3{font-size:18px;margin-bottom:8px}
.ab-cartao h4{font-size:16px;margin-bottom:6px}
.ab-cartao p{font-size:16px;color:var(--suave);line-height:1.52}
.ab-cartao > img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%}
.ab-cartao .ab-ic{width:24px;height:24px;stroke:var(--azul);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:11px}
.ab-pares{list-style:none;margin:20px 0 0;padding:0}
.ab-pares li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--borda);font-size:16px;flex-wrap:wrap}
.ab-pares li b{font-weight:800;max-width:34ch}
.ab-pares li span{color:var(--suave);font-size:16px;text-align:right;max-width:46ch;flex:1;min-width:200px}
.ab-aviso{background:var(--apoio);color:var(--tinta);padding:13px 16px;font-size:15px;line-height:1.5;margin-top:18px;border-left:4px solid var(--azul)}
.ab-aviso-limao{border-left-color:var(--limao);background:var(--nevoa)}
.ab-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(18px,3vw,36px);align-items:center;margin-top:22px}
.ab-lista-ok{list-style:none;margin:16px 0 0;padding:0}
.ab-lista-ok li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--borda);font-size:16.5px}
.ab-lista-ok li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;border-right:3px solid var(--azul);border-bottom:3px solid var(--azul);transform:rotate(-45deg)}

/* ---------- turnos ---------- */
.ab-turnos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:20px}
.ab-turno{border:1px solid var(--borda);background:var(--cartao);padding:18px;min-width:0}
.ab-turno.ab-aberto{border-color:var(--azul);border-top:5px solid var(--limao)}
.ab-turno .ab-selo{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--verde);margin-bottom:8px}
.ab-turno.ab-fechado .ab-selo{color:var(--suave)}
.ab-turno h4{font-size:19px;margin-bottom:4px}
.ab-turno .ab-dias{font-size:15.5px;color:var(--suave);min-height:2.8em}
.ab-turno .ab-val{font-size:27px;font-weight:800;letter-spacing:-.04em;margin-top:12px;color:var(--azul)}
.ab-turno .ab-val small{display:block;font-size:14px;font-weight:400;color:var(--suave);letter-spacing:0;margin-top:4px}
.ab-turno .ab-acao{margin-top:14px}

/* ---------- grade curricular ---------- */
.ab-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:16px;margin-top:20px}
.ab-bloco{border:1px solid var(--borda);background:var(--cartao);padding:18px;min-width:0}
.ab-bloco b{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
.ab-bloco ul{list-style:none;margin:0;padding:0}
.ab-bloco li{font-size:16px;padding:7px 0;border-bottom:1px solid var(--borda);color:var(--suave)}
.ab-bloco li:last-child{border-bottom:0}
.ab-total-h{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--fundo-azul);color:#fff;padding:16px 20px;margin-top:16px;flex-wrap:wrap}
.ab-total-h b{font-size:clamp(22px,3vw,30px);letter-spacing:-.04em;color:var(--limao)}

/* ---------- faq ---------- */
.ab-faq{margin-top:20px;border-top:1px solid var(--borda)}
.ab-faq details{border-bottom:1px solid var(--borda)}
.ab-faq summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;font-weight:800;font-size:16.5px;position:relative}
.ab-faq summary::-webkit-details-marker{display:none}
.ab-faq summary::after{content:"";position:absolute;right:6px;top:21px;width:8px;height:8px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .15s}
.ab-faq details[open] summary::after{transform:rotate(-135deg)}
.ab-faq .ab-r{padding:0 0 16px;font-size:16.5px;color:var(--suave);line-height:1.58;max-width:var(--leitura)}

/* ---------- quiz ---------- */
.ab-q-casca{max-width:720px}
.ab-q-prog{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ab-q-barra{flex:1;height:6px;background:var(--apoio);min-width:0}
.ab-q-barra i{display:block;height:100%;background:var(--limao);transition:width .3s ease}
.ab-q-passo{font-size:14.5px;font-weight:700;color:var(--suave);font-variant-numeric:tabular-nums}
.ab-q-pergunta{font-size:clamp(19px,2.6vw,25px);margin-bottom:18px}
.ab-q-ops{display:grid;gap:10px}
.ab-q-op{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--cartao);
  border:2px solid var(--borda);padding:14px 16px;cursor:pointer;font-size:16px;line-height:1.4}
.ab-q-op:hover:not([disabled]){border-color:var(--azul)}
.ab-q-op b{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;background:var(--apoio);color:var(--azul);font-size:13px;font-weight:800}
.ab-q-op.ab-certa{border-color:var(--verde);background:rgba(21,127,76,.08)}
.ab-q-op.ab-certa b{background:var(--verde);color:#fff}
.ab-q-op.ab-errada{border-color:#B3261E;background:rgba(179,38,30,.07)}
.ab-q-op.ab-errada b{background:#B3261E;color:#fff}
.ab-q-gab{border-left:4px solid var(--limao);background:var(--nevoa);padding:14px 16px;margin-top:16px}
.ab-q-gab strong{display:block;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);margin-bottom:6px}
.ab-q-gab p{font-size:16px;color:var(--suave);line-height:1.52}
.ab-q-placar{background:var(--fundo-azul);color:#fff;padding:clamp(20px,3.5vw,30px);position:relative;overflow:hidden}
.ab-q-placar .ab-listras{top:auto;bottom:-60px;left:auto;right:-30px}
.ab-q-placar .ab-in{position:relative;z-index:1}
.ab-q-placar .ab-nota{font-size:clamp(40px,8vw,66px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--limao)}
.ab-q-placar .ab-nota small{font-size:.35em;color:rgba(255,255,255,.8);letter-spacing:0;font-weight:600}
.ab-q-placar p{color:rgba(255,255,255,.88);max-width:46ch;margin-top:10px}
.ab-form-linha{display:grid;gap:10px;margin-top:16px;max-width:460px}
.ab-campo{display:grid;gap:6px}
.ab-campo label{font-size:14.5px;font-weight:700;color:var(--suave)}
.ab-campo input{font:inherit;font-size:16px;padding:12px 13px;border:2px solid var(--borda);background:var(--superficie);color:var(--tinta);border-radius:0;min-width:0}
.ab-campo input:focus{outline:2px solid var(--azul);outline-offset:1px}
.ab-consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--suave);line-height:1.5}
.ab-consent input{margin-top:3px;flex:0 0 auto;width:20px;height:20px;accent-color:var(--azul)}
.ab-rank{border:1px solid var(--borda);background:var(--cartao);margin-top:18px}
.ab-rank h3{padding:15px 18px 0;font-size:17px}
.ab-rank ol{list-style:none;margin:10px 0 0;padding:0}
.ab-rank li{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--borda);font-size:15px}
.ab-rank li.ab-eu{background:var(--apoio)}
.ab-rank .ab-pos{font-weight:800;color:var(--azul);min-width:24px;font-variant-numeric:tabular-nums}
.ab-rank .ab-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-rank .ab-pts{font-weight:800;font-variant-numeric:tabular-nums}
.ab-rank .ab-vazio{padding:15px 18px;color:var(--suave);font-size:14.5px}

/* ---------- laboratorio ---------- */
.ab-lab{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(18px,3vw,32px);margin-top:22px;align-items:start}
.ab-lab-palco{position:relative;background:var(--nevoa);border:1px solid var(--borda)}
.ab-lab-palco img{width:100%}
.ab-ponto{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:999px;border:3px solid #fff;
  background:var(--azul);color:#fff;font-weight:800;font-size:14px;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4);padding:0}
.ab-ponto:hover,.ab-ponto[aria-pressed="true"]{background:var(--limao);color:#12233A;border-color:#12233A}
.ab-ponto:focus-visible{outline:3px solid var(--limao);outline-offset:2px}
.ab-lab-ficha{border:1px solid var(--borda);background:var(--cartao);padding:20px}
.ab-lab-ficha .ab-olho{margin-bottom:7px}
.ab-lab-ficha h3{font-size:20px;margin-bottom:9px}
.ab-lab-ficha p{font-size:16.5px;color:var(--suave);line-height:1.52}
.ab-lab-ficha .ab-pratica{margin-top:14px;border-left:4px solid var(--limao);padding-left:12px;font-size:15.5px;color:var(--tinta)}
.ab-lab-lista{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.ab-lab-lista button{background:var(--nevoa);border:1px solid var(--borda);padding:8px 12px;font-size:15px;cursor:pointer;font-weight:600}
.ab-lab-lista button[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ---------- equipe ---------- */
.ab-equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin-top:24px}
.ab-pessoa{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
.ab-pessoa img{width:104px;height:104px;border-radius:999px;object-fit:cover;border:3px solid var(--apoio)}
.ab-pessoa h3{font-size:18px}
.ab-pessoa .ab-funcao{font-size:15px;font-weight:700;color:var(--azul);margin-top:4px}
.ab-pessoa .ab-bio{font-size:16px;color:var(--suave);line-height:1.52;margin-top:9px}
@media (max-width:420px){.ab-pessoa{grid-template-columns:1fr}.ab-pessoa img{width:92px;height:92px}}

/* ---------- galeria ---------- */
.ab-galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.ab-galeria figure{margin:0;min-width:0}
.ab-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;border:1px solid var(--borda)}
.ab-galeria figcaption{font-size:15px;color:var(--suave);margin-top:9px;line-height:1.5}

/* ---------- mapa ---------- */
.ab-mapa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,32px);margin-top:22px;align-items:start}
.ab-mapa-svg{width:100%;height:auto;background:var(--nevoa);border:1px solid var(--borda)}
.ab-mapa-svg .ab-reg{cursor:pointer}
.ab-mapa-svg .ab-reg:hover{opacity:.85}
.ab-mapa-ficha{border:1px solid var(--borda);background:var(--cartao);padding:20px}
.ab-mapa-ficha h3{font-size:20px;margin-bottom:4px}
.ab-mapa-ficha .ab-peso{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.ab-legenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:14.5px;color:var(--suave)}
.ab-legenda i{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px}

/* ---------- salario ---------- */
.ab-barras{display:grid;gap:17px;margin-top:22px}
.ab-barra-l{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:16px;align-items:center}
.ab-barra-n{font-size:15.5px;font-weight:600}
.ab-barra-n span{display:block;font-size:14.5px;font-weight:400;color:var(--suave);margin-top:3px}
.ab-trilho{position:relative;height:16px;background:var(--apoio);min-width:0}
.ab-faixa-v{position:absolute;top:0;bottom:0;background:var(--limao)}
.ab-marca-v{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--fundo-azul)}
.ab-marca-v.ab-so{width:10px;background:var(--limao);border-left:2px solid var(--fundo-azul);border-right:2px solid var(--fundo-azul)}
.ab-rot{position:absolute;top:-22px;font-size:14px;font-weight:700;color:var(--azul);white-space:nowrap;font-variant-numeric:tabular-nums}
.ab-rot.ab-dir{transform:translateX(-100%)}
.ab-escala{position:relative;height:17px;min-width:0;border-top:1px solid var(--borda)}
.ab-escala span{position:absolute;top:4px;transform:translateX(-50%);font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-escala span:first-child{transform:none}
.ab-escala span:last-child{transform:translateX(-100%)}
.ab-fonte{font-size:14.5px;color:var(--suave);border-left:3px solid var(--borda);padding-left:12px;margin-top:9px;line-height:1.5}

/* ---------- curriculo ---------- */
.ab-cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(18px,3vw,32px);margin-top:22px;align-items:start}
.ab-cv-papel{background:#fff;color:#12233A;border:1px solid var(--borda);padding:24px 22px;font-size:15px;line-height:1.52}
.ab-cv-papel .ab-sub{color:#4A5A6E;font-size:14.5px;margin-top:4px}
.ab-cv-papel hr{border:0;border-top:2px solid var(--limao);margin:13px 0}
.ab-cv-papel .ab-bl{margin-bottom:13px}
.ab-cv-papel .ab-bl b{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#0054A6;margin-bottom:6px}
.ab-cv-campo{min-height:1.5em;outline:0;border-bottom:1px dashed var(--borda);padding:1px 0}
.ab-cv-campo:focus{background:#FFFBDD;border-bottom-color:var(--azul)}
.ab-cv-campo:empty::before{content:attr(data-dica);color:#9AA9BC}

/* ---------- vocacional ---------- */
.ab-voc-ops{display:grid;gap:10px;margin-top:16px}
.ab-voc-op{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:var(--cartao);
  border:2px solid var(--borda);padding:14px 16px;cursor:pointer;font-size:16px;line-height:1.4}
.ab-voc-op:hover{border-color:var(--azul)}
.ab-voc-res{background:var(--nevoa);border:1px solid var(--borda);padding:clamp(18px,3vw,28px)}
.ab-voc-res .ab-perfil{font-size:clamp(22px,3.6vw,31px);color:var(--azul);margin:6px 0 10px}
.ab-voc-barras{display:grid;gap:9px;margin:16px 0 6px}
.ab-voc-b{display:grid;grid-template-columns:minmax(0,175px) minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:15px}
.ab-voc-b .ab-t{height:12px;background:var(--apoio);min-width:0}
.ab-voc-b .ab-t i{display:block;height:100%;background:var(--azul)}
.ab-voc-b .ab-v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--suave)}

/* ---------- vagas e concursos ---------- */
.ab-vaga{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--borda);align-items:start}
.ab-vaga:first-of-type{border-top:2px solid var(--tinta)}
.ab-vaga .ab-onde{font-size:16px;font-weight:800;color:var(--azul);line-height:1.25}
.ab-vaga .ab-onde small{display:block;font-weight:400;color:var(--suave);font-size:14px;margin-top:3px}
/* A data da última revisão fica visível antes da lista: lista de vaga sem
   data não diz se vale a pena clicar. */
/* O link do mapa. Abre numa aba nova, como todo link externo do site. */
.ab-link-mapa{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--azul);text-decoration:none;border-bottom:2px solid var(--limao);padding-bottom:1px}
.ab-link-mapa:hover{color:var(--tinta)}
.ab-link-mapa::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.ab-atualizacao{display:inline-block;background:var(--apoio);color:var(--tinta);border-left:4px solid var(--azul);
  padding:11px 15px;margin-top:16px;font-size:15px;line-height:1.45;max-width:var(--leitura)}
.ab-vaga h4{font-size:16.5px;margin-bottom:4px}
.ab-vaga p{font-size:16px;color:var(--suave);line-height:1.52}

/* ---------- cursos livres ---------- */
.ab-curso-l{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--borda);align-items:baseline;flex-wrap:wrap}
.ab-curso-l b{font-size:16.5px;font-weight:800}
.ab-curso-l span{font-size:15px;color:var(--suave)}
/* O curso com data marcada e' o unico cartao da pagina com foto: e' o que
   tem turma, e e' para ele que o olho deve ir primeiro. */
.ab-destaque-turma{border:1px solid var(--borda);border-left:5px solid var(--limao);background:var(--cartao);
  margin-top:22px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;overflow:hidden}
.ab-destaque-foto{margin:0;min-width:0}
.ab-destaque-foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;min-height:230px}
.ab-destaque-texto{padding:22px 24px;display:grid;gap:4px;align-content:center}
.ab-destaque-turma .ab-selo{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--verde)}
.ab-destaque-turma h3{font-size:23px;margin-top:2px}
.ab-destaque-dados{font-size:16px;margin-top:10px}
.ab-destaque-texto .ab-acoes{margin-top:14px}
@media (max-width:700px){
  .ab-destaque-turma{grid-template-columns:1fr}
  .ab-destaque-foto img{min-height:0;aspect-ratio:16/9}
}

/* ---------- fecho ---------- */
.ab-fecho{background:var(--fundo-azul);color:#fff;position:relative;overflow:hidden}
.ab-fecho .ab-env{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,38px);align-items:center}
.ab-fecho h2{color:#fff;font-size:clamp(23px,3.2vw,34px)}
.ab-fecho p{color:rgba(255,255,255,.85);max-width:42ch;margin-top:10px}
.ab-fecho .ab-listras{top:auto;bottom:-70px;left:40px}
.ab-fecho .ab-acoes-col{display:grid;gap:10px}
.ab-fecho .ab-btn-linha{border-color:rgba(255,255,255,.7);color:#fff}
.ab-rodape{border-top:1px solid var(--borda);padding-block:22px;font-size:14.5px;color:var(--suave)}
.ab-rodape .ab-env{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:860px){
  .ab-abre .ab-env,.ab-lab,.ab-mapa,.ab-cv,.ab-fecho .ab-env,.ab-duas{grid-template-columns:1fr}
  .ab-abre .ab-foto-corte{order:-1}
  :root{--corte:72px;--corte-l:50px}
}
@media (max-width:560px){
  .ab-topo-cta{display:none}
  .ab-barra-l{grid-template-columns:1fr;gap:6px}
  .ab-voc-b{grid-template-columns:1fr;gap:4px}
  .ab-voc-b .ab-v{text-align:left}
  .ab-vaga{grid-template-columns:1fr;gap:6px}
  .ab-limao-faixa .ab-n{max-width:none;flex:1 1 42%;padding-right:16px}
  .ab-limao-faixa .ab-n+.ab-n{padding-left:16px}
  .ab-limao-faixa .ab-n:nth-child(odd){padding-left:0}
  .ab-limao-faixa .ab-n:nth-child(odd)::before{display:none}
  .ab-num-linha>div{padding-right:16px}
  .ab-num-linha>div+div{padding-left:16px}
  .ab-pares li span{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
html{scroll-behavior:smooth}
.ab-sec[id]{scroll-margin-top:110px}

/* =======================================================================
   ADAPTACOES PARA O WORDPRESS
   O sistema acima veio do prototipo aprovado. Abaixo so' o que o site
   publicado precisa e o prototipo nao tinha: menu de celular, rodape de
   verdade, aviso de cookies e os poucos pontos em que uma regra antiga do
   tema alcancaria a marcacao nova.
   ======================================================================= */

/* O tema antigo tem regra de margem para titulo seguido de paragrafo. Dentro
   do sistema novo quem manda e' o sistema novo. */
.ab-site h1 + p, .ab-site h2 + p, .ab-site h3 + p { margin-top: 0; }
.ab-site { overflow-x: clip; }

/* A faixa de cor ja' sangra ate' a borda: o <main> do tema nao tem largura
   maxima, entao .ab-faixa com width:100% basta. Nao use 100vw aqui, que
   inclui a barra de rolagem e cria rolagem lateral. */

/* ---------- menu de celular ----------
   O menu do prototipo quebrava em varias linhas, o que no celular empurrava
   a pagina inteira para baixo. Aqui ele vira um botao. */
.ab-menu-botao { display: none; background: none; border: 2px solid var(--borda); padding: 9px 13px;
  font-size: 15px; font-weight: 800; cursor: pointer; align-items: center; gap: 9px; color: var(--tinta); }
.ab-menu-botao i { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.ab-menu-botao i::before, .ab-menu-botao i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.ab-menu-botao i::before { top: -6px; }
.ab-menu-botao i::after { top: 6px; }
@media (max-width: 900px) {
  .ab-menu-botao { display: inline-flex; }
  .ab-topo .ab-nav { display: none; padding-bottom: 12px; }
  .ab-topo .ab-nav.esta-aberto { display: flex; flex-direction: column; align-items: stretch; margin-left: 0; }
  .ab-topo .ab-nav a { padding: 12px 2px; border-bottom: 1px solid var(--borda); border-left: 3px solid transparent; }
  .ab-topo .ab-nav a[aria-current="page"] { border-left-color: var(--limao); border-bottom-color: var(--borda); padding-left: 9px; }
}

/* No site publicado os itens do menu sao links de verdade, nao botoes. */
.ab-nav a { display: inline-block; padding: 7px 9px; font-size: 15px; font-weight: 600; color: var(--suave);
  border-bottom: 2px solid transparent; text-decoration: none; }
.ab-nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--limao); }
.ab-nav a:hover { color: var(--tinta); }

/* ---------- rodape ---------- */
.ab-rodape { background: var(--fundo-azul); color: #fff; padding-block: clamp(30px, 4vw, 52px); position: relative; overflow: hidden; }
.ab-rodape .ab-env { position: relative; z-index: 1; }
.ab-rodape .ab-listras { top: auto; bottom: -80px; left: auto; right: -30px; }
.ab-rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.ab-rodape h3 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--limao); margin-bottom: 11px; }
.ab-rodape p, .ab-rodape li { font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, .88); }
.ab-rodape ul { list-style: none; margin: 0; padding: 0; }
.ab-rodape a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.ab-rodape a:hover { border-bottom-color: var(--limao); }
.ab-rodape-fim { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.ab-redes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.ab-redes a { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; border: 0; }
.ab-redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- aviso de cookies ----------
   Entra porque o site passou a guardar o apelido e a pontuacao de quem faz o
   quiz. Fica no rodape da tela, nao cobre o conteudo e some assim que a
   pessoa decide. */
.ab-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--superficie);
  border-top: 3px solid var(--limao); box-shadow: 0 -4px 24px rgba(0, 0, 0, .14); padding: 15px 0; }
.ab-cookies .ab-env { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ab-cookies p { font-size: 15px; color: var(--suave); line-height: 1.5; max-width: 62ch; }
.ab-cookies .ab-acoes { gap: 9px; }
@media (max-width: 700px) { .ab-cookies { padding: 13px 0; } }

/* ---------- a lista completa de vagas ----------
   A pagina de vagas do site tem muito mais anuncio que o prototipo: a lista
   e' agrupada por cargo e cada grupo abre e fecha. */
.ab-grupo-vagas { border-top: 2px solid var(--tinta); margin-top: 22px; }
.ab-grupo-vagas > summary { cursor: pointer; list-style: none; padding: 15px 30px 15px 0; font-weight: 800;
  font-size: 17px; position: relative; border-bottom: 1px solid var(--borda); }
.ab-grupo-vagas > summary::-webkit-details-marker { display: none; }
.ab-grupo-vagas > summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 8px; height: 8px;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg); }
.ab-grupo-vagas[open] > summary::after { transform: rotate(-135deg); }
.ab-grupo-vagas > summary span { font-weight: 400; color: var(--suave); font-size: 15px; }
.ab-vaga-link { display: inline-block; margin-top: 7px; font-size: 15px; font-weight: 700; color: var(--azul); }

/* ---------- impressao do curriculo ----------
   Quem quiser o modelo em papel imprime a propria pagina: so' o curriculo sai. */
@media print {
  body > *:not(.ab-site), .ab-topo, .ab-sumario, .ab-rodape, .ab-cookies,
  .abazze-flutuantes, .ab-site .ab-sec:not(#curriculo), #curriculo .ab-cartao,
  #curriculo .ab-olho, #curriculo .ab-tit-sec, #curriculo .ab-lead, #curriculo .ab-aviso,
  #curriculo .ab-acoes { display: none !important; }
  #curriculo .ab-cv { display: block; }
  .ab-cv-papel { border: 0; padding: 0; }
}

/* ---------- pecas que so' existem no site publicado ---------- */

/* A trilha do rodape da home e' feita de links de verdade, nao de botoes. */
.ab-trilha a { display: flex; width: 100%; text-align: left; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 17px 0; color: #fff; text-decoration: none;
  font-size: clamp(19px, 2.8vw, 29px); font-weight: 800; letter-spacing: -.03em; }
.ab-trilha a:hover { color: var(--limao); }
.ab-trilha a small { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .86); letter-spacing: 0; text-align: right; }

/* A PROVA DO DIFERENCIAL.
   Cada diferencial da pagina de venda carrega a prova ao lado, nesta
   tarjinha. Diferencial sem prova nao entra na pagina. */
.ab-prova { margin-top: 11px; border-left: 3px solid var(--limao); padding-left: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }

/* As fichas do laboratorio e do mapa ficam todas na pagina; o clique so'
   troca qual aparece. Assim o conteudo existe sem JavaScript. */
.ab-ficha[hidden] { display: none; }

/* O titulo das paginas que ainda nao foram reescritas no sistema novo. */
.ab-abre-texto h1 { font-size: clamp(31px, 5.6vw, 52px); }

/* ---------- a linha de matriculas, dentro do topo ----------
   Uma faixa so' antes do cabecalho, e so' nas paginas em que a matricula do
   Tecnico e' o proximo passo. Ver inc/site-topo.php. */
.ab-faixa-matricula { background: var(--fundo-azul); color: #fff; }
.ab-faixa-matricula .ab-env { display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding-block: 9px; }
.ab-faixa-matricula p { font-size: 15px; }
.ab-faixa-matricula strong { color: var(--limao); }
.ab-faixa-matricula a { color: #fff; font-size: 14.5px; font-weight: 800; text-decoration: none;
  border: 2px solid rgba(255, 255, 255, .6); padding: 5px 12px; }
.ab-faixa-matricula a:hover { border-color: var(--limao); color: var(--limao); }
/* A faixa leva ao WhatsApp, entao leva a marca junto, igual aos botoes.
   Ver a regra geral mais acima neste arquivo. */
.ab-faixa-matricula a[href*="wa.me"] { display: inline-flex; align-items: center; gap: .5em; }
.ab-faixa-matricula a[href*="wa.me"]::before { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--marca-whats) center / contain no-repeat;
  mask: var(--marca-whats) center / contain no-repeat; }
@media (max-width: 560px) { .ab-faixa-matricula p { font-size: 14px; } }

/* ---------- os depoimentos ----------
   Prova de quem esta' dentro. Sem foto por enquanto: quando a escola tiver a
   autorizacao de uso de imagem de cada um, o cartao abre espaco para o rosto. */
.ab-fala { margin: 0; background: var(--cartao); border: 1px solid var(--borda);
  border-top: 4px solid var(--limao); padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.ab-fala blockquote { margin: 0; flex: 1; font-size: 17px; line-height: 1.55; color: var(--tinta); }
.ab-fala blockquote::before { content: "\201C"; color: var(--limao); font-size: 34px; font-weight: 800;
  line-height: 0; vertical-align: -6px; margin-right: 3px; }
.ab-fala figcaption { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--borda); }
.ab-fala figcaption b { display: block; font-size: 16px; font-weight: 800; }
.ab-fala figcaption span { display: block; font-size: 14.5px; color: var(--suave); margin-top: 2px; }
.ab-fala figcaption small { display: block; font-size: 13.5px; color: var(--suave); margin-top: 5px; font-style: italic; }

/* ---------- o pedido de contato ----------
   Ele nunca abre uma peca: entra depois do resultado, dentro do mesmo bloco,
   com a borda limao marcando que ali comeca outra coisa. */
.ab-lead { background: var(--nevoa); border: 1px solid var(--borda); border-left: 5px solid var(--limao);
  padding: 20px; margin-top: 22px; }
.ab-lead h4 { font-size: 18px; }
.ab-lead .ab-form-linha { margin-top: 14px; }
.ab-lead button[disabled] { opacity: .6; cursor: progress; }
.ab-lead-erro { margin-top: 0; }
.ab-lead-pronto { background: var(--apoio); border-left: 5px solid var(--verde); padding: 20px; margin-top: 22px; }
.ab-lead-pronto h4 { font-size: 18px; }
@media print { .ab-lead, .ab-lead-pronto { display: none !important; } }

/* O campo de escolha do curso na lista de espera. Mesmo desenho dos outros
   campos: caixa de canto reto, borda de 2px e foco visivel. */
.ab-campo select { font: inherit; font-size: 16px; padding: 12px 13px; border: 2px solid var(--borda);
  background: var(--superficie); color: var(--tinta); border-radius: 0; min-width: 0; width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--azul) 50%), linear-gradient(135deg, var(--azul) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.ab-campo select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

/* ---------- o selo da oferta, quando leva as turmas ----------
   Ele anunciava "ultimas turmas do ano" sem dizer quais. Agora e' um link
   para a secao de valores, onde estao os cartoes de turno.

   A CHAMADA FICA NA LINHA DO ROTULO, nunca numa linha propria: linha nova
   aumenta a altura do selo, e a largura do corte e' presa a' altura pela
   razao de 1,428 do angulo da marca. Mexer na altura sem recalcular o corte
   tira o selo do angulo de 55 graus. */
.ab-oferta-link { text-decoration: none; cursor: pointer; }
.ab-oferta-link b { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ab-oferta-link i { font-style: normal; font-weight: 800; letter-spacing: .06em;
  color: #0054A6; border-bottom: 2px solid rgba(0, 84, 166, .45); padding-bottom: 1px; }
.ab-oferta-link i::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .15s; }
.ab-oferta-link:hover i, .ab-oferta-link:focus-visible i { border-bottom-color: #0054A6; }
.ab-oferta-link:hover i::after, .ab-oferta-link:focus-visible i::after { transform: rotate(45deg) translate(2px, -3px); }
.ab-oferta-link:hover { filter: brightness(1.04); }

/* texto que so' o leitor de tela le' */
.ab-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* O CORTE DO SELO, RECALCULADO DEPOIS DA CHAMADA ENTRAR.
   A altura passou de 79 para 82px, entao a largura do corte sobe de 55 para
   57px — 82 dividido por 1,428, que e' a razao do angulo de 55 graus da
   marca. Quem mexer na altura deste bloco tem que refazer esta conta. */
.ab-oferta-selo { clip-path: polygon(0 0, 100% 0, calc(100% - 57px) 100%, 0 100%); }

/* NO CELULAR O SELO FICA SEM CORTE, DE PROPOSITO.
   Em tela estreita o valor e o rotulo quebram em varias linhas e o bloco
   passa de 120px de altura. Para manter os 55 graus, o corte teria de ter
   85px de largura e passaria por cima do texto — e a lei da marca diz que o
   corte so' atravessa espaco vazio. Entre desenhar o corte no angulo errado
   e nao desenhar, nao se desenha. */
@media (max-width: 560px) {
  .ab-oferta-selo { clip-path: none; padding: 13px 20px; }
  .ab-oferta-selo::before { display: none; }
  .ab-oferta-link b { gap: 4px 9px; }
}

/* ===================================================================
   TRILHO DA PAGINA DE VAGAS

   A pagina de vagas e' a mais longa do site e a que mais recebe quem
   ja' esta' na area. O trilho coloca a matricula ao lado da leitura,
   em vez de esperar o fim da pagina.

   No computador ele e' uma coluna fixa de 300px que acompanha a
   rolagem. Abaixo de 1040px vira bloco e desce para depois da lista,
   que e' onde a leitura da' uma pausa. Nao ha' versao flutuante no
   celular de proposito: barra que persegue o dedo irrita e o Google
   penaliza.
   =================================================================== */
.ab-com-painel{display:grid;gap:30px}
.ab-col-texto{min-width:0}
/* ATENCAO AO NOME DA CLASSE.
   Este painel ja' se chamou .ab-trilho e colidiu com .ab-trilho do grafico
   de salarios, mais acima neste arquivo, que fixa height:16px. O painel
   herdava essa altura, os cartoes vazavam para fora e cobriam as secoes
   seguintes da pagina. Antes de criar classe nova, procure o nome aqui. */
.ab-painel{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:1040px){
  .ab-com-painel{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  /* 96px deixa o cartao abaixo do cabecalho sem encostar nele. */
  .ab-painel{position:sticky;top:96px}
}
.ab-painel-cartao{background:var(--fundo-azul);color:#fff;border-radius:12px;padding:18px 19px}
.ab-painel-cartao h3{margin:0 0 6px;font-size:1.25rem;line-height:1.2;color:#fff;letter-spacing:-.01em}
.ab-painel-selo{margin:0 0 8px;font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--limao)}
.ab-painel-apoio{margin:0;font-size:.9375rem;line-height:1.5;color:#CFE0F2}
.ab-painel-turnos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-painel-turnos li{border-top:1px solid rgba(255,255,255,.2);padding-top:10px}
.ab-painel-turno{display:block;font-weight:700;font-size:1rem}
.ab-painel-dias{display:block;font-size:.8125rem;color:#CFE0F2;margin-top:1px}
.ab-painel-valor{display:block;font-size:1.375rem;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.ab-painel-valor small{display:block;font-size:.75rem;font-weight:500;color:#CFE0F2;letter-spacing:0}
.ab-painel-matricula{margin:12px 0 0;font-size:.875rem;color:#CFE0F2}
/* O SELO DENTRO DO TRILHO FICA SEM CORTE.

   A coluna tem 300px. A linha do valor nao quebra no computador, de
   proposito, para o corte continuar batendo com o angulo da marca. Numa
   coluna estreita isso cortava a frase no meio: "Duas primeiras mens...".

   A lei da marca diz que o corte so' atravessa espaco vazio. Em 300px ele
   nao cabe sem passar por cima do texto, entao sai inteiro, como ja'
   acontece no celular, e o valor passa a quebrar em duas linhas. */
.ab-painel .ab-oferta-selo{margin:12px 0 0;width:100%;display:block;clip-path:none;padding:13px 16px}
.ab-painel .ab-oferta-selo::before{display:none}
.ab-painel .ab-oferta-selo span{white-space:normal;font-size:18px;line-height:1.22}
.ab-painel .ab-oferta-selo b{font-size:11.5px;margin-bottom:4px}
.ab-painel-acoes{margin-top:14px;display:flex;flex-direction:column;gap:9px;align-items:stretch}
.ab-painel-acoes .ab-btn{width:100%;justify-content:center;text-align:center}
.ab-painel-cartao-claro{background:var(--nevoa);color:var(--tinta);border:1px solid var(--borda)}
.ab-painel-cartao-claro h3{color:var(--tinta)}
.ab-painel-cartao-claro .ab-painel-apoio{color:var(--suave)}

/* ---------- grade das especializacoes ----------
   A grade do Tecnico e' agrupada em blocos e nao mostra hora por
   disciplina, porque sao 18. Nas especializacoes sao 8, e a carga de cada
   uma e' justamente o que a aluna compara entre os dois cursos. Por isso
   aqui a hora aparece na linha. */
.ab-grade-horas{margin-top:20px;border-top:1px solid var(--borda)}
.ab-linha-horas{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--borda)}
.ab-linha-horas span{font-size:16.5px;min-width:0}
.ab-linha-horas b{font-size:16px;color:var(--azul);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- concursos ----------
   Cartao por edital. O prazo vem antes da ficha de proposito: e' o dado que
   decide se a pessoa continua lendo aquele cartao ou pula para o proximo.
   A classe .ab-ficha ja' existe e e' do laboratorio interativo: aqui a lista
   de dados se chama .ab-dados. */
.ab-concursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:22px}
.ab-concurso{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:18px 20px;min-width:0;
  display:flex;flex-direction:column}
.ab-concurso-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ab-concurso-topo h3{margin:0;font-size:1.125rem;line-height:1.25;letter-spacing:-.01em}
.ab-uf{flex:none;background:var(--apoio);color:var(--azul);font-size:12.5px;font-weight:800;letter-spacing:.08em;
  padding:4px 9px;border-radius:4px}
.ab-concurso-prazo{margin:10px 0 0;font-size:14.5px;font-weight:700;color:var(--verde)}
.ab-concurso-prazo.ab-urgente{color:#B3261E}
.ab-dados{margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.ab-dados div{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--borda);padding-top:9px}
.ab-dados dt{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.ab-dados dd{margin:0;font-size:15.5px;line-height:1.4}
.ab-concurso .ab-acoes{margin-top:15px}

/* ---------- ajustes dentro do trilho ----------
   O cartao do trilho tem fundo azul escuro. O botao de contorno padrao e'
   feito para fundo claro: borda cinza e texto cor de tinta, que sobre o azul
   fica ilegivel. Aqui ele vira contorno branco. */
.ab-painel-cartao .ab-btn-linha{border-color:rgba(255,255,255,.55);color:#fff}
.ab-painel-cartao .ab-btn-linha:hover{border-color:var(--limao);color:var(--limao)}
.ab-painel-cartao-claro .ab-btn-linha{border-color:var(--borda);color:var(--tinta)}
.ab-painel-cartao-claro .ab-btn-linha:hover{border-color:var(--azul);color:var(--tinta)}

/* O selo clicavel dentro do trilho: a chamada "ver as 2 turmas abertas"
   nao cabe na mesma linha do rotulo numa coluna de 300px, entao desce. */
.ab-painel .ab-oferta-link b{display:block}
.ab-painel .ab-oferta-link i{display:block;margin-top:5px;font-size:12.5px}
.ab-painel-selo-escuro{color:var(--azul)}
.ab-painel-data{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--verde)}
.ab-painel-vagas{margin:8px 0 0;font-size:14px;font-weight:700;color:#B3261E}
.ab-painel-valor-livre{margin:10px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--tinta)}

/* ---------- fonte preferida no Google ----------
   Bloco de fim de pagina, so' em /vagas/ e /concursos-enfermagem/. Texto e
   botao lado a lado no desktop, empilhados no celular.

   POR QUE CLASSE PROPRIA E NAO .ab-lead: .ab-lead ja' tem dois donos neste
   arquivo, a chamada de secao e a caixa de pedido de contato. Nao se entra
   numa classe disputada para ganhar quatro linhas de estilo. */
.ab-fonte-pref{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:var(--nevoa);border:1px solid var(--borda);border-left:5px solid var(--limao);padding:20px}
.ab-fonte-pref-texto{flex:1 1 320px;min-width:0}
.ab-fonte-pref-texto p{margin:0;font-size:16px;line-height:1.5;color:var(--suave)}
.ab-fonte-pref-texto p + p{margin-top:7px;font-size:14.5px}
.ab-fonte-pref-texto strong{display:block;color:var(--tinta);font-size:17.5px;font-weight:800;line-height:1.35}
.ab-fonte-pref .ab-acoes{flex:0 0 auto;margin:0}