/* ============================================================================
   DivulgaUp — página do APP. Só o que a estilo.css NÃO tem.
   Tokens, topo, botões, seções, dúvidas, CTA e rodapé vêm de estilo.css.
   ========================================================================= */

/* ------------------------------------------------------------ celular (moldura) */
/* O `.dev` da estilo.css, com as telas reais do app dentro. A tela tem a proporção
   do celular (738:1505); os prints foram capturados em 300 x 612 justamente por isso. */
.cel{--w:260px}
.cel .dev__tela img{object-position:top}
/* as telas do app já começam pela barra de abas: a "ilha" do celular cobriria a primeira aba */
.cel .dev__ilha{display:none}

/* ---------------------------------------------------------------------- hero */
.hero--app{padding-bottom:clamp(34px,4.6vw,64px)}
.hero--app .hero__grade{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hero--app .hero__titulo{font-size:clamp(38px,5.6vw,68px);line-height:1.02}
.hero--app .hero__titulo .rabisco{display:inline}
.hero--app .hero__titulo .rabisco::after{bottom:-.02em}
/* celular (25/10): "todos os seus grupos." não quebra (rabisco nowrap) — a 38px passava da borda em 360px e cortava o "s" */
@media (max-width:420px){.hero--app .hero__titulo{font-size:min(38px,9.2vw)}}
.hero__palco{position:relative;display:flex;justify-content:center;align-items:flex-start;
  min-height:clamp(430px,44vw,600px)}
.hero__palco .cel{position:absolute}
.hero__palco .cel--frente{--w:clamp(196px,19vw,250px);right:clamp(8%,10vw,16%);top:0;z-index:2}
.hero__palco .cel--fundo{--w:clamp(176px,17vw,224px);left:clamp(0%,4vw,6%);top:11%;z-index:1;
  transform:rotate(-5deg);opacity:.98}
.hero__brilho{position:absolute;inset:8% 4% 0;border-radius:50%;
  background:radial-gradient(circle,#FFD3BE 0%,#FFE3EE 46%,transparent 70%);filter:blur(34px);opacity:.85;z-index:0}
.hero__legenda{position:absolute;z-index:3;left:0;bottom:-9%;max-width:216px;padding:12px 15px;border-radius:var(--raio);
  background:var(--branco);border:1px solid var(--linha);box-shadow:var(--sombra);
  font-size:13.5px;line-height:1.45;color:var(--tinta-2)}
.hero__legenda b{display:block;color:var(--tinta);font-size:14px;margin-bottom:2px}

/* ---------------------------------------------------------------- 4 provas */
.provas{padding:clamp(6px,1vw,14px) 0 clamp(40px,5vw,72px)}
.provas__grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prova{padding:24px 22px;border-radius:var(--raio-g);background:var(--branco);border:1px solid var(--linha);
  box-shadow:var(--sombra-s);transition:transform .35s var(--ease),box-shadow .35s}
.prova:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.prova__icone{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--coral-fraco);color:var(--coral-txt)}
.prova:nth-child(2) .prova__icone{background:var(--rosa-fraco);color:var(--rosa-txt)}
.prova:nth-child(3) .prova__icone{background:#EFE6FF;color:var(--uva)}
.prova:nth-child(4) .prova__icone{background:var(--menta-fraco);color:var(--menta-txt)}
.prova__titulo{font-size:20px;line-height:1.15}
.prova__txt{margin-top:9px;color:var(--tinta-2);font-size:15px;line-height:1.55}

/* -------------------------------------------------------- passos com telas */
.passo__midia .dev{--w:clamp(220px,22vw,290px)}
.passos--app{display:grid;gap:clamp(46px,6vw,90px)}

/* ------------------------------------------------------- freio (faixa uva) */
.freio__duas{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.regras{display:grid;gap:12px;counter-reset:regra;list-style:none;margin:0;padding:0}
.regras li{position:relative;padding:14px 16px 14px 60px;border-radius:var(--raio);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);font-size:15.5px;line-height:1.5;counter-increment:regra}
.regras li::before{content:counter(regra);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad-quente);color:#fff;font:800 14px/1 var(--corpo)}
.regras li b{color:#fff}
.freio__aviso{margin-top:20px;padding:16px 18px;border-radius:var(--raio);border:1px dashed rgba(255,255,255,.4);
  color:rgba(255,255,255,.88);font-size:15px;line-height:1.55}
.freio__aviso b{color:#fff}
.freio__tela{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.freio__tela .dev{--w:clamp(210px,21vw,262px)}
.freio__tela figcaption{max-width:32ch;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}


/* ------------------------------------------------------------ vitrine / duas colunas */
.duas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.duas--inversa .duas__midia{order:2}
.duas__midia{display:flex;justify-content:center;gap:clamp(10px,2vw,26px);align-items:flex-start}
.duas__midia .dev{--w:clamp(190px,19vw,236px)}
.duas__midia .dev + .dev{margin-top:clamp(28px,4vw,56px)}
.duas__lista{margin-top:22px;display:grid;gap:12px}
.duas__lista li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--tinta-2);line-height:1.55}
.duas__lista svg{flex:0 0 auto;margin-top:4px;color:var(--coral)}
.duas__lista b{color:var(--tinta)}
.duas__nota{margin-top:20px;padding:14px 16px;border-radius:var(--raio);background:var(--branco);
  border:1px solid var(--linha);font-size:14.5px;line-height:1.55;color:var(--tinta-2)}

/* --------------------------------------------------------------- IA (cartões) */
.ia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ia__cartao{padding:24px 22px;border-radius:var(--raio-g);background:var(--branco);border:1px solid var(--linha);
  box-shadow:var(--sombra-s)}
.ia__marca{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  background:#EFE6FF;color:var(--uva);font:700 12px/1 var(--corpo);letter-spacing:.03em}
.ia__titulo{margin-top:14px;font-size:20px}
.ia__txt{margin-top:8px;color:var(--tinta-2);font-size:15px;line-height:1.55}
.ia__rodape{margin-top:24px;text-align:center;color:var(--tinta-2);font-size:15.5px}
.ia__rodape b{color:var(--tinta)}

/* ---------------------------------------------------------------- a conta é sua */
.conta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:6px}
.conta__item{padding:24px 22px;border-radius:var(--raio-g);background:var(--creme);border:1px solid var(--linha)}
.conta__item h3{font-size:20px}
.conta__item p{margin-top:8px;color:var(--tinta-2);font-size:15px;line-height:1.55}
.lojas-app{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(26px,3.4vw,40px)}
.lojas-app .marca{height:82px;padding:0 30px}
.lojas-app .marca img{height:34px;max-width:150px}
.lojas-app__nota{margin-top:18px;text-align:center;color:var(--tinta-3);font-size:13.5px;line-height:1.55;max-width:74ch;margin-inline:auto}

  font:600 12.5px/1.35 var(--corpo)}

/* ---------------------------------------------------------------- celular */
@media (max-width:1080px){
  .provas__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .conta{grid-template-columns:minmax(0,1fr)}
  .freio__duas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .hero--app .hero__grade{grid-template-columns:minmax(0,1fr)}
  .hero__palco{min-height:0;height:clamp(420px,110vw,520px)}
  .hero__palco .cel--frente{--w:clamp(180px,48vw,230px);right:6%}
  .hero__palco .cel--fundo{--w:clamp(160px,42vw,204px);left:2%}
  .hero__legenda{display:none}
  .duas{grid-template-columns:minmax(0,1fr)}
  .duas--inversa .duas__midia{order:0}
}
@media (max-width:640px){
  .provas__grade,.ia{grid-template-columns:minmax(0,1fr)}
  .duas__midia .dev{--w:min(40vw,190px)}
  .lojas-app .marca{height:70px;padding:0 22px}
}

/* ------------------------------------------------------- dor e antes × depois */
.dores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dor{position:relative;padding:22px 20px 22px 20px;border-radius:var(--raio-g);background:var(--branco);
  border:1px solid var(--linha);box-shadow:var(--sombra-s)}
.dor__num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;margin-bottom:12px;
  background:var(--rosa-fraco);color:var(--rosa-txt);font:800 15px/1 var(--corpo)}
.dor p{color:var(--tinta-2);font-size:16px;line-height:1.5}
.dor p b{color:var(--tinta)}
.antes-depois{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(26px,3.4vw,42px)}
.ad{padding:clamp(22px,2.6vw,32px);border-radius:var(--raio-g);border:1px solid var(--linha)}
.ad h3{font-size:clamp(21px,2.3vw,27px)}
.ad ol{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px;counter-reset:ad}
.ad li{position:relative;padding-left:38px;font-size:16px;line-height:1.45;counter-increment:ad}
.ad li::before{content:counter(ad);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;font:800 13px/1 var(--corpo)}
.ad--antes{background:#F7EFEA}
.ad--antes li{color:var(--tinta-2)}
.ad--antes li::before{background:#E8DAD2;color:#7E6470}
.ad--depois{background:var(--branco);border-color:#FFD2BE;box-shadow:var(--sombra)}
.ad--depois h3{color:var(--coral-txt)}
.ad--depois li{color:var(--tinta)}
.ad--depois li::before{background:var(--grad-btn);color:#fff}
@media (max-width:1080px){.dores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dores,.antes-depois{grid-template-columns:minmax(0,1fr)}}

/* contraste (medido com contraste.js): tons de texto um pouco mais fundos onde a medição ficou entre 3,2 e 4,5 */
.hero--app .hero__selo b{color:var(--coral-txt)}
.freio__tela figcaption{color:rgba(255,255,255,.84)}

/* corredor rotativo de lojas (componente da estilo.css); o vão entre a nota e o corredor */
.corredor--lojas{margin-top:clamp(26px,3.4vw,40px)}
.corredor--lojas .marca{height:82px;padding:0 34px}
.corredor--lojas .marca img{height:34px;max-width:150px}

/* corredor duplo de marcas (abaixo do topo) e rótulo do corredor "ligadas hoje" */
.faixa__nota{max-width:78ch;margin:24px auto 0;padding-inline:var(--goteira);text-align:center;color:var(--tinta-3);font-size:13.5px;line-height:1.6}
.corredor__rotulo{margin:30px 0 0;text-align:center;font:700 12.5px/1 var(--corpo);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}

/* três linhas de marcas: duração proporcional ao tamanho da fita (~5 s por marca), a do meio volta */
.faixa .corredor .corredor__fita{animation-duration:100s}
.faixa .corredor--volta .corredor__fita{animation-duration:110s}
.faixa .corredor--terceira .corredor__fita{animation-duration:90s}

/* dois caminhos (27/10): quem ainda não é afiliado e quem já é */
.caminhos{padding:clamp(18px,3vw,36px) 0 clamp(30px,4vw,52px)}
.caminhos__titulo{text-align:center;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;color:var(--tinta)}
.caminhos__titulo span{color:var(--coral-txt);font-style:italic}
.caminhos__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(20px,3vw,34px)}
.caminho{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:clamp(22px,3vw,34px);border-radius:var(--raio-xg,28px);
  background:var(--branco,#fff);border:1px solid var(--linha);box-shadow:var(--sombra)}
.caminho--uva{background:var(--grad-suave)}
.caminho__rotulo{margin:0;font:800 12.5px/1 var(--corpo);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-txt)}
.caminho h3{margin:0;font-size:clamp(21px,2.3vw,26px);line-height:1.2;color:var(--tinta)}
.caminho p{margin:0;color:var(--tinta-2);font-size:16px;line-height:1.55}
.caminho .btn{margin-top:auto}
@media (max-width:760px){.caminhos__grade{grid-template-columns:minmax(0,1fr)}}