/* ABA na Prática · página de inscrição da aula "Da avaliação à intervenção"
   Cores das peças das clientes e do logo oficial: peças pastel (azul, verde-água, lavanda, amarelo)
   + as cores do texto do logo (verde #5DBF9F, azul #3E8ED8, salmão #EFA196).
   As cores "puras" ficam para fundos e elementos grandes; em texto usamos as versões escurecidas (contraste AA). */
:root{
  --fundo:#F6F5F4; --branco:#fff;
  --tinta:#1E3A52; --texto:#2D4C66; --suave:#4A6377; --linha:#DCE2E6;
  --verde:#5DBF9F; --verde-tinta:#2B7D63;
  --azul:#3E8ED8; --azul-tinta:#2A6FB0;
  --salmao:#EFA196; --salmao-forte:#EA9084; --salmao-sombra:#D48276;
  --lavanda:#CBCCF2; --lavanda-clara:#E7E7F8; --amarelo:#FFD478;
  --peca-azul:#8FD3FE; --peca-verde:#8DEBDB;
  --titulo:'Bebas Neue','Oswald',Impact,'Arial Narrow',sans-serif;
  --corpo:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --larg:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--corpo);font-size:17px;line-height:1.6;color:var(--texto);background:var(--fundo);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--azul-tinta)}
button{font:inherit}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--larg);margin:0 auto;padding:0 20px}
section{padding:72px 0;scroll-margin-top:16px}
h2,h3{color:var(--tinta)}
.titulo{font-family:var(--titulo);font-weight:400;font-size:clamp(42px,9vw,72px);line-height:.95;letter-spacing:.005em;text-transform:uppercase}
.intro{font-size:18px;max-width:640px;margin-top:14px}
:focus-visible{outline:3px solid var(--azul-tinta);outline-offset:3px;border-radius:6px}

.pular{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px}
.pular:focus{left:8px}

.previa-aviso{background:var(--amarelo);color:var(--tinta);font-size:14px;text-align:center;padding:8px 14px;line-height:1.4}

