/* Versão branca da home: tudo claro, com os detalhes em roxo. Entra depois de omnia.css e
   só troca o que muda de cor, mais a capa nova (cena 3D + etiquetas + texto embaixo). */
:root{
  --roxo:#7861b4; --roxo-escuro:#4f3f86; --roxo-claro:#a993d6; --roxo-leve:#ebe5f5; --roxo-fundo:#f6f4fa;
  --borda:rgba(43,35,51,.09); --borda-roxa:rgba(120,97,180,.18);
  --sombra:0 10px 30px rgba(55,45,90,.08); --sombra-forte:0 20px 60px rgba(55,45,90,.14);
  --lilas-tinta:var(--roxo);
}
body{background:#fff;color:var(--tinta)}
a{color:var(--roxo)} a:hover{color:var(--roxo-escuro)}
:focus-visible{outline-color:var(--roxo)}
.secao--escura,.secao--clara,.secao--lilas{background:#fff;color:var(--tinta)}
.secao--clara{background:var(--roxo-fundo)}
.grade-fundo{background-image:linear-gradient(rgba(120,97,180,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(120,97,180,.035) 1px,transparent 1px),linear-gradient(rgba(120,97,180,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,97,180,.07) 1px,transparent 1px)}

/* rótulos viram pills, como na referência */
.rotulo{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:999px;background:#fff;border:1px solid var(--borda-roxa);box-shadow:0 4px 14px rgba(55,45,90,.07);letter-spacing:0;text-transform:none;font-weight:500;font-size:12px;color:var(--tinta-2)}
.rotulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--roxo);box-shadow:0 0 0 3px var(--roxo-leve)}
.secao--clara .rotulo,.secao--lilas .rotulo{color:var(--tinta-2)}
.contador{color:var(--tinta-3)}
.titulo em,.secao--clara .titulo em,.secao--lilas .titulo em{color:var(--roxo)}
.apoio,.secao--clara .apoio{color:var(--tinta-2)}
.link-seta,.secao--clara .link-seta,.secao--lilas .link-seta{color:var(--roxo);text-decoration-color:rgba(120,97,180,.3)}
.link-seta:hover,.secao--clara .link-seta:hover{color:var(--roxo-escuro);text-decoration-color:var(--roxo)}
.pendente{background:var(--roxo-leve);color:var(--roxo-escuro);border-bottom-color:var(--roxo)}

/* botões */
.botao{background:var(--roxo);color:#fff}
.botao:hover{background:var(--roxo-escuro);color:#fff}
.botao__check{border-color:rgba(255,255,255,.7)} .botao__check svg{stroke:#fff}

/* menu */
.topo{color:var(--tinta)}
.topo__barra{background:rgba(255,255,255,.8);border-bottom:1px solid var(--borda)}
.nav__botao,.nav__link{color:var(--tinta-2)} .nav__botao:hover,.nav__link:hover{color:var(--tinta)}
.nav__botao svg{stroke:var(--roxo)}
.nav__painel{background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra-forte)}
.nav__opcao:hover{background:var(--roxo-fundo)} .nav__opcao svg{stroke:var(--roxo)}
.nav__opcao strong{color:var(--tinta)} .nav__opcao small{color:var(--tinta-2)}
.topo__cta{background:var(--roxo);color:#fff} .topo__cta:hover{background:var(--roxo-escuro);color:#fff}
.topo__hamburguer{border-color:var(--borda)} .topo__hamburguer svg{stroke:var(--tinta)}
.menu-celular{background:#fff}
.menu-celular__grupo{color:var(--roxo)} .menu-celular__grupo.com-linha,.menu-celular__outros,.menu-celular__rodape{border-color:var(--borda)}
.menu-celular a.grande{color:var(--tinta)} .menu-celular__outros a{color:var(--tinta-2)}
.menu-celular__rodape a{background:var(--roxo);color:#fff}

/* ---------- capa: cena 3D com etiquetas, texto embaixo à esquerda e cartão à direita ---------- */
.capa{position:relative;height:calc(100vh - 72px);height:calc(100svh - 72px);min-height:560px;background:#f7f6fa;overflow:hidden;color:var(--tinta)}
.capa canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(247,246,250,0) 55%,rgba(247,246,250,.75) 100%)}
.capa__etiquetas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.etiqueta{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--borda-roxa);box-shadow:0 6px 20px rgba(55,45,90,.12);font-family:var(--font-label);font-weight:500;font-size:12px;line-height:1.2;color:var(--tinta);white-space:nowrap;opacity:0;transform:translate(-4px,-50%) scale(.85);transform-origin:left center;transition:opacity .35s var(--suave),transform .35s var(--suave),background .3s,color .3s,border-color .3s}
.etiqueta.visivel{opacity:1;transform:translate(-4px,-50%) scale(1)}
.etiqueta--esq{flex-direction:row-reverse;transform-origin:right center;transform:translate(calc(-100% + 4px),-50%) scale(.85)}
.etiqueta--esq.visivel{transform:translate(calc(-100% + 4px),-50%) scale(1)}
.etiqueta i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--roxo);box-shadow:0 0 0 4px rgba(120,97,180,.18)}
.etiqueta .acao{display:none;align-items:center;gap:6px}
.etiqueta.feito{background:var(--roxo);color:#fff;border-color:var(--roxo);box-shadow:0 8px 24px rgba(120,97,180,.35)}
.etiqueta.feito i{background:#fff;box-shadow:none}
.etiqueta.feito .situacao{display:none} .etiqueta.feito .acao{display:inline-flex}
.capa__texto{position:absolute;z-index:3;left:var(--respiro);bottom:clamp(36px,7vh,72px);max-width:min(760px,60vw)}
.capa__pill{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;background:#fff;border:1px solid var(--borda-roxa);box-shadow:0 4px 14px rgba(55,45,90,.08);font-family:var(--font-label);font-weight:500;font-size:12px;color:var(--tinta-2)}
.capa__pill i{width:20px;height:20px;border-radius:50%;background:var(--roxo);display:grid;place-items:center}
.capa h1{font-family:var(--font-sans);font-weight:400;font-size:clamp(34px,4.6vw,66px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 0;color:var(--tinta);text-wrap:balance}
.capa h1 em{font-style:normal;color:var(--roxo)}
.capa__cartao{position:absolute;z-index:3;right:var(--respiro);bottom:clamp(36px,7vh,72px);display:flex;align-items:center;gap:14px;padding:12px 20px 12px 12px;border-radius:16px;background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra-forte);text-decoration:none;color:var(--tinta);transition:transform .25s var(--suave),box-shadow .25s}
.capa__cartao:hover{transform:translateY(-2px);color:var(--tinta);box-shadow:0 24px 60px rgba(55,45,90,.2)}
.capa__cartao i{flex:none;width:42px;height:42px;border-radius:12px;background:var(--roxo);display:grid;place-items:center}
.capa__cartao strong{display:block;font-family:var(--font-label);font-weight:600;font-size:14px}
.capa__cartao small{display:block;font-size:12px;line-height:1.35;color:var(--tinta-2);margin-top:2px;max-width:210px}
.capa.sem-3d canvas,.capa.sem-3d .capa__etiquetas{display:none}
.capa.sem-3d{background:radial-gradient(80% 60% at 70% 30%,var(--roxo-leve),#f7f6fa 70%)}

/* ---------- faixa de logos, cards, fases ---------- */
.prova{background:#fff;border-top:1px solid var(--borda)}
.logos li{background:#f6f4f9;border:1px solid var(--borda)}
.logos .sem-logo{color:var(--tinta-3)}
.card,.secao--escura .card{background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra)}
.card:hover,.secao--escura .card:hover{border-color:var(--borda-roxa);box-shadow:var(--sombra-forte)}
.card__topo svg{stroke:var(--roxo)}
.card__topo span,.secao--escura .card__topo span{color:var(--tinta-3)}
.card h3{color:var(--tinta)}
.card p,.secao--escura .card p{color:var(--tinta-2)}
.card a,.secao--escura .card a{color:var(--roxo);text-decoration-color:rgba(120,97,180,.3)}
.card a:hover,.secao--escura .card a:hover{color:var(--roxo-escuro);text-decoration-color:var(--roxo)}
.fase{border-top-color:var(--roxo)}
.fase .indicado b,.fase .indicado a{color:var(--roxo)}

/* ---------- método: a roda dentro de uma órbita com pontos girando ---------- */
.pilares li{color:var(--tinta-2);border-color:var(--borda)} .pilares li:last-child{border-color:var(--borda)}
.pilares b{color:var(--tinta)}
.orbita{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;border:1px solid rgba(120,97,180,.22)}
.orbita .roda{position:absolute;inset:11%;max-width:none;width:auto;margin:0}
.orbita__ponto{position:absolute;inset:-6px;border-radius:50%;animation:girar var(--dur,26s) linear infinite;animation-delay:var(--atraso,0s)}
.orbita__ponto::before{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--roxo);box-shadow:0 0 0 5px rgba(120,97,180,.16)}
@keyframes girar{to{transform:rotate(360deg)}}
.roda svg path{stroke:#fff}
.roda svg circle{fill:#fff;stroke:var(--borda-roxa)}
.roda svg text[fill="#b39fda"]{fill:var(--roxo)}

/* ---------- por que: cartão com um bloco 3D roxo ---------- */
.quadro-roxo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:24px;box-shadow:var(--sombra);padding:clamp(28px,4vw,56px);overflow:hidden}
.quadro-roxo .titulo{margin-top:16px}
.motivos li{color:var(--tinta-2)} .motivos li::before{background:var(--roxo)}
.quadro-roxo__visual{position:relative;min-height:380px;display:grid;place-items:center;perspective:1200px}
.esfera{position:absolute;width:min(420px,100%);height:auto;color:rgba(120,97,180,.3)}
.esfera circle,.esfera ellipse{fill:none;stroke:currentColor;stroke-width:1}
.esfera .no{fill:var(--roxo);stroke:none}
.bloco3d{position:relative;width:min(300px,62%);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);animation:flutuar 7s ease-in-out infinite}
.bloco3d::before,.bloco3d::after{content:"";position:absolute;inset:0;border-radius:34px}
.bloco3d::after{background:linear-gradient(135deg,#b8a6dc 0%,#7f68ba 55%,#5e4c98 100%);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.bloco3d::before{background:#3a2e63;transform:translateZ(-44px)}
.bloco3d span{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(1px);font-family:var(--font-label);font-weight:600;font-size:clamp(14px,1.4vw,18px);letter-spacing:2px;text-transform:uppercase;color:#fff;text-align:center;padding:12%}
@keyframes flutuar{0%,100%{transform:rotateX(58deg) rotateZ(-38deg) translateZ(0)}50%{transform:rotateX(58deg) rotateZ(-38deg) translateZ(14px)}}
.tag-flutuante{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--borda-roxa);box-shadow:0 6px 18px rgba(55,45,90,.12);font-family:var(--font-label);font-weight:500;font-size:11px;color:var(--tinta-2)}
.tag-flutuante::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--roxo)}

/* ---------- depoimentos, artigos, formulário, rodapé ---------- */
.cartao-claro{background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra)}
.artigo:hover{box-shadow:var(--sombra-forte)}
.artigo .categoria{color:var(--roxo)} .artigo h3 a:hover{color:var(--roxo)}
.formulario{background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra-forte);backdrop-filter:none;-webkit-backdrop-filter:none}
.campo>span{color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{background:#fff;border-color:rgba(43,35,51,.18);color:var(--tinta)}
.campo select{color-scheme:light} .campo select option{background:#fff;color:var(--tinta)}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--roxo)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(120,97,180,.18)}
.seletor svg{stroke:var(--roxo)}
.aviso-envio{border-color:#2f7a4a;background:rgba(47,122,74,.07);color:#2f7a4a}
.aviso-envio.erro{border-color:#b3453f;background:rgba(179,69,63,.07);color:#b3453f}
.rodape{background:var(--roxo-fundo);color:var(--tinta-2);border-top:1px solid var(--borda)}
.rodape__quadro{background:#fff;border-color:var(--borda)}
.rodape__col{border-color:var(--borda)}
.rodape__col p{color:var(--tinta-2)}
.rodape__mini,.rodape__base{color:var(--tinta-3)}
.rodape__titulo{color:var(--roxo)}
.rodape a{color:var(--tinta-2)} .rodape a:hover{color:var(--roxo)}
.rodape__base a{color:var(--tinta-2)}

@media (max-width:959px){
  .capa{min-height:0;height:calc(100vh - 72px);height:calc(100svh - 72px)}
  .capa__texto{left:var(--respiro);right:var(--respiro);max-width:none;bottom:124px}
  .capa h1{font-size:clamp(28px,7.6vw,40px)}
  .capa__cartao{left:var(--respiro);right:var(--respiro);bottom:28px}
  .capa__cartao small{max-width:none}
  .etiqueta{display:none} .etiqueta--celular{display:flex}
  .quadro-roxo__visual{min-height:320px}
}