:root {
  --paper: #ffffff;
  --ink: #12333a;
  --ink-soft: #4d6a70;
  --line: #d9e8ea;
  --tape: #5ad6e0;
  --tape-deep: #2bb8c6;
  --tape-pale: #e8fafc;
  --berry: #d8443b;
  --ok: #1d9a6c;
  --radius: 18px;
  --shadow: 0 1px 0 rgba(18,51,58,.04), 0 12px 30px -14px rgba(18,51,58,.22);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 17px/1.55 var(--sans);
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(90,214,224,.22) 1px, transparent 0);
  background-size: 26px 26px;
}
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--tape-deep); outline-offset: 3px; border-radius: 8px; }

/* ── layout ── */
.shell { max-width: 880px; margin: 0 auto; padding: 18px 20px 64px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 22px; gap: 12px; }
.brand { font-family: var(--serif); font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.brand .tree { font-size: 22px; }
.link { background: none; border: 0; padding: 6px 4px; color: var(--ink-soft); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tape); text-decoration-thickness: 2px; }
.link:hover { color: var(--ink); }

/* ── fita adesiva (washi tape) ── */
.tape-wrap { display: block; width: fit-content; max-width: 100%; filter: drop-shadow(0 3px 3px rgba(18,51,58,.14)); transform: rotate(-1.4deg); }
.tape-wrap.alt { transform: rotate(1.1deg); }
.tape {
  display: block; padding: .75rem 2rem; color: #0a2a30; font-family: var(--serif); font-weight: 600;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(rgba(90,214,224,.86), rgba(90,214,224,.86));
  clip-path: polygon(0 0,100% 0,98.4% 10%,100% 20%,98.4% 30%,100% 40%,98.4% 50%,100% 60%,98.4% 70%,100% 80%,98.4% 90%,100% 100%,0 100%,1.6% 90%,0 80%,1.6% 70%,0 60%,1.6% 50%,0 40%,1.6% 30%,0 20%,1.6% 10%);
}
.tape.sm { padding: .35rem 1.2rem; font-size: 14px; font-family: var(--sans); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.corner-tape { position: absolute; width: 74px; height: 24px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 5px, transparent 5px 10px), rgba(90,214,224,.8); opacity: .95; }
.corner-tape.tl { top: -8px; left: -22px; transform: rotate(-38deg); }
.corner-tape.br { bottom: -8px; right: -22px; transform: rotate(-38deg); }

/* ── cartões ── */
.card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.stack > * + * { margin-top: 18px; }
.hint { font-family: var(--hand); font-size: 24px; line-height: 1.15; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; }

/* ── botões ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 14px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font-weight: 800; cursor: pointer;
  box-shadow: 4px 4px 0 var(--tape); transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--tape); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--tape); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: 4px 4px 0 var(--tape); }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.block { width: 100%; }
.btn.google { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--line); }
.btn.google:hover { box-shadow: 6px 6px 0 var(--line); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }

/* ── campos ── */
.field { display: block; text-align: left; }
.field > span { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.input {
  width: 100%; min-height: 54px; padding: 12px 16px; background: #fff; border: 2px solid var(--line); border-radius: 14px;
  font-size: 18px; transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--tape-deep); box-shadow: 0 0 0 4px rgba(90,214,224,.3); }
textarea.input { min-height: 96px; resize: vertical; }
.money { position: relative; }
.money b { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-soft); }
.money .input { padding-left: 52px; font-size: 26px; font-weight: 800; font-family: var(--serif); }
.err { color: var(--berry); font-weight: 700; font-size: 15px; min-height: 22px; }

