/* ============================================================
   Artimind — golden-sky-reunion funnel clone (pt-BR)
   Design tokens extracted from the live site.
   ============================================================ */
:root{
  --bg:#000000;
  --primary:#F8545D;      /* coral */
  --secondary:#FFA230;    /* amber */
  --maroon:#42050A;       /* card bg */
  --maroon-line:#820813;  /* progress / selected border / badge */
  --text:#FFFFFF;
  --text-dim:rgba(255,255,255,.62);
  --text-dim2:rgba(255,255,255,.45);
  --btn-active-bg:#FFFFFF;
  --btn-active-fg:#000000;
  --btn-dark-bg:#111111;
  --surface:#100F0F;
  --radius:16px;
  --col: 450px;
  --pad: 24px;
  --font: -apple-system, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
s{ text-decoration:line-through; }

#app{
  width:min(var(--col),100vw);
  height:100dvh;
  margin:0 auto;
  position:relative;
  background:var(--bg);
  overflow:hidden;
}

/* ---------- Screens ---------- */
.screen{ position:absolute; inset:0; display:none; flex-direction:column; }
.screen.is-active{ display:flex; animation:screenIn .45s ease; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.screen__scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:14px var(--pad) 24px;
  -webkit-overflow-scrolling:touch;
}
.screen__scroll.center{ display:flex; flex-direction:column; align-items:center; }
.screen__scroll::-webkit-scrollbar{ width:0; }

/* Tela 1: agrupa logo+card+CTA no centro vertical p/ o botao "abracar" o card
   (some o vao grande em telas altas; em telas curtas volta a rolar normal) */
#screen-1{ justify-content:center; }
#screen-1 .screen__scroll{ flex:0 1 auto; }

/* ---------- Badge ---------- */
.badge{ width:100%; display:flex; justify-content:center; padding:10px 0 16px; }
.badge img{ height:60px; width:auto; max-width:82%; }

/* ---------- Headings ---------- */
.heading{
  font-size:22px; font-weight:700; line-height:1.25; text-align:center;
  letter-spacing:-.01em; margin:8px 0 18px; max-width:380px;
}
.heading .accent{ color:#D32231; } /* measured email-accent red */
.subhead{ font-size:14px; color:var(--text-dim); text-align:center; margin-top:8px; }
.section-title{ font-size:18px; font-weight:700; line-height:1.3; text-align:center; margin:26px 0 16px; }

/* ---------- CTA buttons ---------- */
.cta-dock{
  flex:0 0 auto; padding:12px var(--pad) max(24px,env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 55%, transparent);
}
.cta{
  width:100%; height:58px; flex-shrink:0; border-radius:999px;
  background:var(--btn-active-bg); color:var(--btn-active-fg);
  font-size:17px; font-weight:700; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, opacity .2s ease, background .2s ease;
}
.cta:active{ transform:scale(.98); }
.cta--inline{ margin:4px 0 0; }
.cta--pulse{ animation:pulse 1.4s infinite; }
@keyframes pulse{       /* measured: 1.4s, base shadow .6 -> 8px transparent + scale 1.01 */
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); transform:scale(1); }
  100%{ box-shadow:0 0 0 8px rgba(255,255,255,0); transform:scale(1.01); }
}
.cta.is-disabled,.cta:disabled{
  background:rgba(255,255,255,.85); color:rgba(0,0,0,.42);
  animation:none; cursor:not-allowed;
}
.cta.is-hidden{ opacity:0; pointer-events:none; }
/* High-visibility money button: warm coral→amber gradient + glow + pulse */
.cta--subscribe{
  background:linear-gradient(135deg, #FF7A4D 0%, #F8545D 48%, #FFA230 100%);
  color:#fff; font-size:19px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  height:62px; margin-top:8px; border:none;
  box-shadow:0 10px 26px rgba(248,84,93,.42), 0 2px 6px rgba(0,0,0,.35);
  animation:pulseSub 1.6s ease-in-out infinite;
}
@keyframes pulseSub{
  0%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 0 rgba(255,162,48,.55); transform:scale(1); }
  70%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 14px rgba(255,162,48,0); transform:scale(1.015); }
  100%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 0 rgba(255,162,48,0); transform:scale(1); }
}
.cta--subscribe:active{ transform:scale(.985); }

