/* Portal EBD · Início
   Animações e as quebras responsivas que no protótipo vinham de renderVals(). */
html{scroll-behavior:smooth}

/* Cabeçalho: navegação completa a partir de 960px, botão de menu abaixo */
@media (max-width:959.98px){.so-desk{display:none !important}}
@media (min-width:960px){.so-cel{display:none !important}}

/* Hero ocupa a primeira dobra no desktop; "Saiba mais" só aparece nela */
.hero{min-height:auto}
.cue{display:none !important}
@media (min-width:960px){
  .hero{min-height:calc(100svh - 73px)}
  .cue{display:flex !important}
}

/* Números do hero: os 3 sempre numa linha só; quando falta espaço, a legenda quebra */
.numeros-hero{display:grid !important;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:32px !important}
.numeros-hero>div>div:last-child{text-wrap:balance}
/* No celular e no tablet (hero empilhado): os 3 centralizados, cada um com o texto ao centro */
@media (max-width:959.98px){
  .numeros-hero{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px !important;text-align:center}
  .numeros-hero>div{align-items:center}
  .numeros-hero>div>div:first-child{justify-content:center}
}
@media (max-width:559.98px){
  .numeros-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);column-gap:8px !important}
  .numeros-hero>div>div:first-child{font-size:21px !important}
  .numeros-hero>div>div:last-child{font-size:12px !important}
}

/* Cards flutuantes ao redor do celular do hero */
.flut{display:none !important}
@media (min-width:700px){.flut{display:flex !important}}

/* No dia a dia: abaixo de 860px a animação do ranking vai para baixo do texto */
@media (max-width:859.98px){.ordem-prof{order:1 !important}}

/* O app por dentro: tour com o aparelho fixo a partir de 900px, carrossel abaixo */
@media (max-width:899.98px){.tour-desk{display:none !important}}
@media (min-width:900px){.tour-cel{display:none !important}}
.tour-cel{scrollbar-width:none}
.tour-cel::-webkit-scrollbar{display:none}

/* Rodapé */
.rodape-cols{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.rodape-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.rodape-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr)}}

