/* Base mobile-first (Convidô). Desenhado pro celular primeiro. */
:root{
  --cream:#F3EADA; --ink:#2A2118; --soft:#6B5D49; --accent:#C9723F;
  --card:#FFFDF9; --line:#E6D8C0; --radius:14px;
  --ok:#2F8F6B; --no:#C0453B; --maybe:#B07A18;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
a{color:inherit}

.wrap{width:100%;max-width:520px;margin:0 auto;
  padding:18px 20px calc(28px + env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column}
.brandbar{padding:4px 0 10px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}

h1{font-size:clamp(30px,9vw,46px);line-height:1.04;letter-spacing:-.02em;margin:0;font-weight:800;text-wrap:balance}
.h2{font-size:clamp(24px,7vw,32px);line-height:1.1;letter-spacing:-.02em;margin:0 0 2px;font-weight:800}
.sub{color:var(--soft);font-size:16px;margin:0;max-width:34ch;text-wrap:pretty}
.muted{color:var(--soft);font-size:14px;margin:2px 0 0}
.tiny{color:var(--soft);font-size:13px;margin-top:8px;opacity:.85}

.hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.hero.center,.center{align-items:center;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--cream);text-decoration:none;font-weight:700;
  padding:15px 24px;border-radius:var(--radius);font-size:16px;min-height:52px;border:0;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(42,33,24,.4);font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}

/* ---------- Formulário / painel ---------- */
.form-wrap,.panel{flex:1;display:flex;flex-direction:column;gap:16px;padding-top:2px}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.lab{font-size:13px;font-weight:700;color:var(--soft)}
.inp{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:50px}
.inp:focus{outline:none;border-color:var(--accent)}
textarea.inp{min-height:64px;resize:vertical;line-height:1.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:11px;
  background:var(--card);border:1.5px solid var(--line);font-size:14px;font-weight:600}
.opt input:checked + span{border-color:var(--accent);background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{position:relative;cursor:pointer}
.swatch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.swatch .dot{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid}
.swatch .dot i{width:16px;height:16px;border-radius:50%;display:block}
.swatch input:checked + .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);transform:scale(1.08)}

.alert{background:#fff4f0;border:1.5px solid #e7b7a6;color:#8a3b26;border-radius:12px;padding:12px 14px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.alert.ok{background:#eef7f1;border-color:#a9d6bf;color:#20624a}

/* ---------- Convite (página pública, animada) ---------- */
.invite{min-height:100dvh;background-color:var(--bg);--pat:var(--accent);color:var(--ink);font-family:var(--font);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));gap:14px}
.invite-card{width:100%;max-width:440px;background:var(--card);border-radius:22px;
  padding:30px 24px;text-align:center;box-shadow:0 24px 60px -30px rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.invite-emoji{font-size:56px;line-height:1;animation:pop .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.06s}
.invite-kicker{margin:2px 0 0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.invite-title{font-size:clamp(30px,9vw,46px);line-height:1.02;margin:2px 0 0;font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.invite-host{margin:0;color:var(--soft);font-size:15px}
.invite-meta{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;width:100%}
.meta-item{font-size:15px;color:var(--ink);display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.invite-msg{font-style:italic;color:var(--soft);margin:6px 0 0;font-size:15px;max-width:32ch}
.invite .btn.ghost{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);margin-top:6px}
.invite-mark{color:var(--soft);opacity:.75;font-size:12px;font-family:ui-rounded,system-ui,sans-serif}
.invite-mark b{color:var(--accent)}
.invite-mark a{color:var(--soft);text-decoration:none}
.invite-mark a b{color:var(--accent)}
.btn.small{min-height:44px;padding:10px 15px;font-size:14px}
.cal-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.invite .btn.small.ghost{border:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);background:transparent;box-shadow:none}

.rsvp{width:100%;margin-top:12px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--soft) 22%,transparent);display:flex;flex-direction:column;gap:10px}
.rsvp-q{margin:0;font-weight:800;font-size:18px}
.rsvp .inp{background:color-mix(in srgb,var(--ink) 7%,var(--card));border-color:color-mix(in srgb,var(--soft) 32%,transparent)}
.rsvp-opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rsvp-pick{position:relative;cursor:pointer}
.rsvp-pick input{position:absolute;opacity:0;inset:0}
.rsvp-pick span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:11px;
  border:1.5px solid color-mix(in srgb,var(--soft) 30%,transparent);font-weight:700;font-size:14px;
  background:color-mix(in srgb,var(--ink) 7%,var(--card));color:var(--ink)}
