/* =====================================================================================
   Viver de Comprinha · componentes exclusivos da PÁGINA INICIAL (index.html).
   Usa só os tokens de marca.css: nenhuma cor, fonte, raio ou sombra nova.
   ===================================================================================== */

/* texto só para leitor de tela */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* sprite de ícones (fica fora da tela) */
.ini-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* telas reais: o espaço fica reservado mesmo antes da imagem chegar */
.navegador img{aspect-ratio:1440/900;background:var(--lavanda-2);object-fit:cover;object-position:top}
.celular .tela{background:var(--lavanda-2)}

/* ---------- herói ---------- */
.ini-hero h1{max-width:12ch}
.ini-hero .corpo-lg{max-width:540px}
.ini-hero .ctas-nota{max-width:460px}
.ini-hero .selo{margin-bottom:var(--e2)}
.ini-hero-visual{position:relative;display:grid;justify-items:center;padding-bottom:var(--e4)}
.ini-hero-visual .chat-sim{position:relative;z-index:3;width:min(340px,100%);margin-top:-96px}
.ini-hero-visual .legenda-tela{margin-top:var(--e2)}
.ini-selo-flut{position:absolute;z-index:3;top:40px;right:0}
@media(min-width:960px){
  .ini-hero-visual{min-height:660px;align-content:start}
  .ini-hero-visual .chat-sim{position:absolute;left:-16px;bottom:48px;margin:0;width:330px}
  .ini-hero-visual .legenda-tela{position:absolute;bottom:0;left:0;right:0}
  .ini-selo-flut{top:96px;right:8px}
}
@media(max-width:959px){.ini-selo-flut{display:none}}

/* blocos de canto redondo do herói e do manifesto */
.ini-blocos i:nth-child(1){width:120px;height:120px;top:8%;right:-40px}
.ini-blocos i:nth-child(2){width:64px;height:64px;top:56%;left:-24px}
.ini-blocos i:nth-child(3){width:180px;height:72px;bottom:6%;right:12%}
.ini-blocos i:nth-child(4){width:40px;height:40px;top:20%;left:46%}
@media(max-width:719px){.ini-blocos i:nth-child(3),.ini-blocos i:nth-child(4){display:none}}

/* ---------- faixa "o que sai das suas mãos" ---------- */
.ini-titulo-troca .palavra-troca{color:var(--violeta)}
.ini-sai .cartao{display:flex;flex-direction:column;gap:var(--e2)}
.ini-sai .cartao h3{margin:var(--e2) 0 0}
.ini-antes{font-size:var(--t-pequeno);color:var(--texto-suave);text-decoration:line-through;text-decoration-color:var(--lilas);text-decoration-thickness:2px}
.ini-agora{font-weight:700;color:var(--texto)}

/* ---------- números ---------- */
.ini-numeros{row-gap:var(--e4)}
.ini-numeros .numero span{font-size:var(--t-corpo)}

/* ---------- CTA recorrente ---------- */
.ini-cta-mini{margin-top:var(--e12);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:var(--e6);border-radius:var(--r-lg);background:var(--branco);border:1px solid var(--borda)}
.secao-branca .ini-cta-mini{background:var(--lavanda);border-color:var(--lavanda-3)}
.ini-cta-mini p{font:800 22px/1.2 var(--f-titulo);letter-spacing:-.01em;max-width:560px}
.ini-cta-mini small{display:block;margin-top:var(--e1);font:500 var(--t-pequeno)/1.5 var(--f-texto);color:var(--texto-apoio);letter-spacing:0}
@media(max-width:480px){.ini-cta-mini .btn{width:100%}}

/* ---------- história (complementos) ---------- */
.historia .etapa ul{list-style:none;display:grid;gap:8px;margin-top:var(--e4);max-width:460px}
.historia .etapa li{display:flex;gap:10px;font-size:15px;color:var(--texto-apoio)}
.historia .etapa li svg{color:var(--violeta);margin-top:2px}
.historia .mobile-tela .celular{width:min(250px,66vw)}
.historia .fixo .legenda-tela{margin-top:var(--e4)}

/* ---------- funcionalidades em abas ---------- */
.ini-abas{justify-content:center}
.ini-painel{display:grid;gap:var(--e8);align-items:center}
@media(min-width:960px){.ini-painel{grid-template-columns:5fr 7fr;gap:var(--e12)}}
.ini-painel h3{margin-bottom:var(--e3)}
.ini-painel p{color:var(--texto-apoio)}
.ini-painel ul{list-style:none;display:grid;gap:10px;margin:var(--e4) 0 var(--e6)}
.ini-painel li{display:flex;gap:10px;font-size:15px}
.ini-painel li svg{color:var(--violeta);margin-top:2px}

