@font-face{font-family:"Bricolage";src:url(/fontes/bricolage-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/fontes/bricolage-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fontes/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fontes/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 1.0625rem/1.6 "Figtree",system-ui,sans-serif}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:"Bricolage",system-ui,sans-serif;line-height:1.08;margin:0;color:var(--roxo-escuro)}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.75rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.25rem}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1rem}
a{color:var(--roxo)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--rosa);outline-offset:3px;border-radius:6px}

.faixa{width:min(1120px,100% - 2rem);margin-inline:auto}
.estreita{width:min(720px,100% - 2rem)}
.pular{position:absolute;left:-999px;top:0;background:var(--roxo-escuro);color:#fff;padding:.6rem 1rem;z-index:10}
.pular:focus{left:1rem;top:1rem}

/* Topo */
.topo{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fundo) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--roxo) 12%,transparent)}
.topo .faixa{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:"Bricolage",sans-serif;font-weight:700;font-size:1.05rem;color:var(--roxo-escuro)}
.marca img{border-radius:9px}
.topo nav{display:flex;gap:1.4rem}
.topo nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--texto)}
.topo nav a:hover{color:var(--rosa)}
@media (max-width:760px){.topo nav{display:none}}

/* Hero: o percurso é o elemento marcante da página */
.hero{position:relative;overflow:hidden;background:var(--roxo-escuro);color:#fff;padding:clamp(3.5rem,9vw,6.5rem) 0 0}
.trajeto{width:100%;height:auto;margin-top:clamp(1.5rem,4vw,2.5rem);pointer-events:none}
.trajeto-sombra{fill:none;stroke:#fff;stroke-opacity:.07;stroke-width:26;stroke-linecap:round}
.trajeto-linha{fill:none;stroke:var(--rosa);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar 2.6s cubic-bezier(.45,.05,.25,1) .2s forwards}
.trajeto-fim{opacity:0;transform-origin:1150px 44px;animation:chegar .5s ease-out 2.6s forwards}
.trajeto-fim circle:first-child{fill:var(--rosa);fill-opacity:.28}
.trajeto-fim circle:last-child{fill:#fff}
@keyframes desenhar{to{stroke-dashoffset:0}}
@keyframes chegar{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.hero-conteudo{position:relative}
.hero h1{color:#fff;font-weight:800;font-size:clamp(2.7rem,1.4rem + 6vw,5.6rem);letter-spacing:-.035em;max-width:11ch}
.slogan{font-family:"Bricolage",sans-serif;font-weight:700;font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);color:var(--rosa-claro);margin:1rem 0 1.5rem}
.apresentacao{max-width:52ch;font-size:1.125rem;color:#fff;opacity:.9}
.acoes{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.botao,.botao-sec{display:inline-flex;align-items:center;min-height:3.1rem;padding:0 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;font-size:1.02rem}
.botao{background:var(--rosa);color:#fff;box-shadow:0 8px 24px -10px var(--rosa)}
.botao:hover{background:color-mix(in srgb,var(--rosa) 88%,#000)}
.botao-sec{color:#fff;border:2px solid rgb(255 255 255 / .45)}
.botao-sec:hover{border-color:#fff}

/* Blocos */
.bloco{padding:clamp(3.5rem,8vw,6rem) 0}
.texto-grande{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.6}
.atividades{background:#fff}
.lista-atividades{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:2rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lista-atividades li{display:flex;gap:1rem;align-items:flex-start}
.lista-atividades .ic{flex:none;width:2.6rem;height:2.6rem;padding:.5rem;border-radius:50%;background:var(--rosa-claro);color:var(--rosa)}
.lista-atividades h3{margin:.35rem 0 .3rem}
.lista-atividades p{margin:0;color:color-mix(in srgb,var(--texto) 80%,transparent)}

.app-grade{display:grid;gap:2rem 4rem;grid-template-columns:1fr 1.15fr;align-items:start}
@media (max-width:820px){.app-grade{grid-template-columns:1fr}}
.lista-recursos{list-style:none;margin:0;padding:0;border-left:3px solid var(--rosa)}
.lista-recursos li{padding:.7rem 0 .7rem 1.4rem;position:relative;font-weight:600}
.lista-recursos li::before{content:"";position:absolute;left:-8px;top:1.15rem;width:13px;height:13px;border-radius:50%;background:var(--fundo);border:3px solid var(--rosa)}
.lancamento{margin-top:3rem;padding:1.5rem 1.75rem;border-radius:18px;background:var(--rosa-claro);border:2px solid transparent;transition:border-color .3s}
.lancamento h3{color:var(--rosa);margin-bottom:.4rem}
.lancamento p{margin:0}
.lancamento.pulso{border-color:var(--rosa)}

.instalar{background:var(--roxo);color:#fff}
.instalar h2,.instalar h3{color:#fff}
.instalar .intro{max-width:60ch;opacity:.9}
.plataformas{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.plataforma{background:rgb(255 255 255 / .08);border-radius:18px;padding:1.6rem}
.plataforma ol{margin:1rem 0 0;padding-left:1.3rem}
.plataforma li{margin-bottom:.55rem}
.plataforma li::marker{color:var(--rosa-claro);font-weight:700}

.lista-contato{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.lista-contato li{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;padding-bottom:.9rem;border-bottom:1px solid color-mix(in srgb,var(--roxo) 14%,transparent)}
.ct-rotulo{min-width:7rem;font-weight:600;color:var(--roxo)}
.lista-contato a{font-weight:600;color:var(--rosa)}

.rodape{background:var(--roxo-escuro);color:rgb(255 255 255 / .75);padding:2rem 0;font-size:.95rem}
.rodape p{margin:0}

@media (prefers-reduced-motion:reduce){
  .trajeto-linha{animation:none;stroke-dashoffset:0}
  .trajeto-fim{animation:none;opacity:1}
  html{scroll-behavior:auto}
}