/* ============================================================
   PROTÓTIPOS 26/09/2026 — o que muda em cima do styles.css do site.
   Regras seguidas: sem emoji, botão chapado, nada de "1, 2, 3", letra >= 15px.
   ============================================================ */

/* ---------- Cabeçalho: o botão principal é o teste grátis ---------- */
.p-cta-cel{ display:none; }
@media (max-width:480px){
  .p-cta-pc{ display:none; }
  .p-cta-cel{ display:inline; }
}
.nav-actions .btn{ white-space:nowrap; }
/* celular bem estreito (320): logo + Entrar + Teste grátis não cabem; o nome ao lado do ícone sai */
@media (max-width:359px){
  .nav .brand{ font-size:0; gap:0; }
  .nav-actions .btn{ padding:8px 11px; }
}

/* ---------- Oferta logo abaixo do botão ---------- */
.p-oferta{
  margin-top:16px; color:var(--ink-2); font-size:15.5px; line-height:1.5;
  display:flex; align-items:flex-start; gap:9px;
}
.p-oferta svg{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:var(--green);
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.p-oferta b{ color:var(--ink); }

/* ---------- Topo no celular: título → animação → botões ---------- */
@media (max-width:980px){
  .p-hero .hero-grid{ display:flex; flex-direction:column; gap:0; }
  .p-hero .hero-copy{ display:contents; }
  .p-hero .hero-copy h1{ order:1; }
  .p-hero .hero-copy .lead{ order:2; }
  .p-hero .wa-demo{ order:3; margin-top:26px; }
  .p-hero .hero-cta{ order:4; margin-top:30px; }
  .p-hero .p-oferta{ order:5; justify-content:center; }
}
@media (max-width:640px){
  .p-hero .p-oferta{ text-align:left; max-width:440px; margin-inline:auto; }
}

/* ---------- 05/10/2026: selos do topo SÓ no computador ----------
   Abaixo de 980px o topo empilha (título → animação → botões) e os selos empurravam o botão. */
.p-hero .p-selos-pc{ margin-top:30px; }
@media (max-width:980px){
  .p-hero .p-selos-pc{ display:none; }
}

/* ---------- "Em 1 dia": uma frase, sem passo a passo ---------- */
.p-umdia{ padding-block:clamp(56px,7vw,92px); }
.p-umdia .section-head{ max-width:820px; }

/* ---------- Botão repetido ao longo da página ---------- */
.p-cta-linha{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:46px; }
.p-cta-linha .p-nota{ margin-top:12px; color:var(--muted); font-size:15px; }

/* ---------- Painel no celular: a tela de verdade, dentro de um aparelho ---------- */
.p-painel-cel{ display:none; }
@media (max-width:820px){
  #demo-painel .cp-demo{ display:none; }
  .p-painel-cel{
    display:flex; flex-direction:column; align-items:center; gap:18px;
    width:100%; margin:28px auto 0; padding:0; border:0; background:none; cursor:pointer; color:inherit;
  }
  .p-painel-moldura{
    display:block; width:min(300px,80vw); height:560px; overflow:hidden; border-radius:40px;
    border:11px solid #121016; background:#0d0f0d; box-shadow:var(--shadow-lg); position:relative;
  }
  .p-painel-moldura img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .p-painel-botao{
    display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px;
    background:var(--ink); color:#fff; font-weight:700; font-size:16px;
  }
  .p-painel-botao svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
}

/* ---------- Fecho: a última tela do anúncio ---------- */
.p-final{ background:var(--violet); color:#fff; text-align:center; }
.p-final .h-sec{ color:#fff; }
.p-final p{ color:#EDE6FF; font-size:1.12rem; max-width:620px; margin:18px auto 0; }
.p-final .btn{ margin-top:34px; }
.p-final .btn-light{ color:var(--violet-800); font-weight:700; }
.p-final .p-duvidas{ margin-top:22px; font-size:15px; color:#E4DAFF; }
.p-final .p-duvidas a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.p-duvidas{ text-align:center; color:var(--ink-2); font-size:15.5px; margin-top:34px; }
.p-duvidas a{ color:var(--violet-800); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Página do anúncio: o que vem no teste ---------- */
.p-teste{ max-width:760px; margin:40px auto 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.p-teste li{
  list-style:none; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r);
  padding:20px 20px 20px 18px; display:flex; gap:13px; align-items:flex-start; font-size:16px; line-height:1.45;
}
.p-teste .ic{ flex:0 0 38px; width:38px; height:38px; border-radius:11px; background:var(--violet-tint);
  color:var(--violet-800); display:flex; align-items:center; justify-content:center; }
.p-teste .ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.p-teste b{ display:block; color:var(--ink); font-size:16.5px; margin-bottom:3px; }
.p-teste span.t{ color:var(--ink-2); }
@media (max-width:640px){ .p-teste{ grid-template-columns:1fr; } }
.p-preco-nota{ text-align:center; margin-top:26px; color:var(--ink-2); font-size:16px; }
.p-preco-nota b{ color:var(--ink); }

/* ---------- Animação: letra nova e maior (28/09, Luiz: "essa fonte está muito feia... aumenta") ----------
   A loja usava serifa do sistema (Georgia / Times no Windows). Agora é a Outfit, a mesma dos preços do
   site, que ele escolheu em 26/06. Tamanhos sobem ~1,5px em tudo o que se lê dentro do telefone. */
.wa-screen{ --lj-serifa:"Outfit","Hanken Grotesk",system-ui,sans-serif; }
.wa-msg{ font-size:.93rem; line-height:1.4; }
.lj-capa b{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.lj-capa i{ font-size:12.5px; }
.lj-capa-sm b{ font-size:16.5px; }
.lj-aberto{ font-size:11.5px; }
.lj-chips span{ font-size:12.5px; }
.lj-secao{ font-size:11.5px; font-weight:600; letter-spacing:.09em; }
.lj-txt b{ font-size:16px; font-weight:600; letter-spacing:-.005em; }
.lj-txt i{ font-size:12.5px; }
.lj-leve{ font-size:11.5px; }
.lj-dir u{ font-size:15px; font-weight:700; }
.lj-titulo{ font-size:18px; font-weight:700; }
.lj-campo{ font-size:13.5px; }
.lj-campo i{ font-size:11px; }
.lj-ok{ font-size:12.5px; }
.lj-rot{ font-size:12px; }
.lj-dia b{ font-size:14.5px; }
.lj-dia i{ font-size:11.5px; }
.lj-quando b{ font-size:14px; }
.lj-quando i{ font-size:11.5px; }
.lj-linha{ font-size:13px; }
.lj-linha.lj-tot{ font-size:17px; font-weight:700; }
.lj-btn{ font-size:14px; }
.lj-carrinho{ font-size:13.5px; }
.lj-sheet b{ font-size:18px; font-weight:700; }
.lj-sheet i{ font-size:13px; }
.lj-qtd strong{ font-size:21px; font-weight:700; }
.lj-valor{ font-size:30px; font-weight:700; letter-spacing:-.01em; }
.lj-sub{ font-size:12px; }
.lj-recibo{ font-size:13px; }
.pn-top span{ font-size:12px; }
.pn-kpi i{ font-size:11.5px; }
.pn-kpi b{ font-size:21px; font-family:"Outfit","Hanken Grotesk",sans-serif; }
.pn-sec{ font-size:11.5px; }
.pn-lin b{ font-size:14px; }
.pn-lin i{ font-size:11.5px; }
.pn-lin u{ font-size:14px; font-family:"Outfit","Hanken Grotesk",sans-serif; }
.pn-nota{ font-size:12px; }

/* "Padaria Aurora" cortava ("Padaria Auro…") no telefone menor: um pouco menos de vão entre as peças
   do topo da conversa e o nome um tico menor — cabe inteiro sem mudar o desenho. */
@media (max-width:480px){
  .wa-head{ gap:8px; padding-right:12px; }
  .wa-headicons{ gap:14px; }
  .wa-headicons svg{ width:20px; height:20px; }
  .wa-who b{ font-size:.95rem; letter-spacing:-.005em; }
}


/* ---------- Reunião (28/09, Luiz): "deixar claro que dá pra fazer uma reunião com a gente" ---------- */
.p-final .p-reuniao{ margin-top:26px; font-size:16.5px; color:#fff; }
.p-final .p-reuniao a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }