:root{--azul:#0777c9;--azul-claro:#0b9be6;--verde:#12c08a;--verde-fundo:#d9fdd3;--laranja:#f47a1f;--marinho:#103452;--papel:#f1f9f6;--texto:#1c3a50;--linha:#cfe3dc}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--texto);font:400 1.125rem/1.6 "Atkinson Hyperlegible",Verdana,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
h1,h2,h3{font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:var(--marinho);line-height:1.1;margin:0}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:800}
h3{font-size:1.45rem;font-weight:700}
:focus-visible{outline:3px solid var(--marinho);outline-offset:3px;border-radius:6px}
.faixa{width:min(1080px,100%);margin:0 auto;padding:0 20px}
.botao{display:inline-block;background:var(--laranja);color:#102334;font-weight:700;font-size:1.15rem;text-decoration:none;padding:15px 26px;border-radius:999px 999px 999px 8px;box-shadow:0 5px 0 #b9530c}
.botao:hover{background:#ff8a33}
.botao:active{transform:translateY(3px);box-shadow:0 2px 0 #b9530c}

.topo{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.topo::after{content:"";position:absolute;right:-22%;bottom:-62%;width:95%;height:120%;border-radius:50%;background:var(--verde)}
.topo .faixa{position:relative;z-index:1}
.marca{display:flex;align-items:center;gap:10px;padding-top:18px;color:#fff;text-decoration:none;font:800 1.4rem "Baloo 2","Trebuchet MS",sans-serif}
.marca img{width:40px;height:40px;border-radius:50%}
.heroi{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:28px 0 64px}
.heroi h1{color:#fff;font-size:clamp(3.8rem,12vw,7.2rem);font-weight:800;line-height:.95}
.heroi p{max-width:30em;font-size:1.3rem;margin:14px 0 20px}
.conversa{display:flex;flex-direction:column;gap:8px;max-width:340px;margin-bottom:22px}
.bolha{background:#fff;color:var(--texto);border-radius:14px 14px 14px 3px;padding:9px 13px;align-self:flex-start;box-shadow:0 2px 0 rgba(16,52,82,.25)}
.bolha.minha{background:var(--verde-fundo);border-radius:14px 14px 3px 14px;align-self:flex-end}
.audio{display:flex;align-items:center;gap:9px;min-width:250px}
.play{width:0;height:0;border-left:12px solid var(--marinho);border-top:8px solid transparent;border-bottom:8px solid transparent}
.onda{display:flex;align-items:center;gap:3px;height:24px;flex:1}
.onda i{display:block;width:3px;border-radius:2px;background:var(--marinho);height:40%}
.onda i:nth-child(3n){height:90%}.onda i:nth-child(4n+1){height:62%}.onda i:nth-child(5n){height:28%}
.slogan-resposta{font:800 1.5rem/1.2 "Baloo 2","Trebuchet MS",sans-serif;color:var(--marinho)}
.jolu{width:100%;max-width:400px;justify-self:center;border-radius:50%;border:8px solid #fff}

@media (prefers-reduced-motion:no-preference){
 .onda i{animation:fala .55s ease-in-out 4 alternate;transform-origin:center}
 .onda i:nth-child(odd){animation-delay:.12s}
 .responde{animation:chega .35s cubic-bezier(.2,1.5,.5,1) 1.7s backwards}
}
@keyframes fala{to{transform:scaleY(.4)}}
@keyframes chega{from{opacity:0;transform:scale(.8) translateY(10px)}}

.bloco{padding:64px 0}
.bloco.claro{background:var(--papel)}
.intro{max-width:36em;margin:10px 0 34px}
.passos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:p}
.passos li{counter-increment:p}
.passos li::before{content:counter(p);display:block;font:800 3.4rem/1 "Baloo 2","Trebuchet MS",sans-serif;color:var(--laranja)}
.passos p{margin:6px 0 0}
.exemplos{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px}
.exemplo{display:flex;flex-direction:column;gap:8px}
.exemplo h3{margin-bottom:6px}
.exemplo .bolha{max-width:92%;border:1px solid var(--linha);box-shadow:none;font-size:1.05rem}
.exemplo .minha{border-color:#b6e8ae}
.mais{columns:2;column-gap:44px;padding:0;margin:0;list-style:none}
.mais li{break-inside:avoid;padding:0 0 16px}
.mais strong{color:var(--marinho)}
.chamada{background:var(--marinho);color:#fff;padding:60px 0}
.chamada h2{color:#fff}
.chamada p{max-width:34em;margin:12px 0 24px}
.chamada a:not(.botao){color:#fff}

.rodape{background:#0b2438;color:#dbe8ef;padding:34px 0;font-size:1rem}
.rodape a{color:#fff}
.rodape p{margin:0 0 8px}

.doc-topo{background:var(--azul)}
.doc-topo .marca{padding:16px 0}
.doc{max-width:42rem;margin:0 auto;padding:40px 20px 60px}
.doc h1{font-size:clamp(2.3rem,7vw,3.2rem);font-weight:800}
.doc h2{font-size:1.6rem;font-weight:700;margin:34px 0 8px;scroll-margin-top:16px}
.doc ul{padding-left:1.2em}
.doc li{margin-bottom:6px}
.doc .data{color:#4a6577;margin-top:6px}
.destaque{background:var(--papel);border-left:5px solid var(--verde);padding:14px 18px;margin:14px 0}

@media (max-width:760px){
 .heroi{grid-template-columns:1fr;padding-bottom:46px}
 .jolu{max-width:250px;grid-row:1}
 .topo::after{right:-50%;bottom:-30%;width:150%;height:45%}
 .passos,.exemplos{grid-template-columns:1fr}
 .mais{columns:1}
 .botao{display:block;text-align:center}
 .audio{min-width:0;width:100%}
}