*,*::before,*::after{box-sizing:border-box;}

body.editor-body{
  margin:0;
  background:#F7F6FA;
  color:#1B1A22;
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

#editor{display:grid;grid-template-columns:minmax(0,1fr);min-height:100svh;}
@media (min-width:960px){ #editor{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }

.ed-form{padding:40px 26px 110px;max-width:560px;width:100%;margin:0 auto;}
@media (min-width:960px){ .ed-form{padding:56px 40px;} }

/* ---------- mascote ---------- */
.ed-mascote{display:flex;gap:14px;align-items:flex-start;margin-bottom:32px;}
.ed-avatar{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:#EDE7F6;color:#6B4EA8;
  display:grid;place-items:center;font-size:21px;
}
.ed-fala{
  margin:0;background:#fff;border:1px solid #E6E3EF;
  border-radius:4px 14px 14px 14px;padding:12px 16px;
  font-size:14.5px;color:#3A3746;
}

/* ---------- etapas ---------- */
.ed-passos{display:flex;gap:6px;margin-bottom:26px;}
.pt{height:3px;flex:1;border-radius:2px;background:#E2DEEC;}
.pt.on{background:#8B5CF6;}
.ed-titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:2rem;line-height:1.15;margin:0 0 26px;
}

/* ---------- campos ---------- */
.cp{display:block;margin-bottom:22px;}
.cp-rot{display:block;font-size:12.5px;letter-spacing:.04em;color:#6C6880;margin-bottom:7px;}
.cp input[type=text],.cp input[type=date]{
  width:100%;padding:13px 15px;font:inherit;font-size:15.5px;color:inherit;
  background:#fff;border:1px solid #DDD9E8;border-radius:10px;
}
.cp input:focus{outline:2px solid #8B5CF6;outline-offset:1px;border-color:transparent;}
.cp-lista{display:flex;flex-direction:column;gap:9px;}
.cp-linha{display:flex;gap:8px;}
.cp-linha input{flex:1;}
.bt-x{
  flex:0 0 auto;width:42px;border:1px solid #DDD9E8;background:#fff;
  border-radius:10px;color:#8B8598;font-size:19px;line-height:1;cursor:pointer;
}
.bt-x:hover{color:#B3261E;border-color:#E7C9C6;}
.bt-add{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:11px;padding:11px 18px;
  border:1.5px solid #C6BEDD;border-radius:11px;
  background:#fff;color:#5B3FA8;
  font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.bt-add:hover{background:#F2ECFE;border-color:#A98FE0;}
.bt-add span{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:#8B5CF6;color:#fff;font-size:15px;line-height:1;
}

/* ---------- fotos ---------- */
.cp-dica{margin:10px 0 0;font-size:12.5px;color:#8B8598;}
.cp-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px;
  /* as setas de ordem ficam para fora do cartão, no topo: sem esta folga
     a primeira fileira as tem cortadas */
  padding-top:12px;}
.cp-foto{position:relative;background:#fff;border:1px solid #DDD9E8;border-radius:12px;padding:9px;}
.cp-quadro{
  position:relative;width:100%;
  aspect-ratio:var(--razao,4/5);
  border-radius:8px;overflow:hidden;background:#EDEAF4;
  /* a mãozinha de "pode arrastar" só quando dá mesmo para arrastar */
  cursor:default;touch-action:auto;
}
.cp-foto.ajustando .cp-quadro{cursor:grab;}
.cp-quadro.arrastando{cursor:grabbing;}
.cp-quadro img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
  user-select:none;-webkit-user-drag:none;
}
.cp-mover{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  background:rgba(18,16,26,.74);color:#fff;
  font-size:10.5px;letter-spacing:.02em;white-space:nowrap;
  padding:5px 11px;border-radius:999px;
  pointer-events:none;transition:opacity .18s;
}
.cp-quadro.arrastando .cp-mover{opacity:0;}
.cp-mini{
  display:block;margin:13px 0 5px;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#9C97AC;
}
.cp-chips{
  display:flex;background:#fff;
  border:1px solid #DDD9E8;border-radius:9px;overflow:hidden;
}
.chip{
  flex:1;padding:8px 4px;font:inherit;font-size:11px;
  border:0;border-right:1px solid #EFECF5;
  background:transparent;color:#6C6880;cursor:pointer;
}
.chip:last-child{border-right:0;}
.chip:hover{background:#F7F5FC;}
.chip.on{background:#8B5CF6;color:#fff;}
.cp-foto input[type=text]{
  width:100%;padding:9px 11px;font:inherit;font-size:13px;
  border:1px solid #E6E3EF;border-radius:8px;background:#FAF9FC;
}
.cp-foto .bt-x{
  position:absolute;top:-9px;right:-9px;width:28px;height:28px;
  border-radius:50%;padding:0;font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.bt-foto{
  display:flex;align-items:center;gap:14px;
  margin-top:16px;padding:16px 20px;border-radius:12px;
  border:1.5px dashed #C6BEDD;background:#FAF9FC;color:#5B3FA8;
  font-size:15px;cursor:pointer;transition:background .15s,border-color .15s;
}
.bt-foto:hover{background:#F2ECFE;border-color:#A98FE0;}
.bt-foto small{color:#8B8598;font-size:12px;}
.bt-foto-mais{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:#8B5CF6;color:#fff;
  display:grid;place-items:center;font-size:21px;line-height:1;
}
.cp-status{margin:11px 0 0;font-size:13px;color:#7C3AED;min-height:18px;}
.ed-salvo{
  margin:12px 0 0;font-size:12px;color:#9C97AC;
  text-align:center;min-height:16px;
}

/* "rascunho salvo" é uma boa notícia e mora onde está, discreta, no pé da
   coluna. Já "não consegui salvar" é a notícia mais importante da tela — e
   no celular o pé da coluna fica atrás da barra fixa de Voltar/Próximo, ou
   seja, o aviso que mais importa era justamente o que ninguém via. Quando
   dá errado, ele sai do fluxo e vem para a frente. */
.ed-salvo--ruim{
  position:fixed;
  left:50%; top:12px;
  transform:translateX(-50%);
  z-index:90;
  max-width:min(92vw, 420px);
  margin:0;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #F0C9C4;
  background:#FDF3F2;
  color:#9B2C22;
  font-size:12.5px; line-height:1.35;
  box-shadow:0 10px 30px -12px rgba(20,18,30,.45);
}
body.preco-fina-on .ed-salvo--ruim{ top:54px; }   /* não cobre a tarja de preço */

/* ---------- o que sobrou de uma sessão que caiu ---------- */
.ed-resgate{
  position:fixed;
  left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:95;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  max-width:560px; margin-inline:auto;
  padding:13px 16px;
  border:1px solid #D8CCF4; border-radius:14px;
  background:#fff;
  box-shadow:0 18px 44px -18px rgba(20,18,30,.5);
  font-size:13.5px; color:#3A3746;
}
.ed-resgate span{ flex:1 1 200px; }
.ed-resgate button{
  padding:9px 15px; border-radius:9px;
  font:inherit; font-size:13px; cursor:pointer;
}
.ed-resgate-sim{ border:0; background:#8B5CF6; color:#fff; }
.ed-resgate-nao{ border:1px solid #DDD9E8; background:#fff; color:#8B8598; }

/* ---------- "essa carta já foi comprada" ---------- */
/* Fica no TOPO e não some sozinho: é a informação que muda o significado
   de tudo que a pessoa vai fazer nesta tela. Um aviso que desaparece em
   três segundos seria pior que nenhum. */
.ed-jafoi{
  position:sticky; top:0; z-index:80;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:13px 18px calc(13px + env(safe-area-inset-top,0px));
  background:#F3EEFE;
  border-bottom:1px solid #D8CCF4;
  font-size:13.5px; line-height:1.5; color:#3A3746;
}
.ed-jafoi-txt{ flex:1 1 260px; }
.ed-jafoi-txt b{ color:#2E2740; }
.ed-jafoi-bts{ display:flex; flex-wrap:wrap; gap:8px; }
.ed-jafoi-bt{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px;
  border:1px solid #C6BEDD; border-radius:9px;
  background:#fff; color:#5B3FA8;
  font:inherit; font-size:13px; text-decoration:none; cursor:pointer;
  white-space:nowrap;
}
.ed-jafoi-bt small{ font-size:11px; color:#9C97AC; }
.ed-jafoi-bt--forte{ background:#8B5CF6; border-color:#8B5CF6; color:#fff; }
.ed-jafoi-bt--forte small{ color:rgba(255,255,255,.72); }

/* ---------- a barra do administrador ---------- */
/* Só aparece para você, logado. Ela é fixa no topo e passaria por cima
   das nossas peças fixas — a tarja fina de preço, o aviso de erro e a
   faixa de "esta carta já está no ar". O cliente nunca vê nada disto. */
body.admin-bar .ed-preco-fina{ top:44px; }
body.admin-bar .ed-salvo--ruim{ top:44px; }
body.admin-bar.preco-fina-on .ed-salvo--ruim{ top:86px; }
body.admin-bar .ed-jafoi{ top:32px; }
@media (max-width:782px){
  body.admin-bar .ed-preco-fina{ top:58px; }
  body.admin-bar .ed-salvo--ruim{ top:58px; }
  body.admin-bar.preco-fina-on .ed-salvo--ruim{ top:100px; }
  body.admin-bar .ed-jafoi{ top:46px; }
}

/* ---------- quanto ainda cabe neste campo ---------- */
.cp-conta{
  display:block; margin-top:6px;
  font-size:11.5px; color:#9C97AC; text-align:right;
}
.cp-conta--fim{ color:#B3261E; }

/* ---------- navegação ---------- */
.ed-nav{display:flex;gap:10px;margin-top:34px;}
.bt{
  padding:14px 22px;border-radius:11px;font:inherit;font-size:15px;
  font-weight:500;cursor:pointer;border:1px solid transparent;
}
.bt-sec{background:#fff;border-color:#DDD9E8;color:#3A3746;}
.bt-pri{background:#8B5CF6;color:#fff;flex:1;}
.bt:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- prévia ---------- */
.ed-previa{
  background:#EFEDF4;border-left:1px solid #E3E0EB;
  padding:36px 26px;display:flex;flex-direction:column;
  align-items:center;gap:16px;position:sticky;top:0;height:100svh;
}
.ed-previa-rotulo{
  margin:0;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#7C3AED;
}
.ed-fone{
  width:100%;max-width:350px;flex:1;
  border-radius:26px;overflow:hidden;border:8px solid #17161C;
  box-shadow:0 20px 50px -18px rgba(20,18,30,.5);background:#0A0B10;
}
.ed-fone iframe{width:100%;height:100%;border:0;display:block;}
#ver-previa{
  position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:30;
  padding:13px 26px;border-radius:999px;border:0;
  background:#17161C;color:#fff;font:inherit;font-size:14.5px;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
}
@media (min-width:960px){ #ver-previa{display:none;} }
@media (max-width:959px){
  .ed-previa{position:fixed;inset:0;z-index:20;display:none;border-left:0;}
  body.mostrando-previa .ed-previa{display:flex;}
  body.mostrando-previa{overflow:hidden;}
}

/* ---------- a carta pronta, antes do preço  13/09 -------------------

   Barra fixa no rodapé com os dois botões. Ela substitui a .ed-nav por
   inteiro enquanto a carta pronta está na tela — duas barras empilhadas
   no rodapé do celular é onde o polegar erra.

   z-index 30: acima da prévia em tela cheia, que é 20. Sem isso a barra
   ficaria embaixo da carta no celular, que é justamente onde ela precisa
   aparecer.

   O padding de baixo soma o safe-area do iPhone. Sem ele, o botão
   principal fica atrás da barrinha de gestos e a pessoa toca no sistema
   em vez de tocar em publicar. */
body.carta-pronta .ed-nav{ display:none !important; }

.ed-pronta{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:none; gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid #E6E3EF;
}
body.carta-pronta .ed-pronta{ display:flex; }

.pr-bt{
  flex:1 1 0; min-width:0;
  padding:13px 14px; border-radius:12px;
  font:inherit; font-size:15px; cursor:pointer;
  transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.pr-bt:active{ transform:translateY(1px); }

/* secundário: o contador vira a segunda linha, em corpo menor. É ele que
   diz "falta coisa" sem nenhuma frase dizer isso. */
.pr-bt--sec{
  background:#fff; border:1.5px solid #DDD7EC; color:#4A4553;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.pr-bt--sec b{ font-weight:600; font-size:14.5px; }
.pr-bt--sec small{ font-size:12px; color:#7A7486; }
.pr-bt--sec:hover{ border-color:#BCA6EE; background:#FBF9FF; }

/* principal: o mesmo ouro do botão de compra do editor — é a cor de uma
   ação nesta marca, e aqui é A ação */
.pr-bt--pri{
  border:0; font-weight:600;
  background:linear-gradient(135deg,#E7C67C 0%,#C9A24B 100%);
  color:#1B1A22;
  box-shadow:0 6px 18px -6px rgba(201,162,75,.55);
}
.pr-bt--pri:hover{ box-shadow:0 8px 22px -6px rgba(201,162,75,.7); }

/* no computador a prévia já vive ao lado, então a barra não precisa
   atravessar a tela inteira: ela acompanha a coluna do formulário */
@media (min-width:960px){
  .ed-pronta{
    left:auto; right:auto;
    width:min(560px, 46vw);
    margin-left:max(24px, calc((100vw - 1180px) / 2));
    border-radius:14px 14px 0 0;
    border:1px solid #E6E3EF; border-bottom:0;
  }
}

/* ---------- conclusão e erros ---------- */
.ed-pronto{background:#fff;border:1px solid #E6E3EF;border-radius:14px;padding:26px;}
/* a variante da carta pronta: só título e uma linha, porque o conteúdo
   de verdade é a carta ao lado (ou atrás, no celular) */
.ed-pronto--carta{ text-align:left; }
.ed-pronto--carta h2{ margin:0 0 8px; }
.ed-pronto--carta p{ margin:0; color:#6C6880; font-size:14px; line-height:1.6; }
.ed-pronto h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:1.9rem;line-height:1.15;margin:0 0 10px;
}
.ed-pronto p{margin:0 0 18px;font-size:14.5px;color:#55516A;}

/* ---------- os dois gatilhos da tela de planos — 15/09 --------------

   Nenhum dos dois pode gritar. A urgência aqui é de fato, não de
   tarja vermelha: se estas duas linhas parecerem propaganda, elas
   destroem justamente a confiança que estão ali para construir.

   `pl-fez` é o resumo do trabalho — letra menor, cor mais clara,
   espaçada, para ler como legenda e não como argumento de venda.

   `pl-hoje` é a frase da imediatez. Um pouco maior que o resto,
   escura, com o nome em negrito. É a única linha desta tela que tem
   permissão de puxar o olho. */
.pl-fez{
  margin:0 0 10px !important;
  font-size:12.5px !important;
  letter-spacing:.04em;
  text-transform:lowercase;
  color:#9C97AC !important;
}
.pl-hoje{
  margin:0 0 18px !important;
  font-size:15px !important;
  line-height:1.55;
  color:#3A3746 !important;
}
.pl-hoje b{ color:#8A6A2B; font-weight:600; }

/* o "ver de novo" depois dos planos: link de texto, não botão. Ele é
   uma cortesia para quem quer conferir, não uma alternativa a decidir —
   e a diferença entre as duas coisas é o peso visual. */
.pl-rever{
  display:block;text-align:center;margin:14px 0 4px;
  font-size:13px;color:#9C97AC;text-decoration:none;
}
.pl-rever:hover{ color:#6C6880; text-decoration:underline; }
.pl-rever span{ margin-left:3px; }

/* ---------- o preço de quem montou a carta inteira — 15/09 ----------

   Nada de vermelho, nada de piscar, nada de tarja de liquidação. Quem
   grita nesta tela é o PREÇO RISCADO ao lado do novo — é ele que a
   pessoa lê como acontecimento. O relógio fica pequeno e cinza: ele
   informa, não ameaça.

   O motivo não é estético. Este site vende uma declaração de amor, e o
   argumento inteiro dele é que não há truque: o preço está na cara, o
   exemplo está no ar, a política está escrita. Um bloco de promoção com
   cara de anúncio de liquidação contradiz isso em meio segundo — e a
   contradição custa mais do que o desconto ganha. */
.of{
  background:linear-gradient(180deg,#FBF6EA,#F5EDDA);
  border:1px solid #E0CB9A;border-radius:14px;
  padding:18px 18px 16px;margin:0 0 16px;
  box-shadow:0 2px 14px rgba(138,106,43,.10);
}
/* uma listra dourada no topo: dá presença sem precisar de cor gritada.
   O bloco tem que parecer um selo, não um banner de liquidação. */
.of{ border-top:3px solid #C9A24B; }
.of-tit{
  margin:0 0 6px !important;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;font-size:1.35rem !important;line-height:1.2;
  color:#5A4413 !important;
}
.of-txt{
  margin:0 0 10px !important;font-size:14px !important;
  line-height:1.55;color:#7A6B4A !important;
}
.of-tempo{
  margin:0 !important;font-size:12.5px !important;
  letter-spacing:.03em;color:#9C8B62 !important;
}
.of-tempo b{
  font-variant-numeric:tabular-nums;   /* o relógio não pode dançar */
  color:#6B5218;font-weight:600;
}

/* acabou: o bloco perde o dourado e vira aviso neutro. Sem drama —
   a pessoa precisa entender o que aconteceu, não se sentir punida. */
.of--fim{
  background:#F6F5F9;border-color:#E6E3EF;
}
.of--fim .of-tit{ color:#55516A !important; }
.of--fim .of-txt{ color:#6C6880 !important; }

/* o cartão com oferta ativa: o riscado fica visível e o novo preço
   ganha o dourado da marca */
.pl--oferta .pl-preco s{
  color:#9C97AC;font-size:.62em;margin-right:8px;
  text-decoration-thickness:1.5px;
}
.pl--oferta .pl-preco b{ color:#8A6A2B; }

/* ---------- o único verde do site ----------------------------------

   "R$ 20,00" diz que ficou barato. "você economiza R$ 4,90" diz que ELA
   ganhou alguma coisa — e é a segunda frase que dá prazer.

   O verde aparece aqui e em lugar nenhum mais. Espalhado pela página
   ele viraria outra marca e brigaria com o dourado; num número de
   economia, ele é lido em um décimo de segundo e some da memória logo
   depois. Cor com uma função só é cor que funciona. */
.pl-economia{
  display:inline-block;margin-left:10px;
  font-style:normal;font-size:12.5px;font-weight:600;
  color:#1E7A4B;background:#E8F6EE;
  border:1px solid #C7E6D6;border-radius:999px;
  padding:3px 10px;vertical-align:middle;
  white-space:nowrap;
}
@media (max-width:420px){
  .pl-economia{ display:block;margin:8px 0 0;width:fit-content; }
}

/* ---------- a promessa do prêmio, no primeiro passo ---------------- */
.ed-preco-premio{
  display:block;margin-bottom:3px;
  color:#C9A24B;font-weight:600;
}

/* ====================================================================
   A BARRA DO PRÊMIO — terceira tentativa, e a que presta

   As duas primeiras erraram por motivos opostos, e ficam registradas
   para ninguém repetir nenhuma:

   1ª  Um bloco grande embaixo da trilha. Claro, mas empurrava o
       formulário para baixo em TODA etapa. Promessa que rouba a tela de
       quem está trabalhando atrapalha mais do que puxa.

   2ª  Um presente de 19px no fim da linha de progresso, com a frase em
       itálico dourado de 11px colada no "PASSO 1 DE 6". Ocupava nada e
       comunicava nada: lido como etiqueta, não como prêmio. E a
       animação num ícone daquele tamanho era invisível — o que era
       previsível e foi visto na hora.

   Esta é uma faixa de uma linha: ~34px contra os ~70px do bloco, com as
   três coisas que faltavam — o progresso em palavra, o que ela ganha, e
   o tamanho em número.

   `text-transform:none` e `letter-spacing:0` são obrigatórios: a faixa
   mora dentro de #passos, ao lado do "PASSO 1 DE 6", que é maiúsculo e
   espaçado. Sem isto ela herdaria aquele estilo e viraria etiqueta de
   novo — exatamente o defeito que estamos consertando. */
.pr{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#FCF8EF,#F7F0DF);
  border:1px solid #E7D9B6;border-radius:11px;
  padding:8px 12px;margin:11px 0 0;
  text-transform:none;letter-spacing:0;
}
.pr-ic{ flex:0 0 auto;width:23px;height:23px;color:#C9A24B; }
.pr-ic svg{ width:100%;height:100%;display:block; }

.pr-txt{
  flex:1 1 auto;min-width:0;
  font-size:12.5px;line-height:1.35;color:#8A7A55;
}
.pr-txt b{ color:#5A4413;font-weight:600; }

/* os preços ficam à direita, sempre numa linha só: é o número que fecha
   a frase, e número quebrado no meio perde a força */
.pr-precos{
  flex:0 0 auto;margin-left:auto;white-space:nowrap;
  display:flex;align-items:baseline;gap:7px;
}
.pr-precos s{ font-size:12px;color:#B0A487; }
.pr-precos em{
  font-style:normal;font-weight:700;font-size:15px;color:#1E7A4B;
}

/* última etapa: o prêmio está na mão */
.pr--fim{
  border-color:#C9A24B;
  background:linear-gradient(180deg,#FBF3E0,#F5E9CD);
}
.pr--fim .pr-ic{ color:#8A6A2B; }

/* ---------- o estalo de cada passo vencido ----------

   A varredura atravessa a FAIXA INTEIRA. A versão anterior animava um
   ícone de 19px num canto e não dava para ver: o que decide se uma
   animação é percebida é o TAMANHO DO ALVO — duração e curva não salvam
   alvo pequeno.

   E dispara só quando a pessoa avança de verdade (ver `passoVisto` no
   editor.js). Se acontecesse a cada repintura, a faixa piscaria a cada
   foto enviada e sumiria da percepção em dois minutos. */
@media (prefers-reduced-motion:no-preference){
  .pr--ganhou::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,
      transparent 32%, rgba(201,162,75,.42) 50%, transparent 68%);
    animation:pr-varre .85s ease-out 1;
  }
  .pr--ganhou .pr-ic{ animation:pr-tique .8s cubic-bezier(.3,1.4,.5,1) 1; }
  .pt--estalo{ animation:pt-estalo .6s cubic-bezier(.2,.8,.3,1) 1; }
}
@keyframes pr-varre{
  from{ transform:translateX(-100%); }
  to  { transform:translateX(100%); }
}
@keyframes pr-tique{
  0%   { transform:translateY(0)    scale(1); }
  40%  { transform:translateY(-5px) scale(1.22) rotate(-8deg); }
  70%  { transform:translateY(0)    scale(1.04) rotate(4deg); }
  100% { transform:translateY(0)    scale(1)    rotate(0deg); }
}
@keyframes pt-estalo{
  0%   { transform:scaleX(.2); transform-origin:left center;
         background:#7C3AED;filter:brightness(1.5); }
  60%  { transform:scaleX(1);  transform-origin:left center;
         filter:brightness(1.3); }
  100% { transform:scaleX(1);  transform-origin:left center;
         filter:brightness(1); }
}

@media (max-width:380px){
  .pr{ padding:8px 10px;gap:8px; }
  .pr-txt{ font-size:12px; }
  .pr-precos s{ display:none; }   /* fica só o preço novo */
}
.ed-link{
  display:block;width:100%;padding:13px 15px;font:inherit;font-size:14px;
  background:#F4F2F9;border:1px solid #DDD9E8;border-radius:10px;
  color:#3A3746;margin-bottom:12px;
}
.ed-ver{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px;margin-bottom:6px;
  border:2px solid #8B5CF6;border-radius:12px;background:#fff;
  color:#5B3FA8;text-decoration:none;
  font-size:15.5px;font-weight:600;
  transition:background .16s ease;
}
.ed-ver:hover{background:#F4F0FE;}
.ed-comprar{display:block;text-align:center;text-decoration:none;}

/* ---------- faixa de preço no topo do editor ---------- */
.ed-preco{
  display:flex;align-items:flex-start;gap:14px;
  margin:0 0 28px;padding:17px 19px;
  border-radius:15px;
  background:linear-gradient(135deg,#26223A 0%,#17161C 62%);
  color:#F4F1EA;
  box-shadow:0 16px 34px -20px rgba(20,18,30,.85);
}
.ed-preco-ico{
  flex:0 0 auto;width:34px;height:34px;margin-top:2px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(201,162,75,.16);
  border:1px solid rgba(201,162,75,.5);
  color:#E0BC6E;font-size:15px;line-height:1;
}
.ed-preco-txt{flex:1;min-width:0;}
.ed-preco-rot{
  display:block;margin-bottom:6px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,241,234,.5);
}
.ed-preco-valores{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  font-size:13.5px;color:rgba(244,241,234,.72);
}
.ed-preco-valores b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5rem;font-weight:500;color:#fff;
  margin-right:3px;
}
.ed-preco small{
  display:block;margin-top:8px;
  font-size:12px;line-height:1.5;color:rgba(244,241,234,.52);
}

@media (max-width:520px){
  .ed-preco{padding:15px 16px;gap:12px;}
  .ed-preco-valores{font-size:13px;}
  .ed-preco-valores b{font-size:1.35rem;}
}

/* ---------- planos na tela final ---------- */
.pl-lista{
  display:grid;gap:14px;margin:20px 0 4px;
}
@media (min-width:520px){ .pl-lista{grid-template-columns:repeat(2,minmax(0,1fr));} }

.pl{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:20px 18px;border-radius:14px;
  border:1.5px solid #E6E3EF;background:#fff;
  color:inherit;text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pl:hover{border-color:#C6BEDD;transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(20,18,30,.5);}
.pl--top{border-color:#8B5CF6;background:#FBF9FF;}

.pl-tag{
  position:absolute;top:-11px;left:18px;
  padding:4px 10px;border-radius:999px;
  background:#8B5CF6;color:#fff;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.pl-nome{font-size:14px;font-weight:600;color:#3A3746;}
.pl-preco{display:flex;flex-direction:column;gap:1px;}
.pl-preco s{font-size:13.5px;color:#9C97AC;}
.pl-preco b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.15rem;font-weight:500;line-height:1.05;color:#1B1A22;
  white-space:nowrap;
}
.pl-itens{
  list-style:none;margin:4px 0 8px;padding:0;
  display:flex;flex-direction:column;gap:7px;
}
.pl-itens li{
  position:relative;padding-left:20px;
  font-size:13.5px;line-height:1.45;color:#55516A;
}
.pl-itens li::before{
  content:'';position:absolute;left:2px;top:5px;
  width:5px;height:9px;
  border:solid #8B5CF6;border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.pl-bt{
  margin-top:auto;padding:12px;border-radius:10px;
  text-align:center;font-size:14.5px;font-weight:500;
  background:#F2ECFE;color:#5B3FA8;
}
.pl--top .pl-bt{background:#8B5CF6;color:#fff;}

/* ---------- as três garantias, embaixo dos planos -------------------
   Lista sem marcador, com um fio de ouro curto no lugar da bolinha. O
   fio é o mesmo traço de assinatura da carta — é o que diz "isto é da
   Carta Romântica" sem precisar de selo desenhado.

   Fundo levemente creme e não branco: separa o bloco dos cartões de
   plano sem precisar de borda, e é o creme da carta (#F1EBE3), não o
   outro que andava solto pelo editor. */
.pl-seg{
  list-style:none;margin:18px 0 0;padding:14px 16px;
  background:#F1EBE3;border-radius:12px;
  display:grid;gap:11px;
}
.pl-seg li{
  position:relative;padding-left:22px;
  font-size:13px;line-height:1.45;color:#4A4553;
}
.pl-seg li::before{
  content:'';position:absolute;left:0;top:8px;
  width:13px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#E7C67C,#C9A24B);
}
.pl-seg b{display:block;font-weight:600;}
.pl-seg small{display:block;font-size:12px;color:#7A7486;margin-top:1px;}

/* ---------- a linha da logo do Mercado Pago ------------------------
   Ela é a única das três que não leva o fio de ouro: a logo ocupa esse
   papel, e dois sinais na mesma linha brigariam.

   A logo mora dentro de uma lapela BRANCA, e isso não é enfeite. O PNG
   que veio tem fundo próprio (claro, não transparente); solto sobre o
   creme #F1EBE3 ele mostraria um retângulo cinza de borda dura, com
   cara de imagem colada errado. Dentro da lapela branca, com canto
   arredondado, aquele fundo vira parte do desenho e a coisa fica
   proposital — e continua certa se um dia a logo for trocada por uma
   versão com fundo transparente.

   Largura em px e altura automática: o arquivo é 600x199, então a 104px
   ele desenha com quase seis vezes a densidade necessária e fica nítido
   em tela retina sem precisar de segunda imagem.

   No celular a linha vira coluna, senão a logo come metade da largura
   e o texto fica espremido em três palavras por linha. */
.pl-seg li.pl-seg--mp{ padding-left:0;display:flex;gap:11px;align-items:flex-start; }
.pl-seg li.pl-seg--mp::before{ display:none; }
.pl-mp{
  flex:0 0 auto;display:block;
  background:#fff;border-radius:8px;padding:6px 8px;
  box-shadow:0 1px 2px rgba(20,16,30,.07);
}
.pl-mp img{ display:block;width:104px;height:auto; }
.pl-seg-txt{ display:block;min-width:0; }
@media (max-width:400px){
  .pl-seg li.pl-seg--mp{ flex-direction:column;gap:8px; }
}

.pl-nota{
  margin:14px 0 0;font-size:12.5px;line-height:1.6;color:#8B8598;
}
.ed-erro{
  background:#FDF0EF;border:1px solid #F0CFCB;color:#8C2F26;
  border-radius:10px;padding:12px 15px;font:inherit;font-size:14px;margin-bottom:16px;
}

.cp-area{
  width:100%;padding:14px 15px;font:inherit;font-size:15.5px;line-height:1.62;
  color:inherit;background:#fff;border:1px solid #DDD9E8;border-radius:10px;
  resize:vertical;min-height:180px;
}
.cp-area:focus{outline:2px solid #8B5CF6;outline-offset:1px;border-color:transparent;}
.cp-dica--topo{margin:0 0 12px;}
.cp-fotos--una{grid-template-columns:minmax(0,240px);}

/* ---------- música ---------- */
.mus-sel{
  display:flex;align-items:center;gap:13px;
  position:relative;
  padding:11px 13px;margin-bottom:14px;
  background:#F2ECFE;border:1px solid #D8CCF4;border-radius:11px;
}
.mus-sel img{width:52px;height:52px;border-radius:7px;object-fit:cover;flex:0 0 auto;}
.mus-sel .bt-x{position:static;width:32px;height:32px;border-radius:50%;padding:0;font-size:16px;flex:0 0 auto;}
.mus-txt{flex:1;min-width:0;line-height:1.3;}
.mus-txt b{display:block;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mus-txt span{display:block;font-size:12.5px;color:#7B7590;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mus-busca{display:flex;gap:8px;}
.mus-campo{
  flex:1;padding:13px 15px;font:inherit;font-size:15px;
  background:#fff;border:1px solid #DDD9E8;border-radius:10px;color:inherit;
}
.mus-campo:focus{outline:2px solid #8B5CF6;outline-offset:1px;border-color:transparent;}
.bt-mus{
  flex:0 0 auto;padding:0 20px;border-radius:10px;border:0;
  background:#8B5CF6;color:#fff;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
}
.bt-mus:hover{background:#7C3AED;}
.mus-resultados{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.mus-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;background:#fff;
  border:1px solid #E6E3EF;border-radius:10px;
}
.mus-item img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:0 0 auto;}
.mus-semcapa{width:44px;height:44px;border-radius:6px;background:#EDEAF4;flex:0 0 auto;}
.mus-bt{
  flex:0 0 auto;padding:8px 12px;border-radius:8px;
  border:1px solid #DDD9E8;background:#fff;color:#5B3FA8;
  font:inherit;font-size:12.5px;cursor:pointer;
}
.mus-bt:hover{background:#F4F0FE;}
.mus-bt.tocando{background:#8B5CF6;color:#fff;border-color:#8B5CF6;}
.mus-usar{font-weight:600;}
.mus-aviso{margin:12px 0 0;font-size:13.5px;color:#8B8598;}

/* ---------- sugestões ---------- */
.bt-sugerir{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:10px;padding:9px 15px;
  border:1px solid #D8CCF4;border-radius:9px;
  background:#F7F3FE;color:#5B3FA8;
  font:inherit;font-size:13.5px;cursor:pointer;
}
.bt-sugerir:hover{background:#EFE7FD;border-color:#BCA6EE;}
.bt-sugerir::before{content:'\2726';font-size:13px;}

/* ---------- o convite grande, quando o campo está vazio -------------
   Ele substitui os cartões de sugestão que ocupavam a tela antes de
   alguém pedir. Larga, para ser óbvia; discreta na cor, porque ela não
   é a ação principal da tela — escrever é.

   A estrela vem de um <span> próprio e o ::before da base é desligado
   aqui: com duas linhas de texto, o ::before inline ficava alinhado ao
   meio do bloco em vez de junto da primeira linha. */
.bt-sugerir--grande{
  display:flex;width:100%;margin:0 0 12px;
  padding:13px 15px;gap:11px;align-items:flex-start;text-align:left;
  border-style:dashed;
}
.bt-sugerir--grande::before{ display:none; }
.bt-sug-ic{
  flex:0 0 auto;font-size:16px;line-height:1.35;color:#8B5CF6;
}
.bt-sug-txt{ display:block;min-width:0; }
.bt-sug-txt b{ display:block;font-weight:600;font-size:14px; }
.bt-sug-txt small{
  display:block;margin-top:2px;font-size:12.5px;color:#7A6E95;
}
.cp-acoes{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:16px;
}
.cp-acoes .bt-add{margin-top:0;}

/* ---------- ajuste de enquadramento no toque ---------- */
/* O botão é sempre visível, em qualquer aparelho.

   Antes ele só aparecia em @media (hover:none), e o resto do tempo a
   pessoa via um crachá "✥ arraste para ajustar" em cima da foto. Duas
   coisas davam errado: a consulta de hover erra em celular em modo
   desktop, em tablet com teclado e no emulador do navegador — e nesses
   casos o crachá aparecia prometendo um arrasto que ali não funcionava;
   e mesmo quando funcionava, arrasto sem botão é gesto que ninguém
   descobre sozinho.
   Agora o caminho é um só e está escrito. O crachá virou o que devia ter
   sido desde o começo: a instrução que aparece DEPOIS de a pessoa entrar
   no modo de ajuste, quando o arrasto de fato existe. */
.bt-ajustar{
  display:block;width:100%;margin-top:8px;padding:9px;
  border:1px solid #DDD9E8;border-radius:8px;background:#fff;
  color:#5B3FA8;font:inherit;font-size:12.5px;cursor:pointer;
}
.cp-foto.ajustando .bt-ajustar{background:#8B5CF6;color:#fff;border-color:#8B5CF6;}
.cp-foto.ajustando .cp-quadro{box-shadow:0 0 0 3px #8B5CF6;touch-action:none;}
.cp-mover{display:none;}
.cp-foto.ajustando .cp-mover{display:inline-block;}

/* ---------- escolher e ordenar seções ---------- */
.sc-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.sc-sep{
  margin:22px 0 10px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9C97AC;
}
.sc{
  display:flex;align-items:stretch;gap:6px;
  width:100%;padding:6px 8px 6px 6px;
  background:#fff;border:1.5px solid #E6E3EF;border-radius:12px;
  transition:border-color .18s ease, background .18s ease;
}
.sc:hover{border-color:#C6BEDD;background:#FBFAFE;}
.sc.on{border-color:#8B5CF6;background:#F8F5FF;}
.sc.fixa{opacity:.92;}
.sc-alvo{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:14px;
  padding:10px 8px;
  background:none;border:0;border-radius:9px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.sc-alvo:disabled{cursor:default;}
.sc-alvo:focus-visible{outline:2px solid #8B5CF6;outline-offset:-2px;}
.sc-fig{
  position:relative;flex:0 0 auto;
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:13px;
  background:#F4F2F9;color:#9C97AC;
  transition:background .18s ease, color .18s ease;
}
.sc.on .sc-fig{background:#EDE4FF;color:#7C3AED;}
.sc-svg{width:26px;height:26px;display:block;}

.sc-marca{
  position:absolute;right:-5px;bottom:-5px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:1.5px solid #DDD9E8;
  transition:background .18s ease, border-color .18s ease;
}
.sc.on .sc-marca{background:#8B5CF6;border-color:#8B5CF6;}
.sc.on .sc-marca::after{
  content:'';position:absolute;left:6px;top:3px;
  width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.sc-txt{flex:1;min-width:0;line-height:1.4;}
.sc-txt b{display:block;font-size:15px;font-weight:600;margin-bottom:2px;}
.sc-txt span{display:block;font-size:13px;color:#7B7590;}
.sc-fixa{
  flex:0 0 auto;align-self:center;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9C97AC;background:#F2F0F8;
  padding:5px 9px;border-radius:6px;
}
.sc-ordem{
  flex:0 0 auto;align-self:center;
  display:flex;flex-direction:column;gap:3px;
}
.sc-mover{
  width:34px;height:26px;
  display:grid;place-items:center;
  border:1px solid #DDD9E8;border-radius:7px;background:#fff;
  color:#6C6880;font-size:9px;line-height:1;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.sc-mover:hover:not(:disabled){background:#F2ECFE;color:#5B3FA8;border-color:#C6BEDD;}
.sc-mover:disabled{opacity:.3;cursor:not-allowed;}

/* ---------- sugestões de música ---------- */
.mus-sug{margin-top:16px;}
.mus-sug-rot{
  display:block;margin-bottom:9px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9C97AC;
}
.mus-sug-chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip-mus{
  padding:7px 13px;
  border:1px solid #DDD9E8;border-radius:999px;
  background:#fff;color:#5B3FA8;
  font:inherit;font-size:13px;cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.chip-mus:hover{background:#F4F0FE;border-color:#C6BEDD;}

/* ===== botões de ideia ============================================ */

.cp-rot{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  letter-spacing:.01em;
}
.cp-rot .bt-ideia{ margin-left:auto; }

.cp-mini{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
}
.cp-mini .bt-ideia{ margin-left:auto; }

.bt-ideia{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px;
  font:500 12.5px/1 'Jost', system-ui, sans-serif;
  letter-spacing:.02em;
  text-transform:none;
  color:#fff;
  background:#8B5CF6;
  border:1px solid #7C3AED;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 4px 10px -4px rgba(139,92,246,.7);
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.bt-ideia:hover{ background:#7C3AED; border-color:#6D28D9; }
.bt-ideia:active{ transform:scale(.95); }
.bt-ideia:focus-visible{ outline:2px solid #8B5CF6; outline-offset:2px; }

.bt-ideia--so{
  padding:0;
  width:38px; height:38px;
  justify-content:center;
  font-size:14px;
}
.cp-linha .bt-ideia{ margin-left:0; }

@media (max-width:600px){
  .bt-ideia{ padding:6px 12px; font-size:13px; }
  .bt-ideia--so{ padding:0; width:40px; height:40px; }
}

/* ===== editor da linha do tempo =================================== */

.lt-eds{
  display:grid;
  gap:20px;
  margin:6px 0 14px;
}

.lt-ed{
  position:relative;
  padding:22px 16px 8px;
  background:#fff;
  border:1px solid #E6E3EF;
  border-radius:14px;
}
.lt-ed .cp{ margin-bottom:14px; }
.lt-ed .cp-rot em{ font-style:normal; color:#9C97AC; }

.lt-ed-num{
  position:absolute;
  top:-12px; left:16px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px;
  border-radius:999px;
  background:#8B5CF6;
  color:#fff;
  font:600 12px/1 'Jost', system-ui, sans-serif;
}

.lt-ed > .bt-x{
  position:absolute;
  top:-11px; right:-11px;
  width:28px; height:28px;
  border-radius:50%;
  padding:0; font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.lt-ed .cp-fotos--una{ grid-template-columns:minmax(0,1fr); }
.lt-ed .cp-fotos--una .cp-quadro{ height:auto; width:100%; }

/* ===== a prévia precisa parecer viva ============================== */

.ed-previa-rotulo{
  display:flex; align-items:center; gap:8px;
}
.ed-previa-rotulo::before{
  content:''; flex:0 0 auto;
  width:8px; height:8px; border-radius:50%;
  background:#16A34A;
  animation:previa-vivo 2.4s ease-out infinite;
}
@keyframes previa-vivo{
  0%  { box-shadow:0 0 0 0 rgba(22,163,74,.5); }
  70% { box-shadow:0 0 0 9px rgba(22,163,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0); }
}

.ed-fone{ transition:box-shadow .4s ease; }
body.previa-mudou .ed-fone{
  box-shadow:0 0 0 3px rgba(139,92,246,.45), 0 20px 50px -18px rgba(20,18,30,.5);
}

#ver-previa{ display:inline-flex; align-items:center; gap:9px; }
#ver-previa::before{
  content:''; flex:0 0 auto;
  width:7px; height:7px; border-radius:50%;
  background:#4ADE80;
  animation:previa-vivo 2.4s ease-out infinite;
}
body.mostrando-previa #ver-previa::before{ display:none; }
body.previa-mudou #ver-previa{ animation:ver-previa-pulo .55s ease; }
@keyframes ver-previa-pulo{
  0%,100%{ transform:translateX(-50%); }
  40%    { transform:translateX(-50%) translateY(-5px) scale(1.04); }
}

/* ===== tipografia dos campos ====================================== */
/* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo e a pessoa
   perde a prévia de vista. 16px é o mínimo, não é estética. */

.cp input[type=text],
.cp input[type=date],
.cp textarea,
.cp-area,
.mus-campo,
.cp-foto input[type=text],
.lt-ed input,
.lt-ed textarea{
  font-size:16px;
}

.cp-dica{ font-size:13.5px; line-height:1.6; }
.ed-fala{ font-size:15.5px; line-height:1.6; }

@media (max-width:600px){
  .ed-titulo{ font-size:1.7rem; }
}


/* ---------- upload em andamento ---------- */
.bt-foto.ocupado{
  opacity:.5;pointer-events:none;
}
.cp-status:not(:empty){
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;
}
.cp-status:not(:empty)::before{
  content:'';width:11px;height:11px;border-radius:50%;
  border:2px solid #D8CCF4;border-top-color:#7C3AED;
  animation:cp-girando .7s linear infinite;
}
@keyframes cp-girando{ to{ transform:rotate(360deg); } }

/* ---------- o botão flutuante é só do celular ----------
   precisa vir DEPOIS do bloco que define display:inline-flex,
   senão a regra de baixo ganha e ele aparece no desktop */
@media (min-width:960px){
  #ver-previa{ display:none !important; }
}


/* ---------- para onde a pessoa deve olhar ---------- */
.bt-pri{
  box-shadow:0 10px 24px -12px rgba(139,92,246,.95);
}
.bt-pri:hover{background:#7C3AED;}
.pl--top .pl-bt{ box-shadow:0 10px 24px -12px rgba(139,92,246,.95); }
.pl-bt{ font-size:15px; padding:13px; }


/* ---------- obrigatórias: só informam ---------- */
.sc-sep--1{ margin-top:0; }
.sf-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.sf{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  border:1px solid #EFECF5;border-radius:12px;background:#FBFAFE;
}
.sf .sc-fig{width:44px;height:44px;border-radius:11px;background:#EDE4FF;color:#7C3AED;}
.sf .sc-svg{width:23px;height:23px;}
.sf-txt{flex:1;min-width:0;line-height:1.4;}
.sf-txt b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px;}
.sf-txt span{display:block;font-size:12.5px;color:#8B8598;}

/* ---------- extras: adicionar ou tirar ---------- */
.sc-acao{
  flex:0 0 auto;align-self:center;
  padding:7px 13px;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  background:#8B5CF6;color:#fff;
}
.sc.on .sc-acao{background:#F2F0F8;color:#8B8598;font-weight:400;}
.sc:not(.on){border-style:dashed;}
.sc:not(.on) .sc-fig{background:#F4F2F9;}


/* ---------- gravador de voz ---------- */
.aud{
  display:flex;align-items:stretch;gap:6px;
  padding:6px;
  border:1.5px solid #DDD9E8;border-radius:16px;background:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.aud--pronto{border-color:#D8CCF4;background:#F8F5FF;}
.aud--gravando{border-color:#E3A6A6;background:#FDF6F5;}

/* a caixa inteira é o botão */
.aud-alvo{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:15px;
  padding:11px 13px;
  border:0;border-radius:12px;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .16s ease;
}
.aud-alvo:hover{background:rgba(139,92,246,.06);}
.aud-alvo:focus-visible{outline:2px solid #8B5CF6;outline-offset:-2px;}

.aud-bola{
  position:relative;flex:0 0 auto;
  width:54px;height:54px;border-radius:50%;
  background:#8B5CF6;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 20px -10px rgba(139,92,246,.95);
  transition:background .2s ease;
}
.aud-alvo:active .aud-bola{transform:scale(.94);}
.aud--gravando .aud-bola{
  background:#C0392B;box-shadow:0 8px 20px -10px rgba(192,57,43,.95);
  animation:aud-pulso 1.4s ease-out infinite;
}
@keyframes aud-pulso{
  0%  {box-shadow:0 0 0 0 rgba(192,57,43,.5);}
  70% {box-shadow:0 0 0 14px rgba(192,57,43,0);}
  100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}
}

.aud-i{width:25px;height:25px;grid-area:1/1;display:none;}
.aud-i--mic{display:block;}
.aud--gravando .aud-i--mic{display:none;}
.aud--gravando .aud-i--stop{display:block;}
.aud--pronto .aud-i--play{display:block;}
.aud--pronto.aud--tocando .aud-i--play{display:none;}
.aud--pronto.aud--tocando .aud-i--pause{display:block;}

.aud-txt{flex:1;min-width:0;line-height:1.35;}
.aud-txt b{display:block;font-size:15px;font-weight:600;color:#3A3746;}
.aud-txt span{display:block;font-size:12.5px;color:#8B8598;}

.aud-onda{display:none;align-items:center;gap:4px;flex:0 0 auto;}
.aud--gravando .aud-onda{display:flex;}
.aud-onda i{
  display:block;width:3px;border-radius:2px;background:#C0392B;
  height:calc(6px + (var(--nivel,0) * 26px));
  transition:height .1s linear;
}
.aud-onda i:nth-child(2){height:calc(6px + (var(--nivel,0) * 16px));}
.aud-onda i:nth-child(4){height:calc(6px + (var(--nivel,0) * 20px));}
.aud-onda i:nth-child(5){height:calc(6px + (var(--nivel,0) * 11px));}

.aud .bt-x{
  width:40px;align-self:center;height:40px;
  border-radius:50%;padding:0;flex:0 0 auto;margin-right:5px;
}


/* ===== escolha de modo (como a seção aparece) ======================= */
/* Estas escolhas mudam a carta inteira. Ficavam como chips de 12px, do
   mesmo tamanho de "Retrato / Quadrado / Paisagem", e passavam batido. */

.cp--modo{
  padding:16px 16px 18px;
  border:1px solid #E3DFEE;
  border-radius:14px;
  background:linear-gradient(180deg,#FBFAFF 0%,#F6F4FD 100%);
}
.cp-rot--forte{
  display:block;
  margin-bottom:12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:#3D3552;
}
.cp-modos{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
/* Uma coluna sempre. Em duas, dentro da coluna do formulário (560px), a
   descrição quebrava em duas palavras por linha e o cartão virava um bloco
   ilegível — pior no computador, onde havia espaço de sobra por perto mas
   não ali dentro. */

.modo{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  padding:14px 14px 14px 42px;
  text-align:left;
  border:1.5px solid #DDD7EC;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.modo:hover{ border-color:#B9A9EC; background:#FCFBFF; }

/* a bolinha de seleção — deixa claro que é uma escolha, não um botão */
.modo-marca{
  position:absolute;
  left:15px; top:17px;
  width:16px; height:16px;
  border:1.5px solid #C9C2DC;
  border-radius:50%;
  background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.modo.on{
  border-color:#8B5CF6;
  background:#F8F5FF;
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
.modo.on .modo-marca{
  border-color:#8B5CF6;
  box-shadow:inset 0 0 0 4px #8B5CF6;
}

.modo-ic{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  color:#9C93B8;
  transition:color .16s ease;
}
.modo-ic svg{ width:30px; height:30px; }
.modo.on .modo-ic{ color:#8B5CF6; }

.modo-txt{ display:block; min-width:0; }
.modo-txt b{
  display:block;
  font-size:14.5px;
  font-weight:600;
  color:#2E2740;
  line-height:1.3;
}
.modo-txt i{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:12.5px;
  line-height:1.5;
  color:#7E778F;
}

/* quando não há descrição nem ícone (escolhas simples), fica compacto */
.cp--modo:not(.cp--modo-rico) .modo{ padding:11px 14px 11px 40px; }
.cp--modo:not(.cp--modo-rico) .modo-marca{ top:13px; }

/* ---------- a escolha de formato, em tamanho de controle -------------
   Duas fichas lado a lado, do tamanho de um botão, para poder ficar no
   ALTO da seção sem empurrar o resto para fora da tela. A descrição
   embaixo é só a do modo escolhido: descrever o que a pessoa não
   escolheu ocupa tela e não ajuda a decidir. */
.cp--estilo{
  padding:14px 14px 15px;
  border:1px solid #E3DFEE;
  border-radius:14px;
  background:linear-gradient(180deg,#FBFAFF 0%,#F6F4FD 100%);
}
.cp--estilo .cp-rot--forte{ margin-bottom:9px; }
.es-fichas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.es{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:9px 10px;
  border:1.5px solid #DDD7EC;
  border-radius:11px;
  background:#fff;
  font:inherit;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.es:hover{ border-color:#B9A9EC; background:#FCFBFF; }
.es b{
  font-size:13.5px;
  font-weight:600;
  color:#2E2740;
  line-height:1.25;
  /* o nome curto não pode quebrar em duas linhas e desalinhar as fichas */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.es-ic{
  flex:0 0 auto;
  width:22px; height:22px;
  display:grid; place-items:center;
  color:#9C93B8;
  transition:color .16s ease;
}
.es-ic svg{ width:22px; height:22px; }
.es.on{
  border-color:#8B5CF6;
  background:#F8F5FF;
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
.es.on b{ color:#4C2E9E; }
.es.on .es-ic{ color:#8B5CF6; }
.es-desc{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:#7E778F;
}
/* telas bem estreitas: duas fichas de 150px ainda cabem, mas o ícone
   some antes do texto — é ele que é dispensável, não o nome */
@media (max-width:340px){
  .es-ic{ display:none; }
}


/* =====================================================================
   UX/UI — rodada de conforto no celular
   ===================================================================== */

/* ---------- cabeçalho da etapa, com o "tirar da carta" ---------- */
.ed-cab{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.ed-cab .ed-titulo{ margin-bottom:0; }
.ed-tirar{
  flex:0 0 auto;
  padding:6px 11px;
  border:1px solid #E3DFEE;
  border-radius:999px;
  background:transparent;
  font:inherit;
  font-size:12.5px;
  color:#8B8598;
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.ed-tirar:hover{ color:#B4453F; border-color:#E8C4C1; background:#FDF4F3; }

/* TIRAR DA CARTA É UMA AÇÃO DESTRUTIVA, e estava vestida de link neutro
   — cinza, discreta, do lado do título. Alguém pode apertar achando que
   é "fechar" ou "recolher" e ver a seção sumir.

   Ela não vira um botão vermelho gritante: isso a transformaria no
   elemento mais chamativo de uma tela em que a pessoa está escrevendo
   uma carta de amor. O tom certo é o do meio — vermelho claro o
   suficiente para ninguém confundir com uma ação inofensiva, discreto o
   suficiente para não puxar o olho. Quem procura, acha; quem não
   procura, não tromba. */
.ed-tirar{
  border-color:#F0D4D2;
  background:#FDF4F3;
  color:#B4453F;
}
.ed-tirar:hover,
.ed-tirar:focus-visible{
  background:#B4453F;
  border-color:#B4453F;
  color:#fff;
}

/* o cabeçalho tinha a margem embaixo no h2; agora é do bloco */
.ed-cab{ margin-bottom:22px; }

/* ---------- botão de ideia acima do campo ---------- */
.bt-sugerir--topo{
  display:inline-flex;
  margin:0 0 10px;
  padding:10px 15px;
  font-size:13.5px;
  font-weight:500;
  background:#F3EDFE;
  border-color:#D9C9F8;
  color:#5B3FA8;
}
.bt-sugerir--topo:hover{ background:#EAE0FC; border-color:#C0A5F2; }

/* ---------- faixa de preço ---------- */
/* A faixa cheia NÃO gruda e NÃO encolhe: ela rola embora como qualquer
   conteúdo. Quem gruda é a tarja fina abaixo, que é fixa e está fora do
   fluxo — assim nada muda de altura enquanto a página rola. */

.ed-preco-fina{
  position:fixed;
  top:0; left:0; right:0;
  z-index:26;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 20px calc(9px + 0px);
  background:linear-gradient(135deg,#26223A 0%,#17161C 62%);
  color:#F4F1EA;
  box-shadow:0 12px 28px -18px rgba(20,18,30,.95);
  transform:translateY(-101%);
  transition:transform .2s ease;
}
body.preco-fina-on .ed-preco-fina,
body.preco-mini    .ed-preco-fina{ transform:none; }

.epf-ico{
  flex:0 0 auto;width:24px;height:24px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(201,162,75,.16);
  border:1px solid rgba(201,162,75,.5);
  color:#E0BC6E;font-size:12px;line-height:1;
}
.ed-preco-fina .ed-preco-valores{
  flex:1;min-width:0;
  font-size:12.5px;
  gap:2px 10px;
}
.ed-preco-fina .ed-preco-valores b{ font-size:1.1rem;margin-right:2px; }
.epf-nota{
  flex:0 0 auto;
  font-size:11px;
  color:rgba(244,241,234,.5);
}
@media (max-width:560px){ .epf-nota{ display:none; } }

/* passado o primeiro passo, a faixa cheia sai de cena: o preço já foi visto
   e a partir daí só a tarja fina acompanha */
body.preco-mini .ed-preco{ display:none; }
body.preco-mini .ed-form{ padding-top:64px; }

/* ---------- A TARJA SAI DE CIMA DA PRÉVIA ----------

   Com a tarja fina valendo desde o primeiro instante, ela passou a
   aparecer TAMBÉM por cima da carta quando a pessoa toca em "Ver como
   está ficando". A prévia no celular é tela cheia e a tarja é fixa no
   topo, com z-index acima dela — então a primeira coisa que a pessoa vê
   ao abrir a própria carta é uma etiqueta de preço atravessada na capa.

   É o oposto exato do que a tarja existe para fazer. Ela é a resposta
   discreta para "quanto custa" enquanto a pessoa TRABALHA. No momento em
   que ela para de trabalhar e olha o presente, o preço é intrusão: é o
   vendedor entrando na sala junto com o embrulho.

   Este é o mesmo tratamento que `body.pronto` já dava — só que aquele
   cobria a tela de planos, e a prévia tinha ficado de fora. */
body.mostrando-previa .ed-preco-fina{ transform:translateY(-101%) !important; }

/* ---------- navegação sempre ao alcance do polegar ---------- */
@media (max-width:959px){
  .ed-form{ padding-bottom:150px; }
  .ed-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:24;
    margin-top:0;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background:rgba(250,249,253,.94);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid #E6E3EF;
  }
}

/* ---------- "ver a carta" mora dentro da barra ---------- */
#ver-previa{
  position:static;
  transform:none;
  left:auto; bottom:auto;
  flex:0 0 auto;
  padding:14px 18px;
  border-radius:11px;
  background:#17161C;
  box-shadow:none;
  font-size:14.5px;
}
@media (min-width:960px){ #ver-previa{ display:none !important; } }

/* com a prévia aberta a mesma barra troca de papel */
body.mostrando-previa .ed-nav{ display:flex; }
body.mostrando-previa .ed-nav .bt{ display:none; }
body.mostrando-previa #ver-previa{ flex:1; text-align:center; }

/* ---------- fotos: carrossel no celular ---------- */
/* Cada cartão de foto tem quadro + botão + formato + legenda. Empilhados,
   quatro fotos viravam duas telas inteiras de rolagem só para chegar no
   "Próximo". De lado, cabem todas num gesto. */
@media (max-width:700px){
  /* alinhar pelo COMEÇO, não pelo centro: centralizado, o primeiro cartão
     nascia com um vão dos dois lados e parecia desalinhado */
  .cp-fotos{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    margin-inline:0;
    /* um carrossel recorta o que passa da borda — e as setas de ordem
       moram acima do cartão. Sem esta folga em cima elas somem. */
    padding:14px 2px 12px;
    scrollbar-width:none;
  }
  .cp-fotos::-webkit-scrollbar{ display:none; }
  .cp-fotos > .cp-foto{
    flex:0 0 70%;
    scroll-snap-align:start;
  }
  /* foto única (capa, momento da linha) continua ocupando a largura toda */
  .cp-fotos--una{
    display:block;
    margin-inline:0;
    padding:0;
    overflow:visible;
  }
  .cp-fotos--una > .cp-foto{ width:100%; }
}

/* ---------- cardápio de seções mais enxuto ---------- */
.sf-tira{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:0 0 22px;
  padding:12px 14px;
  border:1px dashed #DDD9E8;
  border-radius:12px;
  background:#F7F5FC;
}
.sf-tira-rot{
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#9C97AC;
}
.sf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sf-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 8px;
  border-radius:999px;
  background:#EDE4FF;
  color:#5B3FA8;
  font-size:13px;
  font-weight:500;
}
.sf-chip .sc-svg{ width:17px; height:17px; }


/* ---------- a tarja fina no computador ---------- */
/* Lá o editor tem duas colunas: a tarja é da coluna do formulário, não da
   tela inteira — senão ela passaria por cima da prévia. E como sobra
   espaço no desktop, a faixa cheia continua aparecendo em todos os passos;
   só no celular ela sai de cena depois do primeiro. */
/* A tarja é da coluna do formulário, não da tela: no computador ela para na
   metade, senão passaria por cima da prévia. E a regra do celular vale aqui
   também — visto o preço uma vez, ele se recolhe e não acompanha mais o
   caminho inteiro. */
@media (min-width:960px){
  .ed-preco-fina{ right:50%; }
  body.preco-mini .ed-form{ padding-top:60px; }
}


/* =====================================================================
   Enquadrar vendo a carta inteira — celular
   ===================================================================== */

@media (max-width:959px){
  body.enquadrando .ed-previa{
    display:flex;
    inset:0;
    height:100svh;
    padding:12px 14px 138px;
    border-left:0;
  }
  body.enquadrando .ed-previa-rotulo{ display:none; }
  body.enquadrando .ed-fone{
    max-width:none;
    border-width:0;
    border-radius:14px;
  }
  body.enquadrando .ed-nav{ display:none; }
  body.enquadrando .ed-preco-fina{ transform:translateY(-101%); }
}

.enqb{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:30;
  display:none;
  padding:14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background:rgba(23,22,28,.96);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:#F4F1EA;
  box-shadow:0 -18px 40px -22px rgba(0,0,0,.9);
}
body.enquadrando .enqb{ display:block; }
@media (min-width:960px){ .enqb{ display:none !important; } }

.enqb-fala{
  margin:0 0 12px;
  font-size:12.5px;
  text-align:center;
  color:rgba(244,241,234,.62);
}
.enqb-linha{
  display:flex;
  align-items:center;
  gap:12px;
}
.enqb-ponta{
  flex:0 0 auto;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,241,234,.45);
}

.enqb-range{
  flex:1;
  min-width:0;
  height:34px;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
.enqb-range::-webkit-slider-runnable-track{
  height:5px; border-radius:999px;
  background:rgba(244,241,234,.2);
}
.enqb-range::-moz-range-track{
  height:5px; border-radius:999px;
  background:rgba(244,241,234,.2);
}
.enqb-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:28px; height:28px;
  margin-top:-11.5px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.enqb-range::-moz-range-thumb{
  width:28px; height:28px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}

.enqb-ok{
  display:block;
  width:100%;
  margin-top:14px;
  padding:14px;
  border:0; border-radius:11px;
  background:#8B5CF6; color:#fff;
  font:inherit; font-size:15.5px; font-weight:500;
  cursor:pointer;
}


/* =====================================================================
   Ajustes finos
   ===================================================================== */

/* foto única (capa) — no celular ela tinha virado um retângulo do tamanho
   da tela; volta a ser um cartão, centralizado */
@media (max-width:700px){
  .cp-fotos--una{
    display:block;
    max-width:230px;
    margin-inline:auto;
    padding:0;
    overflow:visible;
  }
  .cp-fotos--una > .cp-foto{ width:100%; }
  /* na linha do tempo a foto do momento continua acompanhando a coluna */
  .lt-ed .cp-fotos--una{ max-width:none; }
}

/* "adicionar" estava colado no último campo da lista */
@media (max-width:700px){
  .cp-acoes{ margin-top:16px; }
  .bt-add{
    margin-top:0;
    width:100%;
    justify-content:center;
  }
}

/* pontinhos do topo viraram atalho */
.pt{
  border:0;
  padding:0;
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.pt:hover{ background:#C4B5FD; transform:scaleY(1.8); }
.pt.feito{ background:#C4B5FD; }
.pt.on{ background:#8B5CF6; }
.pt:focus-visible{ outline:2px solid #8B5CF6; outline-offset:3px; }

/* chips da tira agora são botões de editar */
.sf-chip{
  border:0;
  font:inherit;
  cursor:pointer;
  transition:background .16s ease;
}
.sf-chip:hover{ background:#E0D2FF; }
.sf-lapis{ font-size:11px; opacity:.55; margin-left:1px; }
.sf-tira{ align-items:flex-start; flex-direction:column; }
.sf-tira-rot{ margin-bottom:2px; }

.sc-editar{ color:#5B3FA8; }
.sc-editar:hover{ background:#EFE7FD; }


/* rótulo à esquerda, botão de ideia à direita — na mesma linha, como nos
   campos de texto curtos. Solto acima do campo ele ficava boiando. */
.cp-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.cp-topo .cp-rot{ margin-bottom:0; }
.bt-sugerir--topo{ margin:0; flex:0 0 auto; }

/* tela de conclusão: o preço está detalhado nos planos, e a conversa acabou */
body.pronto .ed-mascote,
body.pronto .ed-passos,
body.pronto .ed-preco{ display:none; }
body.pronto .ed-preco-fina{ transform:translateY(-101%) !important; }
body.pronto .ed-form{ padding-top:34px; padding-bottom:60px; }


/* =====================================================================
   Rodada: dois eixos, carrossel do que já está, destaques
   ===================================================================== */

/* ---------- os dois cursores de enquadramento ---------- */
.enqb-eixo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
}
.enqb-ic{
  flex:0 0 auto;
  width:22px;
  text-align:center;
  font-size:15px;
  color:rgba(244,241,234,.55);
}
.enqb-sem{
  display:none;
  flex:0 0 auto;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(244,241,234,.3);
}
/* o eixo sem folga simplesmente não aparece — um controle que não faz
   nada é pior do que controle nenhum */
.enqb-eixo.sem-folga{ display:none; }
.enqb-range:disabled{ cursor:default; }

/* ---------- editar seções: o lápis estava miúdo ---------- */
.sf-chip{
  padding:9px 14px 9px 10px;
  font-size:13.5px;
  gap:8px;
}
.sf-chip .sc-svg{ width:19px; height:19px; }
.sf-lapis{
  font-size:14px;
  opacity:.9;
  margin-left:3px;
  color:#7C3AED;
}
.sc-editar{
  font-size:16px;
  color:#7C3AED;
}

/* ---------- o que já está na carta vira carrossel no celular ---------- */
@media (max-width:700px){
  .sc-lista--dentro{
    display:flex;
    flex-direction:row;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    margin-inline:0;
    padding:2px 2px 12px;
    scrollbar-width:none;
  }
  .sc-lista--dentro::-webkit-scrollbar{ display:none; }
  .sc-lista--dentro > .sc{
    flex:0 0 70%;
    scroll-snap-align:start;
  }

  /* a tira de chips do topo também desliza, em vez de virar quatro linhas */
  .sf-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    margin-inline:-14px;
    padding:2px 14px 6px;
    scrollbar-width:none;
  }
  .sf-chips::-webkit-scrollbar{ display:none; }
  .sf-chip{ flex:0 0 auto; scroll-snap-align:start; }
}

/* ---------- "ver a carta inteira" na tela final ---------- */
.ed-ver{
  padding:19px 18px;
  margin-bottom:22px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#26223A 0%,#17161C 62%);
  color:#F4F1EA;
  font-size:16.5px;
  font-weight:600;
  box-shadow:0 16px 34px -18px rgba(20,18,30,.9);
}
.ed-ver:hover{
  background:linear-gradient(135deg,#302B47 0%,#1E1D25 62%);
}
.ed-ver span[aria-hidden]{
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(224,188,110,.16);
  border:1px solid rgba(224,188,110,.5);
  color:#E0BC6E;
  font-size:14px;
}

/* ---------- busca de música ---------- */
.mus-busca{ position:relative; display:block; }
.mus-lupa{
  position:absolute;
  left:14px; top:50%; transform:translateY(-50%);
  font-size:16px; color:#9C97AC;
  pointer-events:none;
}
/* a regra genérica .cp input[type=text] tem especificidade maior que uma
   classe sozinha e reescrevia o padding — daí a lupa em cima do texto */
.cp input[type=text].mus-campo,
.mus-campo{
  width:100%;
  padding:13px 15px 13px 44px;
  font:inherit; font-size:15.5px; color:inherit;
  background:#fff;
  border:1px solid #DDD9E8; border-radius:10px;
}
.mus-campo:focus{ outline:2px solid #8B5CF6; outline-offset:1px; border-color:transparent; }
.mus-resultados:not(:empty){ margin-top:12px; }


/* =====================================================================
   Rodada: números, barra em duas linhas, linha do tempo em carrossel
   ===================================================================== */

/* nada pode empurrar a página para os lados */
.ed-form{ overflow-x:clip; }
.sc-lista,
.sc-lista--dentro,
.sf-chips,
.lt-eds{ max-width:100%; }
.sf-tira{ align-self:stretch; }
.sf-chips{ width:100%; }

/* ---------- número em vez de seta para dizer a ordem ---------- */
.sf-num{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:19px; height:19px;
  border-radius:50%;
  background:#8B5CF6; color:#fff;
  font:600 11px/1 'Jost', system-ui, sans-serif;
}
.sf-chip{ padding-left:7px; }

.sc{ position:relative; }
.sc-num{
  position:absolute;
  top:-9px; left:14px;
  z-index:2;
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding:0 7px;
  border-radius:999px;
  background:#8B5CF6; color:#fff;
  font:600 11px/1 'Jost', system-ui, sans-serif;
}

.sc-editar{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  padding:7px 13px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
}

/* ---------- a barra de baixo em duas linhas ---------- */
/* Voltar + Finalizar + Ver a carta não cabiam numa linha só: o último era
   empurrado para fora da tela. "Ver a carta" sobe para uma linha própria,
   que de quebra é o destaque que ele merece. */
@media (max-width:959px){
  .ed-nav{ flex-wrap:nowrap; gap:8px; }
  .ed-nav .bt-sec{ flex:0 0 auto; padding:14px 16px; }
  .ed-nav .bt-pri{ flex:1 1 auto; min-width:0; padding:14px 12px; }
  #ver-previa{
    order:0;
    flex:0 0 auto;
    padding:14px 15px;
    font-size:14px;
    white-space:nowrap;
  }
  .ed-form{ padding-bottom:150px; }
  body.pronto .ed-form{ padding-bottom:60px; }
}

/* o rótulo encolhe antes de a barra estourar */
.vp-curto{ display:none; }
@media (max-width:400px){
  .vp-longo{ display:none; }
  .vp-curto{ display:inline; }
  .ed-nav .bt-sec{ padding:14px 13px; }
}
body.mostrando-previa .vp-curto,
body.mostrando-previa .vp-longo{ display:inline; }

/* ---------- linha do tempo desliza em qualquer tela ---------- */
/* No computador a coluna do formulário tem 480px: um momento empilhado
   embaixo do outro rende uma tela de rolagem por momento. De lado, três
   cabem num gesto — e as setas dão o gesto a quem só tem mouse. */
.lt-eds{
    display:flex;
    flex-direction:row;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* o número e o × do momento ficam para fora da caixa: sem esta folga
       o próprio scroller os cortava */
    padding:18px 14px 12px 2px;
    scrollbar-width:none;
  }
  .lt-eds::-webkit-scrollbar{ display:none; }
.lt-eds > .lt-ed{
  flex:0 0 82%;
  scroll-snap-align:start;
}
@media (min-width:960px){
  .lt-eds > .lt-ed{ flex:0 0 74%; }
}


/* ---------- deixar claro que o carrossel continua ---------- */
/* Aqui havia um mask-image esmaecendo a borda direita. Bonito e caro: uma
   máscara aplicada no PRÓPRIO elemento que rola trava a rolagem por toque
   no Safari do iPhone — o dedo passa e a lista não anda. Foi isso que
   deixou os carrosséis mortos no celular.
   O recado de "tem mais ao lado" não precisa de máscara: o cartão seguinte
   já aparece pela metade (flex:0 0 70%), que é a pista mais antiga e mais
   confiável que existe, e agora cada cartão ainda diz "2 de 4". */


/* =====================================================================
   Uma lista só para as partes da carta
   ===================================================================== */
/* Substitui a tira de chips do topo E o carrossel de baixo, que diziam a
   mesma coisa em dois lugares. */

.sl-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:6px;
}

.sl-linha{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 10px 10px 12px;
  background:#fff;
  border:1px solid #E6E3EF;
  border-radius:12px;
}
.sl-linha--fixa{ background:#FAF9FD; }

.sl-num{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:50%;
  background:#8B5CF6; color:#fff;
  font:600 11.5px/1 'Jost', system-ui, sans-serif;
}
.sl-linha--fixa .sl-num{ background:#C4B5FD; }

.sl-ic{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:9px;
  background:#EDE4FF;
  color:#7C3AED;
}
.sl-ic .sc-svg{ width:18px; height:18px; }

.sl-nome{
  flex:1;
  min-width:0;
  font-size:14.5px;
  font-weight:500;
  color:#2E2740;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sl-bts{ flex:0 0 auto; display:flex; gap:4px; }
.sl-bt{
  width:32px; height:32px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid #E6E3EF;
  border-radius:9px;
  background:#fff;
  color:#7C3AED;
  font:inherit; font-size:13px; line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sl-bt:hover:not(:disabled){ background:#F4F0FE; border-color:#C6BEDD; }
.sl-bt:disabled{ opacity:.3; cursor:default; }
.sl-bt--x{ color:#9C97AC; font-size:17px; }
.sl-bt--x:hover{ color:#B3261E; border-color:#E7C9C6; background:#FDF4F3; }

@media (max-width:380px){
  .sl-linha{ gap:8px; padding-left:10px; }
  .sl-ic{ display:none; }
  .sl-bt{ width:29px; height:29px; }
}

/* a barra de enquadrar quando não há nada a aparar */
.enqb--nada .enqb-eixo{ display:none; }

/* a lupa virou desenho, não símbolo tipográfico */
.mus-lupa{
  display:grid;
  place-items:center;
  width:18px; height:18px;
}
.mus-lupa svg{ width:18px; height:18px; display:block; }


/* ---------- a barra de baixo não pode dançar ---------- */
/* Gerar uma ideia muda a altura da página; se a barra de rolagem aparece ou
   some junto, a largura útil muda e os botões fixos escorregam de lado.
   Reservar a calha resolve na raiz. */
html{ scrollbar-gutter:stable; }

/* enquanto ainda não dá para medir a folga, nenhum cursor aparece */
.enqb--medindo .enqb-eixo{ display:none; }
.enqb--medindo .enqb-fala::after{
  content:' …';
  color:rgba(244,241,234,.4);
}


/* ---------- por que "proximity" e não "mandatory" ----------
   Com "mandatory", trocar todo o conteúdo de um carrossel faz o navegador
   reancorar no primeiro item por conta própria, desfazendo a posição que a
   gente acabou de restaurar. "proximity" dá o mesmo encaixe ao deslizar e
   respeita a posição que o código define. */

/* enquanto mede, a barra não promete o que ainda não pode entregar */
.enqb--medindo .enqb-fala::after{ content:''; }


/* ---------- respiro ao pular para um item recém-criado ---------- */
/* O topo do item novo não pode nascer embaixo da tarja de preço nem colado
   na borda da tela. */
.lt-ed,
.cp-foto,
.cp-linha,
.sc{ scroll-margin-top:80px; scroll-margin-bottom:24px; }


/* recado extra na barra de enquadrar — hoje, o aviso do quebra-cabeça */
.enqb-nota{
  margin:-6px 0 12px;
  font-size:12px;
  line-height:1.45;
  text-align:center;
  color:rgba(224,188,110,.85);
}
.enqb-nota:empty{ display:none; }
.enqb--medindo .enqb-nota{ display:none; }


/* =====================================================================
   Depois dos testes com gente de verdade
   ===================================================================== */

/* ---------- título da capa: texto pronto, não campo ---------- */
.tt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 13px 13px 16px;
  background:#fff;
  border:1px solid #DDD9E8;
  border-radius:10px;
}
.tt-txt{
  flex:1;
  min-width:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.25rem;
  line-height:1.25;
  color:#2E2740;
}
.tt-bt{
  flex:0 0 auto;
  padding:8px 14px;
  border:1px solid #D8CCF4;
  border-radius:999px;
  background:#F7F3FE;
  color:#5B3FA8;
  font:inherit; font-size:13px; font-weight:500;
  cursor:pointer;
}
.tt-bt:hover{ background:#EFE7FD; border-color:#BCA6EE; }

/* ---------- ideias que se mostram ---------- */
.sugs{ margin:0 0 14px; }

/* ---------- o cartão único da declaração ---------------------------
   Com três cartões, cada um é um item de uma lista para comparar. Com
   um só, ele deixa de ser item e passa a ser um trecho de carta em
   cima da mesa — então ganha mais respiro e a serifa um ponto maior,
   para ser LIDO em vez de escaneado. */
.sugs--uma .sug{ padding:17px 18px 14px; margin-bottom:10px; }
.sugs--uma .sug-txt{ font-size:1.2rem; line-height:1.55; }
.sugs-rot{
  margin:0 0 10px;
  font-size:12.5px;
  color:#7C3AED;
  font-weight:500;
}
.sug{
  display:block;
  width:100%;
  margin-bottom:9px;
  padding:14px 15px 12px;
  text-align:left;
  border:1.5px solid #DDD7EC;
  border-radius:12px;
  background:#fff;
  font:inherit;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.sug:hover{ border-color:#B9A9EC; background:#FCFBFF; }
.sug:active{ box-shadow:0 0 0 3px rgba(139,92,246,.14); }
.sug-txt{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.12rem;
  line-height:1.45;
  color:#2E2740;
}
.sug-usar{
  display:inline-block;
  margin-top:9px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:#7C3AED;
}
.sugs-outras{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:1px dashed #C6BEDD;
  border-radius:999px;
  background:transparent;
  color:#5B3FA8;
  font:inherit; font-size:13px;
  cursor:pointer;
}
.sugs-outras:hover{ background:#F7F3FE; }
.sugs-ou{
  margin:16px 0 8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9C97AC;
  text-align:center;
}

/* ---------- a parte vazia pergunta antes de deixar passar ---------- */
.vazia{
  margin:0 0 20px;
  padding:18px;
  border:1.5px solid #E3D9F8;
  border-radius:14px;
  background:linear-gradient(180deg,#FBF9FF 0%,#F5F1FD 100%);
}
.vazia-tit{
  margin:0 0 6px;
  font-size:15.5px;
  font-weight:600;
  color:#2E2740;
}
.vazia-txt{
  margin:0 0 14px;
  font-size:13.5px;
  line-height:1.55;
  color:#6C6880;
}
.vazia-bts{ display:flex; gap:9px; flex-wrap:wrap; }
.vazia-bt{
  flex:1 1 auto;
  padding:13px 16px;
  border:1px solid #DDD9E8;
  border-radius:11px;
  background:#fff;
  color:#55516A;
  font:inherit; font-size:14.5px; font-weight:500;
  cursor:pointer;
}
.vazia-bt--sim{ background:#8B5CF6; border-color:#8B5CF6; color:#fff; }
.vazia-bt:hover{ border-color:#C6BEDD; }
.vazia-bt--sim:hover{ background:#7C3AED; border-color:#7C3AED; }


/* ---------- campos de uma linha que crescem com o texto ---------- */
/* Substituem os <input> do editor: uma frase longa aparece inteira em vez
   de ficar cortada na borda direita. */
.cp-uma{
  display:block;
  width:100%;
  padding:13px 15px;
  font:inherit;
  font-size:15.5px;
  line-height:1.45;
  color:inherit;
  background:#fff;
  border:1px solid #DDD9E8;
  border-radius:10px;
  resize:none;
  overflow:hidden;
}
.cp-uma:focus{
  outline:2px solid #8B5CF6;
  outline-offset:1px;
  border-color:transparent;
}
.cp-linha .cp-uma{ flex:1; min-width:0; }
.cp-foto .cp-uma{
  padding:9px 11px;
  font-size:13px;
  border-color:#E6E3EF;
  background:#FAF9FC;
}

/* ---------- a prévia com a proporção de um celular de verdade ---------- */
/* O quadro era só "o que sobrasse de altura", e dentro dele 100svh dava uma
   tela achatada: o texto da capa, que no celular assenta na faixa de baixo,
   subia para cima do rosto. Com a proporção real, o que a pessoa vê na
   prévia é o que ela vai receber. */
.ed-fone{
  flex:0 1 auto;
  height:min(100%, 760px);
  width:auto;
  aspect-ratio:9 / 19.5;
  max-width:100%;
}
@media (max-width:959px){
  body.mostrando-previa .ed-fone{
    height:100%;
    width:100%;
    max-width:420px;
    aspect-ratio:auto;
  }
  body.enquadrando .ed-fone{ aspect-ratio:auto; height:100%; width:100%; }
}


/* =====================================================================
   Computador: a barra de baixo ao alcance, sem rolar
   ===================================================================== */
/* Rolar meia tela de formulário só para achar o "Próximo" é imposto de
   pedágio. A barra vira faixa fixa no pé da coluna da esquerda, com os
   botões alinhados à mesma régua do formulário. */
.ed-nav-in{
  display:flex;
  gap:10px;
  width:100%;
  max-width:560px;
  margin:0 auto;
}

@media (min-width:960px){
  .ed-nav{
    position:fixed;
    left:0; bottom:0;
    width:50%;
    z-index:22;
    margin:0;
    padding:16px 40px calc(16px + env(safe-area-inset-bottom, 0px));
    background:rgba(247,246,250,.94);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid #E6E3EF;
  }
  .ed-form{ padding-bottom:122px; }
  body.pronto .ed-form{ padding-bottom:60px; }
}

/* ---------- "ver a carta inteira" com o peso que merece ---------- */
.ed-ver{
  display:flex;
  align-items:center;
  gap:15px;
  text-align:left;
  padding:18px 20px;
  margin-bottom:24px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#2A2540 0%,#17161C 62%);
  color:#F4F1EA;
  box-shadow:0 18px 38px -18px rgba(20,18,30,.92);
  transition:transform .16s ease, box-shadow .16s ease;
}
.ed-ver:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 46px -18px rgba(20,18,30,.95);
  background:linear-gradient(135deg,#332C4E 0%,#1E1D25 62%);
}
.ed-ver-ic{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(224,188,110,.14);
  border:1px solid rgba(224,188,110,.45);
  color:#E0BC6E;
}
.ed-ver-ic svg{ width:22px; height:22px; display:block; }
.ed-ver-txt{ display:block; min-width:0; }
.ed-ver-txt b{
  display:block;
  font-size:16.5px;
  font-weight:600;
  line-height:1.25;
}
.ed-ver-txt small{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  color:rgba(244,241,234,.6);
}


/* =====================================================================
   Legibilidade, alinhamento e o que cada cor quer dizer
   ===================================================================== */

/* ---------- 1. o editor é ferramenta, não é a carta ----------
   A serifada é a letra da CARTA: ela existe para ser lida devagar, à noite,
   uma vez. O editor é o contrário — texto que se varre com o olho, no meio
   de uma tarefa. Colocar a fonte do produto dentro da ferramenta parecia
   coerente, mas cobrava um preço de leitura em cada frase. A serifada volta
   para onde ela é boa: dentro do celular da prévia. */
.sug-txt{
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:15.5px;
  line-height:1.5;
  color:#2E2740;
}
.tt-txt{
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.35;
  color:#2E2740;
}

/* ---------- 2. a barra de baixo na mesma régua do formulário ----------
   O trilho tinha 560px de largura enquanto o texto do formulário tinha 480
   (560 menos o respiro lateral). Dava 40px de diferença de cada lado — o
   suficiente para a tela inteira parecer torta sem ninguém saber por quê. */
@media (min-width:960px){
  .ed-nav{ padding-left:0; padding-right:0; }
  .ed-nav-in{ max-width:560px; padding:0 40px; }
}

/* ---------- 3. os botões da linha, alinhados ---------- */
/* O campo cresce quando o texto é longo; os botões ao lado continuavam
   centralizados na altura antiga, cada um de um tamanho. Agora os dois são
   o mesmo quadrado, encostados no topo do campo. */
.cp-linha{ align-items:flex-start; }
.cp-linha .bt-ideia--so,
.cp-linha .bt-x{
  flex:0 0 auto;
  width:46px;
  height:46px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:11px;
}
.cp-linha .bt-ideia--so{ font-size:15px; }
.cp-linha .bt-x{ font-size:19px; }

/* ---------- 4. vermelho é para avisar, e só ---------- */
.vazia{
  border-color:#F0CFCB;
  background:linear-gradient(180deg,#FFF8F7 0%,#FDEEEC 100%);
}
.vazia-tit{ color:#8E2F27; }
.vazia-tit::before{
  content:'!';
  display:inline-grid;
  place-items:center;
  width:19px; height:19px;
  margin-right:8px;
  border-radius:50%;
  background:#C0392B;
  color:#fff;
  font-size:12px;
  font-weight:700;
  vertical-align:-3px;
}
.vazia-txt{ color:#7A5C58; }
.vazia-bt--sim{ background:#C0392B; border-color:#C0392B; }
.vazia-bt--sim:hover{ background:#A53024; border-color:#A53024; }

.ed-erro{
  border:1.5px solid #F0CFCB !important;
  background:#FFF8F7 !important;
  color:#8E2F27 !important;
}

/* ---------- 5. a hora de comprar tem a cor da carta ----------
   Ver adiante, no texto que acompanha, por que NÃO ficou verde. */
.pl-bt{
  background:linear-gradient(135deg,#2A2540 0%,#17161C 62%);
  color:#E9D9AE;
  border:1px solid rgba(201,162,75,.45);
  font-weight:600;
}
.pl--top .pl-bt{
  background:linear-gradient(135deg,#E7C67C 0%,#C9A24B 100%);
  color:#1B1A22;
  border-color:#C9A24B;
  box-shadow:0 14px 30px -14px rgba(201,162,75,.9);
}
.pl--top{ border-color:#C9A24B; }
.pl-tag{ background:#C9A24B; color:#1B1A22; }

/* ---------- 6. violeta volta a significar "aperte aqui" ----------
   Ele estava em tudo: pontinhos, ícones, marcas, contornos. Quando a cor da
   ação é também a cor da decoração, o botão principal deixa de se destacar
   por ser violeta — passa a se destacar só por ser grande. Aqui o violeta
   decorativo desce um tom; o dos botões fica onde está. */
.sl-ic{ background:#EFECF6; color:#8B84A3; }
.sc-fig{ background:#EFECF6; color:#8B84A3; }
.sl-linha .sl-num{ background:#B6ADD4; }
.sl-linha:not(.sl-linha--fixa) .sl-num{ background:#8B5CF6; }
.modo-ic{ color:#A79FC0; }
.modo.on .modo-ic{ color:#7C3AED; }


/* =====================================================================
   O branco que não é respiro
   ===================================================================== */
/* Uma etapa de um campo só deixava seiscentos pixels de nada entre o campo
   e a barra de baixo. Isso não é respiro: é a tela dizendo que falta
   alguma coisa. Agora o bloco de campos se acomoda no meio do espaço que
   sobra — o cabeçalho fica no topo, a barra no pé, e o formulário no eixo
   do olhar. Etapas longas continuam rolando normalmente, porque margem
   automática não corta o que transborda. */
.ed-form{
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
#campos{
  width:100%;
  margin-block:auto;
}
body.pronto #campos{ margin-block:0; }

/* ---------- setas dos carrosséis ---------- */
.rolo{ position:relative; }

/* Eram brancas sobre fundo quase branco, com borda cinza-clara: liam-se
   como decoração, não como botão. Agora carregam a cor da ação do editor
   — quem olha a tela sabe, sem pensar, que aquilo se aperta. */
.rolo-bt{
  position:absolute;
  top:calc(50% - 23px);
  width:42px; height:46px;
  display:none;
  place-items:center;
  padding:0;
  border:1px solid #D8CCF4;
  border-radius:12px;
  background:#fff;
  color:#5B3FA8;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(91,63,168,.45);
  transition:background .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease;
  z-index:3;
}
.rolo-bt:hover{
  background:#8B5CF6; border-color:#8B5CF6; color:#fff;
  transform:scale(1.06);
}
.rolo-bt:active{ transform:scale(.96); }
.rolo-bt:focus-visible{ outline:2px solid #8B5CF6; outline-offset:2px; }
.rolo-bt--a{ left:-13px; }
.rolo-bt--b{ right:-13px; }

/* só onde existe ponteiro: no toque, o gesto já é o controle */
@media (hover:hover) and (pointer:fine){
  .rolo-bt{ display:grid; }
}

/* ---------- exemplos de música, em uma linha ---------- */
.mus-tenta{
  margin:12px 0 0;
  font-size:13px;
  color:#8B8598;
  line-height:1.9;
}
.mus-tenta button{
  border:0;
  padding:0;
  background:none;
  font:inherit;
  color:#5B3FA8;
  cursor:pointer;
  border-bottom:1px solid #D8CCF4;
}
.mus-tenta button:hover{ color:#7C3AED; border-bottom-color:#8B5CF6; }


/* =====================================================================
   Progresso, conselho e respiro
   ===================================================================== */

/* ---------- os traços viram uma medida ---------- */
.ed-passos{ display:block; margin-bottom:24px; }
.pt-trilha{ display:flex; gap:6px; }
.pt-rot{
  margin:9px 0 0;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9C97AC;
}
.pt-rot b{ color:#7C3AED; font-weight:600; }

/* etapa vencida com peso: o caminho andado precisa parecer andado */
.pt{ height:3px; border-radius:2px; }
.pt.feito{ background:#A78BFA; }
.pt.on{ background:#7C3AED; height:5px; margin-top:-1px; }

/* ---------- o conselho da etapa ---------- */
/* Agora cada etapa diz uma coisa própria, então o balão ganhou o direito de
   continuar ali — mas com metade do peso visual de antes. */
.ed-mascote{ margin-bottom:24px; align-items:center; }
.ed-avatar{ width:38px; height:38px; font-size:17px; }
.ed-fala{
  padding:11px 15px;
  font-size:14px;
  line-height:1.55;
  background:#FBFAFE;
  border-color:#EAE6F5;
  color:#4A4560;
}
@media (min-width:960px){
  .ed-fala{ font-size:14.5px; }
}


/* =====================================================================
   Setas de ordem
   =====================================================================
   Substituiu a alça de arrastar. O arrasto era invisível (nada na tela
   diz que aquilo arrasta) e no dedo brigava com a rolagem do carrossel —
   os dois gestos são o mesmo movimento. Duas setas com o contador no
   meio dizem o que fazem, funcionam igual no toque e no mouse, e o
   "2 de 4" resolve de quebra o que um carrossel sempre perde: saber em
   que ponto da lista a pessoa está. */
.ord{
  position:absolute;
  top:-11px; left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid #E0DCEC;
  border-radius:999px;
  background:#fff;
  box-shadow:0 3px 10px -4px rgba(20,18,30,.35);
}
.ord-bt{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:22px;
  padding:0;
  border:0; border-radius:999px;
  background:transparent;
  color:#5B3FA8;
  font:inherit; font-size:16px; line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ord-bt:hover:not(:disabled){ background:#F3EEFE; }
.ord-bt:active:not(:disabled){ background:#E7DEFB; }
.ord-bt:disabled{ color:#D5D1E0; cursor:default; }
.ord-bt:focus-visible{ outline:2px solid #8B5CF6; outline-offset:1px; }
.ord-pos{
  padding:0 3px;
  font-size:10.5px; letter-spacing:.02em; white-space:nowrap;
  color:#8B8598;
}

/* depois de mover, um piscar de destaque: sem ele a pessoa aperta a seta,
   o cartão troca de lugar e nada indica QUAL cartão se moveu */
.cp-foto.ord-mexeu,
.lt-ed.ord-mexeu{
  box-shadow:0 0 0 2px #8B5CF6;
  transition:box-shadow .25s ease;
}

/* o número do momento sai do caminho das setas */
.lt-ed .lt-ed-num{ left:12px; }


/* ---------- os dois avisos de concordância ---------- */
/* Um no momento de subir a foto de outra pessoa; outro na hora de pagar.
   Nenhum dos dois bloqueia: o que bloqueia é a declaração no checkout,
   que é a que tem valor de prova. */
.cp-aviso{
  margin:12px 0 0;
  padding:11px 14px;
  border-left:2px solid #C6BEDD;
  background:#F7F5FC;
  border-radius:0 8px 8px 0;
  font-size:12.5px;
  line-height:1.55;
  color:#6C6880;
}
.pl-legal{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.6;
  color:#9C97AC;
  text-align:center;
}
.pl-legal a{ color:#7C3AED; }


/* ---------- convite para ver o exemplo, no primeiro passo ---------- */
/* Ver o exemplo é um bom argumento, mas não é O argumento desta tela — a
   pessoa veio criar, não navegar. Uma linha discreta convida quem está em
   dúvida sem roubar espaço de quem já sabe o que quer. */
/* ---------- o convite para ver o exemplo ---------------------------
   12/09: era uma pílula cinza-claro de 13px, do tamanho de um aviso
   legal. No passo 1 ela é a ÚNICA coisa na tela que responde "o que eu
   estou comprando?", porque a carta da pessoa ainda não existe — e
   desde hoje o "Ver a carta" também não aparece ali.

   Então deixou de ser pílula e virou bloco de largura inteira, com
   título e uma segunda linha. Mais peso, mesma cor: ele precisa ser
   achado, não competir com o "Próximo". */
.ed-exemplo{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:-6px 0 26px;
  padding:15px 16px;
  border:1.5px solid #C9B6F3;
  border-radius:14px;
  /* fundo tingido, não branco: no passo 1 tudo é branco — os campos, o
     balão do mascote, a tarja. Um bloco branco a mais desaparece no
     meio. O tom roxo claro é o mesmo do botão de sugestão, então ele lê
     como "isto é o site te oferecendo algo", não como mais um campo. */
  background:#F5F0FE;
  color:#3E3850;
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease,
             transform .16s ease;
}
.ed-exemplo:hover{
  border-color:#8B5CF6;
  box-shadow:0 4px 14px rgba(92,60,170,.16);
  transform:translateY(-1px);
}
.ed-exemplo-ic{ flex:0 0 auto;font-size:21px;line-height:1; }
.ed-exemplo-txt{ display:block;min-width:0;flex:1 1 auto; }
.ed-exemplo-txt b{
  display:block;font-weight:600;font-size:15.5px;color:#2E2740;
}
.ed-exemplo-txt small{
  display:block;margin-top:3px;font-size:12.5px;color:#6F6688;
}
.ed-exemplo-seta{ flex:0 0 auto;font-size:13px;color:#8B5CF6; }

/* ---------- a barra de baixo sem o "Ver a carta" -------------------
   Enquanto não há foto de capa o botão é `hidden`, e sobram dois. Sem
   isto o Próximo continuaria com a largura de quando eram três e
   ficaria um vão à direita, com cara de botão que sumiu. */
body.sem-ver-carta .ed-nav-in{ gap:10px; }
body.sem-ver-carta #ver-previa{ display:none !important; }

/* ---------- modo de ajuste: sem preço na tela ---------- */
body.modo-ajuste .ed-preco,
body.modo-ajuste .ed-preco-fina{ display:none !important; }

/* aviso dentro do formulário: não é erro (a pessoa pode querer mesmo),
   é uma consequência que ela provavelmente não previu */
.cp-dica--alerta{
  margin:-4px 0 14px;
  padding:10px 12px;
  border-left:3px solid #E9A23B;
  border-radius:0 8px 8px 0;
  background:#FFF7EC;
  color:#7A5A20;
}

/* o aviso de consequência usa a mesma caixa do "seção vazia", com a cor
   trocada: não é uma falta, é uma escolha que talvez surpreenda */
.vazia--aviso{
  border-color:#F0C88A;
  background:#FFF9F0;
}
.vazia--aviso .vazia-tit{ color:#7A5A20; }

/* ---------- guardar o rascunho ----------
   Fica no fim da etapa, com cara de recado e não de formulário: quem
   está montando a carta não pode achar que apareceu mais um campo
   obrigatório no meio do caminho. */
.gd{
  margin:26px 0 0;
  padding:18px 18px 16px;
  border:1px solid #E0D8FA;
  border-radius:14px;
  background:linear-gradient(180deg,#FBFAFF 0%,#F5F2FE 100%);
}
.gd-tit{
  margin:0 0 6px;
  font-size:14.5px; font-weight:600; color:#3D3552;
}
.gd-txt{
  margin:0 0 14px;
  font-size:13px; line-height:1.55; color:#6E6784;
  text-wrap:pretty;
}
.gd-linha{ display:flex; gap:8px; }
.gd-linha input{
  flex:1 1 auto; min-width:0;
  padding:12px 14px;
  /* 16px: abaixo disso o iPhone dá zoom ao focar e a pessoa perde a
     tela de vista no meio da carta */
  font:inherit; font-size:16px; color:#2E2740;
  background:#fff; border:1.5px solid #DDD7EC; border-radius:11px;
}
.gd-linha input:focus{
  outline:none; border-color:#8B5CF6;
  box-shadow:0 0 0 3px rgba(139,92,246,.16);
}
.gd-bt{
  flex:0 0 auto;
  padding:12px 20px;
  border:0; border-radius:11px;
  background:#8B5CF6; color:#fff;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
}
.gd-bt:disabled{ opacity:.6; cursor:default; }
.gd-erro{
  margin:10px 0 0; font-size:12.5px; color:#B3261E;
}
.gd-nao{
  display:block; margin:12px auto 0;
  padding:6px 10px;
  border:0; background:none;
  font:inherit; font-size:12.5px; color:#8B8598;
  text-decoration:underline; cursor:pointer;
}
.gd--ok{
  border-color:#BFE3C8;
  background:linear-gradient(180deg,#F6FCF7 0%,#EFF9F1 100%);
}
.gd--ok .gd-tit{ color:#1A7F37; }

/* aviso em cima dos cartões de plano: um fato que muda a escolha, não
   um empurrão para o plano mais caro */
.pl-aviso{
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid #F0C88A;
  border-left:3px solid #E9A23B;
  border-radius:0 12px 12px 0;
  background:#FFF9F0;
  color:#7A5A20;
  font-size:13.5px;
  line-height:1.6;
  text-wrap:pretty;
}
.pl-aviso b{ color:#5E4416; }

/* ---------- escolher o clima da carta ----------
   Amostra antes de nome: "Vinho" não quer dizer nada até a pessoa ver. */
.cp--tema{
  padding:14px 14px 12px;
  border:1px solid #E3DFEE;
  border-radius:14px;
  background:linear-gradient(180deg,#FBFAFF 0%,#F6F4FD 100%);
}
.cp--tema .cp-rot--forte{ margin-bottom:10px; }
.cp--tema .cp-dica{ margin-top:10px; }
.tm-lista{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.tm{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:10px 6px 9px;
  border:1.5px solid #DDD7EC;
  border-radius:12px;
  background:#fff;
  font:inherit;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.tm:hover{ border-color:#B9A9EC; }
.tm.on{
  border-color:#8B5CF6;
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
/* a amostra é a carta em miniatura: o fundo, uma linha de tinta e uma
   linha do acento — as três coisas que o tema realmente muda */
.tm-am{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  height:44px;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.tm-am i{
  display:block;
  height:3px;
  border-radius:2px;
}
.tm-am i:first-child{ width:56%; }
.tm-am i:last-child{ width:30%; }
.tm-nome{
  font-size:12px;
  font-weight:600;
  color:#3D3552;
  line-height:1.2;
}
.tm.on .tm-nome{ color:#4C2E9E; }

/* ---------- o rodapé do editor ----------
   Discreto, mas presente. Ele não compete com a carta; ele responde a
   pergunta silenciosa de quem conheceu a marca há noventa segundos. */
.ed-pe{
  max-width:560px;
  margin:0 auto;
  padding:34px 20px 40px;
  text-align:center;
  border-top:1px solid #E6E3EF;
}
.ed-pe-marca{
  margin:0 0 14px;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8B8598;
}
.ed-pe-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  margin-bottom:16px;
}
.ed-pe-links a{
  font-size:13px;
  color:#6E6784;
  text-decoration:none;
  border-bottom:1px solid #DDD7EC;
  padding-bottom:1px;
}
.ed-pe-links a:hover{ color:#4C2E9E; border-bottom-color:#8B5CF6; }
.ed-pe-nota{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:#9C97AC;
  text-wrap:pretty;
}
/* no celular a navegação do editor fica presa no rodapé: sem esta folga
   ela cobriria os links justo de quem foi até o fim para achá-los */
@media (max-width:959px){
  .ed-pe{ padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }
}
/* enquanto a prévia em tela cheia está aberta, o rodapé não existe */
body.mostrando-previa .ed-pe,
body.enquadrando .ed-pe,
body.pronto .ed-pe{ display:none; }


/* ---------- o título da capa, agora editável ---------- */
.cp--titulo .tt-campo{
  width:100%;
  padding:12px 14px;
  /* 16px: abaixo disso o iPhone dá zoom ao focar */
  font:inherit; font-size:16px; color:#2E2740;
  background:#fff; border:1.5px solid #DDD7EC; border-radius:11px;
}
.cp--titulo .tt-campo:focus{
  outline:none; border-color:#8B5CF6;
  box-shadow:0 0 0 3px rgba(139,92,246,.16);
}
/* O "outra ideia" da capa é irmão do botão de ideia dos outros campos —
   e estava vestido de link cinza, quase invisível ao lado de um campo
   branco. O título da capa é o único campo do editor que já nasce
   escrito: se o botão de trocar não se anunciar, a pessoa nem descobre
   que pode pedir outra frase, e fica com a primeira que caiu. */
.tt-bt{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px;
  border:1px solid #D8CCF4; border-radius:999px;
  background:#F7F3FE;
  font:500 12.5px/1 'Jost', system-ui, sans-serif;
  color:#5B3FA8;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.tt-bt:hover,
.tt-bt:focus-visible{
  background:#8B5CF6; border-color:#7C3AED; color:#fff;
}

/* ---------- "ver como ficou na carta" ----------
   Mora dentro do bloco da escolha, em tom de link: é um convite, não
   uma etapa. Quem já sabe o que quer passa reto sem nem registrar. */
/* A BORDA TRACEJADA FOI UM ERRO.

   Tracejado, transparente e cinza é o vocabulário de "desativado" — a
   mesma cara de um campo que ainda não pode ser usado. E este é o
   contrário disso: é o único lugar da tela que responde "mas como isso
   fica na prática?", que é a dúvida que trava a escolha.

   Agora é sólido e tem cor, como todo botão de apoio do editor. Ainda
   não compete com o "Próximo" — não deve — mas se parece com algo em
   que dá para tocar. */
.es-ver{
  display:block;
  width:100%;
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid #D8CCF4;
  border-radius:10px;
  background:#F7F3FE;
  font:inherit; font-size:13px; font-weight:500; color:#5B3FA8;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.es-ver:hover,
.es-ver:focus-visible{
  background:#8B5CF6; border-color:#7C3AED; color:#fff;
}

/* a versão "exemplo" do convite: é um link para fora, e precisa parecer
   um — a seta evita a surpresa de a aba trocar sozinha */
.es-ver--exemplo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none;
}
.es-ver-seta{ font-size:11px; opacity:.8; }
.es-ver--exemplo:hover .es-ver-seta{ opacity:1; }


/* =====================================================================
   O RODAPÉ NO COMPUTADOR — ele existia, só que embaixo da barra
   =====================================================================
   No celular a barra do "Próximo" é fixa no pé da tela, e por isso o
   rodapé já tinha 120px de folga embaixo. No computador a barra também
   é fixa — só que ocupando a METADE ESQUERDA da tela — e essa folga
   nunca foi escrita. Resultado: quem rolava até o fim via os links
   entrarem por baixo de uma faixa translúcida com desfoque. Não era um
   rodapé escondido; era um rodapé encoberto, que é pior, porque o
   desfoque faz parecer defeito de renderização.

   A folga aqui é a altura real da barra (16 + botão de ~50 + 16) com
   uma sobra, para o último link nunca encostar nela. */
@media (min-width:960px){
  .ed-pe{ padding-bottom:calc(118px + env(safe-area-inset-bottom, 0px)); }
}
/* (na tela do plano e com a prévia aberta o rodapé nem aparece — isso
   já está resolvido no bloco do rodapé, mais acima) */


/* =====================================================================
   O ENVELOPE DO PRIMEIRO PASSO
   =====================================================================
   Ele é o mesmo envelope da carta publicada (veja carta.css, "envelope
   de abertura") em versão pequena: mesmo papel creme, mesma aba
   triangular, mesmo lacre dourado. Isso é de propósito — a promessa
   que a pessoa vê no primeiro campo tem que ser LITERALMENTE o que ela
   vai receber, senão o envelope da entrada vira propaganda enganosa
   simpática.

   Três diferenças em relação ao original, todas deliberadas:
     · a aba não tem transition nem transform: aqui ela não abre;
     · o lacre não é <button> e não tem cursor:pointer, para ninguém
       tentar clicar e concluir que o site está quebrado;
     · o nome mora no bolso de baixo, como no original — foi lá que ele
       parou de vazar por trás da ponta do triângulo. */

.ed-env-caixa{
  /* -4px encosta o envelope no campo de cima: ele é a RESPOSTA àquele
     campo, e um vão de 22px faria parecer um bloco solto. */
  margin:-4px 0 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
}

.ed-env{
  position:relative;
  width:min(232px,62vw);
  aspect-ratio:3/2;
  /* a flutuação é o que faz o olho encontrar o envelope no celular sem
     precisar de seta, de brilho ou de texto pedindo atenção */
  animation:ed-env-flutua 4.2s ease-in-out infinite alternate;
}
@keyframes ed-env-flutua{ from{transform:translateY(0);} to{transform:translateY(-5px);} }

.ed-env-corpo{
  position:absolute;
  inset:0;
  display:grid;
  align-content:end;
  justify-items:center;
  /* 9%, e não os 11% do envelope grande: aqui a altura inteira é 155px
     e o lacre desce até quase o bolso — dois pontos a menos são o que
     separa o nome do lacre em vez de encavalar os dois. */
  padding-bottom:9%;
  border-radius:3px;
  background:linear-gradient(160deg,#F5EFE3 0%,#E2D7C4 100%);
  box-shadow:0 18px 34px -20px rgba(27,26,34,.55),
             inset 0 0 0 1px rgba(0,0,0,.07);
  overflow:hidden;
}

.ed-env-para{
  margin:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1rem,4vw,1.35rem);
  line-height:1.15;
  color:#2B2318;
  padding:0 14px;
  text-align:center;
  text-wrap:balance;
  /* nome comprido ou colado sem espaço não pode furar o envelope */
  overflow-wrap:anywhere;
}

.ed-env-aba{
  position:absolute;
  top:0; left:0; right:0;
  height:57%;
  background:linear-gradient(172deg,#F0E8D9 0%,#D9CDB6 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.16);
  z-index:2;
}

.ed-env-selo{
  position:absolute;
  /* 55% e não 57%: o lacre nasce na ponta da aba, mas nesta escala
     dois pontos acima dão ao nome o ar que ele precisa embaixo */
  left:50%; top:55%;
  z-index:3;
  transform:translate(-50%,-50%);
  width:34px; height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #E5C476 0%, #A47F2A 70%);
  color:#3B2B09;
  font-size:12px; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 5px 13px rgba(0,0,0,.34),
             inset 0 -2px 6px rgba(0,0,0,.3);
}

.ed-env-nota{
  margin:0;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8B8598;
}

/* Enquanto o nome não existe, o envelope aparece apagado e com o texto
   em cinza: ele já mostra a forma do que vem — que é o que convence a
   digitar — sem fingir que está pronto. */
.ed-env-caixa--vazio .ed-env{ opacity:.6; }
.ed-env-caixa--vazio .ed-env-para{ color:#9A9285; }

@media (prefers-reduced-motion:reduce){
  .ed-env{ animation:none; }
}