.rsvp-pick input:checked + span.yes{background:var(--ok);color:#fff;border-color:var(--ok)}
.rsvp-pick input:checked + span.maybe{background:var(--maybe);color:#fff;border-color:var(--maybe)}
.rsvp-pick input:checked + span.no{background:var(--no);color:#fff;border-color:var(--no)}
.invite .btn.full{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.rsvp-done{margin-top:12px;padding:16px;background:color-mix(in srgb,var(--accent) 16%,var(--card));border-radius:14px;font-weight:700;width:100%}

/* Acompanhantes no RSVP */
.companions{width:100%;background:color-mix(in srgb,var(--soft) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--soft) 20%,transparent);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.companions[hidden]{display:none}
.comp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.comp-q{font-size:14px;font-weight:700;color:var(--ink)}
.comp-q small{color:var(--soft);font-weight:500}
.comp-stepper{display:flex;align-items:center;gap:12px}
.comp-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:21px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.comp-btn:active{transform:translateY(1px)}
.comp-count{min-width:22px;text-align:center;font-weight:800;font-size:18px;color:var(--ink)}
.comp-names{display:flex;flex-direction:column;gap:8px}
.comp-names:empty{display:none}
.comp-name{background:color-mix(in srgb,var(--ink) 7%,var(--card))}

/* ---------- Mural de recados (no convite) ---------- */
.mural{width:100%;max-width:440px;background:var(--card);border-radius:20px;padding:22px 20px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:12px}
.mural-title{margin:0;font-size:18px;font-weight:800;color:var(--ink);text-align:center}
.mural-flash{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--ink);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:700;text-align:center}
.mural-flash.err{background:#f9eae7;color:#8a3b26}
.mural-form{display:flex;flex-direction:column;gap:8px}
.mural-form .inp{background:color-mix(in srgb,var(--ink) 7%,var(--card));border-color:color-mix(in srgb,var(--soft) 30%,transparent)}
.mural-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mural-item{background:color-mix(in srgb,var(--accent) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--soft) 16%,transparent);
  border-radius:14px;padding:12px 14px;text-align:left}
.mural-body{margin:0;font-size:15px;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.mural-by{display:block;margin-top:5px;font-size:13px;font-weight:700;color:var(--accent)}
.mural-empty{margin:0;text-align:center;color:var(--soft);font-size:14px;font-style:italic}
.mural-mod .rn{white-space:normal;overflow-wrap:anywhere}

/* ---------- Painel ---------- */
.share{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.share-actions{display:flex;flex-direction:column;gap:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center}
.stat b{display:block;font-size:24px;font-weight:800;line-height:1}
.stat span{font-size:11px;color:var(--soft)}
.list-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.mini-btn{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;
  border:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:10px;padding:7px 11px}
.rsvp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rsvp-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 13px}
.rsvp-row .rn{flex:1;font-weight:600;font-size:14px}
.rsvp-row .rn em{font-style:normal;color:var(--soft);font-weight:500}
.rsvp-row .rn small{color:var(--soft)}
.dot-yes,.dot-no,.dot-maybe{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-yes{background:var(--ok)}.dot-no{background:var(--no)}.dot-maybe{background:var(--maybe)}
.rst{font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;text-transform:uppercase}
.rst-yes{background:#eef7f1;color:var(--ok)}.rst-no{background:#f9eae7;color:var(--no)}.rst-maybe{background:#f6efdb;color:var(--maybe)}
.rsvp-del{margin:0;display:flex}
.x-btn{border:none;background:transparent;color:var(--soft);opacity:.55;font-size:15px;line-height:1;
  cursor:pointer;padding:4px 6px;border-radius:8px;transition:opacity .12s,background .12s,color .12s}
.x-btn:hover,.x-btn:focus-visible{opacity:1;color:var(--no);background:#f9eae7;outline:none}

/* ---------- Editar: foto atual + zona de perigo ---------- */
.edit-photo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.edit-photo-thumb{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1.5px solid var(--line);flex-shrink:0}
.rm-photo{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--soft);cursor:pointer}
.rm-photo input{width:auto}
.danger{margin-top:26px;padding:16px;border:1.5px solid #e7b7a6;border-radius:16px;background:#fff7f4;display:flex;flex-direction:column;gap:8px}
.danger-title{font-size:15px;font-weight:800;color:#8a3b26;margin:0}
.danger .field{margin-top:2px}
.danger-btn{background:#c0432f;color:#fff;border-color:#c0432f}
.danger-btn:hover{background:#a5361f}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Foto no convite ---------- */
.invite-photo-wrap{position:relative;width:100%;margin-bottom:4px}
.invite-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;
  background:color-mix(in srgb,var(--accent) 10%,#fff);box-shadow:0 14px 34px -20px rgba(0,0,0,.55)}
.invite-badge{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;
  font-size:28px;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);animation:pop .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.12s}
.invite-card.has-photo{padding-top:18px}
.invite-card.has-photo .invite-kicker{margin-top:24px}

/* ---------- Campo de foto (formulário) ---------- */
.hint{font-size:12px;color:var(--soft);margin-top:2px}
.inp.file{padding:11px 12px;font-size:14px;color:var(--soft);line-height:1.4}
.inp.file::file-selector-button{font-family:inherit;font-weight:700;font-size:13px;color:#fff;background:var(--accent);
  border:0;border-radius:9px;padding:9px 13px;margin-right:12px;cursor:pointer}

/* ============ CAMADA DE DESIGN ============ */
/* fundo com brilho quente em todas as páginas de app */
body{background:radial-gradient(120% 65% at 50% -15%, #FBEFE0 0%, var(--cream) 52%) fixed}

.btn.big{font-size:17px;padding:17px 30px;min-height:56px;color:#fff;border-radius:16px;
  background:linear-gradient(135deg,#E8763F,#C9557A);
  box-shadow:0 16px 34px -14px rgba(201,85,122,.6)}
.btn.big:hover{filter:brightness(1.04)}

/* ---------- Landing (home) ---------- */
.lp{position:relative;overflow:hidden;min-height:100dvh;display:flex;flex-direction:column}
.lp > *{position:relative;z-index:1}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:0}
.confetti span{position:absolute;width:12px;height:12px;border-radius:3px;opacity:.5;animation:floaty 9s ease-in-out infinite}
.confetti span:nth-child(1){left:8%;top:15%;background:#E8A0B4;transform:rotate(20deg)}
.confetti span:nth-child(2){left:87%;top:11%;background:#8CCBB0;border-radius:50%;animation-delay:-2s}
.confetti span:nth-child(3){left:79%;top:33%;background:#F4CE86;transform:rotate(35deg);animation-delay:-4s}
.confetti span:nth-child(4){left:13%;top:45%;background:#A9C1EC;border-radius:50%;animation-delay:-1s}
.confetti span:nth-child(5){left:90%;top:62%;background:#C9A6E6;transform:rotate(15deg);animation-delay:-3s}
.confetti span:nth-child(6){left:6%;top:73%;background:#F4A98A;border-radius:50%;animation-delay:-5s}
.confetti span:nth-child(7){left:71%;top:82%;background:#8CCBB0;transform:rotate(40deg);animation-delay:-2.5s}
.confetti span:nth-child(8){left:31%;top:23%;background:#F4CE86;border-radius:50%;animation-delay:-6s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(12deg)}}

.lp-nav{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto;width:100%;padding:16px 20px}
.lp-logo{font-size:22px}
.lp-cta-sm{text-decoration:none;font-weight:700;font-size:14px;color:var(--ink);background:#fff;
  border:1.5px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;padding:9px 16px}

.lp-hero{max-width:1000px;margin:0 auto;width:100%;padding:18px 20px 6px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.lp-badge{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:700;color:var(--accent);box-shadow:0 6px 16px -10px rgba(0,0,0,.3);animation:fadeUp .6s both}
.lp-h1{font-size:clamp(34px,10.5vw,60px);line-height:1.02;letter-spacing:-.03em;margin:16px 0 0;font-weight:800;animation:fadeUp .6s .05s both}
.grad{background:linear-gradient(120deg,#E8763F,#C9557A);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-sub{font-size:clamp(16px,2.2vw,19px);color:var(--soft);max-width:40ch;margin:16px auto 0;animation:fadeUp .6s .1s both}
.lp-hero .btn.big{margin-top:24px;animation:fadeUp .6s .15s both}

/* mini convite flutuando */
.lp-hero-art{width:100%;display:flex;justify-content:center;margin-top:6px;animation:fadeUp .7s .2s both}
.mock{width:250px;background:#fff;border-radius:22px;padding:16px 16px 18px;text-align:center;box-shadow:0 34px 64px -30px rgba(90,40,60,.55);transform:rotate(-3deg);animation:sway 6s ease-in-out infinite}
.mock-photo{height:118px;border-radius:14px;background:linear-gradient(135deg,#F3C6D3,#C1557A);display:flex;align-items:center;justify-content:center;font-size:38px;position:relative;margin-bottom:22px}
.mock-badge{position:absolute;bottom:-18px;width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.mock-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C1557A}
.mock-title{font-size:22px;font-weight:800;margin:2px 0 6px;color:#2A2118}
.mock-meta{font-size:12px;color:#6B5D49}
.mock-btn{margin-top:12px;background:#C1557A;color:#fff;font-weight:700;font-size:13px;border-radius:10px;padding:10px}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-8px)}}

.lp-steps{max-width:760px;margin:32px auto 0;width:100%;padding:0 20px;display:grid;grid-template-columns:1fr;gap:12px}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 26px -22px rgba(0,0,0,.5)}
.step-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.step b{display:block;font-size:15px}
.step small{color:var(--soft);font-size:13px}

.lp-feats{max-width:760px;margin:22px auto 0;width:100%;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;font-size:22px}
.feat b{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-top:5px}

.lp-foot{max-width:760px;margin:32px auto 0;width:100%;padding:10px 20px calc(30px + env(safe-area-inset-bottom));text-align:center}
.lp-foot .lp-tiny{margin-top:14px}

@media (min-width:760px){
  .lp-hero{flex-direction:row;text-align:left;padding-top:32px;gap:20px}
  .lp-hero-txt{flex:1}
  .lp-sub{margin-left:0}
  .lp-hero-art{width:auto}
  .lp-steps{grid-template-columns:repeat(3,1fr)}
  .lp-feats{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){.confetti span,.mock{animation:none!important}}

/* ---------- Enfeite atrás do convite ---------- */
.invite{position:relative;overflow:hidden}
.invite::before,.invite::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:color-mix(in srgb,var(--accent) 20%,transparent);filter:blur(44px)}
.invite::before{width:240px;height:240px;top:-60px;left:-60px}
.invite::after{width:210px;height:210px;bottom:-60px;right:-55px}
.invite-card,.invite-mark{position:relative;z-index:1}

/* ---------- Fonte de destaque (Fredoka) + polimento ---------- */
:root{--display:"Fredoka", ui-rounded, "SF Pro Rounded", system-ui, "Segoe UI", Roboto, sans-serif}
h1,.h2,.lp-h1,.logo,.lp-logo,.mock-title,.mock-kicker,.stat b,.rsvp-q,.lp-badge{font-family:var(--display)}
.btn{font-family:var(--display)}

.page-head{display:flex;align-items:center;gap:12px;padding:6px 0}
.back{width:40px;height:40px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:20px;color:var(--ink);flex-shrink:0}
.page-head h1{margin:0}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.45)}

.stat-yes{background:#edf7f0;border-color:#bfe0cf}.stat-yes b{color:var(--ok)}
.stat-people{background:#fbeee0;border-color:#eed6bb}.stat-people b{color:var(--accent)}
.stat-maybe{background:#f7f0dc;border-color:#e6d4a8}.stat-maybe b{color:var(--maybe)}
.stat-no{background:#f9eae7;border-color:#e7c3ba}.stat-no b{color:var(--no)}

/* contagem regressiva no convite */
.countdown{display:inline-flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:stretch;background:transparent;color:var(--accent);font-weight:800;font-size:13px;margin:10px 0 2px}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:50px;padding:8px 6px;border-radius:13px;
  background:color-mix(in srgb,var(--accent) 12%,var(--card));font-size:10px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;line-height:1}
.cd-u b{font-family:var(--font);font-size:23px;font-weight:800;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}

/* ===================== ABERTURAS DO CONVITE ===================== */
/* Motor: overlay full-screen que faz o "teatro", depois revela o card.
   Easing padrão: expo-out (fluido) e spring (com leve overshoot) pra dar vida. */
body.op-lock{overflow:hidden}
.opening{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font)}
.opening.done{animation:opFade .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes opFade{0%{opacity:1;transform:scale(1)}100%{opacity:0;visibility:hidden;transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.opening:not([data-preview]){display:none!important}}
/* Revelação do card, coordenada com a saída do overlay */
.invite-card.op-reveal{animation:opCardReveal .8s cubic-bezier(.22,1,.36,1) both}
@keyframes opCardReveal{0%{opacity:0;transform:scale(.92) translateY(22px)}100%{opacity:1;transform:none}}
/* Emoji entra com molinha (overshoot e assenta) — reutilizado por várias aberturas */
@keyframes opEmo{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.15)}75%{transform:scale(.95)}100%{transform:scale(1)}}

/* ===== O CONVITE REAL que a abertura revela (fundo do tema + emoji + kicker + título) ===== */
.inv{position:relative;width:212px;padding:26px 20px;border-radius:20px;text-align:center;color:var(--ink);overflow:hidden;
  background:radial-gradient(130% 95% at 50% 0%, color-mix(in srgb,var(--accent) 24%,var(--card)), var(--card));
  box-shadow:0 24px 54px -22px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent), inset 0 24px 40px -34px rgba(255,255,255,.5);
  display:flex;flex-direction:column;align-items:center;gap:9px;will-change:transform}
/* Brilho (shine) que varre o cartão logo depois da revelação — profundidade premium */
.inv::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.2) 48%,transparent 60%);
  transform:translateX(-130%);animation:invShine 1.1s .75s cubic-bezier(.4,0,.2,1) both}
@keyframes invShine{to{transform:translateX(130%)}}
.inv .em{font-size:44px;line-height:1;animation:opPop .55s both}
.inv .kk{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);animation:opRise .5s both}
.inv .tt{font-size:23px;font-weight:800;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;animation:opRise .6s both}
@keyframes opPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes opRise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.opframe{position:relative}
.piece{will-change:transform}

/* ---------- Envelope (padrão) — a aba abre e o convite sobe ---------- */
.op-env .opframe,.opframe.op-env{width:236px;height:214px;perspective:1150px}
.op-env .inv{position:absolute;left:24px;right:24px;top:20px;width:auto;padding:18px 14px;z-index:3;
  animation:oEnvUp 1.15s .6s cubic-bezier(.34,1.5,.64,1) both}
.op-env .inv .em{font-size:32px;animation-delay:1.25s}
.op-env .inv .kk{animation-delay:1.4s}
.op-env .inv .tt{font-size:18px;animation-delay:1.5s}
@keyframes oEnvUp{0%{transform:translateY(0);opacity:0}17%{opacity:0}30%{opacity:1}42%{transform:translateY(-3px);opacity:1}100%{transform:translateY(-120px) scale(1.03);opacity:1}}
.oe-back{position:absolute;inset:0;border-radius:12px;background:color-mix(in srgb,var(--accent) 58%,#0a0f18);z-index:1}
.oe-front{position:absolute;inset:0;border-radius:12px;z-index:4;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 74%,#000),color-mix(in srgb,var(--accent) 52%,#000));clip-path:polygon(0 40%,50% 80%,100% 40%,100% 100%,0 100%)}
.oe-flap{position:absolute;top:0;left:0;right:0;height:96px;transform-origin:top;z-index:6;background:color-mix(in srgb,var(--accent) 66%,#000);clip-path:polygon(0 0,100% 0,50% 100%);animation:oFlap .55s .18s cubic-bezier(.65,0,.35,1) both}
@keyframes oFlap{0%{transform:rotateX(0)}99%{z-index:6}100%{transform:rotateX(-176deg);z-index:0}}

/* ---------- Lacre de cera — selo central racha e as capas se separam (cima/baixo) ---------- */
.opframe.op-wax{width:214px;height:210px}
.op-wax .inv{position:absolute;inset:0;width:auto;display:flex;align-items:center;justify-content:center}
.op-wax .inv .em{animation-delay:1.2s}.op-wax .inv .kk{animation-delay:1.32s}.op-wax .inv .tt{animation-delay:1.42s}
.wax-cover{position:absolute;left:0;right:0;height:50%;z-index:3;background:linear-gradient(#f3e7cd,#e4d2ab);box-shadow:inset 0 0 0 1px rgba(120,90,40,.15)}
.wax-cover.t{top:0;transform-origin:top;border-radius:12px 12px 0 0;animation:oWaxT 1s .72s cubic-bezier(.5,0,.2,1) both}
.wax-cover.b{bottom:0;transform-origin:bottom;border-radius:0 0 12px 12px;animation:oWaxB 1s .72s cubic-bezier(.5,0,.2,1) both}
@keyframes oWaxT{to{transform:translateY(-106%)}}
@keyframes oWaxB{to{transform:translateY(106%)}}
.wax-seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e8604e,#a02a1e);display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px -4px rgba(0,0,0,.6),inset 0 0 10px rgba(0,0,0,.35);animation:oWaxCrack 1.55s ease both}
.wax-seal b{color:#ffd9a8;font-size:25px;font-style:normal}
@keyframes oWaxCrack{0%{transform:translate(-50%,-50%) scale(1)}22%{transform:translate(-50%,-50%) scale(1.14)}40%{transform:translate(-50%,-50%) scale(.92) rotate(-8deg)}55%{transform:translate(-50%,-50%) scale(1.05) rotate(6deg)}70%{transform:translate(-50%,-50%) scale(.84)}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}

/* ---------- Desdobrar (as abas laterais se abrem revelando o convite) ---------- */
.opframe.op-fold{width:208px;height:206px;perspective:1250px}
.op-fold .inv{position:absolute;inset:0;width:auto;display:flex;justify-content:center}
.op-fold .inv .em{animation-delay:1.05s}
.op-fold .inv .kk{animation-delay:1.2s}
.op-fold .inv .tt{animation-delay:1.3s}
.ofold{position:absolute;top:0;bottom:0;width:50%;z-index:3;transform-style:preserve-3d;backface-visibility:hidden;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 68%,#000))}
.ofold.l{left:0;transform-origin:right;border-radius:11px 0 0 11px;animation:oFoldL 1s .35s cubic-bezier(.65,0,.35,1) both}
.ofold.r{right:0;transform-origin:left;border-radius:0 11px 11px 0;animation:oFoldR 1s .5s cubic-bezier(.65,0,.35,1) both}
@keyframes oFoldL{to{transform:rotateY(160deg)}}
@keyframes oFoldR{to{transform:rotateY(-160deg)}}

/* ---------- Cinematográfico (barras de cinema abrem, convite entra em foco) ---------- */
.op-cine .inv{animation:oIris 1.15s cubic-bezier(.16,1,.3,1) both}
@keyframes oIris{0%{opacity:0;transform:scale(.86);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
.op-cine .inv .em{animation-delay:.6s}
.op-cine .inv .kk{animation-delay:.75s}
.op-cine .inv .tt{animation-delay:.85s}
.ocine-bar{position:fixed;left:0;right:0;height:50%;background:#07090d;z-index:5}
.ocine-bar.t{top:0;animation:oBarT 1.05s .2s cubic-bezier(.76,0,.24,1) both}
.ocine-bar.b{bottom:0;animation:oBarB 1.05s .2s cubic-bezier(.76,0,.24,1) both}
@keyframes oBarT{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes oBarB{0%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ---------- Cortina de teatro ---------- */
.op-curt .inv{position:relative;z-index:1}
.op-curt .inv .em{animation-delay:.95s}
.op-curt .inv .kk{animation-delay:1.05s}
.op-curt .inv .tt{animation-delay:1.15s}
.ocurt{position:fixed;top:0;bottom:0;width:54%;z-index:2;background:linear-gradient(90deg,#8f1b2b,#c8324b 46%,#9b2032);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 15px,rgba(255,255,255,.05) 15px 19px,transparent 19px 42px)}
.ocurt.l{left:0;transform-origin:left;box-shadow:inset -34px 0 44px -18px rgba(0,0,0,.6);animation:oCurtL 1.3s .35s cubic-bezier(0,0,.2,1) both}
.ocurt.r{right:0;transform-origin:right;box-shadow:inset 34px 0 44px -18px rgba(0,0,0,.6);animation:oCurtR 1.3s .35s cubic-bezier(0,0,.2,1) both}
@keyframes oCurtL{to{transform:translateX(-100%) scaleX(.82)}}
@keyframes oCurtR{to{transform:translateX(100%) scaleX(.82)}}
.ocurt-rail{position:fixed;top:0;left:0;right:0;height:16px;z-index:3;background:linear-gradient(#3a2a12,#5a4020)}

/* ---------- Caixa de presente (tampa voa, convite cresce de dentro) ---------- */
.opframe.op-gift{width:220px;height:228px}
.op-gift .inv{position:absolute;left:0;right:0;top:8px;margin:0 auto;width:180px;z-index:2;transform-origin:bottom;
  animation:oGiftUp 1s .5s cubic-bezier(.16,1,.3,1) both}
.op-gift .inv .em{font-size:36px;animation-delay:1.2s}
.op-gift .inv .kk{animation-delay:1.35s}
.op-gift .inv .tt{font-size:19px;animation-delay:1.45s}
@keyframes oGiftUp{0%{transform:translateY(58px) scale(.34);opacity:0}100%{transform:translateY(-4px) scale(1);opacity:1}}
.og-base{position:absolute;bottom:0;left:0;right:0;height:100px;border-radius:10px;z-index:3;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 72%,#000));box-shadow:0 16px 30px -14px rgba(0,0,0,.6)}
.og-base::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:24px;transform:translateX(-50%);background:color-mix(in srgb,var(--accent) 45%,#fff);opacity:.55}
.og-lid{position:absolute;top:56px;left:-10px;right:-10px;height:36px;border-radius:9px;z-index:5;background:color-mix(in srgb,var(--accent) 88%,#000);animation:oLid 1s .3s cubic-bezier(.5,0,.3,1) both}
.og-bow{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:30px}
@keyframes oLid{0%{transform:translateY(0) rotate(0)}26%{transform:translateY(7px)}100%{transform:translateY(-260px) rotate(-16deg);opacity:0}}

/* ---------- Confete (o convite salta e o confete cai) ---------- */
.op-conf .inv{animation:opCardPop 1s .2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes opCardPop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
.op-conf .inv .em{animation-delay:.6s}
.op-conf .inv .kk{animation-delay:.75s}
.op-conf .inv .tt{animation-delay:.85s}
.ocf{position:fixed;top:-16px;width:10px;height:15px;border-radius:2px;z-index:6;opacity:0;animation:oFall 1.6s ease-in both}
.ocf:nth-child(4n+1){background:var(--accent)}
.ocf:nth-child(4n+2){background:#ffd34d}
.ocf:nth-child(4n+3){background:#ff7ad0}
.ocf:nth-child(4n){background:#6cd6ff}
@keyframes oFall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(var(--fall,800px)) rotate(560deg)}}

/* ---------- Balões (sobem e revelam o convite) ---------- */
.op-bln .inv{animation:oIris 1s .35s cubic-bezier(.16,1,.3,1) both}
.op-bln .inv .em{animation-delay:.9s}
.op-bln .inv .kk{animation-delay:1.05s}
.op-bln .inv .tt{animation-delay:1.15s}
.obln{position:fixed;bottom:-46px;width:36px;height:44px;border-radius:50% 50% 48% 48%;z-index:6;opacity:0}
.obln::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:40px;background:rgba(255,255,255,.4)}
.obln.a{left:32%;background:radial-gradient(circle at 35% 30%,#fff9,var(--accent));animation:oFloat 1.7s .05s ease-in both}
.obln.b{left:50%;background:radial-gradient(circle at 35% 30%,#fff9,color-mix(in srgb,var(--accent) 55%,#fff));animation:oFloat 1.7s .2s ease-in both}
.obln.c{left:64%;background:radial-gradient(circle at 35% 30%,#fff9,color-mix(in srgb,var(--accent) 65%,#000));animation:oFloat 1.7s .34s ease-in both}
@keyframes oFloat{0%{opacity:0;transform:translateY(0)}22%{opacity:1}100%{opacity:0;transform:translateY(var(--rise,-820px))}}

/* ---------- Cartão que vira (flip 3D) ---------- */
.opframe.op-flip{width:212px;height:214px;perspective:1300px}
.oflipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:oFlip 1.1s .35s cubic-bezier(.65,0,.35,1) both}
@keyframes oFlip{0%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}
.op-flip .inv{position:absolute;inset:0;width:auto;backface-visibility:hidden;justify-content:center}
.oflip-back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;transform:rotateY(180deg);
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 60%,#000) 0 13px,color-mix(in srgb,var(--accent) 40%,#000) 13px 26px);
  display:flex;align-items:center;justify-content:center;font-size:40px}
.op-flip .inv .em{animation-delay:1.1s}
.op-flip .inv .kk{animation-delay:1.2s}
.op-flip .inv .tt{animation-delay:1.3s}

/* ---------- Título que se escreve (typewriter) ---------- */
.op-type .inv{animation:oIris .7s both}
.op-type .inv .em{animation-delay:.2s}
.op-type .inv .kk{animation-delay:.35s}
.op-type .inv .tt{overflow:hidden;white-space:nowrap;border-right:2px solid var(--accent);max-width:100%;width:0;
  animation:oType 1.1s .55s steps(18,end) forwards, oCaret .5s 6 step-end}
@keyframes oType{to{width:100%}}
@keyframes oCaret{50%{border-color:transparent}}

/* Acessibilidade: com "reduzir movimento", nada de 3D/varredura — só o convite aparece */
@media (prefers-reduced-motion:reduce){
  .inv,.inv::before,.inv .em,.inv .kk,.inv .tt,.opframe .piece,.oflipper,.ocurt,.og-lid,.oe-flap,.ofold,.ocine-bar,.obln,.ocf,.oe-seal{animation:none!important}
  .inv::before{opacity:0}
  .op-type .inv .tt{width:100%!important;border:none}
  .oe-flap,.ocf,.obln,.ocine-bar,.oe-seal,.wax-cover,.wax-seal{opacity:0!important}
  .op-env .inv,.op-gift .inv{transform:none!important;position:static}
}

/* ---- Vitrine de aberturas na landing (palco pequeno que toca ao rolar) ---- */
.entradas-show{margin:8px 0 0}
.es-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.es-grid{grid-template-columns:1fr 1fr}}
.es-card{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 14px 30px -20px rgba(0,0,0,.25)}
/* O palco: containing-block das peças fixas (transform) + clip; unidades relativas ao palco */
.op-stage{position:relative;height:300px;overflow:hidden;transform:translateZ(0);
  display:flex;align-items:center;justify-content:center;background:var(--bg);font-family:var(--font);
  --fall:320px;--rise:-340px}
.op-stage .opframe{transform:scale(.86)}
.op-stage .inv{width:180px;padding:20px 16px}
.op-stage .inv .em{font-size:38px}.op-stage .inv .tt{font-size:19px}
/* Na vitrine (loop sem hand-off), o cartão do envelope/lacre para VISÍVEL, não some por cima */
.op-stage .op-env .inv{animation-name:oEnvShow}
@keyframes oEnvShow{0%{transform:translateY(0);opacity:0}20%{opacity:0}34%{opacity:1}42%{transform:translateY(-3px);opacity:1}100%{transform:translateY(-58px) scale(1.02);opacity:1}}
.op-stage .op-env{margin-top:52px}
.es-label{display:flex;align-items:center;gap:8px;padding:12px 15px}
.es-label b{font-size:15px}
.es-label .op-tier{margin-left:auto}
.es-label p{margin:0;flex-basis:100%;font-size:12.5px;color:var(--soft);order:3}
/* pausa até o palco entrar na tela (.op-play) — só na vitrine, não no convite */
.op-stage :where(.inv,.inv .em,.inv .kk,.inv .tt,.piece,.oflipper,.ocurt,.og-lid,.oe-flap,.ofold,.ocine-bar,.obln,.ocf,.oe-seal){animation-play-state:paused}
.op-stage.op-play :where(.inv,.inv .em,.inv .kk,.inv .tt,.piece,.oflipper,.ocurt,.og-lid,.oe-flap,.ofold,.ocine-bar,.obln,.ocf,.oe-seal){animation-play-state:running}

/* ---- Selos de plano das aberturas (usados no ajuste-fino e na galeria) ---- */
.op-tier{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;vertical-align:middle;line-height:1.4}
.op-tier.op-free{background:#e4f3ea;color:#2f7d51}
.op-tier.op-pro{background:#fbeadf;color:#b25e2e}
.op-tier.op-premium{background:#efe6f9;color:#5e33b0}

/* ---- Galeria "Experimentar aberturas" ---- */
.op-gallery{max-width:960px}
.op-lab{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media (min-width:820px){.op-lab{grid-template-columns:320px 1fr;align-items:start}}

.op-stage{display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:16px}
.op-phone{position:relative;width:270px;height:540px;background:#0e0e12;border-radius:34px;padding:10px;
  box-shadow:0 24px 60px -22px rgba(0,0,0,.5),0 0 0 2px #23232b inset;overflow:hidden}
.op-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:92px;height:22px;
  background:#0e0e12;border-radius:0 0 14px 14px;z-index:3}
.op-frame{width:100%;height:100%;border:0;border-radius:26px;background:var(--card);display:block}
.op-stage-actions{display:flex;gap:10px;width:100%;max-width:270px}
.op-stage-actions .btn{flex:1;min-height:46px;padding:11px 14px;font-size:15px}
.op-use-form{flex:1;display:flex}
.op-use-form .btn{width:100%}
#opUseBtn.locked{background:#efe6f9;color:#5e33b0}
.op-current-tip{margin:0;font-size:13.5px;color:var(--soft);text-align:center;max-width:270px;min-height:18px;text-wrap:pretty}

.op-picker{display:flex;flex-direction:column;gap:18px}
.op-group-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.op-group-note{font-size:12.5px;color:var(--soft)}
.op-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.op-chip{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 7px;
  cursor:pointer;font-family:inherit;color:var(--ink);text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s}
.op-chip:hover{transform:translateY(-2px)}
.op-chip-emoji{font-size:24px;line-height:1}
.op-chip-label{font-size:12px;font-weight:700;line-height:1.15}
.op-chip.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent),0 10px 22px -14px var(--accent)}
.op-chip.locked{opacity:.72}
.op-chip.locked .op-chip-emoji{filter:grayscale(.35)}
.op-chip-lock{position:absolute;top:6px;right:7px;font-size:11px}

.op-unlock{margin-top:4px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(100deg,#f3ecff,#efe6f9);border:1.5px solid #d9c7f2;border-radius:16px;padding:16px}
.op-unlock b{font-size:15px;color:#4e2e8f}
.op-unlock span{font-size:13px;color:#6b5d80;line-height:1.5}
.op-unlock .btn{margin-top:6px}

/* ---- Seletor de abertura (visível no criar/editar) ---- */
.hint-top{display:block;margin:-2px 0 10px}
.opening-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.op-pick{cursor:pointer;position:relative}
.op-pick input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.op-pick-face{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 6px;
  color:var(--ink);text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s}
.op-pick:hover .op-pick-face{transform:translateY(-2px)}
.op-pick-emoji{font-size:24px;line-height:1}
.op-pick-label{font-size:11.5px;font-weight:700;line-height:1.15}
.op-pick input:checked + .op-pick-face{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.op-pick input:focus-visible + .op-pick-face{outline:2px solid var(--accent);outline-offset:2px}
.op-pick .op-tier{position:absolute;top:5px;right:6px}
.op-play-btn{margin-top:10px}
/* Seletor de emoji da festa */
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;margin-bottom:10px}
.emoji-opt{font-size:22px;line-height:1;padding:9px 0;background:var(--card);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:transform .1s,border-color .1s,box-shadow .1s}
.emoji-opt:hover{transform:translateY(-1px)}
.emoji-opt.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.emoji-input{text-align:center;font-size:18px}
/* Botão "Pular" que aparece por cima da abertura em tela cheia */
.op-skip{position:fixed;top:16px;right:16px;z-index:70;background:rgba(0,0,0,.42);color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---- Wizard do criar (etapas) — progressive enhancement ----
   Sem JS: todas as etapas aparecem empilhadas (página única) e o botão .wiz-nojs envia.
   Com JS (.wiz-on): vira wizard passo a passo. */
.wiz-steps{display:none;gap:4px;margin-bottom:20px}
.wiz-on .wiz-steps{display:flex}
.wiz-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--soft);opacity:.55;transition:opacity .2s}
.wiz-dot .n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1.5px solid var(--line);color:var(--soft);font-size:14px}
.wiz-dot .t{display:none;text-align:center}
@media(min-width:540px){.wiz-dot .t{display:block}}
.wiz-dot.active{opacity:1;color:var(--ink)}
.wiz-dot.active .n{background:var(--accent);border-color:var(--accent);color:#fff}
.wiz-dot.done{opacity:1}
.wiz-dot.done .n{background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:var(--accent);color:var(--accent)}
.wiz-step{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}
.wiz-on .wiz-step{display:none;margin-bottom:0}
.wiz-on .wiz-step.active{display:flex;animation:wizIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes wizIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.wiz-eyebrow{display:none;margin:0 0 -6px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--accent)}
.wiz-on .wiz-eyebrow{display:block}
.wiz-nav{display:none;gap:10px;margin-top:4px}
.wiz-on .wiz-nav{display:flex}
.wiz-nav .btn{flex:1;min-height:52px}
.wiz-nav .btn.ghost{flex:0 0 auto;padding-left:20px;padding-right:20px}
.wiz-on .wiz-nojs{display:none}

/* ---- Cena animada de fundo + abertura cinematográfica ---- */
.scene-bg{position:fixed;inset:0;width:100%;height:100dvh;z-index:0;pointer-events:none}
.invite-card,.invite .mural,.invite-mark{position:relative;z-index:1}
.invite-card.open{animation:cardIn .8s cubic-bezier(.2,.85,.25,1) both}
@keyframes cardIn{from{opacity:0;transform:scale(.9) translateY(26px)}to{opacity:1;transform:none}}
.invite-card{transform-origin:center 40%}
@media (prefers-reduced-motion:reduce){.invite-card.open{animation:none}.scene-bg{display:none}}

/* copiar link (painel) */
.share-row{display:flex;gap:8px}
.share-row .inp{flex:1;min-width:0}
.copybtn{flex-shrink:0;font-family:var(--display);font-weight:700;font-size:14px;color:#fff;background:var(--accent);border:0;border-radius:12px;padding:0 16px;cursor:pointer;min-height:50px}
.copybtn:active{transform:translateY(1px)}

/* nav da landing + login */
.lp-navlinks{display:flex;align-items:center;gap:14px}
.lp-link{text-decoration:none;font-weight:700;font-size:14px;color:var(--ink)}
.gbtn{margin-top:4px}
.form .muted a,.muted a{color:var(--accent);font-weight:700}

/* ========== Personalização: fundos, preview, temas, ajuste fino ========== */

/* Padrões de fundo em CSS puro. Cor = var(--pat), definida por cada contexto
   (.invite usa o accent da paleta; .preview usa --pv-accent; .bg-swatch usa cinza). */
.bg-plain{}
.bg-dots{background-image:radial-gradient(color-mix(in srgb,var(--pat) 24%,transparent) 1.6px,transparent 1.7px);background-size:15px 15px}
.bg-confetti{background-image:
    radial-gradient(color-mix(in srgb,var(--pat) 55%,transparent) 2.4px,transparent 2.6px),
    radial-gradient(color-mix(in srgb,var(--pat) 32%,transparent) 2px,transparent 2.2px),
    radial-gradient(color-mix(in srgb,var(--pat) 42%,transparent) 1.6px,transparent 1.8px);
  background-size:40px 40px,52px 52px,30px 30px;background-position:0 0,18px 24px,30px 10px}
.bg-stripes{background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--pat) 9%,transparent) 0 14px,transparent 14px 28px)}
.bg-grid{background-image:
    linear-gradient(color-mix(in srgb,var(--pat) 13%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--pat) 13%,transparent) 1px,transparent 1px);
  background-size:22px 22px}
.bg-petals{background-image:
    radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--pat) 15%,transparent) 0 9px,transparent 10px),
    radial-gradient(circle at 75% 68%,color-mix(in srgb,var(--pat) 11%,transparent) 0 12px,transparent 13px);
  background-size:64px 64px}

/* Preview ao vivo */
.preview-wrap{position:sticky;top:8px;z-index:5;margin-bottom:16px}
.preview{--pv-bg:#EEEAF6;--pv-ink:#251E30;--pv-accent:#7C5CC4;--pv-card:#FDFBFF;--pv-soft:#5C5270;
  --pv-font:"Fredoka",ui-rounded,system-ui,sans-serif;--pat:var(--pv-accent);
  background-color:var(--pv-bg);border-radius:18px;padding:18px;display:flex;justify-content:center;
  border:1px solid rgba(0,0,0,.06);box-shadow:0 14px 34px -20px rgba(0,0,0,.45);transition:background-color .25s}
.preview-card{background:var(--pv-card);border-radius:14px;padding:16px 18px;text-align:center;width:100%;max-width:280px;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--pv-font);position:relative;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.pv-emoji{font-size:30px;line-height:1}
.pv-kicker{margin:2px 0 0;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--pv-accent)}
.pv-title{margin:0;font-size:19px;font-weight:800;color:var(--pv-ink);line-height:1.12;overflow-wrap:anywhere}
.pv-host{margin:0;font-size:12px;color:var(--pv-soft)}
.pv-meta{margin:4px 0 0;font-size:11px;color:var(--pv-soft);line-height:1.5;overflow-wrap:anywhere}
.pv-tag{position:absolute;top:-9px;right:-9px;background:var(--pv-accent);color:#fff;font-size:9px;font-weight:700;
  padding:3px 8px;border-radius:20px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5);font-family:system-ui}

/* Temas prontos (linha rolável de chips) */
.themes{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.theme-opt{flex:0 0 auto;position:relative}
.theme-opt input{position:absolute;opacity:0;width:0;height:0}
.theme-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:74px;
  padding:11px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;
  font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;transition:border-color .12s,transform .12s,box-shadow .12s}
.theme-chip i{font-size:22px;font-style:normal;line-height:1}
.theme-opt input:checked + .theme-chip{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--card));transform:translateY(-1px);
  box-shadow:0 7px 16px -10px var(--accent)}
.theme-opt input:focus-visible + .theme-chip{outline:2px solid var(--accent);outline-offset:2px}

/* Ajuste fino (details) */
.fine{border:1.5px solid var(--line);border-radius:14px;background:var(--card)}
.fine>summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:15px}
.fine>summary::-webkit-details-marker{display:none}
.fine>summary>span{font-weight:400;color:var(--soft);font-size:13px}
.fine>summary::after{content:"▾";margin-left:auto;color:var(--soft);transition:transform .2s}
.fine[open]>summary::after{transform:rotate(180deg)}
.fine-body{padding:2px 16px 16px;display:flex;flex-direction:column;gap:16px}

/* Mini-amostra do padrão de fundo dentro do seletor */
.bg-swatch{display:inline-block;width:17px;height:17px;border-radius:5px;margin-right:6px;vertical-align:-4px;
  --pat:#8a8f99;background-color:#e9ebf0;border:1px solid var(--line)}

/* ---------- Páginas legais ---------- */
.legal{max-width:720px}
.legal-note{background:#fff4ea;border:1.5px solid #e7c9a6;color:#7a4e1e;border-radius:12px;padding:12px 15px;font-size:13.5px;line-height:1.5;margin-bottom:6px}
.legal-body{font-size:15.5px;line-height:1.7;color:var(--ink)}
.legal-body h2{font-size:19px;font-weight:800;margin:26px 0 8px;color:var(--ink);letter-spacing:-.01em}
.legal-body p{margin:0 0 12px;color:#3a3025}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body li{margin-bottom:7px;color:#3a3025}
.legal-body a{color:var(--accent);font-weight:700}
.legal-highlight{background:color-mix(in srgb,var(--accent) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:14px;padding:14px 18px;margin:8px 0 14px}
.legal-highlight p:last-child,.legal-highlight ul:last-child{margin-bottom:0}
.legal-see{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-weight:700}

/* ---------- Premium (painel + pagamento) ---------- */
.premium-cta{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,#f3ecff,#efe6f9);border:1.5px solid #d9c7f2;
  border-radius:14px;padding:13px 15px}
.premium-cta-txt{flex:1;display:flex;flex-direction:column}
.premium-cta-txt b{font-size:15px;color:#4e2e8f}
.premium-cta-txt span{font-size:12.5px;color:#6b5d80}
.premium-btn{background:#7C4DD6;color:#fff;min-height:44px;padding:10px 22px;box-shadow:0 8px 18px -8px #7C4DD6}
.premium-btn:hover{background:#6a3fc0}
.premium-badge{background:#efe6f9;border:1.5px solid #d9c7f2;border-radius:14px;padding:12px 15px;font-size:14px;color:#4e2e8f}
.premium-badge b{color:#4e2e8f}

.pay{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;background:var(--card);
  border:1.5px solid var(--line);border-radius:18px;padding:22px 18px}
.pay-head{display:flex;flex-direction:column}
.pay-price{font-size:34px;font-weight:800;color:#4e2e8f;line-height:1}
.pay-sub{font-size:13px;color:var(--soft)}
.pay-qr{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px;line-height:0}
.pay-qr img{display:block;width:220px;height:220px;image-rendering:pixelated}
.pay-hint{font-size:14px;color:var(--soft);margin:0}
.pay-note{font-size:13px;color:var(--soft);background:#f6efdb;border-radius:10px;padding:10px 12px;margin:0}
.pay .share-row{width:100%}
.pay-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:var(--card);
  border:1.5px solid var(--line);border-radius:18px;padding:30px 20px}
.pay-done-emoji{font-size:52px;line-height:1;animation:pop .7s cubic-bezier(.2,.8,.2,1) both}

/* ---------- Conta / segurança ---------- */
.forgot-link{margin:-4px 0 0;text-align:right}
.forgot-link a{font-size:13px;color:var(--accent);font-weight:700;text-decoration:none}
.acct-sec{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.acct-h{font-size:19px}
.acct-sec .form{margin-top:4px}
.acct-logout{margin-top:22px}

/* ---------- Painel de criador ---------- */
.cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:1px;box-shadow:0 12px 26px -22px rgba(0,0,0,.5)}
.cr-card b{font-size:26px;font-weight:800;line-height:1.1;color:var(--ink)}
.cr-card > span{font-size:13px;font-weight:700;color:var(--soft)}
.cr-card small{font-size:11px;color:var(--soft);opacity:.85;margin-top:2px}
.cr-money{background:linear-gradient(135deg,#efe6f9,#f3ecff);border-color:#d9c7f2}
.cr-money b{color:#4e2e8f}
.cr-h{font-size:16px;font-weight:800;margin:24px 0 10px;color:var(--ink)}
.cr-bars{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.cr-bars li{display:flex;align-items:center;gap:10px;font-size:13px}
.cr-bar-lab{flex:0 0 128px;font-weight:600;color:var(--ink)}
.cr-bar{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.cr-bar > span{display:block;height:100%;background:var(--accent);border-radius:6px}
.cr-bars b{flex:0 0 28px;text-align:right;font-weight:800;color:var(--ink)}
@media (min-width:560px){.cr-grid{grid-template-columns:repeat(3,1fr)}}

/* Rodapé com links legais */
.site-foot{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--soft)}
.site-foot a{color:var(--soft);text-decoration:none;font-weight:600;margin:0 8px}
.site-foot a:hover{color:var(--accent)}
.form-legal{font-size:12.5px;color:var(--soft);text-align:center;margin-top:2px;line-height:1.5}
.form-legal a{color:var(--accent);font-weight:700}

/* ========== Landing redesign: scroll, movimento e personalidade ========== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.22s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Decorações flutuantes (parallax) */
.lp-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55}
.blob.b1{width:340px;height:340px;background:radial-gradient(circle,#f6cfa8,transparent 70%);top:-90px;right:-70px}
.blob.b2{width:320px;height:320px;background:radial-gradient(circle,#e7cbf1,transparent 70%);top:64vh;left:-100px}
.fl{position:absolute;font-size:34px;opacity:.8;animation:floaty 8s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
.fl1{top:24%;left:5%}.fl2{top:13%;right:9%;font-size:23px;animation-delay:-2s}
.fl3{top:68%;right:7%;animation-delay:-4s}.fl4{top:80%;left:8%;font-size:27px;animation-delay:-3s}

/* Hero: profundidade + tilt */
.lp-hero-cta{position:relative;animation:fadeUp .6s .15s both}
.lp-hero-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mock-stack{position:relative}
.mock-back{position:absolute;inset:0;border-radius:22px;background:#fff;opacity:.5;transform:rotate(6deg) translate(12px,10px);box-shadow:0 30px 54px -32px rgba(90,40,60,.45)}
.lp-hero-art[data-tilt]{perspective:1000px}
.lp-hero-art[data-tilt] .mock{transition:transform .18s ease-out;transform-style:preserve-3d}

/* Marquee de tipos de festa */
.lp-marquee{overflow:hidden;margin:30px 0 6px;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.45);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lp-track{display:flex;gap:36px;width:max-content;animation:marquee 30s linear infinite;white-space:nowrap}
.lp-track span{font-family:var(--display);font-weight:700;font-size:15px;color:var(--soft)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lp-marquee:hover .lp-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lp-track{animation:none}}

/* Seções */
.lp-section{max-width:840px;margin:46px auto 0;width:100%;padding:0 20px;text-align:center}
.lp-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.lp-h2{font-size:clamp(24px,5.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 22px;text-wrap:balance}
.lp-section .lp-steps,.lp-section .lp-feats{margin-top:4px}

/* Passos: um caminho conecta os números */
.step{transition:transform .15s,box-shadow .15s}
.step:hover{transform:translateY(-2px)}

/* Seção emocional */
.lp-emotion{max-width:740px;margin:48px auto 0;padding:0 20px;width:100%}
.lp-emotion-card{background:linear-gradient(135deg,#E8763F,#C9557A);color:#fff;border-radius:26px;padding:32px 28px;text-align:center;
  box-shadow:0 34px 64px -34px rgba(150,60,70,.6);position:relative;overflow:hidden}
.lp-emotion-card::before{content:"”";position:absolute;top:-18px;left:14px;font-family:Georgia,serif;font-size:120px;opacity:.14;line-height:1}
.lp-quote{font-family:var(--display);font-size:clamp(18px,3.6vw,25px);font-weight:600;line-height:1.34;position:relative}
.lp-emotion-stat{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:1px}
.lp-emotion-stat b{font-family:var(--display);font-size:46px;font-weight:800;line-height:1}
.lp-emotion-stat span{font-size:14px;opacity:.92}

/* Features vivas */
.feat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:18px 14px;transition:transform .16s,box-shadow .16s}
.feat:hover{transform:translateY(-4px);box-shadow:0 20px 34px -22px rgba(120,60,40,.5)}
.feat-ic{font-size:27px;line-height:1}
.feat b{font-size:14px;margin-top:4px}
.feat small{color:var(--soft);font-size:12px;font-weight:500;line-height:1.3}

/* CTA final */
.lp-cta-final{max-width:840px;margin:50px auto 0;padding:0 20px;width:100%}
.lp-cta-inner{background:var(--card);border:1.5px solid var(--line);border-radius:28px;padding:40px 26px;text-align:center;
  box-shadow:0 26px 54px -36px rgba(0,0,0,.5);position:relative;overflow:hidden}
.lp-cta-inner::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);top:-90px;right:-60px}
.lp-cta-inner h2{font-family:var(--display);font-size:clamp(24px,6vw,36px);font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.lp-cta-inner p{color:var(--soft);margin:0 0 22px}
.lp-cta-inner .btn.big{position:relative}

@media (min-width:720px){
  .lp-feats{grid-template-columns:repeat(3,1fr)}
}