/* =====================================================================================
   Viver de Comprinha · componentes das landings de campanha (/lp/a, /lp/b, /lp/c)
   Só usa tokens de marca.css. Nenhuma cor, fonte, raio ou sombra nova.
   ===================================================================================== */

/* palco do herói: celular + chat por cima */
.lp-palco{position:relative;padding:var(--e6) 0 var(--e4);max-width:520px;margin:0 auto}
.lp-palco .blocos i:nth-child(1){width:120px;height:120px;top:4%;right:2%}
.lp-palco .blocos i:nth-child(2){width:72px;height:72px;bottom:18%;right:-2%}
.lp-palco .blocos i:nth-child(3){width:96px;height:96px;top:30%;left:0}
.lp-palco .celular{z-index:1}
.lp-palco .lp-flutuante{position:relative;z-index:3;margin:-72px auto 0;max-width:320px}
@media(min-width:960px){
  .lp-palco .lp-flutuante{position:absolute;left:-24px;bottom:56px;margin:0;width:300px}
  .lp-palco .lp-flutuante.dir{left:auto;right:-24px}
}
.lp-flutuante .chat-sim{max-width:none}
.lp-palco .legenda-tela{position:relative;z-index:2}

/* faixa de mini CTA entre seções */
.lp-mini-cta{display:grid;gap:var(--e4);align-items:center;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6)}
.lp-mini-cta h3{font-size:22px}
.lp-mini-cta p{color:var(--texto-apoio);font-size:15px}
.lp-mini-cta .ctas-nota{margin-top:var(--e2)}
@media(min-width:860px){.lp-mini-cta{grid-template-columns:1fr auto;padding:var(--e6) var(--e8)}}

/* nota do fim do teste em fundo escuro */
.secao-ameixa .ctas-nota,.secao-violeta .ctas-nota{color:#D9CEF5}
.cta-faixa .ctas-nota{color:#EDE5FF;margin:var(--e4) auto 0;max-width:560px}

/* listas com ícone (antes × depois, o que não prometemos, o que você precisa) */
.lp-lista{list-style:none;display:grid;gap:var(--e3);margin-top:var(--e4)}
.lp-lista li{display:flex;gap:12px;align-items:flex-start;color:var(--texto-apoio)}
.lp-lista li b{color:var(--texto)}
.lp-lista .ic{margin-top:1px;color:var(--violeta)}
.lp-lista.nao .ic{color:var(--erro)}
.cartao-ameixa .lp-lista li{color:#D9CEF5}
.cartao-ameixa .lp-lista li b{color:var(--lavanda)}
.cartao-ameixa .lp-lista .ic{color:var(--lilas)}

/* rotina repetida: a mesma tarefa em loop */
.lp-rotina{display:grid;gap:var(--e2);counter-reset:rot}
.lp-rotina li{list-style:none;display:flex;align-items:center;gap:12px;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:12px 16px;font-weight:600}
.lp-rotina li::before{counter-increment:rot;content:counter(rot);display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lavanda-2);color:var(--violeta);font:800 14px/1 var(--f-titulo)}
.lp-rotina li.repete{border-style:dashed;border-color:var(--borda-forte);color:var(--texto-apoio)}
.lp-rotina li.repete::before{content:"↻"}

/* conta simples: 10 ofertas × 3 grupos = 30 */
.lp-conta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--e3);margin-top:var(--e8);text-align:center}
.lp-conta div{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e4) var(--e6);min-width:120px}
.lp-conta b{display:block;font:800 clamp(32px,4vw,44px)/1 var(--f-titulo);color:var(--violeta)}
.lp-conta span{font-size:14px;font-weight:600;color:var(--texto-apoio)}
.lp-conta .op{font:800 28px/1 var(--f-titulo);color:var(--texto-suave);background:none;border:0;padding:0;min-width:0}

/* três tons do texto pronto */
.lp-tom h3{font-size:20px;margin:var(--e3) 0 var(--e4)}
.lp-tom .chat-sim{max-width:none}
.lp-tom .balao-msg a,.lp-link-texto{color:var(--violeta);font-weight:700;overflow-wrap:anywhere}
.lp-tom .balao-msg i,.balao-msg .aviso{font-style:italic;color:var(--texto-apoio)}

/* dois celulares lado a lado */
.lp-par{display:grid;gap:var(--e8);justify-items:center}
@media(min-width:720px){.lp-par{grid-template-columns:1fr 1fr;gap:var(--e4)}.lp-par>:nth-child(2){margin-top:var(--e12)}}
.lp-par .celular{width:min(260px,72vw)}

/* link único do grupo */
.lp-link{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--branco);border:2px solid var(--violeta);border-radius:var(--r-pill);padding:10px 10px 10px 20px;max-width:100%}
.lp-link .ic{color:var(--violeta)}
.lp-link span{font-weight:700;font-size:15px;overflow-wrap:anywhere;flex:1;min-width:0}
.lp-link .selo{flex:none}
@media(max-width:480px){.lp-link{border-radius:var(--r-md)}}