/* ── landing / auth ── */
.hero { display: grid; gap: 34px; align-items: center; padding-top: 8px; }
@media (min-width: 820px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 56px; padding-top: 28px; } }
.hero h1 { font-size: clamp(40px, 7vw, 64px); font-weight: 800; margin-top: 8px; }
.hero h1 em { font-style: normal; color: var(--berry); }
.hero .lead { font-size: 19px; color: var(--ink-soft); max-width: 30ch; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.perks li::before { content: '✦'; color: var(--tape-deep); font-size: 18px; line-height: 1.5; }
.tape-wrap.inline { display: inline-block; vertical-align: middle; }
.offer { padding: 4px 0 2px; }
.offer .small { margin-top: 10px; }
.offer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.offer-por { font-family: var(--hand); font-size: 26px; color: var(--ink-soft); }
.offer-tape { padding: .45rem 1.4rem; font-size: 19px; font-weight: 800; white-space: nowrap; }
.offer-tape.red {
  color: #fff; text-transform: uppercase; letter-spacing: .05em; font-family: var(--sans); font-size: 16px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(rgba(216,68,59,.92), rgba(216,68,59,.92));
}
.price-tape { font-size: clamp(28px, 4.6vw, 36px); padding: .3rem 1.6rem; color: var(--ink); }
.offer .tape-wrap.inline { animation: tape-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.offer .tape-wrap.inline.alt { animation: tape-in .6s .15s cubic-bezier(.34, 1.56, .64, 1) both, tape-bob 3s 1.2s ease-in-out infinite; }
.shell.wide { max-width: 1080px; }
.cta-register { margin-top: 16px; }
.cta-arrow { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@media (min-width: 820px) {
  .shell.wide .hero { align-items: start; grid-template-columns: 1.4fr 1fr; gap: 44px; }
  .auth-card { position: sticky; top: 24px; }
  .cta-arrow { display: none; }
}
.auth-card.flash { animation: flash-ring 1.2s ease-out; }

.perks-box { margin-top: 30px; }
.perks-heading { font-size: clamp(24px, 3.4vw, 30px); margin-bottom: 16px; }
.perks-heading em { font-style: normal; color: var(--berry); }
.perk-groups { display: grid; gap: 14px; }
@media (min-width: 560px) { .perk-groups { grid-template-columns: 1fr 1fr; } }
.perk-group {
  position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: 0 8px 22px -18px rgba(18,51,58,.35); overflow: hidden;
  transition: translate .2s ease, box-shadow .2s ease, border-color .2s;
  animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.perk-group::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 5px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 5px, transparent 5px 10px), var(--tape);
}
.perk-group:nth-child(2) { animation-delay: .08s; } .perk-group:nth-child(2)::before { background-color: var(--berry); }
.perk-group:nth-child(3) { animation-delay: .16s; } .perk-group:nth-child(3)::before { background-color: #f5c542; }
.perk-group:nth-child(4) { animation-delay: .24s; } .perk-group:nth-child(4)::before { background-color: var(--ok); }
.perk-group:hover { translate: 0 -4px; border-color: var(--tape-deep); box-shadow: 0 16px 28px -18px rgba(18,51,58,.45); }
.perk-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.perk-group-head h3 { font-size: 18px; }
.perk-group-icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--tape-pale); font-size: 20px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.perk-group:hover .perk-group-icon { transform: rotate(-10deg) scale(1.12); }
.perk-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.perk-group li { display: flex; gap: 10px; align-items: flex-start; }
.perk-ico { font-size: 17px; line-height: 1.35; flex: none; }
.perk-group li strong { display: block; font-size: 15px; line-height: 1.3; }
.perk-group li span:not(.perk-ico) { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }
.perks-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.perks-extra span { background: var(--tape-pale); border-radius: 99px; padding: 5px 12px; font-size: 13.5px; font-weight: 700; }
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding: 16px 18px; border-radius: 18px; border: 2px dashed var(--tape-deep);
  background: linear-gradient(135deg, var(--tape-pale), #fff);
}
.cta-strip strong { display: block; font-family: var(--serif); font-size: 22px; }
.cta-strip .small { display: block; }

@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes flash-ring { 0% { box-shadow: 0 0 0 0 rgba(43,184,198,.65), var(--shadow); } 100% { box-shadow: 0 0 0 22px rgba(43,184,198,0), var(--shadow); } }
@keyframes tape-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: rotate(-1.4deg); } }
@keyframes tape-bob { 0%, 100% { transform: rotate(1.1deg) scale(1); } 50% { transform: rotate(-1deg) scale(1.05); } }
.tabs { display: flex; gap: 6px; background: var(--tape-pale); padding: 5px; border-radius: 14px; }
.tabs button { flex: 1; border: 0; background: none; border-radius: 10px; min-height: 42px; font-weight: 800; cursor: pointer; color: var(--ink-soft); }
.tabs button[aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(18,51,58,.15); }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.or::before, .or::after { content: ''; height: 1.5px; flex: 1; background: var(--line); }

