/* Funil Vesta (email + checkout) — implementação própria.
   Valores medidos no clone auditado (audit/quiz-mosso/F0*.html). */

/* ── página de E-MAIL ── */
.em-coluna { width: 100%; max-width: 400px; padding: 20px 22px; display: flex; flex-direction: column; overflow: hidden; }
.em-form { display: flex; height: 100%; flex-direction: column; flex: 1; }
.em-miolo { margin-bottom: 26px; flex: 1; }
.em-hdr { position: relative; height: 32px; width: 100%; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.em-retrato { margin: 0 auto 30px; display: flex; height: 264px; width: 188px; justify-content: center; }
.em-retrato .moldura { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: 94px 94px 17px 17px; }
.em-retrato img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; filter: blur(4px); transform: scale(1.06); }
.em-titulo { font-family: 'Libre Caslon Text', serif; font-weight: 400; color: #25252D; text-align: center; margin-bottom: 30px; font-size: 20px; line-height: 1.3; }
.em-campo-wrap { margin-bottom: 30px; }
.em-campo {
  width: 100%; color: #25252D; border-radius: 10px; background: #fff; height: 50px; padding: 0 22px;
  font-size: 16px; outline: none; transition: box-shadow .2s;
}
.em-campo::placeholder { color: #B7B7B7; }
.em-campo:hover, .em-campo:focus { box-shadow: 0 0 0 1px #B32800; }
.em-priv { color: #25252D; display: flex; align-items: center; gap: 10px; font-size: 10px; line-height: 12px; }
.em-priv svg { flex: none; }

/* raspadinha */
.rasp-tela { font-family: 'Libre Caslon Text', serif; display: flex; height: 100%; flex-direction: column; flex: 1; }
.rasp-miolo { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 20px; }
.rasp-titulo { text-align: center; font-size: 24px; line-height: 1.2; font-weight: 500; color: #25252d; }
.rasp-sub { text-align: center; font-size: 16px; line-height: 1.3; color: #25252d; }
.rasp-card { position: relative; flex-shrink: 0; overflow: hidden; width: 300px; height: 400px; border-radius: 26px; }
.rasp-fundo { position: absolute; top: 0; left: 0; width: 300px; height: 400px; border-radius: 26px; overflow: hidden; }
.rasp-fundo > img { display: block; height: 100%; width: 100%; max-width: none; user-select: none; }
.rasp-textos {
  font-family: 'Poppins', sans-serif; position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 16px; padding: 60px 30px;
}
.rasp-textos .pct { font-size: 80px; line-height: 1; font-weight: 600; color: #fff; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .3)); }
.rasp-textos .rot { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.5px; color: #fff; }
.rasp-textos .desc { text-align: center; font-size: 17px; line-height: 130%; font-weight: 600; letter-spacing: -0.5px; color: #fff; }
.rasp-canvas { position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; touch-action: none; display: block; width: 300px; height: 400px; opacity: 1; transition: opacity .3s; }
.rasp-demo { pointer-events: none; position: absolute; inset: 0; z-index: 10; overflow: hidden; border-radius: 26px; }
.rasp-demo .mao { position: absolute; will-change: transform; }

/* revelação (estilo Mosso): card sobe em destaque sobre véu escuro com blur */
.rasp-card { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.rasp-card.destaque { transform: translateY(-80px); z-index: 50; }
.rasp-veu { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / .45); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5); opacity: 0; pointer-events: none; transition: opacity .4s; }
.rasp-veu.visivel { opacity: 1; pointer-events: auto; }
.rasp-cupom { width: 100%; margin-top: 60px; display: flex; align-items: center; gap: 12px; border-radius: 12px; border: 1px solid rgb(255 246 244 / .2); background: rgb(0 0 0 / .2); padding: 17px; opacity: 0; transition: opacity .4s .3s; }
.rasp-card.destaque .rasp-cupom { opacity: 1; }
.rasp-cupom img { flex-shrink: 0; }
.rasp-cupom .cod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: .45px; color: #fff6f4; }
.rasp-aplicado { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 51; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .35s .15s, transform .35s .15s; }
.rasp-aplicado.visivel { opacity: 1; transform: none; }
.rasp-aplicado p { text-align: center; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.35; font-weight: 600; color: rgb(255 255 255 / .9); }
.rasp-anel { position: relative; width: 58px; height: 58px; }
.rasp-anel svg { display: block; transform: rotate(-90deg); transform-origin: center; }
.rasp-anel .arco { transition: stroke-dashoffset 3s linear; }
.rasp-anel .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ── página de CHECKOUT ── */
.ck-pagina { min-height: 100vh; background: #F3F1ED; font-family: 'Poppins', sans-serif; color: #25252D; }
.ck-coluna { margin: 0 auto; width: 100%; max-width: 450px; }
.ck-serif { font-family: 'Libre Caslon Text', serif; font-weight: 400; }

/* topbar */
.ck-topo { background: #d4a574; position: sticky; top: 0; z-index: 20; padding: 15px 0; }
.ck-topo-linha { padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ck-topo .rotulo { text-align: center; font-size: 9px; font-weight: 500; color: #fff; }
.ck-topo .tempo { display: flex; align-items: center; justify-content: center; gap: 3px; color: #fff; }
.ck-topo .tempo .dig { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-topo .tempo .sep { font-size: 23px; font-weight: 700; }
.ck-cta-topo {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 0 6px 0 #0000001A; font-size: 18px; padding: 0 20px; min-height: 35px; font-weight: 600;
  font-family: 'Poppins', sans-serif; background: #25252D; color: #fff; border-radius: 9999px; text-align: center;
  animation: pulse-button 1.5s infinite;
}
@keyframes pulse-button {
  0% { transform: scale(.98); box-shadow: 0 0 #fff6; }
  70% { transform: scale(1); box-shadow: 0 0 0 6px #fff0; }
  100% { transform: scale(.98); box-shadow: 0 0 #fff0; }
}

/* hero antes/depois */
.ck-hero { margin-top: 14px; display: flex; flex-direction: column; gap: 32px; background: #fff; padding: 0 20px 30px; }
.ck-antes-depois { display: flex; flex-direction: row; gap: 13px; }
.ck-ad-col { width: 100%; position: relative; }
.ck-ad-col > img { margin: -20px auto 0; width: 161px; height: auto; }
.ck-ad-caixa { position: relative; margin-top: -30px; display: flex; flex-direction: column; gap: 10px; border-radius: 0 0 10px 10px; padding: 20px 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }
.ck-ad-caixa.cinza { background: #EBEAE9; }
.ck-ad-caixa.creme { background: #F8EDE0; }
.ck-ad-caixa .grupo { display: flex; flex-direction: column; gap: 5px; }
.ck-ad-caixa .grupo .t { font-size: 10px; line-height: 130%; }
.ck-ad-caixa .grupo .v { font-size: 12px; line-height: 130%; font-weight: 600; }
.ck-ad-caixa hr { height: 1px; width: 100%; background: #fff; border: 0; }
.ck-ad-caixa .barras { display: flex; gap: 10px; margin-top: 12px; }
.ck-ad-caixa .barras div { height: 2px; width: 100%; background: #fff; }
.ck-ad-caixa .barras .ruim { background: #B32800; }
.ck-ad-caixa .barras .bom { background: #2E7D32; }

/* botões grandes */
.ck-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font-family: 'Poppins', sans-serif; font-weight: 400; background: #25252D; color: #fff;
  font-size: 20px; padding: 14px 20px; min-height: 62px; border-radius: 9999px;
  box-shadow: 0 0 6px 0 #0000001A; text-align: center;
  animation: pulse-button 1.5s infinite;
}

/* texto legal do pagamento (abaixo do Total today, como no Mosso) */
.pg2-legal { margin-top: 12px; font-size: 12px; line-height: 1.5; color: #8B8B8B; text-align: center; }
.pg2-legal a { color: inherit; text-decoration: underline; }


/* card 28 dias */
.ck-sec-branca { padding: 0 20px 40px; background: #fff; }
.ck-card28 { display: flex; flex-direction: column; gap: 30px; border-radius: 10px; background: #F8EDE0; padding: 20px 0; filter: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08)); }
.ck-card28 h1 { font-family: 'Libre Caslon Text', serif; font-weight: 400; color: #25252D; font-size: 25px; text-align: center; padding: 0 13px; }
.ck-card28 .lista { margin: 0 auto; max-width: 275px; display: flex; flex-direction: column; gap: 16px; }
.ck-card28 .item { display: flex; gap: 10px; }
.ck-card28 .item > img { width: 22px; height: 20px; margin-bottom: auto; }
.ck-card28 .item .textos { display: flex; flex-direction: column; gap: 8px; }
.ck-card28 .item .rot { font-size: 16px; line-height: 20px; font-weight: 500; }
.ck-card28 .item .borrado { font-size: 16px; line-height: 130%; font-weight: 600; filter: blur(7px); }
.ck-bolha-cor { position: relative; height: 46px; width: 46px; }
.ck-bolha-cor .mancha { position: absolute; top: 50%; left: 50%; height: 24px; width: 24px; margin: -10px; border-radius: 9999px; box-shadow: 2px 2px 6px 0 #00000026; filter: blur(10px); }
.ck-bolha-cor .tampa { position: relative; z-index: 10; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #fff; background: rgb(255 255 255 / .9); }
.ck-bolhas { display: flex; flex-direction: row; gap: 12px; }
.ck-planner { position: relative; }
.ck-planner img.foto { width: 100%; border-radius: 8px; filter: blur(3px); }
.ck-planner .revelar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgb(255 255 255 / .75); border-radius: 9999px; padding: 12px 22px;
  font-size: 18px; font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgb(0 0 0 / .1);
}
.ck-sugestoes { display: flex; gap: 10px; }
.ck-sugestoes img { width: 100%; min-width: 0; border-radius: 8px; filter: blur(4px); }
.ck-cadeados { display: flex; gap: 12px; }
.ck-cadeado { display: flex; height: 56px; width: 56px; flex: none; align-items: center; justify-content: center; border-radius: 9999px; background: #FDF9F5; }
.ck-cadeado svg { opacity: .45; }

/* seção creme com planos */
.ck-sec-creme { background: #F8EDE0; padding: 40px 20px; display: flex; flex-direction: column; gap: 26px; }
.ck-h2 { font-family: 'Libre Caslon Text', serif; font-weight: 400; color: #25252D; text-align: center; font-size: 26px; line-height: 1.25; }
.ck-h2 .italico { color: #B32800; font-style: italic; }
.ck-promo { border-radius: 10px; background: #FDF6EC; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ck-promo .linha1 { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }
.ck-promo .linha2 { display: flex; align-items: stretch; gap: 10px; }
.ck-promo .codigo { flex: 1; display: flex; align-items: center; gap: 8px; background: #FFFDF9; border: 1px solid #EFE6D8; border-radius: 8px; padding: 10px 14px; font-size: 15px; }
.ck-promo .codigo .ok { color: #2E7D32; font-weight: 700; }
.ck-promo .relogio { background: #25252D; color: #fff; border-radius: 6px; padding: 6px 10px; text-align: center; min-width: 74px; }
.ck-promo .relogio .nums { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; justify-content: center; gap: 2px; }
.ck-promo .relogio .rots { display: flex; justify-content: space-between; font-size: 10px; opacity: .85; padding: 0 4px; }

/* planos (layout do original: nome+preços à esquerda, etiqueta por dia à direita) */
.ck-planos { display: flex; flex-direction: column; gap: 16px; }
.ck-plano { position: relative; width: 100%; border-radius: 10px; border: 1px solid #E8E2DA; background: #FDF9F5; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.ck-plano.marcado { border-color: #B32800; }
.ck-plano .esq { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ck-plano .linha-nome { display: flex; align-items: center; gap: 10px; }
.ck-plano .radio { width: 20px; height: 20px; border-radius: 9999px; border: 2px solid #E1DAD1; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; }
.ck-plano.marcado .radio { border-color: #B32800; }
.ck-plano.marcado .radio::after { content: ''; width: 10px; height: 10px; border-radius: 9999px; background: #B32800; }
.ck-plano .nome { font-size: 18px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.ck-plano .precos { display: block; font-size: 14px; padding-left: 30px; }
.ck-plano .precos .velho { color: #B32800; text-decoration: line-through; margin-right: 4px; }
.ck-plano .primeiras { display: block; font-size: 12px; padding-left: 30px; color: #25252D; }
.ck-plano .etiqueta {
  flex: none; background: #fff; border-radius: 8px; padding: 10px 12px 10px 16px; text-align: center;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  box-shadow: 0 1px 3px 0 #0000000D, 0 1px 2px -1px #0000000D;
  display: flex; flex-direction: column; gap: 2px; min-width: 92px;
}
.ck-plano .etiqueta .valor { font-size: 18px; font-weight: 700; }
.ck-plano .etiqueta .rot { font-size: 10px; line-height: 1.25; color: #4c4c4c; }
.ck-plano-wrap { position: relative; }
.ck-plano-wrap.popular { border: 2px solid #B32800; border-radius: 10px; overflow: hidden; }
.ck-plano-wrap.popular .faixa { background: #B32800; color: #fff; text-align: center; font-size: 14px; font-weight: 500; padding: 5px 0; }
.ck-plano-wrap.popular .ck-plano { border: 0; border-radius: 0; }
/* botão dentro do card de recurso (Tailored color palette) */
.ck-cta-mini {
  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto;
  font-family: 'Poppins', sans-serif; background: #25252D; color: #fff; font-size: 15px; font-weight: 500;
  padding: 10px 24px; border-radius: 9999px; box-shadow: 0 0 6px 0 #0000001A;
  animation: pulse-button 1.5s infinite;
}
/* paleta borrada atrás do botão do card Tailored (igual ao original) */
.ck-paleta-wrap { position: relative; display: inline-block; align-self: center; margin: 0 auto; }
.ck-paleta-wrap .cor { position: absolute; width: 40px; height: 40px; border-radius: 9999px; filter: blur(12px); opacity: .9; }
.ck-paleta-wrap .ck-cta-mini { position: relative; z-index: 1; }

/* mix & match: peças flutuando sobre a base */
.ck-mix { position: relative; margin-bottom: 26px; }
.ck-mix img.foto { width: 100%; border-radius: 12px; }
.ck-mix .pecas { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); display: flex; gap: 6px; }
.ck-mix .peca { background: #fff; border-radius: 6px; padding: 4px; box-shadow: 0 4px 10px rgb(0 0 0 / .12); }
.ck-mix .peca img { width: 52px; height: 52px; object-fit: contain; }
/* envelope do e-book bônus: anima entrada/saída e viaja pra baixo do plano marcado.
   padding-top 16 + margin-top -16 abrigam o "+" (top:-16px) sem que o overflow:hidden o corte;
   fechado, margin-top -32 também engole o gap de 16px do .ck-planos */
.ck-ebook-envelope { box-sizing: border-box; overflow: hidden; padding-top: 16px; margin-top: -16px;
  transition: height .35s ease, opacity .35s ease, margin-top .35s ease; }
.ck-ebook { position: relative; border-radius: 12px; background: #fff; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.ck-ebook .mais { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #fff; color: #B32800; width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; }
.ck-ebook img.capa { width: 57px; height: auto; border-radius: 4px; }
.ck-ebook .textos { flex: 1; min-width: 0; text-align: left; } .ck-ebook .textos > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-ebook .velho { color: #8A8A8A; text-decoration: line-through; font-size: 14px; margin-right: 6px; }
.ck-ebook .selo { display: inline-flex; align-items: center; gap: 5px; background: #F8E2DC; color: #B32800; font-weight: 700; font-size: 13px; border-radius: 6px; padding: 3px 8px; }
.ck-ebook .selo img { width: 14px; height: 14px; }
.ck-ebook .tit { font-size: 14px; font-weight: 600; margin-top: 6px; }
.ck-ebook .sub { font-size: 12px; color: #4c4c4c; margin-top: 2px; }
.ck-legal { color: #8B8B8B; text-align: center; font-size: 12px; line-height: 1.5; }
.ck-legal a { color: inherit; text-decoration: underline; }
.ck-seguro { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 16px; }
.ck-seguro .linha { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ck-seguro .linha img { width: 22px; height: 25px; }
.ck-seguro .bandeiras { display: flex; align-items: center; gap: 10px; }
.ck-seguro .bandeiras img { height: 18px; width: auto; }
.ck-seguro .cripto { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ck-seguro .cripto img { width: 16px; height: 19px; }

/* confiança */
.ck-sec-confianca { background: #fff; padding: 36px 20px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.ck-sec-confianca img.grupo { width: 240px; height: auto; }
.ck-sec-confianca .frase { font-family: 'Libre Caslon Text', serif; text-align: center; font-size: 22px; line-height: 1.3; }

/* seção cinza com cards de recurso */
.ck-sec-cinza { background: #F3F1ED; padding: 36px 20px; display: flex; flex-direction: column; gap: 20px; }
.ck-card-rec { border-radius: 14px; background: #FBFAF8; padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; }
.ck-card-rec .titulo { font-family: 'Poppins', sans-serif; color: #25252D; line-height: 1.3; text-align: center; font-size: 19px; font-weight: 600; }
.ck-card-rec img.foto { width: 100%; border-radius: 12px; }
.ck-card-rec .texto { text-align: center; font-size: 15px; line-height: 1.45; }
.ck-leque { position: relative; height: 400px; }
.ck-leque img { position: absolute; border-radius: 12px; }
.ck-circulos { display: flex; flex-direction: column; gap: 26px; padding: 8px 0; }
.ck-circulo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ck-circulo .foto { width: 270px; max-width: 85%; aspect-ratio: 1; border-radius: 9999px; overflow: hidden; background: #fff; padding: 0; box-shadow: 0 0 0 8px #FBFAF8; }
.ck-circulo .foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.ck-circulo .frase { text-align: center; font-size: 19px; line-height: 1.3; }
.ck-circulo .frase b { font-weight: 600; }

/* depoimentos */
.ck-depos { display: flex; flex-direction: column; gap: 16px; }
.ck-depo { border-radius: 14px; border: 1px solid #fff; background: #F3F1ED; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ck-depo .cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-depo .quem { display: flex; align-items: center; gap: 10px; }
.ck-depo .quem img { width: 38px; height: 38px; border-radius: 9999px; object-fit: cover; }
.ck-depo .nome { font-size: 16px; font-weight: 600; white-space: nowrap; }
.ck-depo .estrelas { width: 106px; height: auto; flex: none; }
.ck-depo .fala { font-size: 15px; line-height: 1.5; color: #25252D; }

/* aviso de pagamento indisponível */
.ck-aviso { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  background: #25252D; color: #fff; border-radius: 10px; padding: 14px 22px; font-size: 15px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25); opacity: 0; transition: opacity .25s; max-width: 90%; text-align: center; }
.ck-aviso.visivel { opacity: 1; }

/* ═══ modal de pagamento (Stripe Embedded Checkout) ═══ */
.pg-overlay { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .55);
  display: flex; align-items: flex-end; justify-content: center; animation: pg-fade .2s ease; }
@keyframes pg-fade { from { opacity: 0; } to { opacity: 1; } }
.pg-sheet { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  background: #FBFAF8; border-radius: 18px 18px 0 0; padding: 22px 16px 28px;
  animation: pg-sobe .28s ease; }
@keyframes pg-sobe { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 560px) {
  .pg-overlay { align-items: center; padding: 24px; }
  .pg-sheet { border-radius: 18px; }
}
.pg-fechar { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0;
  border-radius: 9999px; background: #F3F1ED; color: #25252D; font-size: 22px; line-height: 1;
  cursor: pointer; }
.pg-fechar:hover { background: #E9E6E0; }
.pg-cab { padding: 4px 40px 14px 4px; }
.pg-cab .tit { font-family: 'Libre Caslon Text', serif; font-size: 20px; color: #25252D; margin: 0 0 4px; }
.pg-cab .sub { font-size: 13px; line-height: 1.45; color: #6B6B70; margin: 0; }
.pg-corpo { min-height: 220px; }
.pg-carregando { text-align: center; color: #6B6B70; font-size: 14px; padding: 60px 0; }
.pg-erro { text-align: center; color: #B32800; font-size: 14px; line-height: 1.5; padding: 40px 12px; }
.pg-sucesso { text-align: center; padding: 34px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pg-sucesso .check { width: 64px; height: 64px; border-radius: 9999px; background: #2E7D32; color: #fff;
  font-size: 34px; line-height: 64px; }
.pg-sucesso h3 { font-family: 'Libre Caslon Text', serif; font-size: 22px; color: #25252D; margin: 0; }
.pg-sucesso .msg { font-size: 14px; line-height: 1.5; color: #25252D; margin: 0 0 6px; }
.pg-sucesso a.ck-cta { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; margin-top: 6px; }
/* recibo (05/09): e-mail da conta, 3 passos e nota — tudo dentro da coluna do pagamento */
.pg-sucesso .check { animation: check-pop .55s cubic-bezier(.34,1.56,.64,1) both; position: relative; }
.pg-sucesso .check::after { /* onda que se expande e some */
  content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 3px solid #2E7D32;
  animation: check-onda 1s ease-out .35s both; pointer-events: none; }
.pg-sucesso .check svg { display: block; }
.pg-sucesso .check svg path { /* o traço do ✓ se desenha da esquerda pra direita */
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: check-traco .45s cubic-bezier(.65,0,.45,1) .4s forwards; }
@keyframes check-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes check-traco { to { stroke-dashoffset: 0; } }
@keyframes check-onda { from { transform: scale(1); opacity: .6; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pg-sucesso .check, .pg-sucesso .check::after, .pg-sucesso .check svg path { animation: none; stroke-dashoffset: 0; }
}
.pg-sucesso-email { width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: #fff; border-radius: 12px; padding: 12px 16px; margin-top: 4px; }
.pg-sucesso-email .rot { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8F; }
.pg-sucesso-email b { font-size: 16px; color: #25252D; word-break: break-all; }
.pg-sucesso-passos { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 6px 0 4px; }
.pg-sucesso-passos .linha { display: flex; align-items: center; gap: 12px; }
.pg-sucesso-passos .n { flex: none; width: 26px; height: 26px; border-radius: 9999px; background: #B32800; color: #fff;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.pg-sucesso-passos p { margin: 0; font-size: 15px; color: #25252D; }
.pg-sucesso-nota { font-size: 12px; color: #8A8A8F; line-height: 1.5; margin: 4px 0 0; }

/* ═══ pg2 — página de pagamento (Payment Element, estilo do original) ═══ */
.pg2-pagina {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  background: #FFFFFF; -webkit-overflow-scrolling: touch;   /* fundo branco; a coluna creme vira um cartão (igual ao original) */
  padding: 18px 12px 48px;
}
.pg2-coluna {
  max-width: 460px; margin: 0 auto; padding: 18px 16px 40px;
  background: #F5F2EE; border-radius: 18px;   /* creme quente exato do Mosso */
}
.pg2-passos { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 18px; }
.pg2-passo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pg2-passo .bola { width: 12px; height: 12px; border-radius: 50%; background: #D9D4CC; }
.pg2-passo.feito .bola { background: #B32800; }
.pg2-passo .rot { font-size: 11.5px; color: #6B6B70; white-space: nowrap; }
.pg2-passo.feito .rot { color: #25252D; }
.pg2-linha { flex: 1; max-width: 110px; height: 2px; background: #B32800; opacity: .55; margin-bottom: 18px; }
.pg2-voltar {
  background: none; border: 0; cursor: pointer; padding: 4px 0 12px;
  font-size: 14.5px; color: #25252D; font-family: inherit;
}
.pg2-card { background: #FFFFFF; border-radius: 14px; padding: 18px 18px 6px; }
.pg2-tit { font-weight: 700; font-size: 17px; margin: 0 0 12px; }
.pg2-linha-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #EFECE7; font-size: 14.5px;
}
.pg2-linha-item:last-child { border-bottom: 0; }
.pg2-linha-item .mini { font-size: 11.5px; color: #9B9B9B; margin-top: 2px; }
.pg2-linha-item .dir { white-space: nowrap; text-align: right; }
.pg2-linha-item .velho { color: #9B9B9B; text-decoration: line-through; margin-right: 4px; }
.pg2-linha-item.desconto { color: #C6231A; font-weight: 600; }
.pg2-linha-item.total { border-top: 1px solid #E3DFD8; font-size: 15.5px; }
.selo-free {
  background: #FBE9E4; color: #B32800; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px;
}
/* e-mail sem caixa (igual Mosso): "Email:" à esquerda, endereço + lápis à direita */
.pg2-email { background: transparent; padding: 14px 2px; margin-top: 6px; font-size: 15px; border-bottom: 1px solid #E4E0DA; }
.pg2-email .rot { color: #25252D; font-weight: 500; flex: none; }
.pg2-email .dir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pg2-email .dir b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg2-email .mini { font-size: 12px; color: #9B9B9B; font-style: italic; margin-top: 6px; }
.pg2-stripe { margin-top: 4px; }
.pg2-carregando { text-align: center; color: #6B6B70; padding: 40px 0 20px; font-size: 14px; }
.pg2-erro { color: #C6231A; font-size: 13.5px; text-align: center; margin: 10px 0 0; }
/* no overlay do Mosso o botão é retângulo arredondado estático (sem pílula/pulso) */
.pg2-pagar { width: 100%; margin-top: 16px; border-radius: 14px; animation: none; font-size: 18px; font-weight: 500; min-height: 58px; }
/* selo de segurança do overlay: textos menores que os do checkout */
.pg2-pagina .ck-seguro .linha { font-size: 15px; }
.pg2-pagina .ck-seguro .cripto { font-size: 13px; }
.pg2-pagar[disabled] { opacity: .55; cursor: default; }
.pg2-legal { font-size: 11px; color: #9B9B9B; line-height: 1.55; margin-top: 14px; }
.pg2-legal a { color: #6B6B70; }

/* pg2 — carteiras + divisor + cabeçalho do cartão */
#pg2-express { margin-bottom: 6px; }
.pg2-ou { display: flex; align-items: center; gap: 14px; color: #25252D; font-size: 15px; font-weight: 600; margin: 20px 0 16px; }
.pg2-ou span { flex: 1; height: 1px; background: #25252D; }
.pg2-cartao-cab { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; }
.pg2-cartao-cab .rot { font-weight: 600; font-size: 16px; }
.pg2-cartao-cab .bandeiras { display: flex; gap: 6px; align-items: center; }
.pg2-cartao-cab .bandeiras img { height: 21px; }
.pg2-ou[hidden], #pg2-express[hidden] { display: none; }

/* pg2 — edição de e-mail (lápis) */
.pg2-email .linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg2-editar {
  background: none; border: 0; cursor: pointer; color: #6B6B70; padding: 4px;
  display: inline-flex; align-items: center;
}
.pg2-editar:hover { color: #B32800; }
.pg2-email-input {
  flex: 1; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid #D9D4CC; border-radius: 8px; background: #fff; min-width: 0;
}
.pg2-salvar {
  background: #25252D; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
/* página de pagamento pré-montada: invisível mas COM layout (a Stripe precisa
   medir pra desenhar os campos; display:none faria o iframe nascer com 0px) */
.pg2-pagina.pg2-oculta { z-index: -1; opacity: .01; pointer-events: none; }

/* ── "processando" pós-pagar: cobre a página de pagamento, 3 etapas ── */
.pg2-proc { position: fixed; inset: 0; z-index: 70; background: #F3F1ED; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 34px; padding: 24px; }
/* sem fade de entrada de propósito: animação parada em t=0 (aba em 2º plano) deixaria
   o painel invisível com o formulário à mostra — o fundo tem que ser sólido na hora */
.pg2-proc.saindo { animation: proc-sai .25s ease-in both; }
.pg2-proc-logo { width: 132px; height: 14px; object-fit: contain; opacity: .9; }
.pg2-proc-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; width: min(320px, 100%); }
.pg2-proc-etapas li { display: flex; align-items: center; gap: 14px; color: #8A8A8F; font-size: 16px; transition: color .25s; }
.pg2-proc-etapas li.ativa, .pg2-proc-etapas li.feita { color: #25252D; }
.pg2-proc-etapas .proc-marca { flex: none; width: 24px; height: 24px; border-radius: 9999px; border: 2px solid #DDD5CB; position: relative; transition: background .25s, border-color .25s; }
.pg2-proc-etapas li.ativa .proc-marca { border-color: #E8D9CF; border-top-color: #B32800; animation: proc-gira .8s linear infinite; }
.pg2-proc-etapas li.feita .proc-marca { background: #2E7D32; border-color: #2E7D32; }
.pg2-proc-etapas li.feita .proc-marca::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }   /* sem animação: precisa aparecer mesmo com a aba congelada */
@keyframes proc-gira { to { transform: rotate(360deg); } }
@keyframes proc-sai { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg2-proc, .pg2-proc-etapas li.ativa .proc-marca { animation: none; } }