/* ocupação dos grupos (link manda para o próximo) */
.lp-grupos{display:grid;gap:var(--e3)}
.lp-grupo{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:var(--e4)}
.lp-grupo .topo-g{display:flex;justify-content:space-between;gap:var(--e3);font-weight:700;font-size:15px;margin-bottom:var(--e2)}
.lp-grupo .topo-g small{font-weight:600;color:var(--texto-apoio);font-size:13px}
.lp-barra{height:12px;border-radius:var(--r-pill);background:var(--lavanda-2);overflow:hidden}
.lp-barra span{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--violeta);transition:width 1.4s var(--ease) .3s}
.lp-grupo.cheio .lp-barra span{background:var(--lilas)}
.visivel .lp-barra span,.lp-barra.visivel span{width:var(--p)}
.lp-grupo.vai{border:2px solid var(--violeta)}
@media (prefers-reduced-motion:reduce){.lp-barra span{width:var(--p)}}

/* ritmo do dia: bolinhas distribuídas na janela */
.lp-dia{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6)}
.lp-dia .trilha{position:relative;display:flex;justify-content:space-between;align-items:center;height:32px;margin:var(--e4) 0 var(--e2)}
.lp-dia .trilha::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--borda-forte)}
.lp-dia .trilha i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--violeta);flex:none}
.lp-dia .trilha.rajada{justify-content:flex-start;gap:2px}
.lp-dia .trilha.rajada i{background:var(--erro);width:8px;height:8px}
.lp-dia .horas{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--texto-suave)}
.lp-dia h3{font-size:20px}
.lp-dia p{color:var(--texto-apoio);font-size:15px;margin-top:var(--e2)}
.painel-aba .lp-dia+.lp-dia{margin-top:var(--e4)}

/* linha do tempo do teste (Dia 1, Dia 3, Dia 7) */
.lp-linha{list-style:none;display:grid;gap:var(--e6);position:relative}
.lp-linha::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--borda-forte)}
.lp-linha>li{position:relative;padding-left:56px}
.lp-linha>li::before{content:"";position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--violeta);border:4px solid var(--lavanda)}
.lp-linha .cartao{height:100%}
.lp-linha h3{font-size:22px;margin:var(--e3) 0 var(--e2)}
@media(min-width:960px){
  .lp-linha{grid-template-columns:repeat(3,1fr)}
  .lp-linha::before{left:20px;right:20px;top:19px;bottom:auto;width:auto;height:2px}
  .lp-linha>li{padding-left:0;padding-top:48px}
  .lp-linha>li::before{left:0;top:9px}
}

/* telas do produto num navegador inclinado de leve */
.lp-navegador-palco{position:relative;max-width:1040px;margin:0 auto}

/* utilitários de layout das landings (evitam style="" no HTML) */
.lp-mt4{margin-top:var(--e4)} .lp-mt6{margin-top:var(--e6)} .lp-mt8{margin-top:var(--e8)}
.lp-centro{text-align:center}
.lp-faq{max-width:820px;margin:0 auto}
.lp-cta-blocos i:nth-child(1){width:120px;height:120px;top:-30px;left:-30px}
.lp-cta-blocos i:nth-child(2){width:80px;height:80px;bottom:-20px;right:8%}
.lp-contorno-claro{border-color:var(--lavanda);color:var(--lavanda)}
.lp-contorno-claro:hover{background:var(--lavanda);color:var(--violeta)}
.lp-legenda-tabela{caption-side:bottom;text-align:left;padding:12px 16px}
.lp-mini{padding:var(--e8) 0 0}
.lp-nota-linha{display:flex;justify-content:space-between;gap:var(--e3);font-weight:600;font-size:14px;margin-bottom:6px}
.lp-nota-linha small{color:var(--texto-apoio);font-weight:600}
.lp-rel{position:relative;overflow:hidden}
.lp-rel>.c{position:relative}
/* palavra que troca: uma linha só (sem quebrar dentro da palavra) */
.lp-troca>span{white-space:nowrap}
/* respiro de títulos e parágrafos dentro de .dividir (fora de .cab-secao) */
.dividir>div>h2{margin:var(--e3) 0 var(--e4)}
.dividir>div>p+p{margin-top:var(--e3)}
/* planos: selo do tamanho do texto e lista sem esticar */
.plano-s .selo{align-self:flex-start}
.plano-s ul{align-content:start}
/* números em duas colunas no celular */
@media(max-width:719px){.numeros{grid-template-columns:1fr 1fr;gap:var(--e3)}.numero{padding:var(--e4)}.numero span{font-size:15px;line-height:1.3}}
/* faixa de nichos parada (movimento reduzido): sem a cópia usada no loop */
@media (prefers-reduced-motion:reduce){.faixa .lp-dup{display:none}.faixa{mask-image:none;-webkit-mask-image:none}.faixa .trilho{justify-content:center;padding:0 16px}}
.cartao-lavanda .icone-bloco{background:var(--branco)}
.plano-s>.btn:last-child{margin-top:auto}
.lp-tom .chat-sim{border:0;padding:0;background:none}
@media(max-width:480px){.lp-conta{gap:var(--e2)}.lp-conta div{min-width:0;padding:var(--e3)}.lp-conta span{font-size:12px}.lp-conta .op{font-size:20px}}
/* tabela que vira lista no celular */
@media(max-width:599px){
  .lp-tabela-pilha thead{display:none}
  .lp-tabela-pilha tr{display:block;border-bottom:1px solid var(--borda)}
  .lp-tabela-pilha tr:last-child{border-bottom:0}
  .lp-tabela-pilha th,.lp-tabela-pilha td{display:block;border:0;padding:8px 16px}
  .lp-tabela-pilha th[scope="row"]{padding:12px 16px}
  .lp-tabela-pilha td:last-child{padding-bottom:16px}
  .lp-tabela-pilha td::before{content:attr(data-rotulo);display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-apoio)}
}