/* ── perguntas ── */
.q-wrap { max-width: 640px; margin: 0 auto; }
.progress { height: 10px; border-radius: 99px; background: var(--tape-pale); overflow: hidden; margin: 4px 0 30px; }
.progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), var(--tape); transition: width .35s ease; }
.q-card { padding: 34px 28px 28px; animation: rise .35s ease both; }
.q-card .tape-wrap { margin: -52px 0 6px -10px; }
.q-card .tape { font-size: clamp(22px, 4.6vw, 30px); line-height: 1.2; }
.q-card .hint { margin: 18px 0 20px; }
.options { display: grid; gap: 10px; }
.opt {
  text-align: left; min-height: 56px; padding: 12px 18px; background: #fff; border: 2px solid var(--line); border-radius: 14px;
  font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all .12s;
}
.opt:hover { border-color: var(--tape-deep); transform: translateX(3px); }
.opt[aria-checked=true] { background: var(--tape-pale); border-color: var(--ink); box-shadow: 3px 3px 0 var(--tape); }
.opt .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-soft); flex: none; }
.opt[aria-checked=true] .dot { border-color: var(--ink); background: radial-gradient(var(--ink) 0 45%, transparent 50%); }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── resultado / paywall ── */
.num-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.num { background: var(--tape-pale); border-radius: 16px; padding: 16px 18px; }
.num small { display: block; font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.num b { display: block; font-family: var(--serif); font-size: 32px; line-height: 1.15; margin-top: 4px; }
.locked { position: relative; border-radius: var(--radius); overflow: hidden; }
.locked .blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .75; }
.locked .veil { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.8)); font-family: var(--serif); font-weight: 800; font-size: 22px; text-align: center; padding: 20px; }
.price { font-family: var(--serif); font-weight: 800; font-size: 54px; line-height: 1; }
.price small { font-size: 18px; font-family: var(--sans); font-weight: 700; color: var(--ink-soft); }
.loader { text-align: center; padding: 70px 10px; }
.spinner { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 50%; border: 5px solid var(--tape-pale); border-top-color: var(--tape-deep); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── pix ── */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(18,51,58,.5); display: grid; place-items: center; padding: 18px; overflow: auto; }
.modal { width: min(460px, 100%); max-height: 96vh; overflow: auto; }
.qr { display: block; width: 224px; height: 224px; margin: 0 auto; border: 2px solid var(--line); border-radius: 16px; padding: 8px; image-rendering: pixelated; }
.code { word-break: break-all; font: 13px/1.4 ui-monospace, Menlo, monospace; background: var(--tape-pale); border-radius: 12px; padding: 12px; max-height: 84px; overflow: auto; text-align: left; }
.pix-validade { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); background: var(--tape-pale); border-radius: 12px; padding: 8px 12px; }
.pix-validade:empty { display: none; }
.verify-icon { font-size: 54px; line-height: 1; animation: jingle 1.2s ease-in-out 2; }
.wait { display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 700; color: var(--ink-soft); }
.wait .spinner { width: 18px; height: 18px; border-width: 3px; margin: 0; }