/* ---------- antes × depois ---------- */
.ini-comparar{display:grid;gap:var(--e4)}
@media(min-width:860px){.ini-comparar{grid-template-columns:1fr 1fr;gap:var(--e6)}}
.ini-comparar .cartao{padding:var(--e8) var(--e6)}
.ini-comparar h3{margin-top:var(--e2)}
.ini-lista{list-style:none;display:grid;gap:var(--e4);margin-top:var(--e6)}
.ini-lista li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.ini-lista li b{display:block;font-size:16px}
.ini-lista li span{display:block;font-size:15px;color:var(--texto-apoio)}
.cartao-ameixa .ini-lista li span{color:#D9CEF5}
.ini-lista .marca{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--lavanda-2);color:var(--texto-apoio)}
.ini-lista .marca .ic{width:18px;height:18px}
.cartao-ameixa .ini-lista .marca{background:#3A2C5E;color:var(--lavanda)}

/* ---------- nichos ---------- */
.ini-faixas{display:grid;gap:var(--e3)}
.ini-faixas .item{font-size:15px}

/* ---------- lojas ---------- */
.ini-lojas{list-style:none}
.ini-lojas .cartao{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e6)}
.ini-lojas h3{font-size:20px;margin:0}
.ini-status{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-pequeno);color:var(--texto-apoio)}
.ini-status svg{color:var(--violeta);width:20px;height:20px;margin-top:1px}
.ini-regras{margin-top:var(--e8)}

/* ---------- para quem é ---------- */
.ini-alternar{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;justify-content:center;margin-bottom:var(--e8)}
.ini-alternar .alternador button{min-height:48px}
.ini-persona{display:grid;gap:var(--e8);align-items:center}
@media(min-width:960px){.ini-persona{grid-template-columns:7fr 5fr;gap:var(--e12)}}
.ini-persona .cartao{padding:var(--e8)}
.ini-persona-cab{display:flex;gap:var(--e4);align-items:center}
.ini-persona-cab .icone-bloco{width:56px;height:56px;font:800 24px/1 var(--f-titulo)}
.ini-persona-cab h3{margin:0;font-size:26px}
.ini-persona-cab p{font-size:var(--t-pequeno)}
.ini-persona dl{display:grid;gap:var(--e4);margin-top:var(--e6)}
.ini-persona dt{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.ini-persona dd{color:var(--texto-apoio);margin-top:var(--e1)}
.ini-persona .celular{width:min(260px,68vw)}

/* ---------- transparência ---------- */
.ini-nao{list-style:none}
.ini-nao li{display:grid;grid-template-columns:auto 1fr;gap:var(--e4);align-items:start}
.ini-nao .x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--lavanda);color:var(--violeta)}
.ini-nao h3{font-size:19px;margin:0 0 var(--e1);line-height:1.25}
.ini-nao p{font-size:15px}
.ini-embreve{margin-top:var(--e12);display:grid;gap:var(--e4)}
@media(min-width:960px){.ini-embreve{grid-template-columns:4fr 8fr;align-items:center}}
.ini-embreve h3{font-size:22px}
.ini-embreve ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2)}
.ini-embreve li{padding:10px 16px;border-radius:var(--r-pill);border:1px dashed var(--borda-forte);font-weight:600;font-size:15px;color:var(--texto-apoio);background:var(--branco)}

/* ---------- privacidade ---------- */
.ini-priv .cartao h3{font-size:20px}
.ini-priv-rodape{margin-top:var(--e8);display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}

/* ---------- planos (resumo) ---------- */
.ini-planos .plano-s h3{font-size:22px;margin:0}
.ini-planos .plano-s .pequeno{min-height:2.6em}
.ini-planos .plano-s .btn{width:100%}
.ini-planos-nota{margin-top:var(--e6);display:grid;gap:var(--e3)}
@media(min-width:960px){.ini-planos-nota{grid-template-columns:1fr auto;align-items:center}}

/* ---------- manifesto ---------- */
.ini-manifesto{position:relative;overflow:hidden}
.ini-manifesto .c{position:relative}
.ini-manifesto blockquote{max-width:960px}
.ini-manifesto blockquote p{font:800 clamp(24px,3.4vw,40px)/1.2 var(--f-titulo);letter-spacing:-.02em;color:var(--lavanda)}
.ini-manifesto blockquote p + p{margin-top:var(--e6)}
.ini-manifesto blockquote p.suave{color:#D9CEF5}
.ini-manifesto footer{margin-top:var(--e8);font-size:var(--t-pequeno);color:#B7A9DC}
.ini-manifesto .blocos i{background:#2A1E47}
.ini-manifesto .blocos i.lilas{background:var(--lilas);opacity:.18}
.ini-simbolo{width:72px;height:auto;margin-bottom:var(--e8)}

/* ---------- FAQ ---------- */
.ini-faq{display:grid;gap:var(--e8)}
@media(min-width:960px){.ini-faq{grid-template-columns:4fr 8fr;gap:var(--e12);align-items:start}.ini-faq .cab-secao{position:sticky;top:110px}}
.ini-faq .cab-secao{margin-bottom:0}
.ini-faq .resp p + p{margin-top:var(--e2)}

/* ---------- CTA final ---------- */
.ini-final .cta-faixa .blocos i{background:var(--violeta-escuro)}
.ini-final .cta-faixa .c-int{position:relative}
.ini-final .ctas-nota{color:#EDE5FF;margin-top:var(--e4)}

@media (prefers-reduced-motion:reduce){
  .ini-hero-visual .flutua{animation:none}
}
.ini-faixas .trilho{list-style:none}
.ini-persona .ctas .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:12px;padding-bottom:12px}
.ini-persona>*{min-width:0}
.ini-lojas .selo{align-self:flex-start}
.ini-final{padding-top:0}
/* a regra .s-gaveta a de marca.css escurece o texto do botão violeta da gaveta; aqui ele volta a ser branco */
.s-gaveta a.btn-violeta{color:#fff}
.ini-hero>.c{position:relative}
@media(max-width:959px){.ini-blocos i:nth-child(4){display:none}}