@charset "UTF-8";
/* ==========================================================================
   Camarote — sistema de design
   Estilo: claro, rosa de criadores; o verde existe só como prova de dinheiro.
   Toda tinta abaixo foi medida contra a superfície onde aparece (WCAG AA):
   texto >= 4.5:1, contorno e selo >= 3:1. Escrita em scratch/contraste.py.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Escada clara: o fundo é rosa o bastante para o cartão branco ter borda própria
     (ΔL* 7,4 entre --bg e --surface); sem isso tudo vira uma mancha só. */
  --bg: #F7E5EF;
  --bg-deep: #F5E2EC;
  --surface: #FFFFFF;
  --surface-2: #F8EBF1;
  --surface-3: #EFD7E4;
  --border: #DBAAC4;
  --border-soft: #EBCBD9;

  --text: #23131C;        /* 14,7:1 sobre --bg · 17,8:1 sobre --surface */
  --muted: #6F4F5F;       /* 6,7:1 sobre --bg · 7,1:1 sobre --surface */
  --faint: #7A5A69;       /* 4,9:1 no pior caso (poço de campo) */

  --cta: #DB2777;         /* preenchimento; tinta branca 4,6:1 */
  --cta-strong: #B31D62;  /* o rosa quando é texto ou ícone: 5,3:1 sobre --bg */
  --cta-ink: #FFFFFF;
  --cta-dim: #FCE7F1;
  --cta-line: #F5B6D3;

  --love: #BE123C;        /* botão Amei: 6,0:1 sobre --bg */
  --love-dim: #FFE4E9;
  --love-line: #FBB6C4;
  --warn: #8F5108;        /* pagamento pendente / atenção: 5,6:1 no botão âmbar, 4,6:1 como texto */
  --warn-dim: #FDF0DA;
  --warn-line: #F3D6A2;
  --ok: #0A6B3C;          /* verde reservado: só aparece quando o provedor confirmou o dinheiro */
  --ok-dim: #E4F6EC;
  --ok-line: #BCE4CD;
  --top: #6D28D9;         /* selo do nível acima: 7,1:1 sobre --surface */
  --top-dim: #F1E9FE;
  --top-line: #D8C6F7;
  --danger: #B3261E;
  --danger-dim: #FCE9E7;
  --danger-line: #F3BDB6;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --pill: 999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --shadow: 0 18px 40px -22px rgba(120, 60, 90, .30);
  --shadow-lift: 0 26px 60px -26px rgba(120, 60, 90, .38);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--cta);

  --ava: linear-gradient(140deg, #F3DEE9, #E3C2D5);
  --ava-ink: #8A2C57;   /* inicial sobre as duas pontas do gradiente: 5,0:1 no pior caso */

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-fast: 140ms cubic-bezier(.22, .61, .36, 1);
  --t: 220ms cubic-bezier(.22, .61, .36, 1);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

/* display:grid dos componentes vence o [hidden] do navegador; sem isto,
   formulário de resposta e caixa de erro aparecem antes da hora. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 12% -6%, rgba(219, 39, 119, .06), transparent 62%),
    radial-gradient(760px 400px at 92% 4%, rgba(109, 40, 217, .04), transparent 60%),
    url('/assets/images/bg-texture.jpg') center/cover no-repeat fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.18; margin: 0 0 var(--s3); letter-spacing: -.02em; }
h1 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 700; }
h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 var(--s4); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s3); top: -60px; z-index: 90;
  background: var(--cta); color: var(--cta-ink); padding: 10px 16px;
  border-radius: var(--pill); font-weight: 700; transition: top var(--t-fast);
}
.skip:focus { top: var(--s3); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
.ic { flex: none; vertical-align: middle; }

/* ---------------- topo ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 238, 244, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar__in { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: #301324; margin-left: -10px; }
.brand__name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic; font-size: 27px; letter-spacing: -.06em; line-height: 1; }
.brand__name--domain { white-space: nowrap; font-size: 25px; }
.brand__domain { color: #ce086e; font-size: .65em; letter-spacing: -.035em; }
@media (max-width: 560px) {
  .topbar__in { flex-wrap: wrap; justify-content: space-between; padding-block: 10px; }
  .brand__name.brand__name--domain { font-size: 22px; }
}
.brand__mark {
  width: 23px; height: 23px; display: grid; place-items: center; flex: none;
}
.brand__mark img { display: block; width: 100%; height: 100%; }
@media (max-width: 430px) {
  .brand__name { font-size: 23px; }
  .brand__mark { width: 20px; height: 20px; }
}
.topnav { display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }
.topnav__link {
  padding: 9px 14px; border-radius: var(--pill); color: var(--muted);
  font-weight: 600; font-size: 14.5px; transition: color var(--t-fast), background var(--t-fast);
  min-height: 40px; display: inline-flex; align-items: center; gap: 7px;
}
.topnav__link:hover { color: var(--text); background: var(--surface-2); }
.topnav__link[aria-current="page"] { color: var(--cta-strong); background: var(--cta-dim); }
.avatar-btn { padding: 3px; border: 0; background: none; border-radius: var(--pill); }
.avatar-btn img, .avatar-btn .avatar { width: 36px; height: 36px; }

/* ---------------- botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px; border-radius: var(--pill);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  touch-action: manipulation;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn--cta {
  background: var(--cta); color: var(--cta-ink);
  text-shadow: 0 0 8px rgb(255 180 220 / 70%);
  box-shadow: 0 12px 30px -14px rgba(219, 39, 119, .55), 0 0 12px rgb(219 39 119 / 30%), 0 0 24px rgb(219 39 119 / 15%);
}
.btn--cta:hover {
  background: var(--cta-strong);
  text-shadow: 0 0 10px rgb(255 200 230 / 85%);
  box-shadow: 0 12px 30px -14px rgba(219, 39, 119, .65), 0 0 18px rgb(219 39 119 / 45%), 0 0 32px rgb(219 39 119 / 25%);
}
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--faint); }
.btn--warn {
  background: var(--warn-dim); color: var(--warn); border-color: var(--warn-line);
  text-shadow: 0 0 8px rgb(255 220 150 / 60%);
  box-shadow: 0 0 10px rgb(143 81 8 / 20%), 0 0 20px rgb(143 81 8 / 10%);
}
.btn--warn:hover {
  background: #FBE6C2;
  text-shadow: 0 0 10px rgb(255 230 170 / 75%);
  box-shadow: 0 0 14px rgb(143 81 8 / 30%), 0 0 28px rgb(143 81 8 / 18%);
}
.btn--top {
  background: var(--top); color: #fff;
  text-shadow: 0 0 8px rgb(180 160 255 / 70%);
  box-shadow: 0 12px 30px -14px rgba(109, 40, 217, .75), 0 0 12px rgb(109 40 217 / 35%), 0 0 24px rgb(109 40 217 / 18%);
}
.btn--top:hover {
  background: #5B21B6;
  text-shadow: 0 0 10px rgb(200 185 255 / 85%);
  box-shadow: 0 12px 30px -14px rgba(109, 40, 217, .85), 0 0 18px rgb(109 40 217 / 50%), 0 0 32px rgb(109 40 217 / 28%);
}
.btn--danger {
  background: transparent; border-color: var(--danger-line); color: var(--danger);
  text-shadow: 0 0 8px rgb(255 180 170 / 50%);
  box-shadow: 0 0 10px rgb(179 38 30 / 18%), 0 0 20px rgb(179 38 30 / 8%);
}
.btn--danger:hover {
  background: var(--danger-dim);
  text-shadow: 0 0 10px rgb(255 200 190 / 65%);
  box-shadow: 0 0 14px rgb(179 38 30 / 28%), 0 0 28px rgb(179 38 30 / 14%);
}
.btn--plan {
  background: #EA580C; color: #fff; border-color: #C2410C;
  text-shadow: 0 0 8px rgb(255 180 100 / 70%);
  box-shadow: 0 12px 30px -14px rgba(234, 88, 12, .55), 0 0 12px rgb(234 88 12 / 30%), 0 0 24px rgb(234 88 12 / 15%);
}
.btn--plan:hover {
  background: #C2410C;
  text-shadow: 0 0 10px rgb(255 200 130 / 85%);
  box-shadow: 0 12px 30px -14px rgba(234, 88, 12, .65), 0 0 18px rgb(234 88 12 / 45%), 0 0 32px rgb(234 88 12 / 25%);
}
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.topnav__create-account,
.topnav__create-account:hover {
  border: 2px solid transparent;
  color: #fff;
  background: linear-gradient(135deg, #30102e, #120f28) padding-box,
    linear-gradient(110deg, #ff007f, #ff4545, #64ff97, #00dfff, #9460ff, #ff007f) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: -4px 0 14px rgb(255 0 127 / 45%), 4px 0 14px rgb(0 223 255 / 45%);
  text-shadow: 0 0 7px rgb(255 255 255 / 45%);
  animation: signup-neon 6s ease-in-out infinite alternate;
}
.topnav__create-account:hover {
  box-shadow: -4px 0 20px rgb(255 0 127 / 65%), 4px 0 20px rgb(0 223 255 / 65%);
}
.topnav__create-account:focus-visible { outline: 3px solid #7026b9; outline-offset: 4px; }
@keyframes signup-neon {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 100% 50%; }
}
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-link { background: none; border: 0; color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.btn-link:hover { color: var(--text); }

/* ---------------- cartões e superfícies ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.card--pad { padding: var(--s5); }
.panel { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r); padding: var(--s4); }
.hr { height: 1px; background: var(--border-soft); border: 0; margin: var(--s5) 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--pill); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
}
.badge--cta { background: var(--cta-dim); color: var(--cta-strong); border-color: var(--cta-line); }
.badge--top { background: var(--top-dim); color: var(--top); border-color: var(--top-line); }
.badge--warn { background: var(--warn-dim); color: var(--warn); border-color: var(--warn-line); }
.badge--ok { background: var(--ok-dim); color: var(--ok); border-color: var(--ok-line); }
.badge--love { background: var(--love-dim); color: var(--love); border-color: var(--love-line); }

.num { font-variant-numeric: tabular-nums; }

/* ---------------- hero público ---------------- */
.hero { padding: var(--s8) 0 var(--s6); }
.hero__grid { display: grid; gap: var(--s6); grid-template-columns: 1.15fr .85fr; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cta-strong);
}
.hero h1 { font-size: clamp(32px, 5.2vw, 54px); }
.hero__lead { color: var(--muted); font-size: 17.5px; max-width: 52ch; }
.hero .hero__eyebrow { padding: 7px 12px; border: 1px solid #edbdd6; border-radius: 999px; background: rgb(255 255 255 / 48%); font-size: 11px; letter-spacing: .12em; }
.hero .hero__headline { margin: 20px 0 18px; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.06; letter-spacing: -.045em; }
.hero__headline em { display: inline-block; padding-right: .12em; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #cf0069; background: linear-gradient(110deg, #e50079, #aa167f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .hero__lead { max-width: 43ch; line-height: 1.65; margin-bottom: 14px; }
.hero__payment { display: flex; align-items: flex-start; gap: 8px; max-width: 46ch; color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.hero__payment .ic { flex: none; margin-top: 2px; color: #c21a6c; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero__profiles-cta,
.hero__profiles-cta:hover {
  background: linear-gradient(135deg, #ff2ba0, #dd0074);
  border-color: #ff8bca;
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 75 170 / 42%), 0 0 14px rgb(255 0 128 / 78%), 0 0 30px rgb(255 0 128 / 42%);
}
.hero__profiles-cta:hover { box-shadow: 0 0 0 1px rgb(255 136 204 / 72%), 0 0 20px rgb(255 0 128 / 95%), 0 0 42px rgb(255 0 128 / 58%); }
.hero__profiles-cta:focus-visible { outline: 3px solid #ff75bd; outline-offset: 4px; }
.hero__creator-crown { color: #a56b08; fill: #ffd45c; filter: drop-shadow(0 1px 2px rgb(212 155 24 / 30%)); }
.hero__benefits { min-width: 0; }
.hero__benefits img { display: block; width: 100%; height: auto; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.bento__cell {
  border-radius: var(--r); border: 1px solid var(--border-soft); background: var(--surface);
  padding: var(--s4); display: flex; align-items: center; gap: var(--s3);
}
.bento__cell b { display: block; font-family: var(--font-display); font-size: 22px; }
.bento__cell span { color: var(--muted); font-size: 13.5px; }
.bento__cell .ic { color: var(--cta-strong); }

/* ---------------- grid de criadores ---------------- */
.section { padding: var(--s7) 0; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.section__head p { color: var(--muted); margin: 0; }
.creator-search { display: flex; align-items: center; gap: 8px; min-width: min(100%, 390px); }
.creator-search__field { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #e9b8d2; border-radius: 15px; background: rgb(255 255 255 / 64%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 5px 16px rgb(122 37 84 / 5%); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.creator-search__field .ic { flex: none; color: #c21a6c; }
.creator-search__field input[type="search"] { min-width: 0; min-height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14.5px; }
.creator-search__field input[type="search"]:focus { box-shadow: none; }
.creator-search__field:focus-within { border-color: #ee4d9d; background: #fff; box-shadow: 0 0 0 4px rgb(255 28 142 / 13%), 0 9px 24px rgb(190 24 93 / 13%); }
.creator-search__submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 46px; padding: 0 16px; border: 1px solid #ec2787; border-radius: 15px; background: linear-gradient(135deg, #ff2aa0, #d80072); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgb(221 0 116 / 25%); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.creator-search__submit:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgb(221 0 116 / 37%); }
.creator-search__submit:active { transform: translateY(0) scale(.98); }
.creator-search__submit:focus-visible { outline: 3px solid #ff75bd; outline-offset: 3px; }
.creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s4); }
.creator-order { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.creator-order a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 15px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.creator-order a[aria-current="true"] { background: #301324; color: #fff; }
.creator-order .ic { color: #b87b12; fill: #ffdc79; }
.ccard__rank { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 5px; border: 1px solid #e9c777; border-radius: 9px; background: linear-gradient(135deg, #fff9e8, #ffe6a4); color: #593708; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgb(55 31 0 / 22%); }
.ccard__cover .ccard__rank img { width: 22px; height: 22px; object-fit: contain; flex: none; animation: fire-flicker 0.4s ease-in-out infinite alternate; }
@keyframes fire-flicker {
  0% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  50% { transform: scale(1.15) rotate(2deg); filter: brightness(1.3); }
  100% { transform: scale(1.05) rotate(-1deg); filter: brightness(1.15); }
}
.ccard { position: relative; display: flex; flex-direction: column; transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.ccard:hover { transform: translateY(-4px); border-color: var(--faint); box-shadow: var(--shadow-lift); }
.ccard--featured { border-color: #e879a8; box-shadow: 0 0 0 2px #e879a8, 0 0 16px 3px rgba(219, 39, 119, .35), 0 0 36px 6px rgba(219, 39, 119, .18); }
.ccard--featured:hover { box-shadow: 0 0 0 2px #e879a8, 0 0 24px 5px rgba(219, 39, 119, .45), 0 0 48px 10px rgba(219, 39, 119, .25); }
.ccard__cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-3); }
.ccard__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ccard__ava {
  width: 62px; height: 62px; margin: -30px 0 0 var(--s4);
  z-index: 10; position: relative;
  border-radius: var(--pill); border: 3px solid var(--surface); overflow: hidden; background: var(--surface-3);
}
.ccard__ava > .avatar { width: 100%; height: 100%; border: 0; }
.ccard__body { padding: 10px var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.ccard__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.ccard__handle { color: var(--faint); font-size: 13px; }
.ccard__bio { color: var(--muted); font-size: 14px; margin: 0; flex: 1; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.ccard__price { font-weight: 700; }
.ccard__subscribers { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #f3c8dd; border-radius: 12px; background: #fff3f9; color: #9d1957; flex-shrink: 0; }
.ccard__subscribers > span { display: flex; flex-direction: column; gap: 1px; }
.ccard__subscribers b { font-size: 15px; line-height: 1.1; }
.ccard__subscribers small { font-size: 10px; line-height: 1.2; font-weight: 500; }
.ccard__price small { display: block; color: var(--faint); font-weight: 500; font-size: 12px; }

/* ---------------- perfil (2 colunas, como o original) ---------------- */
.profile { padding-bottom: var(--s8); }
.cover { position: relative; height: clamp(160px, 26vw, 280px); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; background: linear-gradient(120deg, #D8B0C6, #F2E4EC 60%); }
.cover img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 19, 28, .10), rgba(35, 19, 28, .72)); }
.phead { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: end; margin-top: -54px; position: relative; z-index: 2; padding-inline: var(--s4); max-width: var(--maxw); margin-inline: auto; }
.phead__ava { width: clamp(88px, 12vw, 118px); height: clamp(88px, 12vw, 118px); border-radius: var(--pill); border: 4px solid var(--surface); overflow: hidden; background: var(--surface-3); }
.phead__ava img { width: 100%; height: 100%; object-fit: cover; }
.phead__ava.avatar--fire-neon {
  border-color: #ffb4dd;
  box-shadow: 0 0 0 2px rgb(255 43 160 / 82%), 0 0 13px rgb(255 0 128 / 88%), 0 0 27px rgb(198 0 230 / 66%), 0 0 44px rgb(221 0 117 / 38%);
  animation: avatar-fire-neon 2.5s ease-in-out infinite;
}
@keyframes avatar-fire-neon {
  0%, 100% { box-shadow: 0 0 0 2px rgb(255 43 160 / 82%), 0 0 13px rgb(255 0 128 / 88%), 0 0 27px rgb(198 0 230 / 66%), 0 0 44px rgb(221 0 117 / 38%); }
  50% { box-shadow: 0 0 0 3px rgb(255 132 204 / 98%), 0 0 19px rgb(255 0 128 / 98%), 0 0 38px rgb(198 0 230 / 82%), 0 0 58px rgb(221 0 117 / 52%); }
}
@media (prefers-reduced-motion: reduce) { .phead__ava.avatar--fire-neon { animation: none; } }
.phead__id { display: flex; gap: var(--s4); align-items: center; }
.phead__id h1 { margin-top: 50px; }
.phead h1 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.phead__handle { color: var(--faint); font-weight: 600; font-size: 14.5px; }
.phead__bio { color: var(--muted); max-width: 62ch; margin: var(--s3) 0 0; }
.btn--subscribe-attract,
.btn--subscribe-attract:hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border-color: #ff9ad1;
  background: linear-gradient(115deg, #ff168f 0%, #f50075 48%, #b60ce3 100%);
  text-shadow: 0 0 8px rgb(255 180 220 / 90%), 0 0 20px rgb(255 0 128 / 50%);
  box-shadow:
    0 0 0 1px rgb(255 113 193 / 58%),
    0 0 12px rgb(255 0 128 / 74%),
    0 0 28px rgb(219 0 255 / 36%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
  animation: subscribe-glow 2.8s ease-in-out infinite;
}
.btn--subscribe-attract::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(112deg, transparent 26%, rgb(255 255 255 / 48%) 49%, transparent 68%);
  transform: translateX(-135%);
  animation: subscribe-sheen 3.8s ease-in-out infinite;
}
.btn--subscribe-attract:hover {
  transform: translateY(-2px) scale(1.025);
  text-shadow: 0 0 10px rgb(255 200 230 / 100%), 0 0 28px rgb(255 0 128 / 70%);
  box-shadow:
    0 0 0 1px rgb(255 159 214 / 88%),
    0 0 18px rgb(255 0 128 / 95%),
    0 0 40px rgb(219 0 255 / 56%),
    inset 0 1px 0 rgb(255 255 255 / 25%);
}
.btn--subscribe-attract--premium {
  border-color: #c9b1ff;
  background: linear-gradient(115deg, #6e20ed 0%, #5a16d4 48%, #294bf0 100%);
  text-shadow: 0 0 8px rgb(200 180 255 / 90%), 0 0 20px rgb(111 27 255 / 50%);
  box-shadow:
    0 0 0 1px rgb(184 142 255 / 62%),
    0 0 12px rgb(111 27 255 / 78%),
    0 0 28px rgb(34 124 255 / 42%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
  animation-name: subscribe-glow-premium;
}
.btn--subscribe-attract--premium:hover {
  text-shadow: 0 0 10px rgb(220 210 255 / 100%), 0 0 28px rgb(111 27 255 / 70%);
  box-shadow:
    0 0 0 1px rgb(210 190 255 / 90%),
    0 0 18px rgb(111 27 255 / 96%),
    0 0 40px rgb(34 124 255 / 63%),
    inset 0 1px 0 rgb(255 255 255 / 25%);
}
.btn--subscribe-attract:focus-visible { outline: 3px solid #ff71bd; outline-offset: 4px; }
@keyframes subscribe-glow {
  0%, 100% {
    text-shadow: 0 0 8px rgb(255 180 220 / 90%), 0 0 20px rgb(255 0 128 / 50%);
    box-shadow: 0 0 0 1px rgb(255 113 193 / 58%), 0 0 12px rgb(255 0 128 / 74%), 0 0 28px rgb(219 0 255 / 36%), inset 0 1px 0 rgb(255 255 255 / 20%);
  }
  50% {
    text-shadow: 0 0 12px rgb(255 200 230 / 100%), 0 0 30px rgb(255 0 128 / 70%);
    box-shadow: 0 0 0 1px rgb(255 159 214 / 85%), 0 0 20px rgb(255 0 128 / 95%), 0 0 42px rgb(219 0 255 / 52%), inset 0 1px 0 rgb(255 255 255 / 25%);
  }
}
@keyframes subscribe-sheen { 0%, 55% { transform: translateX(-135%); } 82%, 100% { transform: translateX(135%); } }
@keyframes subscribe-glow-premium {
  0%, 100% {
    text-shadow: 0 0 8px rgb(200 180 255 / 90%), 0 0 20px rgb(111 27 255 / 50%);
    box-shadow: 0 0 0 1px rgb(184 142 255 / 62%), 0 0 12px rgb(111 27 255 / 78%), 0 0 28px rgb(34 124 255 / 42%), inset 0 1px 0 rgb(255 255 255 / 20%);
  }
  50% {
    text-shadow: 0 0 12px rgb(220 210 255 / 100%), 0 0 30px rgb(111 27 255 / 70%);
    box-shadow: 0 0 0 1px rgb(214 196 255 / 88%), 0 0 20px rgb(111 27 255 / 98%), 0 0 42px rgb(34 124 255 / 64%), inset 0 1px 0 rgb(255 255 255 / 25%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn--subscribe-attract,
  .btn--subscribe-attract::after { animation: none; }
}
.stats { display: flex; flex-wrap: wrap; gap: var(--s5); margin: var(--s5) auto var(--s3); max-width: var(--maxw); padding-inline: var(--s4); }
.stat { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.stat b { color: var(--text); font-size: 17px; font-family: var(--font-display); }

.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border-soft); margin: var(--s4) 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 46px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab[aria-current="true"] { color: var(--cta-strong); border-bottom-color: var(--cta); }
.tab .ic { opacity: .8; }

.playout { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: var(--s6); align-items: start; }
.feed { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s4); }

/* ---------------- post ---------------- */
.post { overflow: hidden; }
.post__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) 0; }
.post__head img, .post__head .avatar { width: 44px; height: 44px; }
.post__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.post__who b { font-size: 15px; }
.post__who span { color: var(--faint); font-size: 13px; }
.post__body { padding: var(--s3) var(--s4) 0; }
.post__text { margin: 0 0 var(--s3); white-space: pre-wrap; word-break: break-word; }
.post__text--more { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post__more { background: none; border: 0; color: var(--cta-strong); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 0; }
.post__media { display: grid; gap: 3px; margin-top: var(--s3); background: var(--border-soft); }
.post__media[data-n="1"] { grid-template-columns: 1fr; }
.post__media[data-n="2"], .post__media[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
.post__media[data-n="3"], .post__media[data-n="5"], .post__media[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-3); cursor: zoom-in; border: 0; padding: 0; width: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.22, .61, .36, 1); }
.tile:hover img { transform: scale(1.04); }
.tile__vid { position: absolute; inset: auto var(--s2) var(--s2) auto; width: 38px; height: 38px; border-radius: var(--pill); background: rgba(7, 9, 16, .72); display: grid; place-items: center; color: #fff; }
[data-lock="1"] .tile__vid { background: rgba(30, 20, 0, .78); color: #fbbf24; }
.tile--wide { aspect-ratio: 16 / 9; }

.lock {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: 300px; padding: var(--s6) var(--s5); gap: var(--s3);
  background:
    repeating-linear-gradient(135deg, rgba(109, 40, 217, .06) 0 14px, transparent 14px 28px),
    radial-gradient(420px 220px at 50% 0%, rgba(219, 39, 119, .10), transparent 70%),
    var(--surface-2);
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.lock__ico { width: 56px; height: 56px; border-radius: var(--pill); display: grid; place-items: center; background: var(--top-dim); color: var(--top); border: 1px solid var(--top-line); }
.lock__ico--base { background: var(--cta-dim); color: var(--cta-strong); border-color: var(--cta-line); }
.lock h3 { margin: 0; font-size: 17px; }
.lock p { color: var(--muted); margin: 0; max-width: 42ch; }
.lock__row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s2); }

.post__bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--border-soft); }
.act {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 0; background: none; border-radius: var(--pill); color: var(--muted);
  font-weight: 600; font-size: 14px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.act:hover { background: var(--surface-2); color: var(--text); }
.act:active { transform: scale(.94); }
.act--love[aria-pressed="true"] { color: var(--love); }
.act--love[aria-pressed="true"] .ic { animation: pop 320ms cubic-bezier(.34, 1.56, .64, 1); }
.act--link { margin-inline-start: auto; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ---------------- comentários ---------------- */
.cmts { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s4); border-top: 1px solid var(--border-soft); }
.cmt { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); }
.cmt img, .cmt .avatar { width: 36px; height: 36px; }
.cmt__b { min-width: 0; }
.cmt__top { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.cmt__top b { font-size: 14.5px; }
.cmt__top time { color: var(--faint); font-size: 12.5px; }
.cmt__text { margin: 2px 0 0; font-size: 15px; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.cmt__acts { display: flex; gap: var(--s2); margin-top: 4px; }
.cmt--reply { grid-column: 2; padding: var(--s2) 0 0 var(--s2); border-left: 2px solid var(--border); }
.cmt__off { color: var(--faint); font-size: 14px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: var(--s3); border-radius: var(--r-sm); }
.composer { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: start; }
.composer img, .composer .avatar { width: 36px; height: 36px; }

/* ---------------- planos ---------------- */
.plans { display: flex; flex-direction: column; gap: var(--s3); }
.plan { position: relative; display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--t-fast), transform var(--t-fast); }
.plan:hover { border-color: var(--faint); }
.plan--top { border-color: var(--top-line); background: linear-gradient(180deg, var(--top-dim), transparent 46%), var(--surface); }
.plan--pick { border-color: var(--cta); box-shadow: 0 0 0 1px var(--cta); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: 22px; }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.plan__price b { font-size: 26px; font-family: var(--font-display); }
.plan__price span { color: var(--faint); font-size: 13.5px; }
.plan__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.plan__perks li { display: flex; gap: 8px; align-items: flex-start; }
.plan__perks .ic { color: var(--cta-strong); margin-top: 3px; }
.plan__badge { position: absolute; top: 5px; right: var(--s3); }
.plan__note { color: var(--faint); font-size: 12.5px; }
.plan .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.rail__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* ---------------- formas ---------------- */
.field { display: grid; gap: 6px; margin-bottom: var(--s4); }
.field > label { font-weight: 600; font-size: 14px; }
.field .hint { color: var(--faint); font-size: 13px; }
.field .err { color: var(--danger); font-size: 13.5px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], textarea, select {
  width: 100%; min-height: 46px; padding: 11px 14px; color: var(--text);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm);
  font: inherit; font-size: 15.5px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(219, 39, 119, .22); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--cta); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 46px; height: 28px; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--border); transition: background var(--t-fast); flex: none; }
.switch__track::after { content: ""; display: block; width: 22px; height: 22px; margin: 2px; border-radius: var(--pill); background: #fff; box-shadow: 0 1px 3px rgba(58, 28, 45, .32); transition: transform var(--t-fast), background var(--t-fast); }
.switch input:checked + .switch__track { background: var(--cta); border-color: var(--cta-strong); }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* Anexo: mesma caixa dos campos, mas tracejada para diferenciar de digitação. */
input[type=file] {
  width: 100%; min-height: 46px; padding: 10px 12px; color: var(--muted);
  background: var(--bg-deep); border: 1px dashed var(--border); border-radius: var(--r-sm);
  font: inherit; font-size: 14.5px;
}
input[type=file]::file-selector-button {
  margin-inline-end: 12px; padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
input[type=file]:focus-visible, input[type=file]:focus-within { border-color: var(--cta); border-style: solid; }

/* ---------------- pix ---------------- */
.pix { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.pix__qr { width: min(260px, 72vw); aspect-ratio: 1; border-radius: var(--r); background: #fff; padding: 10px; display: grid; place-items: center; }
.pix__qr img { width: 100%; height: 100%; }
.copy { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: center; width: 100%; }
.copy input { font-size: 12.5px; color: var(--muted); }
.status-row { display: flex; align-items: center; gap: 10px; color: var(--warn); font-weight: 600; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0 rgba(143, 81, 8, .5); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(143, 81, 8, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 81, 8, 0); } }

/* ---------------- galeria ---------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
.gallery .tile { aspect-ratio: 3 / 4; }
.gallery .tile--wide { aspect-ratio: 4 / 3; }
.gallery .tile--full { grid-column: span 2; aspect-ratio: 16 / 10; }

.lightbox { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(4, 6, 10, .86); padding: var(--s4); }
.lightbox[data-open="true"] { display: grid; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 86vh; border-radius: var(--r); box-shadow: var(--shadow-lift); }
.lightbox__close { position: absolute; top: var(--s4); right: var(--s4); width: 46px; height: 46px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.lightbox__prev { left: var(--s3); }
.lightbox__next { right: var(--s3); }

/* ---------------- tabelas / admin ---------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 13px var(--s4); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
th { color: var(--faint); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-2); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(219, 39, 119, .07); }
td .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.kpi { padding: var(--s4); border-radius: var(--r); border: 1px solid var(--border-soft); background: var(--surface); }
.kpi b { display: block; font-family: var(--font-display); font-size: 27px; letter-spacing: -.02em; }
.kpi span { color: var(--muted); font-size: 13.5px; }
.kpi .ic { color: var(--cta-strong); margin-bottom: 6px; }

.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s6); align-items: start; padding: var(--s6) 0 var(--s8); }
.side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s1); }
.side a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: 14.5px; min-height: 44px; transition: background var(--t-fast), color var(--t-fast); }
.side a:hover { background: var(--surface-2); color: var(--text); }
.side a[aria-current="page"] { background: var(--cta-dim); color: var(--cta-strong); }
.side__group { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; padding: var(--s4) var(--s3) var(--s1); }
.side .avatar, .side img { width: 40px; height: 40px; border-radius: var(--pill); }

/* ---------------- barra de assinatura no celular ---------------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  gap: var(--s3); align-items: center; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
}
.buybar__price { line-height: 1.2; }
.buybar__price b { display: block; font-size: 16px; }
.buybar__price small { color: var(--faint); }

/* ---------------- avisos ---------------- */
.toasts { position: fixed; z-index: 90; top: 76px; right: var(--s4); display: flex; flex-direction: column; gap: var(--s2); max-width: min(380px, 92vw); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-lift); font-size: 14.5px; animation: slide var(--t); }
.toast--ok { border-color: var(--ok-line); }
.toast--ok .ic { color: var(--ok); }
.toast--warn { border-color: var(--warn-line); }
.toast--warn .ic { color: var(--warn); }
.toast--err { border-color: var(--danger-line); }
.toast--err .ic { color: var(--danger); }
@keyframes slide { from { opacity: 0; transform: translateX(18px); } }

.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 14.5px; }
.notice .ic { color: var(--warn); margin-top: 2px; }
.notice--cta { border-color: var(--cta-line); background: var(--cta-dim); color: var(--text); }
.notice--cta .ic { color: var(--cta-strong); }

.empty { display: grid; place-items: center; gap: var(--s3); text-align: center; padding: var(--s8) var(--s5); color: var(--muted); }
.empty .ic { color: var(--faint); }
.empty h3 { margin: 0; color: var(--text); }

/* ---------------- avatar ---------------- */
.avatar {
  display: grid; place-items: center; border-radius: var(--pill); overflow: hidden;
  background: var(--ava); color: var(--ava-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  width: 44px; height: 44px; flex: none; border: 1px solid var(--border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--top { border-color: var(--top-line); }

/* ---------------- skeleton ---------------- */
.sk { position: relative; overflow: hidden; background: var(--surface-2); }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(120, 60, 90, .13), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

.foot { border-top: 1px solid var(--border-soft); padding: var(--s6) 0 var(--s8); color: var(--faint); font-size: 13.5px; }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; }
.foot__empresa { width: 100%; font-size: 12px; color: var(--faint); opacity: .7; margin-top: var(--s3); }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* ---------------- responsivo ---------------- */
@media (max-width: 1024px) {
  .playout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .hero__grid { grid-template-columns: 1fr; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--s2); }
  .side a { white-space: nowrap; }
  .side__group { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding-inline: var(--s3); }
  .buybar { display: flex; }
  .profile { padding-bottom: 108px; }
  .creators { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s3); }
  .phead { grid-template-columns: 1fr; margin-top: -44px; }
  .stats { gap: var(--s4); }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .post__bar { padding: var(--s1) var(--s2); }
  .act { padding: 0 10px; font-size: 13.5px; }
  .section { padding: var(--s6) 0; }
  .section__head { align-items: stretch; flex-direction: column; }
  .creator-search { width: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .plans--rail { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); }
  .plans--rail .plan { min-width: 78%; scroll-snap-align: start; }
}
@media (max-width: 430px) {
  /* A barra superior cabe em 390px só com ritmo apertado: marca menor,
     alvos ainda com 40px de altura. */
  .topbar__in { gap: var(--s2); }
  .brand { gap: 7px; font-size: 17px; }
  .topnav { gap: 2px; }
  .topnav__link { padding-inline: 9px; font-size: 13.5px; }
  .btn--sm { padding-inline: 10px; }
  /* Com conta aberta restam marca + ícones + avatar: os rótulos viram
     texto acessível (o aria-label no link já carrega o nome). */
  .topnav__link > span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tile:hover img { transform: none; }
}