/* faixa que corre no topo */
.faixa{background:var(--tinta);color:#fff;overflow:hidden;white-space:nowrap;padding:9px 0}
.faixa-trilho{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-family:var(--titulo);font-size:19px;letter-spacing:.06em;animation:correr 45s linear infinite}
.faixa-trilho i{width:10px;height:10px;border-radius:3px;display:inline-block}
@keyframes correr{to{transform:translateX(-50%)}}

/* topo */
.hero{position:relative;overflow:hidden;padding:22px 0 64px}
.marca{display:inline-flex;align-items:center;text-decoration:none}
.logo-h{width:auto;height:52px}
.hero-topo{margin-top:30px;position:relative;z-index:2}
.hero-grid{display:grid;gap:30px;position:relative;z-index:2}
.etiqueta{display:inline-block;background:var(--lavanda);color:var(--tinta);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:8px}
h1{font-family:var(--titulo);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:16px 0 22px;font-size:clamp(50px,14.6vw,120px)}
h1 > span{display:block;white-space:nowrap}
.h1-a{color:var(--verde-tinta)}
.h1-b{color:var(--tinta);display:flex!important;align-items:center;gap:.1em}
.h1-b svg{width:.56em;height:.56em;flex:0 0 auto;margin-top:-.12em;color:var(--salmao)}
.sub{font-size:clamp(18px,2.3vw,21px);font-weight:500;line-height:1.45;color:var(--tinta);max-width:600px}

/* as 4 peças com os dados da aula (inspiradas nas peças do logo) */
.pecas{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;max-width:620px}
.pecas li{position:relative;border-radius:14px 14px 14px 5px;padding:10px 13px 11px;color:var(--tinta);overflow:hidden}
.pecas li::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--fundo);top:10px;right:10px}
.pecas small{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.pecas b{display:block;font-family:var(--titulo);font-weight:400;font-size:22px;line-height:1;margin-top:4px;letter-spacing:.01em}
.com{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;color:var(--suave)}
.com b{color:var(--tinta);font-weight:600}
.com img{width:96px;height:48px;border-radius:24px;object-fit:cover;flex:0 0 auto;border:2px solid #fff;box-shadow:0 2px 8px rgba(30,58,82,.12)}
.hero-foto{display:none}
.p-azul{background:var(--peca-azul)} .p-verde{background:var(--peca-verde)} .p-lavanda{background:var(--lavanda)} .p-amarelo{background:var(--amarelo)}

/* barras de cor na lateral (como nos slides delas) */
.barras{position:absolute;right:0;top:120px;display:grid;gap:14px;z-index:1}
.barras i{display:block;width:22px;height:64px;border-radius:6px 0 0 6px}
.barras i:nth-child(1){background:var(--lavanda)} .barras i:nth-child(2){background:var(--amarelo)} .barras i:nth-child(3){background:var(--peca-azul)}

/* formulário */
.form{background:var(--branco);border-radius:22px;padding:26px 22px 22px;box-shadow:0 24px 60px rgba(30,58,82,.14),0 2px 6px rgba(30,58,82,.06);position:relative;overflow:hidden;scroll-margin-top:16px}
.form-cores{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(4,1fr);height:7px}
.form-cores i:nth-child(1){background:var(--peca-azul)} .form-cores i:nth-child(2){background:var(--peca-verde)} .form-cores i:nth-child(3){background:var(--lavanda)} .form-cores i:nth-child(4){background:var(--amarelo)}
.form h2{font-family:var(--titulo);font-weight:400;font-size:36px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.form h2:focus{outline:none}
.form-intro{font-size:15.5px;color:var(--suave);margin:6px 0 16px;line-height:1.5}
.campo{display:block;font-size:15px;font-weight:600;color:var(--tinta);margin-bottom:12px}
.campo input{display:block;width:100%;margin-top:5px;font:400 17px var(--corpo);color:var(--tinta);background:#FBFBFA;border:1.5px solid #C9D2D9;border-radius:11px;padding:13px 14px;min-height:50px;transition:border-color .15s,background .15s}
.campo input:hover{border-color:#9FB0BD}
.campo input:focus{border-color:var(--azul-tinta);background:#fff;outline:3px solid rgba(42,111,176,.25);outline-offset:0}
.campo input[aria-invalid=true]{border-color:#B3261E}
.aceite{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--suave);margin:4px 0 14px;cursor:pointer}
.aceite input{width:20px;height:20px;margin-top:1px;accent-color:var(--azul-tinta)}
.ts{min-height:0;margin-bottom:10px}
.btn{display:block;width:100%;text-align:center;background:var(--salmao);color:var(--tinta);border:0;border-radius:12px;padding:17px 18px;min-height:56px;font:700 16px var(--corpo);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--salmao-sombra);transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--salmao-forte)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--salmao-sombra)}
.btn[disabled]{opacity:.7;cursor:wait}
.btn-escuro{background:var(--tinta);color:#fff;box-shadow:0 4px 0 #0F2234}
.btn-escuro:hover{background:#16304A}
.btn-escuro:active{box-shadow:0 1px 0 #0F2234}
.nota{font-size:13.5px;color:var(--suave);text-align:center;margin-top:12px}
.erro{display:none;background:#FCE8E6;color:#8C1D18;font-size:14.5px;line-height:1.4;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.erro.on{display:block}

/* etapa 2 */
.prog{height:8px;border-radius:8px;background:#E6ECEF;overflow:hidden;margin:4px 0 8px}
.prog i{display:block;height:100%;width:33%;background:var(--verde);border-radius:8px;transition:width .25s}
.contador{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.pergunta{border:0;margin-top:8px}
.pergunta legend{font-size:19px;font-weight:600;line-height:1.3;color:var(--tinta);margin-bottom:12px}
.opcoes{display:grid;gap:8px}
.opcoes button{text-align:left;font-size:16px;line-height:1.3;color:var(--tinta);background:#fff;border:1.5px solid #C9D2D9;border-radius:11px;padding:13px 14px;min-height:50px;cursor:pointer;transition:border-color .15s,background .15s}
.opcoes button:hover{border-color:var(--verde-tinta);background:#EDF8F4}
.opcoes button[disabled]{opacity:.6;cursor:wait}
.e2-acoes{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.voltar{background:none;border:0;color:var(--suave);text-decoration:underline;cursor:pointer;padding:6px 0;font-size:15px}
.pular-etapa{font-size:14px;color:var(--suave)}

/* por que vira apagar fogo */
.fogo{background:var(--branco)}
.fogo-grid{display:grid;gap:36px;align-items:center}
.fogo p{margin-top:14px;max-width:560px}
.fogo .destaque{font-weight:600;color:var(--tinta)}
.dilema{background:var(--lavanda-clara);border-radius:22px;padding:26px 22px;position:relative}
.dilema-rotulo{font-size:16px;margin:0!important}
.dilema-pergunta{font-family:var(--titulo);font-size:clamp(34px,6vw,46px);line-height:1;color:var(--tinta);text-transform:uppercase;margin:12px 0 16px!important}
.dilema-opcoes{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.dilema-opcoes span{font-family:var(--titulo);font-size:22px;color:var(--suave);text-transform:uppercase}
.dilema-opcoes button{background:#fff;border:2px solid var(--tinta);color:var(--tinta);border-radius:14px;padding:14px 10px;min-height:64px;font-family:var(--titulo);font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:transform .15s,background .15s}
.dilema-opcoes button:hover{transform:translateY(-2px)}
.dilema-opcoes button[aria-pressed=true]{background:var(--amarelo)}
.dilema-resposta{margin-top:16px!important;background:#fff;border-radius:14px;padding:14px 16px;font-size:16px;color:var(--tinta)}

/* na aula você vai ver */
.ver-grid{display:grid;gap:12px;margin-top:32px}
.item{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;background:var(--branco);border-radius:16px;padding:18px}
.item p{color:var(--tinta);font-weight:500;line-height:1.45}
.tile{position:relative;width:42px;height:42px;border-radius:12px 12px 12px 4px}
.tile::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--branco);top:8px;right:8px}
.t1{background:var(--peca-azul)} .t2{background:var(--peca-verde)} .t3{background:var(--lavanda)} .t4{background:var(--amarelo)}
.cinco{background:var(--amarelo);border-radius:22px 22px 22px 8px;padding:24px 22px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;color:var(--tinta);position:relative;overflow:hidden}
.cinco::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:var(--fundo);top:18px;right:18px}
.cinco b{font-family:var(--titulo);font-weight:400;font-size:112px;line-height:.8}
.cinco p{font-size:18px;font-weight:500;line-height:1.4;padding-right:30px}
.cinco strong{font-weight:700}

/* para quem é */
.quem{background:var(--lavanda)}
.quem .intro{color:var(--tinta)}
.quem-grid{display:grid;gap:12px;margin-top:30px}
.quem-card{background:var(--branco);border-radius:18px;padding:22px 20px}
.quem-card h3{font-family:var(--titulo);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.quem-card p{margin-top:8px;font-size:16px}
.quem-nota{margin-top:20px;font-size:15px;color:var(--tinta)}

/* quem conduz: 3 tempos (identificação, virada, formação) */
.conduz{display:grid;gap:22px;margin-top:30px}
.tempo h3,.formacao-topo h3{display:flex;align-items:center;gap:12px;font-family:var(--titulo);font-weight:400;font-size:clamp(30px,5.4vw,40px);line-height:1;text-transform:uppercase}
.tempo h3 .tile,.formacao-topo h3 .tile{width:30px;height:30px;flex:0 0 auto;border-radius:9px 9px 9px 3px}
.tempo h3 .tile::after,.formacao-topo h3 .tile::after{width:8px;height:8px;top:5px;right:5px;background:var(--fundo)}
.tempo p{margin-top:12px;max-width:620px}
.tempo strong{color:var(--tinta)}
.conduz-citacao{font-family:var(--titulo);font-size:clamp(26px,4.6vw,34px);line-height:1.04;color:var(--verde-tinta);text-transform:uppercase;margin:16px 0 4px;padding-left:14px;border-left:5px solid var(--salmao);max-width:620px}
.conduz-foto{position:relative;border-radius:24px 24px 24px 8px;overflow:hidden;background:var(--lavanda-clara);aspect-ratio:1/1;margin:0}
.conduz-foto img{width:100%;height:100%;object-fit:cover}
.conduz-foto figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--tinta);font-size:14px;font-weight:600;padding:6px 12px;border-radius:8px}
.formacao{margin-top:40px}
.selo{display:inline-block;margin-top:12px;background:var(--lavanda);color:var(--tinta);font-weight:600;font-size:14.5px;padding:7px 12px;border-radius:8px}
.conduz-cartoes{display:grid;gap:12px;margin-top:20px}
.conduz-cartao{background:var(--branco);border-radius:18px;padding:22px 20px}
.conduz-cartao h4{font-family:var(--titulo);font-weight:400;font-size:32px;line-height:1;color:var(--tinta);text-transform:uppercase}
.conduz-foco{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-tinta);margin:6px 0 12px}
.conduz-cartao ul{list-style:none;display:grid;gap:8px}
.conduz-cartao li{position:relative;padding-left:18px;font-size:16px;line-height:1.45}
.conduz-cartao li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:3px;background:var(--verde)}

/* como vai ser */
.como{background:var(--branco)}
.passos{list-style:none;display:grid;gap:12px;margin-top:30px}
.passos li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:var(--fundo);border-radius:16px;padding:18px}
.passos .tile{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--titulo);font-size:30px;color:var(--tinta);padding-top:3px}
.passos .tile::after{background:var(--fundo);width:10px;height:10px;top:6px;right:6px}
.passos h3{font-size:18px;font-weight:600;line-height:1.3}
.passos p{font-size:15.5px;margin-top:3px}
.depois{margin-top:18px;font-size:15.5px;color:var(--suave);max-width:760px}

/* dúvidas */
.duvidas-lista{display:grid;gap:10px;margin-top:28px;max-width:820px}
details{background:var(--branco);border-radius:14px}
summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:600;font-size:17px;line-height:1.35;color:var(--tinta);position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:28px;font-weight:400;color:var(--verde-tinta)}
details[open] summary::after{content:"\2013"}
details p{padding:0 18px 18px;font-size:16px}

/* chamada final */
.fim{background:var(--verde);color:var(--tinta);text-align:center;position:relative;overflow:hidden}
.fim blockquote{font-family:var(--titulo);font-size:clamp(44px,9vw,92px);line-height:.92;text-transform:uppercase;max-width:980px;margin:0 auto}
.fim blockquote span{display:block}
.fim .dados{margin:22px auto 26px;font-weight:600;font-size:17px}
.fim .btn{max-width:400px;margin:0 auto}

footer{background:var(--tinta);color:#D7E1EA;font-size:14px;line-height:1.6;padding:30px 0 104px}
footer a{color:#fff}
footer p+p{margin-top:6px}
.rodape-marca{display:inline-flex;background:#fff;border-radius:14px;padding:8px 14px;margin-bottom:16px}
.rodape-marca img{height:44px;width:auto}

/* barra fixa no celular */
.fixo{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(246,245,244,.97);box-shadow:0 -8px 24px rgba(30,58,82,.14);transform:translateY(115%);transition:transform .25s}
.fixo.on{transform:none}

/* aparecer ao rolar (só para quem ainda não está na tela) */
.rv-espera{opacity:0;transform:translateY(16px)}
.rv{transition:opacity .6s ease,transform .6s ease}

/* páginas simples: obrigado, privacidade, 404 */
.simples{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.simples main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:28px 20px 56px}
.simples .marca{margin-bottom:30px}
.passo-barra{height:10px;border-radius:10px;background:#E1E7EB;overflow:hidden;margin-bottom:10px}
.passo-barra i{display:block;height:100%;width:85%;background:var(--verde);border-radius:10px}
.passo-rotulo{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--suave)}
.simples h1{font-size:clamp(54px,14vw,96px);margin:18px 0 14px;color:var(--tinta)}
.simples h1 em{font-style:normal;color:var(--verde-tinta)}
.lista-pecas{list-style:none;display:grid;gap:8px;margin:20px 0 24px}
.lista-pecas li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;background:var(--branco);border-radius:12px;padding:12px 14px;color:var(--tinta);font-weight:500}
.lista-pecas .tile{width:30px;height:30px;border-radius:9px 9px 9px 3px}
.lista-pecas .tile::after{width:8px;height:8px;top:5px;right:5px}
.mt{margin-top:26px}
.auto{font-size:14.5px;text-align:center;margin-top:12px;color:var(--suave)}
.texto-legal h1{font-size:clamp(46px,11vw,72px)}
.texto-legal h2{font-size:20px;font-weight:600;margin:28px 0 8px}
.texto-legal p,.texto-legal li{font-size:16px}
.texto-legal ul{padding-left:20px;margin-top:6px}
.texto-legal li+li{margin-top:4px}
.pendente{background:#FFF3D1;color:#5C4200;border-radius:6px;padding:1px 6px;font-weight:600}
.rodape-simples{background:var(--tinta);color:#D7E1EA;font-size:14px;padding:22px 20px;text-align:center}
.rodape-simples a{color:#fff}

@media (min-width:640px){
  .ver-grid{grid-template-columns:1fr 1fr}
  .cinco{grid-column:1/-1}
  .pecas{grid-template-columns:repeat(4,1fr)}
  .pecas b{font-size:24px}
  .passos{grid-template-columns:repeat(3,1fr)}
  .conduz-cartoes{grid-template-columns:1fr 1fr}
  .passos li{grid-template-columns:1fr}
}
@media (min-width:960px){
  section{padding:104px 0}
  .wrap{padding:0 32px}
  .hero{padding:26px 0 96px}
  .hero-topo{margin-top:46px}
  h1{display:flex;flex-wrap:wrap;align-items:center;column-gap:.22em;font-size:min(104px,7.6vw);margin:18px 0 26px}
  .hero-grid{grid-template-columns:1fr 430px;gap:64px;align-items:start}
  .hero-topo h1{padding-bottom:28px;border-bottom:1.5px solid var(--linha)}
  .pecas{gap:10px;margin-top:26px}
  .pecas li{padding:14px 16px}
  .com{margin-top:24px}
  .form{padding:32px 30px 26px}
  .fogo-grid{grid-template-columns:1fr 1fr;gap:64px}
  .quem-grid{grid-template-columns:repeat(3,1fr)}
  .ver-grid{grid-template-columns:repeat(3,1fr)}
  .cinco{grid-column:auto/span 1;padding:20px 22px}
  .cinco b{font-size:104px}
  .cinco p{font-size:16.5px}
  .barras i{width:28px;height:84px}
  .fixo{display:none}
  .logo-h{height:60px}
  .conduz{grid-template-columns:460px 1fr;grid-template-areas:"foto t1" "foto t2";column-gap:56px;row-gap:28px;align-items:start}
  .conduz-foto{grid-area:foto}
  .tempo-1{grid-area:t1}
  .tempo-2{grid-area:t2}
  .formacao-topo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .formacao-topo .selo{margin-top:0}
  .com{display:none}
  .hero-foto{display:block;position:relative;margin-top:26px;border-radius:22px 22px 22px 8px;overflow:hidden;aspect-ratio:16/10;background:var(--lavanda-clara);max-width:620px}
  .hero-foto img{width:100%;height:100%;object-fit:cover}
  .hero-foto figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--suave);font-size:14.5px;padding:7px 12px;border-radius:9px}
  .hero-foto b{color:var(--tinta);font-weight:600}
  footer{padding-bottom:32px}
}
@media (max-width:959px){ .barras{top:22px} .barras i{width:12px;height:40px} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv-espera{opacity:1;transform:none}
}