/* ── painel ── */
.dash-hero { display: grid; gap: 22px; align-items: center; }
@media (min-width: 700px) { .dash-hero { grid-template-columns: 200px 1fr; } }
.ring { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { stroke: var(--tape-pale); } .ring .fg { stroke: var(--tape-deep); transition: stroke-dashoffset .8s ease; }
.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .mid b { font-family: var(--serif); font-size: 38px; line-height: 1; }
.ring .mid span { font-size: 13px; font-weight: 800; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; }
.countdown { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 6vw, 48px); line-height: 1.05; }
.countdown em { font-style: normal; color: var(--berry); }
.section { margin-top: 30px; }
.section > .tape-wrap { margin-bottom: 14px; }
.grid2 { display: grid; gap: 14px; } @media (min-width: 700px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.item { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; }
.item h3 { font-size: 18px; margin-bottom: 4px; }
.pill { display: inline-block; background: var(--tape-pale); border-radius: 99px; padding: 2px 12px; font-weight: 800; font-size: 14px; }
.steps { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 3px dashed var(--tape); }
.steps > li { position: relative; padding: 0 0 20px 22px; }
.steps > li::before { content: ''; position: absolute; left: -31px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--tape-deep); }
.steps ul { margin: 6px 0 0; padding-left: 18px; }
.care { background: #fff8f6; border-color: #f2c9c4; }
.feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feed li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border-bottom: 1.5px dashed var(--line); padding-bottom: 10px; }
.feed .amt { font-family: var(--serif); font-weight: 800; color: var(--ok); }
.feed .fb { grid-column: 1 / -1; font-size: 15px; color: var(--ink-soft); }
.feed .amt { display: inline-flex; align-items: center; gap: 8px; }
.feed li.saida .amt { color: var(--berry); }
.feed .undo { font-family: var(--sans); font-weight: 400; color: var(--ink-soft); opacity: .6; }
.feed .undo:hover, .feed .undo:focus-visible { opacity: 1; color: var(--berry); }
.retirada-form { padding-top: 12px; border-top: 1.5px dashed var(--line); }
.answer { background: var(--tape-pale); border-radius: 14px; padding: 14px 16px; white-space: pre-wrap; }
.disclaimer { margin-top: 40px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ── abas do dashboard ── */
.tab-bar { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { flex: none; border: 2px solid var(--line); background: #fff; border-radius: 99px; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--ink-soft); white-space: nowrap; transition: all .15s; }
.tab-btn:hover { border-color: var(--tape-deep); color: var(--ink); }
.tab-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--tape); }

/* ── cards de jogos ── */
.game-card { display: flex; flex-direction: column; }
.game-card .btn { margin-top: auto; text-decoration: none; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234d6a70' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px); opacity: 0; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 700; transition: all .3s; z-index: 50; max-width: 92vw; text-align: center; }
#toast.on { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Aba Pausa Antes de Comprar ── */
.pausa-highlight {
  background: linear-gradient(135deg, #fff8e1, #fef3c7);
  border-color: #f5d77a;
}
.pausa-meta-box {
  background: rgba(255,255,255,.75);
  border: 1.5px dashed var(--tape-deep);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 16px;
}
.sentimento-opt {
  display: flex;
  gap: 14px;
  align-items: center;
}
.decisao-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
  transition: all .15s;
}
.decisao-card:hover { border-color: var(--tape-deep); transform: translateX(3px); }
.decisao-card .decisao-icon { font-size: 32px; flex: none; }
.jogo-memoria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}
.respira-circle {
  width: 140px; height: 140px; border-radius: 50%;
  border: 6px solid var(--tape-deep);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  transition: all 1.8s ease;
}
.tab-btn[data-id="pausa"] { background: #fff8e1; border-color: #f5d77a; color: #7a5a00; }
.tab-btn[data-id="pausa"]:hover { border-color: var(--tape-deep); color: var(--ink); }
.tab-btn[data-id="pausa"].active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── árvore evolutiva ── */
.arvore-card { overflow: hidden; }
.arvore-layout { display: grid; gap: 18px; align-items: center; }
@media (min-width: 700px) { .arvore-layout { grid-template-columns: 220px 1fr; } }
.xtree { position: relative; width: 200px; height: 268px; margin: 0 auto; }
.xtree svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xt-s {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.xtree:not(.g1) .s1, .xtree:not(.g2) .s2, .xtree:not(.g3) .s3,
.xtree:not(.g4) .s4, .xtree:not(.g5) .s5, .xtree.g1 .s0only { opacity: 0; transform: scale(.3); }
.xt-layer { filter: drop-shadow(0 3px 0 rgba(18,51,58,.14)); }

.xt-garland path { fill: none; stroke: #f5c542; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 5; }
.xt-lights circle { filter: drop-shadow(0 0 3px var(--c)); animation: twinkle 1.6s ease-in-out infinite alternate; }

.xt-star-shape { fill: #fff; stroke: #d9b85a; stroke-width: 1.4; stroke-linejoin: round; transition: fill .4s; }
.xt-star-glow { opacity: 0; transition: opacity .5s; }
.xtree.g6 .xt-star-shape { fill: url(#xtGold); stroke: #e09a22; }
.xtree.g6 .xt-star-glow { opacity: 1; animation: star-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.xtree.g6 { filter: drop-shadow(0 0 18px rgba(90,214,224,.35)); }

.xt-snow circle { fill: #fff; stroke: #bfe6ec; stroke-width: .6; animation: snow-fall 7s linear infinite backwards; }

.xt-hang { position: absolute; inset: 0; pointer-events: none; }
.xtree:not(.g1) .xt-hang { visibility: hidden; }
.xt-ball {
  position: absolute; margin: -10px 0 0 -10px; font-size: 20px; line-height: 1;
  filter: drop-shadow(0 2px 1px rgba(18,51,58,.25)); animation: orn-pop .45s ease both;
}
.arvore-progress { margin: 2px 0 0; }

@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes star-pulse { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.15); } }
@keyframes snow-fall { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } to { transform: translate(8px, 266px); opacity: 0; } }
@keyframes orn-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.orn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.orn-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px dashed var(--line);
  border-radius: 14px; background: #fff; opacity: .72;
}
.orn-card.on { opacity: 1; border-style: solid; background: var(--tape-pale); border-color: var(--tape-deep); }
.orn-emo { font-size: 22px; line-height: 1.2; }

/* ── como começar ── */
.comecar { padding: 0; overflow: hidden; border-color: var(--tape-deep); }
.comecar > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding: 20px 24px; background: linear-gradient(135deg, var(--tape-pale), #fff);
}
.comecar > summary::-webkit-details-marker { display: none; }
.comecar > summary::after { content: '▾'; font-size: 20px; color: var(--ink-soft); transition: transform .25s; }
.comecar[open] > summary::after { transform: rotate(180deg); }
.comecar-q { font-family: var(--serif); font-weight: 800; font-size: 24px; flex: 1 1 auto; }
.comecar-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.comecar-progress { width: 110px; margin: 0; height: 8px; }
.comecar > .hint { padding: 16px 24px 0; }
.comecar-list { list-style: none; margin: 0; padding: 12px 24px 24px; display: grid; gap: 12px; counter-reset: none; }
.comecar-step {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; transition: background .25s, border-color .25s, opacity .25s;
  animation: rise .4s cubic-bezier(.22, 1, .36, 1) both;
}
.comecar-step:nth-child(2) { animation-delay: .05s; } .comecar-step:nth-child(3) { animation-delay: .1s; }
.comecar-step:nth-child(4) { animation-delay: .15s; } .comecar-step:nth-child(5) { animation-delay: .2s; }
.comecar-step:nth-child(6) { animation-delay: .25s; }
.comecar-step h3 { font-size: 17px; }
.comecar-step .stack > * + * { margin-top: 6px; }
.comecar-step.done { background: #f1fbf6; border-color: #bfe6d3; }
.comecar-step.done h3 { text-decoration: line-through; text-decoration-color: var(--ok); text-decoration-thickness: 2px; }
.comecar-check { position: relative; flex: none; cursor: pointer; }
.comecar-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.comecar-num {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tape-deep);
  font-weight: 800; color: var(--tape-deep); background: #fff; transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
}
.comecar-check input:checked + .comecar-num { background: var(--ok); border-color: var(--ok); color: transparent; transform: scale(1.08); }
.comecar-check input:checked + .comecar-num::after { content: '✓'; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.comecar-check input:focus-visible + .comecar-num { outline: 3px solid var(--tape-deep); outline-offset: 2px; }
.comecar-dicas { margin: 4px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-soft); }
.comecar-dicas li + li { margin-top: 2px; }

.passo-card { background: linear-gradient(180deg, #e8fafc, #fff); }
.passo-titulo { font-size: 26px; margin-bottom: 4px; }

/* ── rodapé ── */
.site-footer {
  margin-top: 56px; padding-top: 22px; border-top: 1.5px dashed var(--line);
  text-align: center; color: var(--ink-soft); display: grid; gap: 4px;
}
.site-footer a {
  color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--tape);
  text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s;
}
.site-footer a:hover { color: var(--tape-deep); text-decoration-color: var(--berry); }

/* ── efeitos ── */
.snowfall { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.snowfall span {
  position: absolute; top: -24px; left: var(--x); font-size: var(--size); line-height: 1;
  color: rgba(43,184,198,.32); animation: site-snow var(--dur) linear var(--delay) infinite;
}
.shell { position: relative; z-index: 1; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }

.shell > :not(.topbar) { animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.shell > :nth-child(3) { animation-delay: .06s; }
.shell > :nth-child(n+4) { animation-delay: .12s; }
.section { animation: rise .55s cubic-bezier(.22, 1, .36, 1) both; }
.section:nth-of-type(2) { animation-delay: .08s; }
.section:nth-of-type(3) { animation-delay: .16s; }
.section:nth-of-type(4) { animation-delay: .24s; }
.section:nth-of-type(n+5) { animation-delay: .3s; }
.perks li { animation: slide-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.perks li:nth-child(1) { animation-delay: .15s; } .perks li:nth-child(2) { animation-delay: .25s; }
.perks li:nth-child(3) { animation-delay: .35s; } .perks li:nth-child(4) { animation-delay: .45s; }
.perks li:nth-child(5) { animation-delay: .55s; } .perks li:nth-child(6) { animation-delay: .62s; }
.perks li:nth-child(7) { animation-delay: .69s; } .perks li:nth-child(8) { animation-delay: .76s; }
.perks li:nth-child(9) { animation-delay: .83s; } .perks li:nth-child(n+10) { animation-delay: .9s; }
.num-grid .num { animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.num-grid .num:nth-child(2) { animation-delay: .08s; } .num-grid .num:nth-child(3) { animation-delay: .16s; }
.num-grid .num:nth-child(4) { animation-delay: .24s; }

.brand .tree { display: inline-block; transform-origin: 50% 90%; animation: sway 3.2s ease-in-out infinite; }
.brand:hover .tree { animation: jingle .6s ease-in-out 2; }
.hero h1 em, .countdown em {
  background: linear-gradient(transparent 62%, rgba(245,197,66,.55) 62%) no-repeat 0 0 / 0% 100%;
  animation: highlight .9s .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.countdown em { display: inline-block; animation: highlight .9s .3s cubic-bezier(.22, 1, .36, 1) forwards, heartbeat 2.8s 1.4s ease-in-out infinite; }

.item, .num, .orn-card { transition: translate .2s ease, box-shadow .2s ease, border-color .2s; }
.item:hover, .num:hover, .orn-card.on:hover { translate: 0 -3px; box-shadow: 0 10px 22px -14px rgba(18,51,58,.35); }
.card:hover > .corner-tape { animation: wiggle .5s ease-in-out; }
.tab-btn.active { animation: pop-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.price { animation: heartbeat 2.6s ease-in-out infinite; transform-origin: center; }
.btn.shine { position: relative; overflow: hidden; }
.btn.shine::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: shine 2.8s ease-in-out 1s infinite;
}
#toast.on { animation: toast-bounce .45s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes site-snow { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--drift), 110vh) rotate(240deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes jingle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg) scale(1.1); } 75% { transform: rotate(16deg) scale(1.1); } }
@keyframes highlight { to { background-size: 100% 100%; } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.06); } 16% { transform: scale(1); } 24% { transform: scale(1.04); } 32% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 70% { rotate: 5deg; } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 45%, 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes toast-bounce { from { transform: translate(-50%, 40px) scale(.9); } to { transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .snowfall { display: none; }
  .hero h1 em, .countdown em { background-size: 100% 100%; }
  .xt-ball, .xt-lights circle, .xt-star-glow { animation: none !important; }
  .xt-snow { display: none; }
  .xt-s { transition: none; }
}