/* Movimento reduzido: o JS desliga revelações, contagens e a rolagem do tour */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@keyframes marcar{0%,8%{background:#E6DEE3}18%,84%{background:#276B47}94%,100%{background:#E6DEE3}}
@keyframes marcarCaixa{0%,8%{background:#fff;border-color:#E6DEE3}18%,84%{background:#276B47;border-color:#276B47}94%,100%{background:#fff;border-color:#E6DEE3}}
@keyframes aparecer{0%,8%{opacity:0;transform:scale(.4)}18%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
@keyframes presenca{0%,8%{background:#F1EDEF;color:#B6ACB2}18%,84%{background:#276B47;color:#fff}94%,100%{background:#F1EDEF;color:#B6ACB2}}
@keyframes acender{0%,8%{background:#F1EDEF;color:#B6ACB2}18%,84%{background:#F3E7EF;color:#6F275F}94%,100%{background:#F1EDEF;color:#B6ACB2}}
@keyframes contagemA{0%,40%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
@keyframes contagemB{0%,40%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
@keyframes anel{0%,10%{stroke-dashoffset:264}60%,88%{stroke-dashoffset:100}100%{stroke-dashoffset:264}}
@keyframes contar{0%,10%{opacity:0;transform:translateY(6px)}20%,88%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes toast{0%,70%{opacity:0;transform:translate(-50%,18px)}78%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes barra{0%,15%{transform:scaleY(.08)}55%,90%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
@keyframes digitar{0%,10%{width:0}50%,90%{width:100%}100%{width:0}}
@keyframes piscar{0%,49%{opacity:1}50%,100%{opacity:0}}
/* subir começa em .01, não em 0: o navegador ignora texto invisível no LCP, e o título do hero só contava depois da troca de fonte */
@keyframes subir{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulsoVerde{0%,100%{box-shadow:0 0 0 0 rgba(185,240,207,.6)}70%{box-shadow:0 0 0 8px rgba(185,240,207,0)}}
@keyframes estrela{0%,20%{transform:scale(1) rotate(0)}30%{transform:scale(1.35) rotate(-12deg)}40%,100%{transform:scale(1) rotate(0)}}
@keyframes linhaEncher{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rolarTela{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--fim),0)}}
@keyframes chegar{0%,6%{transform:scaleX(0)}16%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes chegou{0%,14%{opacity:0;transform:scale(.5)}20%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes esperando{0%,14%{opacity:1}20%,86%{opacity:0}96%,100%{opacity:1}}
@keyframes total{0%,6%{transform:scaleX(.1)}80%,90%{transform:scaleX(1)}100%{transform:scaleX(.1)}}
@keyframes somar{0%,6%{opacity:.4}80%,90%{opacity:1}100%{opacity:.4}}
@keyframes movMarcos{0%,6%{top:140px}20%,88%{top:0}100%{top:140px}}
@keyframes movSara{0%,6%{top:0}20%,88%{top:70px}100%{top:0}}
@keyframes movJoana{0%,6%{top:70px}20%,88%{top:140px}100%{top:70px}}
@keyframes movHelena{0%,100%{top:210px}}
@keyframes trocaA{0%,10%{opacity:1}18%,90%{opacity:0}100%{opacity:1}}
@keyframes trocaB{0%,10%{opacity:0}18%,90%{opacity:1}100%{opacity:0}}
@keyframes dourar{0%,10%{background:#F1EDEF;color:#6E6470}20%,88%{background:#FFD86B;color:#5A3D05}100%{background:#F1EDEF;color:#6E6470}}
@keyframes desdourar{0%,10%{background:#FFD86B;color:#5A3D05}20%,88%{background:#E8C98A;color:#5A3D05}100%{background:#FFD86B;color:#5A3D05}}
@keyframes destacar{0%,10%{background:#F8F6F5}20%,88%{background:#F3E7EF}100%{background:#F8F6F5}}
@keyframes apagar{0%,10%{background:#F3E7EF}20%,88%{background:#F8F6F5}100%{background:#F3E7EF}}
@keyframes pulsoBranco{0%{box-shadow:0 10px 30px rgba(23,19,26,.28),0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 10px 30px rgba(23,19,26,.28),0 0 0 18px rgba(255,255,255,0)}}
@keyframes escurecer{from{opacity:0}to{opacity:1}}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes barraRapida{0%{transform:scaleY(.08)}9%,90%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
@keyframes chegouRapido{0%{opacity:0;transform:scale(.5)}5%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes avisoRapido{0%,22%{opacity:0;transform:translate(-50%,16px)}27%,90%{opacity:1;transform:translate(-50%,0)}96%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes avisoSede{0%,58%{opacity:0;transform:translate(-50%,16px)}64%,90%{opacity:1;transform:translate(-50%,0)}96%,100%{opacity:0;transform:translate(-50%,-6px)}}

/* Celular (seções em uma coluna): as notas das lojas à esquerda, ocupando a largura,
   e o título das Dúvidas rola junto (fixo, a lista passava por cima dele) */
@media (max-width:799.98px){
  .notas-lojas{justify-content:flex-start !important}
  .notas-lojas>div{flex:1 1 220px}
  .duvidas-fixo{position:static !important}
}

/* Player do vídeo do site (pop-up): controles próprios e barra de progresso */
.pv{position:relative;width:100%;height:100%;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}
.pv video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.pv-centro{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:99px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(23,19,26,.28);cursor:pointer;transition:opacity .2s,transform .2s}
.pv.tocando .pv-centro{opacity:0;transform:scale(.85);pointer-events:none}
.pv-barra{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:28px 12px 10px;background:linear-gradient(180deg,rgba(23,19,26,0),rgba(23,19,26,.7));transition:opacity .25s;cursor:default}
.pv.tocando.quieto .pv-barra{opacity:0}
.pv.tocando.quieto{cursor:none}
.pv-btn{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pv-btn:hover,.pv-btn:focus-visible{background:rgba(255,255,255,.16)}
.pv-trilha{flex:1;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pv-trilha span{position:relative;display:block;width:100%;height:5px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden}
.pv-trilha i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:#fff}
.pv-som{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:12px;background:#fff;color:#17131A;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.pv-som[hidden]{display:none}

/* Vídeo do depoimento na página: mudo em loop até "Ativar o som" */
.dv video{object-fit:cover}
.dv-mudo{position:absolute;left:clamp(12px,2vw,24px);top:clamp(12px,2vw,24px);display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:99px;background:rgba(23,19,26,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:700;pointer-events:none}
.dv-som{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(20px,3vw,36px);display:flex;align-items:center;gap:10px;height:clamp(44px,4.4vw,52px);padding:0 clamp(16px,1.8vw,22px);border:0;border-radius:16px;background:#fff;color:#17131A;font:inherit;font-size:clamp(14px,1.3vw,16px);font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .15s}
.dv-som:hover{transform:translateY(-1px)}
.dv-linha{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25);pointer-events:none}
.dv-linha i{display:block;height:100%;width:0;background:#fff}
.dv.com-som .dv-mudo,.dv.com-som .dv-som,.dv.com-som .dv-linha,.dv.parado .dv-mudo,.dv.parado .dv-linha{display:none}
.dv.com-som video{object-fit:contain}
@media (max-width:599.98px){
  .dv-mudo{display:none}
  .dv-som{top:12px;bottom:auto;right:12px;height:40px;padding:0 14px;font-size:14px;border-radius:12px}
}