/* Funil de descoberta — /demo e /convite. Por cima do CSS do app (theme/app/invites/secret-santa via funil/app/):
   só o que é da demo (barra de etapas, escolha, selos de simulação, final). Mobile primeiro (375–430 px). */

.demo-body { min-height:100vh; display:flex; flex-direction:column; }
.demo-main { flex:1 0 auto; width:100%; }

/* ---- topo fixo: marca + etapa atual (fica acima dos modais) ---- */
.demo-top { position:sticky; top:0; z-index:110; background:var(--topbar-bg,rgba(250,246,240,.92)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(56,47,43,.08); }
.demo-top-row { display:flex; align-items:center; gap:10px; width:min(1080px,calc(100% - 32px)); min-height:56px; margin:0 auto; }
.demo-brand { flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.04em; text-decoration:none; }
.demo-brand b { font-weight:600; color:var(--accent); }
.demo-badge { padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.demo-top-cta { margin-left:auto; padding:8px 14px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }

.demo-tour { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:0 0 10px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; }
.demo-tour-hint { margin:0; font-size:14px; line-height:1.35; }
.demo-tour-hint b { color:var(--accent-dark); }
.demo-dots { grid-column:1 / -1; grid-row:2; display:flex; gap:4px; margin:0; padding:0; list-style:none; }
.demo-dots li { flex:1; height:4px; border-radius:4px; background:var(--line); transition:background .3s; }
.demo-dots li.on { background:var(--accent); }
.demo-tour-actions { display:flex; gap:4px; }
.demo-tour-actions button { min-height:32px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font:600 12.5px/1 var(--sans); cursor:pointer; }
.demo-tour-actions button:hover { border-color:var(--accent-line); }

/* destaque discreto do que a dica pede */
.demo-focus { box-shadow:0 0 0 3px rgba(var(--accent-rgb),.45), 0 18px 40px -18px rgba(var(--accent-rgb),.6) !important; border-radius:22px; }

/* ---- escolha ---- */
.demo-choose,.demo-end { width:min(620px,calc(100% - 32px)); margin:0 auto; padding:36px 0 56px; text-align:center; }
.demo-kicker { margin:0 0 8px; color:var(--accent-dark); font-family:var(--display); font-size:19px; font-style:italic; }
.demo-choose h1,.demo-end h1 { margin:0 0 10px; font-size:clamp(34px,8vw,52px); line-height:1.04; letter-spacing:-.03em; }
.demo-lead { margin:0 auto 22px; max-width:500px; color:var(--muted); font-size:16px; line-height:1.55; }
.demo-choices { display:grid; gap:12px; }
.demo-choice { display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s, border-color .15s; }
.demo-choice:hover { border-color:var(--accent-line); transform:translateY(-1px); }
.demo-choice-icon { grid-row:1 / 3; width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:var(--accent-soft); font-size:28px; }
.demo-choice.is-ss .demo-choice-icon { background:#f6dede; }
.demo-choice strong { font-family:var(--display); font-size:23px; font-weight:500; letter-spacing:-.02em; }
.demo-choice span:last-child { color:var(--muted); font-size:14px; line-height:1.45; }
.demo-fine { margin:18px 0 0; color:var(--muted); font-size:13.5px; line-height:1.55; }
.demo-fine a { color:var(--accent-dark); font-weight:700; }

/* ---- chá de bebê ---- */
.demo-rsvp { padding-top:22px; }
.demo-accepted { width:min(1080px,calc(100% - 32px)); margin:16px auto 0; }
.demo-pub .public-hero { min-height:0; padding:44px 20px 70px; }
.demo-pub .public-hero-copy h1 { font-size:clamp(36px,9vw,72px); }
.demo-price { margin:4px 0 0; font-weight:700; font-size:14px; }
.demo-done { margin:22px 0 10px; padding:18px; border-radius:22px; background:var(--accent-soft); }
.demo-done p { margin:0 0 12px; line-height:1.5; }
.demo-sim { justify-self:start; padding:4px 10px; border-radius:999px; background:#fff3c4; color:#6b4f00; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.demo-fake-qr { margin:0; text-align:center; }
.demo-fake-qr-box { position:relative; width:168px; height:168px; margin:0 auto; border-radius:20px; background:
    repeating-linear-gradient(90deg,rgba(56,47,43,.14) 0 8px,transparent 8px 16px),
    repeating-linear-gradient(0deg,rgba(56,47,43,.14) 0 8px,transparent 8px 16px), #fff;
  box-shadow:inset 0 0 0 10px #fff, 0 18px 40px -26px rgba(var(--accent-rgb),.7); display:grid; place-items:center; }
.demo-fake-qr-box span { padding:6px 12px; border-radius:8px; background:#fff3c4; color:#6b4f00; font-size:13px; font-weight:800; letter-spacing:.12em; transform:rotate(-8deg); }
.demo-fake-qr figcaption { margin-top:10px; color:var(--muted); font-size:13px; }

/* ---- amigo secreto ---- */
.demo-ss { width:min(720px,calc(100% - 32px)); margin:0 auto; padding:18px 0 40px; }
.demo-ss .ss-card { margin-top:14px; }
.demo-ss .ss-person-card { width:100%; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.demo-wishes { display:grid; gap:8px; margin:12px 0 14px; padding:0; list-style:none; }
.demo-wish { width:100%; display:grid; grid-template-columns:48px 1fr 32px; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.demo-wish img { width:48px; height:48px; border-radius:12px; }
.demo-wish strong { display:block; font-size:14px; line-height:1.3; }
.demo-wish small { color:var(--muted); font-size:12.5px; }
.demo-wish b { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); font-size:18px; }
.demo-wish.on { border-color:var(--accent); background:var(--accent-soft); }
.demo-wish.on b { background:var(--accent); color:#fff; }
.demo-draw h2 { margin-top:0; }
.demo-papers { display:flex; justify-content:center; gap:10px; margin:12px 0 14px; font-size:28px; }
.demo-papers span { display:inline-block; transition:transform .3s; }
.demo-papers.is-drawing span { animation:demo-shuffle .5s ease-in-out infinite alternate; }
.demo-papers.is-drawing span:nth-child(2n) { animation-delay:.15s; }
@keyframes demo-shuffle { from { transform:translateY(0) rotate(-8deg); } to { transform:translateY(-12px) rotate(8deg); } }
.demo-person-modal h2 { margin-right:28px; }
.demo-person-items { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.demo-person-items li { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:12px; }
.demo-person-items img { width:44px; height:44px; border-radius:12px; }
.demo-person-items strong { display:block; font-size:14px; line-height:1.3; }
.demo-person-items small { color:var(--muted); font-size:12.5px; }

/* ---- final ---- */
.demo-end-icon { display:inline-grid; place-items:center; width:72px; height:72px; margin-bottom:12px; border-radius:24px; background:var(--accent-soft); font-size:36px; }
.demo-end .btn { margin-top:10px; }
.demo-end-links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:18px; }
.demo-end-links .link-button { font-size:14px; font-weight:600; }
.demo-noscript { width:min(620px,calc(100% - 32px)); margin:20px auto; }

/* ---- convites demonstrativos (/convite/bebe | panela | amigo): a peça parece um convite de verdade ---- */
.disc { width:min(420px,calc(100% - 32px)); margin:0 auto; padding:18px 0 28px; }
.disc-stage invite-animation { display:block; max-width:380px; margin:0 auto; }
.disc-fine { margin:10px 0 0; text-align:center; color:var(--muted); font-size:12.5px; letter-spacing:.02em; animation:iva-fade .6s ease-out both; }
/* sem vídeo-base (panela, por enquanto) o card do componente aparece direto: aqui ele ganha a entrada do card */
.disc .iva.is-instant:not(.has-video) .iva-name { animation:iva-rise .8s .15s ease-out both; }
.disc .iva.is-instant:not(.has-video) .iva-art { animation:iva-grow .9s ease-out both; }
.disc .iva.is-instant:not(.has-video) .iva-kicker,.disc .iva.is-instant:not(.has-video) .iva-lead,
.disc .iva.is-instant:not(.has-video) .iva-cta { animation:iva-fade .7s .45s ease-out both; }
.demo-notice { grid-column:1 / -1; margin:0 0 2px; padding:6px 10px; border-radius:10px; background:#fff3c4; color:#5b4300; font-size:12.5px; font-weight:600; line-height:1.35; }
.demo-share { display:grid; gap:0; margin-top:4px; }
.demo-choice.is-kitchen .demo-choice-icon { background:#e2e9db; }

/* ---- convite de apresentação (/convite) ---- */
.pi-panel .rsvp-title { margin-bottom:10px; }
.pi-text { margin:0 0 10px; color:var(--muted); font-size:16px; line-height:1.55; }
.pi-free { margin:0 0 18px; font-weight:700; }
.pi-panel .btn { margin-top:4px; }
.pi-more { display:block; margin-top:14px; text-align:center; color:var(--accent-dark); font-size:14px; font-weight:700; }

@media (max-width:440px) {
  /* com o "Criar o meu" no topo não cabe o selo: a barra de etapas já diz que é demonstração */
  .demo-top-row:has(.demo-top-cta) .demo-badge { display:none; }
}
@media (max-width:620px) {
  .demo-tour { grid-template-columns:1fr; }
  .demo-tour-actions { grid-row:3; }
  .demo-tour-actions button { flex:1; }
  .demo-rsvp { padding-top:14px; }
}
@media (min-width:900px) {
  .demo-choices { grid-template-columns:repeat(3,1fr); }
  .demo-choice { grid-template-columns:1fr; grid-template-rows:auto; text-align:center; justify-items:center; gap:8px; padding:26px 22px; }
  .demo-choice-icon { grid-row:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-papers.is-drawing span { animation:none; }
  .disc .iva-stage * { animation:none !important; }
}
.demo-end .demo-fine a { display:inline-block; margin:2px 6px; }