/* Área de membros */
.area-body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.area-body input{-webkit-user-select:text;user-select:text}
.area-nav .nav__handle{color:var(--accent)}
.area-nav__right{display:flex;align-items:center;gap:12px}
.area-badge{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:999px}
@media (max-width:520px){.area-badge{display:none}}

.area{min-height:100svh;padding:110px var(--gutter) 80px}
.area-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:60vh;color:var(--muted)}
.area-login{width:min(460px,100%);padding:clamp(24px,4vw,40px);background:var(--bg-2);border:1px solid var(--line);border-radius:28px;text-align:left}
.area-login h1{font-size:clamp(30px,4vw,40px);margin:12px 0 12px}
.area-login h1 em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.area-login__lead{color:var(--muted);font-size:14px;margin-bottom:22px}
#recover-form{display:grid;gap:14px}
#recover-form label{display:grid;gap:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#recover-form input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:400 15px var(--sans);outline:none;transition:border-color .3s,box-shadow .3s}
#recover-form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(229,154,166,.15)}
.area-login__foot{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.area-login__foot a{color:var(--text)}

.area-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.area-head h1{font-size:clamp(40px,6vw,72px);margin:14px 0 14px}
.area-head h1 em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.area-head__lead{color:var(--muted);font-size:16px;max-width:52ch}
.area-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.area-grid{columns:4 240px;column-gap:14px}
.tile{break-inside:avoid;margin:0 0 14px;border-radius:18px;overflow:hidden;position:relative;background:var(--surface);border:1px solid var(--line);
  opacity:0;transform:translateY(16px);animation:tileIn .7s var(--ease) forwards}
@keyframes tileIn{to{opacity:1;transform:none}}
.tile img,.tile video{width:100%;display:block;-webkit-user-drag:none;user-select:none;pointer-events:auto}
.tile img{cursor:zoom-in;transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile video{background:#000;aspect-ratio:9/16;object-fit:cover}
.tile__tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:rgba(10,6,8,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.tile__tag svg{width:12px;height:12px;color:var(--accent)}

.tile--locked{aspect-ratio:4/5;background:
  radial-gradient(120% 90% at 30% 20%,rgba(229,154,166,.25),transparent 55%),
  radial-gradient(90% 90% at 80% 90%,rgba(201,139,107,.2),transparent 60%),var(--surface)}
.tile__lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px}
.tile__lock svg{width:28px;height:28px;color:var(--accent)}
.tile__lock span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* marca d'água (identificação do assinante) */
.wm{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.10;mix-blend-mode:screen;display:none}
.wm.on{display:block}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(4,2,3,.94);display:grid;place-items:center}
.lb[hidden]{display:none}
.lb__stage{max-width:min(96vw,1100px);max-height:92svh;display:grid;place-items:center}
.lb__stage img{max-width:96vw;max-height:92svh;object-fit:contain;border-radius:14px;-webkit-user-drag:none}
.lb__close,.lb__nav{position:absolute;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(18,11,15,.7);color:var(--text);display:grid;place-items:center;cursor:pointer}
.lb__close{top:18px;right:18px}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--prev{left:14px}.lb__nav--next{right:14px}
.lb__close svg,.lb__nav svg{width:20px;height:20px}
