/* Abre Aqui — feito para celular (quem escaneia o QR). Visual da etiqueta de presente. */
:root{
  --paper:#fbf7f5; --surface:#ffffff; --ink:#2a1838; --muted:#6b5a76; --line:#eadfe6; --soft:#f4e9ef;
  --accent:#c4462f; --accent-ink:#ffffff; --focus:#7a3fa0; --ok:#2f7d55; --err:#b3261e;
  --band:#3b1f4f; --on-band:#ffffff; --on-band-muted:#d9c8e4;
  --kraft:#d8b78c; --kraft-dark:#c39d6c; --kraft-ink:#4a3320;
  --o-natal:#1d6a4e; --o-aniv:#c4462f; --o-prof:#2d5ca6; --o-amor:#a8355f; --o-fe:#7b5a1d; --o-livre:#3b1f4f;
  --f-display:"Caprasimo","Cooper Black",Georgia,serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Consolas,monospace;
  --f-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

.top{background:var(--band);color:var(--on-band);display:flex;align-items:baseline;gap:10px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
.brand{font-family:var(--f-display);font-size:24px;color:var(--on-band);text-decoration:none}
.by{color:var(--on-band-muted);font-size:14px}

main{max-width:480px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:18px}
.loading{color:var(--muted);text-align:center;padding:60px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 18px;font-weight:700;cursor:pointer;text-decoration:none;font-size:16px}
.btn-main{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-band{background:var(--band);color:var(--on-band)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-wide{width:100%}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-weight:600;font-size:14px}
.hint{font-size:13px;color:var(--muted)}
.err{color:var(--err);font-size:14px;font-weight:600}
input[type=text],input[type=email],input[type=date],input:not([type]),textarea{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{border-color:var(--focus);outline:none}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;gap:16px}
.eyebrow{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.06em}
.panel h2{font-size:28px}
.how{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.price{background:var(--soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.price b{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1}
.price ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.pix{display:flex;flex-direction:column;align-items:center;gap:12px;border:1.5px dashed var(--line);border-radius:14px;padding:16px;text-align:center}
.pix .qr{width:200px;height:200px;background:#fff;padding:8px;border-radius:8px}
.pix .qr img,.pix .qr canvas{width:100%!important;height:100%!important;display:block}
.pix code{font-family:var(--f-mono);font-size:12px;word-break:break-all;background:var(--soft);padding:8px;border-radius:8px;max-width:100%;max-height:96px;overflow:auto}
.ok-box{background:var(--soft);border-left:4px solid var(--ok);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ok-box b{color:var(--ok)}
.note-box{background:var(--soft);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.note-box code{font-family:var(--f-mono);font-size:12px;word-break:break-all}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 13px;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.chip[aria-pressed="true"]{border-color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c)}
.photos{display:flex;gap:10px;flex-wrap:wrap}
.ph{width:88px;height:88px;border-radius:10px;overflow:hidden;position:relative;background:var(--soft)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}
.ph-add{width:88px;height:88px;border-radius:10px;border:1.5px dashed var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);cursor:pointer;text-align:center;position:relative}
.ph-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.saved{color:var(--ok);font-weight:600;font-size:14px}

/* etiqueta + carta */
.stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.string{width:2px;height:34px;background:var(--kraft-dark);margin-bottom:-18px}
.tag{position:relative;width:min(100%,320px);background:var(--kraft);color:var(--kraft-ink);padding:64px 24px 28px;text-align:center;
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);display:flex;flex-direction:column;gap:10px;align-items:center;transform-origin:50% 0}
.tag::before{content:"";position:absolute;top:22px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 4px var(--kraft-dark)}
.tag-for{font-family:var(--f-hand);font-size:30px;line-height:1}
.tag-big{font-family:var(--f-display);font-size:26px;line-height:1.1}
.tag-small{font-size:14px}
.tag .btn{margin-top:8px}
.swing{animation:swing 2.4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.letter{width:100%;background:var(--surface);border-radius:18px;overflow:hidden;border:1px solid var(--line);animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(18px);opacity:.3}to{transform:none;opacity:1}}
.letter-head{background:var(--occ);color:#fff;padding:22px 22px 18px;display:flex;flex-direction:column;gap:4px}
.letter-head .ey{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-weight:700}
.letter-head h3{font-size:30px}
.letter-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:16px}
.msg{font-size:17px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.sign{font-size:15px;color:var(--muted)}
.sign span{display:block;font-family:var(--f-hand);font-size:30px;color:var(--ink);line-height:1.1}
.from-store{font-size:12px;color:var(--muted);text-align:center;border-top:1px dashed var(--line);padding-top:12px}
.reply{width:100%;display:flex;flex-direction:column;gap:10px;background:var(--soft);border-radius:14px;padding:16px}
.reply textarea{min-height:90px}
.cta-more{text-align:center;font-size:14px;color:var(--muted)}

.home h1{font-size:30px}
.home p{color:var(--muted)}
.code-form{display:flex;flex-direction:column;gap:10px}
.code-form input{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:18px}
.foot{font-size:13px;text-align:center;margin-top:24px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);z-index:5}

@media (prefers-reduced-motion:reduce){.swing,.letter{animation:none}}