/* ============================================================
   PYPAG · cena das páginas públicas (/profile/:username e /donate/:username)
   Base visual: glassmorphism sobre vídeo/imagem de fundo (referência: r2.html).
   As cores, fontes e opacidade do glass vêm do perfil, injetadas como
   variáveis CSS pelo scene.js — nenhum CSS livre vindo do usuário.
   ============================================================ */

:root{
  --ink:#141416;
  --smoke:#f4f4f6;
  --accent:#c9c9d2;
  --text:#f4f4f6;
  --glass:rgba(255,255,255,0.10);
  --glass-strong:rgba(255,255,255,0.16);
  --glass-border:rgba(255,255,255,0.28);
  --shadow:rgba(0,0,0,0.45);
  --bg:#141416;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* Qualquer regra de autor com `display` vence o [hidden] da folha do browser.
   Sem isto, `.btn-apoiar{display:inline-flex}` fazia o botão aparecer mesmo com
   hidden — era por isso que o "Apoiar" ignorava o liga/desliga. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0; min-height:100%;
  width:100%; max-width:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  overscroll-behavior:none;
  overflow-x:hidden; /* sem barra lateral */
}
body.trava-scroll{ height:100%; overflow:hidden; }

/* página de doação: uma scrollbar só (no card), body travado */
html:has(.card #form),
body:has(.card #form){
  height:100%;
  overflow:hidden;
}

a{ color:inherit; }
img,video{ display:block; }

/* ---------------- cena ---------------- */
.scene{
  position:relative;
  width:100%;
  max-width:100%;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  overflow-x:clip;
  background:var(--bg);
  padding-left:max(12px, env(safe-area-inset-left, 0px));
  padding-right:max(12px, env(safe-area-inset-right, 0px));
}
body:has(.card #form) .scene{
  height:100svh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

.bg-slot{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.bg-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
.bg-fallback{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--bg) 70%, #ffffff 12%) 0%, var(--bg) 60%, #000 140%);
}

/* presets de overlay (o plano pedia string CSS livre; virou allowlist) */
.fog{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.fog.none{ display:none; }
.fog.dark-soft{ background:linear-gradient(180deg, rgba(12,12,14,.55) 0%, rgba(12,12,14,.35) 40%, rgba(12,12,14,.80) 100%); }
.fog.dark-strong{ background:linear-gradient(180deg, rgba(8,8,10,.80) 0%, rgba(8,8,10,.65) 40%, rgba(8,8,10,.94) 100%); }
.fog.light-soft{ background:linear-gradient(180deg, rgba(248,248,250,.55) 0%, rgba(248,248,250,.30) 40%, rgba(248,248,250,.80) 100%); }
.fog.vignette{ background:radial-gradient(75% 60% at 50% 45%, transparent 0%, rgba(0,0,0,.55) 100%); }

/* ---------------- bloco central ---------------- */
.content{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:96px 24px 120px;
  max-width:620px; width:100%;
  opacity:0; transform:translateY(16px);
  animation:fadeUp 1s ease forwards .15s;
}

.avatar{
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; margin-bottom:18px;
  border:1px solid var(--glass-border);
  box-shadow:0 8px 24px var(--shadow);
  background:var(--glass);
}

.name{
  margin:0;
  font-size:clamp(44px,12vw,86px);
  line-height:1.02;
  letter-spacing:.5px;
  color:var(--smoke);
  text-shadow:0 4px 24px var(--shadow);
  background:linear-gradient(180deg,#fff 0%, color-mix(in srgb, var(--accent) 85%, #555) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  overflow-wrap:anywhere;
}
.name.font-fraunces{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; }
.name.font-poppins{ font-family:'Poppins',sans-serif; font-weight:600; letter-spacing:-1px; }
.name.font-serif{ font-family:Georgia,'Times New Roman',serif; font-weight:600; }
.name.font-mono{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-weight:600; font-size:clamp(34px,9vw,64px); }
.name.font-space{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.04em; }
.name.font-playfair{ font-family:'Playfair Display',Georgia,serif; font-weight:600; font-style:italic; }
.name.font-bebas{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.04em; font-size:clamp(42px,11vw,88px); }

.titulo{
  margin:10px 0 0; font-size:13px; font-weight:400;
  letter-spacing:2.4px; text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 72%, transparent);
}
.tagline{
  margin:12px 0 0; font-size:14px; font-weight:300; line-height:1.6;
  color:color-mix(in srgb, var(--text) 86%, transparent);
  text-shadow:0 2px 10px var(--shadow);
  max-width:46ch;
}
.desc{
  margin:14px 0 0; font-size:14px; font-weight:300; line-height:1.7;
  color:color-mix(in srgb, var(--text) 78%, transparent);
  max-width:52ch; white-space:pre-line;
}

.live{
  display:none; align-items:center; gap:7px;
  margin-top:14px; padding:6px 14px; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase;
  background:rgba(255,0,60,.16); border:1px solid rgba(255,80,110,.45); color:#ffd9e0;
}
.live.on{ display:inline-flex; }
.live i{ width:7px; height:7px; border-radius:50%; background:#ff4d6d; animation:pulso 1.4s ease-in-out infinite; }

/* ---------------- sociais ---------------- */
.socials{
  display:inline-flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px; margin-top:26px;
  padding:8px 12px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
}
.socials:empty{ display:none; }
.social-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  transition:background .3s, border-color .3s, transform .3s;
}
.social-btn:hover,.social-btn:focus-visible{ background:rgba(255,255,255,.14); border-color:var(--glass-border); transform:translateY(-2px); outline:none; }
.social-btn:active{ transform:translateY(0) scale(.94); }
.social-btn svg{ width:19px; height:19px; }
.social-btn img{ width:19px; height:19px; object-fit:contain; }

/* ---------------- meta ---------------- */
.meta{ width:100%; max-width:340px; margin-top:30px; }
.meta-topo{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:8px; color:color-mix(in srgb, var(--text) 80%, transparent); }
.meta-barra{ height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; border:1px solid var(--glass-border); }
.meta-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--accent), #fff); transition:width .8s cubic-bezier(.2,.8,.2,1); }

/* ---------------- botão de apoio ---------------- */
.btn-apoiar{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:30px; padding:14px 30px; border-radius:999px;
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
  border:1px solid var(--glass-border); color:var(--text);
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s, box-shadow .25s, background .25s;
}
.btn-apoiar.solid{ background:var(--accent); color:#141416; border-color:transparent; font-weight:600; }
.btn-apoiar:hover{ transform:translateY(-2px); box-shadow:0 12px 32px var(--shadow); }
.btn-apoiar:active{ transform:translateY(0) scale(.98); }

/* ---------------- contador ---------------- */
.counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:6; display:none; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  font-size:12px; letter-spacing:.4px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  color:color-mix(in srgb, var(--text) 85%, transparent);
}
.counter.on{ display:inline-flex; }

/* ---------------- player de música ---------------- */
.player{
  position:fixed; top:max(20px, env(safe-area-inset-top, 0px)); right:max(20px, env(safe-area-inset-right, 0px)); z-index:12;
  display:none; align-items:center; gap:9px;
  padding:7px 12px 7px 8px; min-height:44px; border-radius:18px;
  background:linear-gradient(180deg, rgba(24,24,28,.42), rgba(10,10,12,.72));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 32px var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.player.on{ display:inline-flex; }
.player-play{
  width:36px; height:36px; flex-shrink:0; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:linear-gradient(180deg,#f4f4f6,#b9b9c2); color:#141416;
  box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .15s;
}
.player-play:active{ transform:scale(.88); }
.player-play svg{ width:13px; height:13px; }
.player .ico-pause{ display:none; }
.player.playing .ico-pause{ display:block; }
.player.playing .ico-play{ display:none; }
.player-wave{ display:flex; align-items:center; gap:2px; height:22px; }
.player-wave span{ width:2px; min-height:3px; border-radius:2px; background:rgba(244,244,246,.26); }
.player.playing .player-wave span{
  background:linear-gradient(180deg, rgba(244,244,246,.95), rgba(150,150,160,.7));
  animation:wave .5s ease-in-out infinite alternate;
}
.player-vol{ display:flex; align-items:center; gap:4px; padding-left:8px; border-left:1px solid rgba(255,255,255,.12); }
.player-vol input{
  -webkit-appearance:none; appearance:none; width:44px; height:3px; border-radius:2px;
  background:rgba(244,244,246,.16); outline:none; cursor:pointer;
}
.player-vol input::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:linear-gradient(180deg,#f4f4f6,#b9b9c2); }
.player-vol input::-moz-range-thumb{ width:10px; height:10px; border:none; border-radius:50%; background:#e4e4e8; }

/* ---------------- carrossel ---------------- */
.carousel{ position:absolute; z-index:7; width:132px; display:none; }
.carousel.on{ display:block; }
.carousel.bottom-right{ bottom:22px; right:18px; }
.carousel.bottom-left{ bottom:22px; left:18px; }
.carousel.top-right{ top:88px; right:18px; }
.carousel.top-left{ top:88px; left:18px; }
.carousel-frame{
  position:relative; width:100%; height:164px; border-radius:18px; overflow:hidden; padding:6px;
  border:1px solid var(--glass-border); background:var(--glass);
  box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.carousel-track{ display:flex; width:100%; height:100%; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.carousel-slide{ flex:0 0 100%; height:100%; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; border-radius:13px; background:#1a1a1d; }
.car-dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; padding:6px 0; }
.car-dots span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.35); transition:background .3s, transform .3s;
  /* alarga a área de toque sem mudar o visual tanto */
  box-shadow: 0 0 0 6px transparent;
}
.car-dots span.active{ background:var(--accent); transform:scale(1.35); }

/* ============================================================
   ELEMENTOS DECORATIVOS — slots fixos, os mesmos do r2.html
   (logo no topo esquerdo, mascote acima das redes, mascote acima do
   carrossel, decoração grande no rodapé esquerdo, moldura de foto).
   Medidas copiadas da referência para o resultado ser igual.
   ============================================================ */

/* modo monocromático: decorações, carrossel e avatar (fundo via filter em scene.js) */
.mono .decor img,.mono .carousel-slide img,.mono .photoLeft img,.mono .avatar{ filter:grayscale(1); }

/* logo topo-esquerdo (na referência: logo branco com uma sombra atrás) */
.logo-topo{ position:absolute; top:20px; left:20px; z-index:6; width:130px; }
.logo-topo .sombra{
  position:absolute; inset:-14px; width:calc(100% + 28px);
  filter:grayscale(1); z-index:0; pointer-events:none;
}
.logo-topo .principal{ position:relative; z-index:1; width:100%; height:auto; }

/* mascote acima da pill de redes */
.socials-wrap{ position:relative; display:inline-flex; flex-direction:column; align-items:center; margin-top:26px; }
.socials-wrap .socials{ margin-top:0; }
.mascote-social{
  position:relative; z-index:2; width:140px; margin-bottom:-16px;
  transform:translateY(-4px); pointer-events:none; user-select:none;
  filter:drop-shadow(0 3px 10px var(--shadow));
}
.mono .mascote-social{ filter:grayscale(1) drop-shadow(0 3px 10px var(--shadow)); }
.mascote-social img{ width:100%; height:auto; }

/* mascote acima do carrossel (clicável: mostra/esconde o contador) */
.mascote-carrossel{
  position:absolute; left:50%; top:-50px; transform:translateX(-50%);
  width:76px; z-index:3; user-select:none;
  filter:drop-shadow(0 3px 10px var(--shadow));
  transition:transform .3s ease;
}
.mono .mascote-carrossel{ filter:grayscale(1) drop-shadow(0 3px 10px var(--shadow)); }
.mascote-carrossel.clicavel{ cursor:pointer; pointer-events:auto; }
.mascote-carrossel.clicavel:active{ transform:translateX(-50%) scale(.92); }
.mascote-carrossel img{ width:100%; height:auto; }

/* decoração grande no rodapé esquerdo + figura menor sobreposta */
.decor-esq{ position:absolute; bottom:-28px; left:20px; z-index:6; width:40vw; max-width:60vw; }
.decor-esq > img{ width:100%; height:auto; }
.decor-esq .menor{
  position:absolute; bottom:14px; left:52%; transform:translateX(-50%);
  width:60%; z-index:2; user-select:none;
  filter:drop-shadow(0 3px 10px var(--shadow));
}
.mono .decor-esq .menor{ filter:grayscale(1) drop-shadow(0 3px 10px var(--shadow)); }
.decor-esq .menor img{ width:100%; height:auto; }
.decor-badge{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translate(-50%,10px); z-index:7; white-space:nowrap;
  padding:8px 14px; border-radius:12px; font-size:12px; letter-spacing:.3px;
  color:var(--text); background:var(--glass-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.decor-badge.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* moldura de foto no rodapé esquerdo */
.photoLeft{
  position:absolute; bottom:18px; left:18px; z-index:6;
  width:128px; height:186px; border-radius:18px; overflow:hidden; padding:6px;
  border:1px solid var(--glass-border); background:var(--glass);
  box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.photoLeft img{ width:100%; height:100%; object-fit:cover; border-radius:13px; background:#1a1a1d; }

/* nome em duas linhas: a última palavra menor, embaixo (igual à referência) */
.name .linha2{ display:block; font-size:.62em; margin-top:-.06em; opacity:.92; }

/* ---------------- stickers (posição livre em %) ---------------- */
.sticker{
  position:absolute; z-index:6; transform:translate(-50%,-50%);
  border-radius:18px; overflow:hidden; pointer-events:none;
  box-shadow:0 8px 24px var(--shadow);
}
.sticker img{ width:100%; height:auto; }

/* ---------------- card de doação ---------------- */
.card{
  position:relative; z-index:8;
  width:min(420px, 100%);
  max-width:100%;
  margin:max(56px, calc(env(safe-area-inset-top, 0px) + 48px)) auto
         max(52px, calc(env(safe-area-inset-bottom, 0px) + 44px));
  padding:clamp(14px, 3vw, 22px);
  max-height:calc(100svh - 108px);
  max-height:calc(100dvh - 108px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:26px;
  background:var(--glass-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 20px 60px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0; transform:translateY(16px); animation:fadeUp .9s ease forwards .2s;
  scrollbar-width:thin;
  scrollbar-color:var(--pypag-scroll) transparent;
}
.card-topo{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.card-topo img{ width:54px; height:54px; border-radius:50%; object-fit:cover; background:var(--glass); border:1px solid var(--glass-border); }
.card-nome{ font-size:17px; font-weight:600; }
.card-sub{ font-size:12px; margin-top:3px; color:color-mix(in srgb, var(--text) 72%, transparent); }

.valores{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.valores button{
  padding:13px 4px; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500;
  color:var(--text); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s, border-color .2s, transform .2s;
}
.valores button:hover{ background:rgba(255,255,255,.14); }
.valores button:active{ transform:scale(.96); }
.valores button.sel{ background:var(--accent); color:#141416; border-color:transparent; font-weight:600; }

.campo{ margin-top:16px; }
.campo label{ display:block; font-size:12px; margin-bottom:7px; color:color-mix(in srgb, var(--text) 78%, transparent); }
.campo input,.campo textarea{
  width:100%; padding:13px 15px; border-radius:14px;
  font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.16);
  transition:border-color .2s, background .2s;
}
.campo textarea{ resize:vertical; min-height:76px; }
.campo input:focus,.campo textarea:focus{ outline:none; border-color:var(--accent); background:rgba(0,0,0,.4); }
.campo input::placeholder,.campo textarea::placeholder{ color:rgba(255,255,255,.35); }
.campo .dica{ font-size:11px; margin-top:6px; color:color-mix(in srgb, var(--text) 60%, transparent); }

.btn-principal{
  width:100%; margin-top:22px; padding:16px; border-radius:16px;
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  color:#141416; background:var(--accent); border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.btn-principal:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.45); }
.btn-principal:active:not(:disabled){ transform:translateY(0) scale(.99); }
.btn-principal:disabled{ opacity:.55; cursor:not-allowed; }

.aviso{ margin-top:16px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.5; display:none; }
.aviso.on{ display:block; }
.aviso.erro{ background:rgba(255,60,80,.14); border:1px solid rgba(255,90,110,.4); color:#ffd7dd; }
.aviso.ok{ background:rgba(60,220,140,.12); border:1px solid rgba(80,230,160,.36); color:#d3ffe8; }

/* QR do PIX, dentro do mesmo card (sem redirect) */
.pix{ display:none; margin-top:20px; text-align:center; }
.pix.on{ display:block; }
.pix img{ width:200px; height:200px; margin:0 auto 16px; border-radius:16px; background:#fff; padding:10px; }
.pix-code{
  width:100%; font-family:ui-monospace,Consolas,monospace; font-size:11px;
  word-break:break-all; text-align:left; padding:12px; border-radius:12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); color:var(--text);
  max-height:96px; overflow:auto;
}
.pix-acoes{ display:flex; gap:8px; margin-top:12px; }
.pix-acoes button{
  flex:1; padding:12px; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--text);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.pix-acoes button:hover{ background:rgba(255,255,255,.16); }
.pix-status{ margin-top:14px; font-size:13px; color:color-mix(in srgb, var(--text) 78%, transparent); }

.voltar{
  position:fixed; top:max(20px, env(safe-area-inset-top, 0px)); left:max(20px, env(safe-area-inset-left, 0px)); z-index:12;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 15px; min-height:44px; border-radius:999px; text-decoration:none;
  font-size:13px; color:var(--text);
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.voltar:hover{ background:var(--glass-strong); }

.marca{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:6;
  display:block; line-height:0; text-decoration:none; opacity:.72;
  transition:opacity .2s;
}
.marca img{
  height:56px; width:auto; display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));
}
.marca:hover{ opacity:1; }
.social-btn-custom{ gap:6px; padding-inline:12px; width:auto; min-width:42px; }
.social-btn-custom .social-btn-label{
  font-size:11px; font-weight:600; max-width:72px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------------- estados ---------------- */
.carregando,.erro-pagina{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:24px; background:var(--bg);
}
.erro-pagina{ display:none; }
.erro-pagina.on{ display:flex; }
.carregando.off{ display:none; }
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent);
  animation:girar .8s linear infinite;
}
.erro-pagina h1{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:32px; margin:0; }
.erro-pagina p{ margin:0; font-size:14px; color:rgba(244,244,246,.7); }

@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes wave{ 0%{ transform:scaleY(.25); } 100%{ transform:scaleY(1); } }
@keyframes pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

@media (prefers-reduced-motion: reduce){
  .content,.card{ animation:none; opacity:1; transform:none; }
  .player-wave span,.live i{ animation:none; }
  .carousel-track{ transition:none; }
}

/* ---------------- desktop ---------------- */
@media (min-width:1024px){
  .logo-topo{ top:32px; left:32px; }
  .mascote-social{ margin-bottom:-24px; transform:translateY(-3px); }
  .mascote-carrossel{ top:-108px; }
  .decor-esq{ bottom:-20px; left:32px; width:18vw; max-width:280px; min-width:200px; }
  .photoLeft{ width:230px; height:334px; bottom:32px; left:32px; }
  .content{ max-width:760px; padding:120px 24px 140px; }
  .avatar{ width:120px; height:120px; }
  .name{ font-size:clamp(84px,11vw,150px); }
  .name.font-mono{ font-size:clamp(52px,7vw,104px); }
  .tagline{ font-size:18px; margin-top:16px; }
  .desc{ font-size:15px; }
  .social-btn{ width:46px; height:46px; }
  .social-btn svg,.social-btn img{ width:22px; height:22px; }
  .carousel{ width:230px; }
  .carousel.bottom-right{ bottom:32px; right:32px; }
  .carousel.bottom-left{ bottom:32px; left:32px; }
  .carousel.top-right{ top:100px; right:32px; }
  .carousel.top-left{ top:100px; left:32px; }
  .carousel-frame{ height:290px; border-radius:24px; padding:9px; }
  .carousel-slide img{ border-radius:18px; }
  .car-dots span{ width:7px; height:7px; }
  .card{ width:min(460px, 100%); max-width:100%; padding:30px; }
}

/* ---------------- mobile ----------------
   Em telas estreitas os stickers sairiam por cima do texto: ficam menores e,
   abaixo de 480px, saem de cena. O carrossel encolhe e o conteúdo respira. */
@media (max-width:760px){
  .sticker{ transform:translate(-50%,-50%) scale(.62); }
  .carousel{ width:104px; }
  .carousel-frame{ height:130px; border-radius:14px; padding:5px; }
  .content{ padding:90px 20px 150px; }
}
@media (max-width:480px){
  .sticker{ display:none; }
  .marca{
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .marca img{ height:44px; }
  .logo-topo{ top:max(14px, env(safe-area-inset-top, 0px)); left:max(14px, env(safe-area-inset-left, 0px)); width:104px; }
  .mascote-carrossel{ top:-46px; }
  .decor-esq{ bottom:max(-22px, calc(env(safe-area-inset-bottom, 0px) - 32px)); left:14px; width:46vw; }
  .photoLeft{ width:110px; height:160px; bottom:max(14px, env(safe-area-inset-bottom, 0px)); left:14px; }
  .carousel.top-right,.carousel.top-left{ top:76px; }
  .carousel.bottom-right,.carousel.bottom-left{
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
  .player{ top:max(14px, env(safe-area-inset-top, 0px)); right:max(14px, env(safe-area-inset-right, 0px)); padding:6px 10px 6px 7px; }
  .player-vol{ display:none; }
  .voltar{
    top:max(10px, env(safe-area-inset-top, 0px));
    left:max(10px, env(safe-area-inset-left, 0px));
    padding:10px 12px; font-size:12px; min-height:44px;
    max-width:calc(100% - 24px);
  }
  .card{
    margin:max(52px, calc(env(safe-area-inset-top, 0px) + 40px)) auto
           max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));
    padding:16px; border-radius:22px;
    max-height:calc(100svh - 100px);
    max-height:calc(100dvh - 100px);
  }
  .valores{ grid-template-columns:repeat(2,1fr); }
  .pix img{ width:min(170px, 56vw); height:auto; aspect-ratio:1; }
  .pix-acoes{ flex-wrap:wrap; }
  .campo textarea{ resize:none; }
  .car-dots span{
    width:10px !important; height:10px !important;
    min-width:10px; min-height:10px;
  }
  .car-dots{ padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); gap:10px; }
}

/* ============================================================
   ESTILO DOS CONTAINERS
   Os "templates" antigos trocavam a página inteira. Aqui é só o tratamento
   visual das caixas (pill de redes, moldura do carrossel, card de doação,
   contador, player, botões): glassmorphism, claymorphism, neon, etc.
   Tudo passa por variáveis, então cada estilo é só um bloco de valores —
   e os seletores dos containers ficam num lugar só.
   ============================================================ */
:root{
  --cont-bg:var(--glass);
  --cont-bg-forte:var(--glass-strong);
  --cont-borda:1px solid var(--glass-border);
  --cont-raio:18px;
  --cont-raio-pill:999px;
  --cont-raio-card:26px;
  --cont-sombra:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  --cont-blur:blur(18px) saturate(140%);
}

/* caixas */
.scene .carousel-frame,
.scene .photoLeft,
.scene .decor-badge,
.scene .player{
  background:var(--cont-bg);
  border:var(--cont-borda);
  border-radius:var(--cont-raio);
  box-shadow:var(--cont-sombra);
  backdrop-filter:var(--cont-blur);
  -webkit-backdrop-filter:var(--cont-blur);
}
/* pílulas */
.scene .socials,
.scene .counter,
.scene .voltar,
.scene .btn-apoiar:not(.solid){
  background:var(--cont-bg);
  border:var(--cont-borda);
  border-radius:var(--cont-raio-pill);
  box-shadow:var(--cont-sombra);
  backdrop-filter:var(--cont-blur);
  -webkit-backdrop-filter:var(--cont-blur);
}
/* card de doação */
.scene .card{
  background:var(--cont-bg-forte);
  border:var(--cont-borda);
  border-radius:var(--cont-raio-card);
  box-shadow:var(--cont-sombra);
  backdrop-filter:var(--cont-blur);
  -webkit-backdrop-filter:var(--cont-blur);
}
.scene .valores button,
.scene .pix-acoes button{ border-radius:calc(var(--cont-raio) * .78); }
.scene .campo input,
.scene .campo textarea,
.scene .pix-code{ border-radius:calc(var(--cont-raio) * .78); }
.scene .btn-principal{ border-radius:calc(var(--cont-raio) * .9); }

/* ---------- glassmorphism (padrão) ---------- */
/* usa os valores do :root acima */

/* ---------- claymorphism: massinha, sem blur, relevo macio ---------- */
.scene.estilo-clay{
  --cont-bg:color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.14));
  --cont-bg-forte:color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.2));
  --cont-borda:0;
  --cont-raio:30px;
  --cont-raio-card:36px;
  --cont-blur:none;
  --cont-sombra:
    inset 0 -8px 14px rgba(0,0,0,.22),
    inset 0 10px 14px rgba(255,255,255,.28),
    0 16px 28px rgba(0,0,0,.3);
}
.scene.estilo-clay .btn-principal{ box-shadow:inset 0 -5px 10px rgba(0,0,0,.2), inset 0 6px 10px rgba(255,255,255,.35), 0 10px 20px rgba(0,0,0,.28); }

/* ---------- neon: contorno e brilho na cor de destaque ---------- */
.scene.estilo-neon{
  --cont-bg:rgba(8,8,12,.55);
  --cont-bg-forte:rgba(8,8,12,.72);
  --cont-borda:1px solid var(--accent);
  --cont-raio:14px;
  --cont-raio-card:18px;
  --cont-blur:blur(10px);
  --cont-sombra:
    0 0 14px color-mix(in srgb, var(--accent) 60%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
.scene.estilo-neon .name{ text-shadow:0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- flat: sólido, nada de blur nem brilho ---------- */
.scene.estilo-flat{
  --cont-bg:color-mix(in srgb, var(--bg) 78%, transparent);
  --cont-bg-forte:color-mix(in srgb, var(--bg) 90%, transparent);
  --cont-borda:1px solid color-mix(in srgb, var(--text) 18%, transparent);
  --cont-raio:12px;
  --cont-raio-pill:12px;
  --cont-raio-card:14px;
  --cont-blur:none;
  --cont-sombra:0 2px 8px rgba(0,0,0,.25);
}

/* ---------- brutalista: canto reto, borda grossa, sombra dura ---------- */
.scene.estilo-brutal{
  --cont-bg:var(--bg);
  --cont-bg-forte:var(--bg);
  --cont-borda:2px solid var(--text);
  --cont-raio:0px;
  --cont-raio-pill:0px;
  --cont-raio-card:0px;
  --cont-blur:none;
  --cont-sombra:6px 6px 0 var(--text);
}
.scene.estilo-brutal .social-btn{ border-radius:0; }
/* sombra dura do brutal não pode estourar a largura da tela */
.scene.estilo-brutal .card{ box-shadow:4px 4px 0 var(--text); }
.scene.estilo-brutal .btn-principal{ border-radius:0; box-shadow:5px 5px 0 rgba(0,0,0,.85); }
.scene.estilo-brutal .avatar{ border-radius:0; }

/* ---------- soft (neumorfismo): relevo na mesma cor do fundo ---------- */
.scene.estilo-soft{
  --cont-bg:color-mix(in srgb, var(--bg) 92%, var(--text) 4%);
  --cont-bg-forte:color-mix(in srgb, var(--bg) 88%, var(--text) 6%);
  --cont-borda:0;
  --cont-raio:22px;
  --cont-raio-card:28px;
  --cont-blur:none;
  --cont-sombra:
    8px 8px 18px rgba(0,0,0,.38),
    -8px -8px 18px color-mix(in srgb, var(--text) 10%, transparent);
}
.scene.estilo-soft .btn-principal{ box-shadow:6px 6px 14px rgba(0,0,0,.35), -6px -6px 14px rgba(255,255,255,.08); }