/* ---------- Maroon card + carousel (screen 1) ---------- */
.maroon-card{
  width:100%; max-width:402px; background:var(--maroon);
  border-radius:var(--radius); padding:18px 14px 16px; margin-top:6px;
  overflow:hidden;
}
.maroon-card__title{
  font-size:20px; font-weight:700; line-height:1.25; text-align:center;
  margin:0 4px 14px;
}
.carousel{ width:100%; overflow:hidden; }
.carousel__track{ display:flex; align-items:center; will-change:transform; transition:transform .6s cubic-bezier(.4,.0,.2,1); }
.carousel__slide{
  flex:0 0 76%; padding:0 6px; transition:transform .6s cubic-bezier(.4,.0,.2,1), opacity .6s ease;
  transform:scale(.84); opacity:.45;
}
.carousel__slide.is-center{ transform:scale(1); opacity:1; }
.carousel__slide img{ width:100%; height:auto; border-radius:20px; aspect-ratio:941/1672; object-fit:cover; }
.carousel--mini .carousel__slide{ flex-basis:62%; }

/* ---------- Uploads (screen 2) ---------- */
.uploads{ width:100%; max-width:402px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.upload{
  position:relative; aspect-ratio:118/164; border-radius:15px;
  border:2px dashed #555;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(255,255,255,.02); overflow:hidden; text-align:center;
  transition:border-color .2s ease;
}
.upload.has-photo{ border-style:solid; border-color:transparent; }
.upload__plus{ font-size:34px; font-weight:300; color:#fff; line-height:1; }
.upload__label{ font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; }
.upload__change{
  position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center;
  padding-bottom:14px; font-size:12px; font-weight:700; letter-spacing:.05em; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.upload.has-photo .upload__plus,.upload.has-photo .upload__label{ display:none; }
.upload.has-photo .upload__change{ display:flex; }
.upload__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Templates gallery ---------- */
.templates{ position:relative; width:100%; max-width:402px; margin:0 auto; }
.templates img{ width:100%; height:auto; border-radius:12px; }
/* Eterniza icon overlay covering the source app-icon baked into the collage center */
.templates img.templates__logo{ position:absolute; left:50%; top:86.5%; transform:translate(-50%,-50%); width:26.5%; border-radius:0; }

/* ---------- Loading (screen 3) ---------- */
.loading-screen{ justify-content:space-between; min-height:100%; padding-top:40px; padding-bottom:48px; }
.loading-head{ display:flex; flex-direction:column; align-items:center; }
.loading-example{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.loading-example__cap{ font-size:13px; color:var(--text-dim); text-align:center; max-width:280px; line-height:1.4; }
.loading-example__vid{
  height:min(42vh,380px); aspect-ratio:9/16; width:auto; display:block;
  border-radius:16px; object-fit:cover; background:#000;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}

/* ===== Overrides do funil PET (body.pet) — não afeta o funil principal ===== */
/* Tela 1: conteúdo alinhado ao TOPO (em vez de centralizado) */
body.pet #screen-1{ justify-content:flex-start; }
/* Tela 3 (loading): conteúdo flui do topo (vídeo colado no título) + barras no rodapé + vídeo maior */
body.pet .loading-screen{ justify-content:flex-start; }
body.pet .loading-example{ margin-top:18px; }
body.pet .bars{ margin-top:auto; }
body.pet .loading-example__vid{ height:min(50vh,440px); }
.bars{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:20px; }
.bar__top{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; margin-bottom:8px; }
.bar__pct{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.bar.is-done .bar__pct{ color:#3ddc6f; }
.bar__track{ height:5px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; }
.bar__fill{ height:100%; width:0; background:var(--maroon-line); border-radius:6px; transition:width .25s linear; }

/* ===== Overrides do funil RESTAURAÇÃO (body.restauro) — vídeo em destaque + tipografia de conversão ===== */
/* fundo com brilho quente sutil atrás do vídeo (tira o preto puro, dá profundidade) */
body.restauro #screen-3{ background:radial-gradient(120% 58% at 50% 32%, rgba(126,90,32,.17), rgba(0,0,0,0) 62%); }
/* fluxo do topo: vídeo colado no título, barras ancoradas no rodapé -> some o espaço vazio */
body.restauro .loading-screen{ justify-content:flex-start; padding-top:30px; padding-bottom:44px; }
body.restauro .loading-head{ gap:7px; }
body.restauro .heading{ font-size:27px; font-weight:800; letter-spacing:-.022em; line-height:1.16; max-width:430px; margin:4px 0 6px; text-wrap:balance; }
body.restauro .subhead{ font-size:14.5px; color:rgba(255,255,255,.74); max-width:340px; line-height:1.45; text-wrap:balance; }
body.restauro .loading-example{ margin-top:22px; gap:14px; }
body.restauro .loading-example__cap{ font-size:13.5px; color:rgba(255,255,255,.72); }
/* vídeo HERO: bem maior + moldura quente com brilho (foco/destaque = conversão) */
body.restauro .loading-example__vid{
  height:min(60vh,580px); border-radius:20px;
  border:1px solid rgba(233,203,142,.28);
  box-shadow:0 0 70px rgba(216,170,88,.22), 0 24px 56px rgba(0,0,0,.62);
}
/* barras no rodapé + preenchimento dourado (a cor "voltando" à foto) */
body.restauro .bars{ margin-top:auto; max-width:400px; padding-top:24px; }
body.restauro .bar__top{ font-size:14.5px; }
body.restauro .bar__track{ height:6px; background:rgba(255,255,255,.10); }
body.restauro .bar__fill{ background:linear-gradient(90deg,#B47B1E,#E8C25A); }

/* Tela 1 (abertura) — prova social em destaque + value prop com presença */
body.restauro #screen-1{ background:radial-gradient(120% 55% at 50% 28%, rgba(126,90,32,.16), rgba(0,0,0,0) 60%); }
body.restauro .badge{ padding:8px 0 12px; }
/* card premium quente (em vez do maroon vermelho) com fio dourado — casa com os slides */
body.restauro .maroon-card{
  max-width:424px; background:linear-gradient(180deg,#1b1512,#131010);
  border:1px solid rgba(233,203,142,.18); box-shadow:0 22px 54px rgba(0,0,0,.5);
  padding:22px 14px 18px;
}
body.restauro .maroon-card__title{
  font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.22;
  margin:0 2px 18px; text-wrap:balance;
}
/* slide central maior + brilho quente (mesmo destaque do vídeo da tela de loading) */
body.restauro .carousel__slide{ flex-basis:82%; }
body.restauro .carousel__slide.is-center img{ box-shadow:0 0 52px rgba(216,170,88,.18), 0 16px 40px rgba(0,0,0,.55); }
/* CTA de abertura: um pouco maior e com leve brilho quente (mantém branco p/ contraste) */
body.restauro .cta-dock{ background:linear-gradient(to top, var(--bg) 62%, transparent); }
body.restauro #screen-1 .cta{ height:60px; font-size:17.5px; }

/* ---------- Wheel (screen 4) ---------- */
/* centraliza verticalmente o conteúdo da roleta -> roda no meio + botão mais perto (safe: em tela curta volta pro topo e rola) */
#screen-4 .screen__scroll{ justify-content:safe center; }
.wheel-copy{ font-size:14px; line-height:1.5; text-align:center; color:rgba(255,255,255,.72); max-width:320px; margin:2px auto 12px; }
.wheel-stage{ position:relative; width:min(330px,84vw); aspect-ratio:1; margin:8px auto 6px; display:flex; align-items:center; justify-content:center; }
.wheel-glow{
  position:absolute; inset:-6%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,162,48,.0) 52%, rgba(255,162,48,.65) 66%, rgba(255,162,48,0) 80%);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.wheel-stage.is-won .wheel-glow{ opacity:1; animation:glowPulse 1.6s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.04); opacity:1; } }
.wheel-pointer{
  position:absolute; top:-2px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:20px solid #fff; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.wheel-wrap{ position:relative; width:100%; height:100%; }
.wheel{ width:100%; height:100%; display:block; transform:rotate(0deg); }
.wheel-wrap.is-spinning .wheel{ transition:transform 4.2s cubic-bezier(.17,.67,.16,.99); }
.wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.wheel-hub::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--maroon); }
.wheel-hint{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--text-dim); text-align:center; margin:14px 0; transition:opacity .3s; }
.wheel-hint.is-hidden{ opacity:0; }
.win-card{
  position:relative; width:min(340px,88vw); margin:0 auto; border-radius:20px;
  padding:20px 22px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:
    radial-gradient(130% 100% at 50% -12%, rgba(255,199,59,.22), transparent 62%),
    linear-gradient(180deg, rgba(130,8,19,.5), rgba(18,2,5,.55));
  border:1px solid rgba(255,199,59,.55);
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 34px rgba(255,162,48,.18), inset 0 1px 0 rgba(255,255,255,.06);
  animation:winPop .55s cubic-bezier(.2,.85,.25,1.1) both;
}
.win-card[hidden]{ display:none; }
@keyframes winPop{ 0%{ opacity:0; transform:scale(.86) translateY(10px); } 100%{ opacity:1; transform:none; } }
.win-card__eyebrow{ font-size:12px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:#FFD873; }
.win-card__prize{ display:flex; flex-direction:column; align-items:center; line-height:.98; margin:2px 0 3px; }
.win-card__num{ font-size:64px; font-weight:900; letter-spacing:-1.5px; color:#FFC73B; text-shadow:0 3px 22px rgba(255,162,48,.5); }
.win-card__off{ font-size:17px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:#fff; margin-top:-1px; padding-left:4px; }
.win-card__small{ font-size:11.5px; color:rgba(255,255,255,.58); line-height:1.45; max-width:250px; }

/* Confetti — dispara no fim do giro da roleta */
.confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:60; }
.confetti-piece{
  position:absolute; top:-18px; display:block; background:var(--c);
  border-radius:2px; will-change:transform, opacity;
  animation:confettiFall var(--dur,3s) cubic-bezier(.25,.6,.4,1) var(--delay,0s) forwards;
}
@keyframes confettiFall{
  0%{ transform:translate(0,-18px) rotate(0deg); opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translate(var(--dx,0), 108vh) rotate(var(--rot,360deg)); opacity:.9; }
}

/* ---------- Email (screen 5) ---------- */
.email-input{
  width:100%; max-width:402px; height:54px; border-radius:var(--radius);
  background:var(--surface); border:1px solid rgba(255,255,255,.14); color:#fff;
  font-size:16px; padding:0 18px; margin:4px 0 14px; outline:none;
  transition:border-color .2s;
}
.email-input::placeholder{ color:var(--text-dim2); }
.email-input:focus{ border-color:rgba(255,255,255,.4); }
.help-text{ font-size:12.5px; line-height:1.5; color:var(--text-dim); text-align:center; max-width:380px; }
.help-text strong{ color:rgba(255,255,255,.85); }

/* ============================================================
   Screen 6 — Checkout
   ============================================================ */
.co{ padding:0 var(--pad) 40px; }
.countdown{
  width:calc(100% + var(--pad)*2); margin-left:calc(var(--pad)*-1); margin-bottom:14px;
  background:var(--maroon-line); color:#fff; text-align:center;
  font-size:13px; font-weight:600; padding:10px 12px;
}
.countdown strong{ font-variant-numeric:tabular-nums; }
/* Locked/blurred "your memory is ready" hero — teaser, must stay blurred (unlocks on pay).
   Exact values measured from the live original: blur(10px) brightness(.9), scale(1.04), radius 10px, ratio 468/343 */
.co-hero{ position:relative; width:100%; aspect-ratio:468/343; border-radius:10px; overflow:hidden; margin:0 auto 20px; }
.co-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:blur(10px) brightness(.9); transform:scale(1.04); }
.co-hero__veil{ position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.12), rgba(0,0,0,.5)); }
.co-hero__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.co-hero__lock{ font-size:42px; line-height:1; margin-bottom:14px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.co-eyebrow{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.85); margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.co-title{ font-size:26px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.6); }

/* Coupon strip — faixa fina lembrando o cupom da roleta (mesma cor do prêmio 50%: #FFC73B) */
.coupon-strip{
  background:rgba(255,199,59,.12); border:1px solid rgba(255,199,59,.4); border-radius:8px;
  color:#FFC73B; font-size:12.5px; font-weight:700; text-align:center;
  padding:8px 12px; margin:0 0 14px;
}

/* Plans */
.plans{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.plan{
  position:relative; width:100%; text-align:left; border-radius:var(--radius);
  background:var(--surface); border:3px solid #636363; padding:14px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:border-color .2s, background .2s;
}
.plan.is-selected{ background:#000; border-color:var(--maroon-line); }
.plan__pop{
  position:absolute; top:-11px; left:14px; background:var(--maroon-line); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 9px; border-radius:7px;
}
.plan__main{ display:flex; flex-direction:column; gap:5px; }
.plan__name{ font-size:16px; font-weight:700; }
.plan__prices{ font-size:15px; color:var(--text-dim); }
.plan__prices s{ color:var(--text-dim2); margin-right:4px; }
.plan__prices b{ color:#fff; }
.plan__perday{ text-align:right; line-height:1; white-space:nowrap; }
.plan__perday b{ font-size:22px; font-weight:800; }
.plan__perday sup{ font-size:12px; font-weight:700; top:-.7em; }
.plan__perday small{ display:block; font-size:11px; color:var(--text-dim); margin-top:3px; font-weight:500; }
.plan__perday--flat b{ font-size:27px; }

/* Payment card */
.pay-card{ background:#fff; color:#111; border-radius:var(--radius); padding:14px; margin-bottom:14px; }
.pay-card__row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.pay-link{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:#1a1a1a; }
.pay-link__dot{ width:16px; height:16px; border-radius:50%; background:#00d66f; }
.pay-card__email{ color:#444; flex:1; }
.pay-card__more{ color:#999; letter-spacing:1px; }
.pay-card__method{ display:flex; align-items:center; gap:10px; padding:12px 4px 4px; }
.pay-card__visa{ background:#1434CB; color:#fff; font-size:10px; font-weight:800; padding:4px 6px; border-radius:4px; letter-spacing:.5px; }
.pay-card__card{ flex:1; display:flex; flex-direction:column; }
.pay-card__card b{ font-size:14px; }
.pay-card__card small{ color:#888; letter-spacing:1px; }
.pay-card__chev{ color:#bbb; font-size:18px; }
.pay-card__use{ width:100%; margin-top:12px; background:#1a1a1a; color:#fff; border-radius:12px; height:44px; font-weight:600; font-size:14px; }

.ssl-note{ font-size:11px; color:var(--text-dim2); text-align:center; margin:10px 0 0; }

/* Full access pass */
.pass{ margin:26px 0 6px; }
.pass__title{ font-size:18px; font-weight:700; text-align:center; margin-bottom:14px; }
.pass__list{ list-style:none; display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 auto; }
.pass__list li{ position:relative; padding-left:30px; font-size:14px; font-weight:600; line-height:1.3; }
.pass__list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:#fff; font-weight:800; font-size:16px; }

/* Guarantee */
.guarantee{ text-align:center; margin:30px 0 10px; display:flex; flex-direction:column; align-items:center; }
.guarantee__shield{
  height:104px; width:auto; display:block; margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(120,210,60,.4));
}
.guarantee__title{ font-size:24px; font-weight:800; line-height:1.2; margin-bottom:12px; }
.guarantee__text{ font-size:13.5px; line-height:1.5; color:var(--text-dim); max-width:360px; margin-bottom:8px; }

/* Social */
.social{ text-align:center; margin-top:30px; }
.social__rating{ font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.social__title{ font-size:20px; font-weight:800; line-height:1.25; margin-bottom:16px; }

/* Footer */
.footer{ text-align:center; margin-top:34px; display:flex; flex-direction:column; gap:8px; }
.footer a{ color:var(--text-dim); font-size:13px; text-decoration:none; }
.footer__help{ margin-top:10px; font-size:13px; color:var(--text-dim); line-height:1.6; }
.footer__help a{ color:var(--secondary); }

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .heading{ font-size:20px; }
  .co-title{ font-size:23px; }
}

/* ============================================================
   Payment modal (AbacatePay)
   ============================================================ */
.paywrap{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.paywrap[hidden]{ display:none; }
.paywrap__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(2px); animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.paysheet{
  position:relative; width:min(450px,100vw); background:#0f0f10; color:#fff;
  border-radius:22px 22px 0 0; padding:24px 22px max(26px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -10px 40px rgba(0,0,0,.6);
  animation:sheetUp .32s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:480px){ .paywrap{ align-items:center; } .paysheet{ border-radius:22px; } }
@keyframes sheetUp{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.paysheet__x{ position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1; }
.paysheet__title{ font-size:20px; font-weight:800; text-align:center; margin-bottom:6px; }
.paysheet__plan{ text-align:center; color:var(--secondary); font-weight:700; font-size:14px; margin-bottom:18px; }
.paystep--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.paystep[hidden]{ display:none !important; }   /* beat .paystep--center's display:flex */

/* method buttons */
.paymethod{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:16px 16px; margin-bottom:12px; text-align:left; transition:border-color .2s, transform .1s;
}
.paymethod:active{ transform:scale(.99); }
.paymethod:hover{ border-color:rgba(248,84,93,.6); }
.paymethod__ic{ font-size:24px; }
.paymethod__txt{ font-size:16px; font-weight:600; }
.paymethod__hint{ font-size:12px; color:var(--text-dim); }
.paymethod[hidden]{ display:none; }
.paysheet__secure{ text-align:center; font-size:12px; color:var(--text-dim2); margin-top:6px; }

/* PIX */
.pix-amount{ text-align:center; font-size:30px; font-weight:800; color:#fff; margin-bottom:14px; }
.pix-qr{ width:230px; height:230px; margin:0 auto 16px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pix-qr img{ width:100%; height:100%; object-fit:contain; }
.pix-copy{ width:100%; height:50px; border-radius:14px; background:#fff; color:#000; font-size:15px; font-weight:700; margin-bottom:12px; }
.pix-copy.is-done{ background:#3ddc6f; color:#06320f; }
.pix-status{ text-align:center; font-size:14px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:8px; }
.pix-status.is-paid{ color:#3ddc6f; font-weight:700; }
.pix-dot{ width:9px; height:9px; border-radius:50%; background:var(--secondary); animation:blink 1s infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.pix-sim{ width:100%; margin-top:14px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--text-dim); font-size:13px; font-weight:600; border:1px dashed rgba(255,255,255,.25); }

/* spinner */
.pix-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:var(--primary); animation:spin .8s linear infinite; }
.pix-spin--lg{ width:46px; height:46px; margin:10px auto 16px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.paysheet__redir{ text-align:center; color:var(--text-dim); font-size:14px; }

/* result */
.payresult__ic{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; margin-bottom:6px; }
.payresult__ic--ok{ background:rgba(61,220,111,.15); color:#3ddc6f; border:2px solid #3ddc6f; }
.payresult__ic--err{ background:rgba(248,84,93,.15); color:var(--primary); border:2px solid var(--primary); }
.payresult__txt{ font-size:14px; line-height:1.5; color:var(--text-dim); max-width:320px; margin-top:8px; }
.payresult__txt b{ color:#fff; }

/* v1: 1 foto + preço único */
.uploads--single{grid-template-columns:1fr;justify-items:center}
.uploads--single .upload{width:min(64%,230px)}
.plans--single{display:block}
.plans--single .plan{width:100%}

/* Checkout PIX inline (tela 6) — substitui o modal */
.cocheck{ width:100%; max-width:402px; margin:4px auto 8px; background:#15171b; border:1px solid #ffffff12; border-radius:18px; padding:18px 16px; }
.cocheck__head{ font-size:13.5px; font-weight:700; color:#fff; text-align:center; margin-bottom:14px; }
.cocheck__head b{ color:#ffd54a; }
.cocheck__bolt{ color:#ff8a00; }
.cocheck__body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; min-height:128px; }
.cocheck__body[hidden]{ display:none; }   /* hidden tem que ganhar do display:flex acima */
.cocheck__center{ text-align:center; }
.cocheck__txt{ font-size:13px; color:#c9c9c9; margin:0; }
.cocheck__okt{ font-size:18px; font-weight:800; color:#fff; margin:2px 0; }