/* ============================================================
   UMBRA PHYLACTERIUM — Design System (site inteiro)
   Gótico · dark · ouro & sangue · responsivo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#08070a; --bg-2:#0d0c11; --surface:#15131b; --surface-2:#1c1922; --surface-3:#231f2a;
  --line:#2a2630; --line-soft:#1d1a24;
  --ink:#ece7df; --ink-soft:#c0b9b0; --muted:#8a8290;
  --blood:#c01d1d; --blood-bright:#e63232; --blood-deep:#7c1111;
  --gold:#d8b367; --gold-2:#b8923f; --gold-soft:#7d6730;
  --glow:rgba(220,40,40,.40); --gold-glow:rgba(216,179,103,.35);
  --wpp:#1faf4f;
  --display:'Cinzel Decorative','Cinzel',Georgia,serif;
  --serif:'Cinzel',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:14px; --r-sm:9px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --max:1240px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
*{ min-width:0; }
img,svg,video,canvas{ max-width:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
  background-image:radial-gradient(900px 500px at 50% -5%, rgba(140,20,20,.10), transparent 60%); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blood); color:#fff; }
::-webkit-scrollbar{ width:11px; } ::-webkit-scrollbar-track{ background:#0a090c; }
::-webkit-scrollbar-thumb{ background:#2a2630; border-radius:8px; border:2px solid #0a090c; }
::-webkit-scrollbar-thumb:hover{ background:var(--blood-deep); }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 22px; }
main{ flex:1 0 auto; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; letter-spacing:.02em; margin:0; }
.eyebrow{ font-family:var(--ui); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.divider{ width:120px; height:1px; margin:18px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); position:relative; }
.divider::after{ content:"✦"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--gold); font-size:13px; background:var(--bg); padding:0 10px; }

/* ===== botões ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--ui); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:13px;
  padding:15px 30px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:transform .15s, box-shadow .25s, background .25s, color .25s, filter .2s; }
.btn:active{ transform:translateY(1px); }
.btn-blood{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; box-shadow:0 10px 30px -10px var(--glow); }
.btn-blood:hover{ filter:brightness(1.12); box-shadow:0 14px 38px -10px var(--glow); }
.btn-ghost{ background:transparent; color:var(--gold); border-color:var(--gold-soft); }
.btn-ghost:hover{ border-color:var(--gold); box-shadow:0 0 26px -8px var(--gold-glow); background:rgba(216,179,103,.06); }
.btn-wpp{ background:var(--wpp); color:#fff; }
.btn-wpp:hover{ filter:brightness(1.08); }
.btn-block{ width:100%; }

/* ===== topbar / header ===== */
.topbar{ background:linear-gradient(90deg,var(--blood-deep),#3c0b0b); color:#f3e3e3; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; text-align:center; padding:9px 14px; font-family:var(--ui); position:relative; z-index:60; }
.topbar b{ color:#fff; }
.nav{ position:sticky; top:0; z-index:50; background:rgba(10,9,13,.78); backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line-soft); }
.nav.scrolled{ background:rgba(8,7,10,.95); border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; gap:22px; height:74px; }
.nav-logo img{ height:58px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.nav-links{ display:flex; gap:26px; margin-left:14px; }
.nav-links a{ font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); position:relative; padding:6px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--gold); transition:right .25s; }
.nav-links a:hover{ color:#fff; } .nav-links a:hover::after{ right:0; }
.nav-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); color:var(--ink-soft); transition:.2s; position:relative; }
.nav-icon:hover{ border-color:var(--gold-soft); color:var(--gold); }
.nav-icon svg{ width:20px; height:20px; }
.cart-count{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--blood); color:#fff; font-family:var(--ui); font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; }
.cart-count.show{ display:flex; }
.burger{ display:grid; width:46px; height:42px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--ink); cursor:pointer; place-items:center; flex:0 0 auto; }
.burger:hover{ border-color:var(--gold-soft); color:var(--gold); }
.burger span,.burger span::before,.burger span::after{ content:""; display:block; width:20px; height:2px; background:currentColor; position:relative; transition:.25s; }
.burger span::before{ position:absolute; top:-6px; } .burger span::after{ position:absolute; top:6px; }
.drawer{ position:fixed; inset:0 auto 0 0; width:min(84vw,330px); z-index:120; background:linear-gradient(180deg,#100e15,#08070a);
  border-right:1px solid var(--line); transform:translateX(-105%); transition:transform .32s cubic-bezier(.4,0,.2,1); padding:26px 20px; overflow-y:auto; box-shadow:14px 0 50px -12px #000; }
.drawer.open{ transform:translateX(0); }
.drawer img{ height:40px; margin-bottom:22px; }
.drawer a{ display:block; padding:13px 8px; border-bottom:1px solid var(--line-soft); font-family:var(--serif); letter-spacing:.05em; color:var(--ink-soft); font-size:16px; }
.drawer a:hover{ color:var(--gold); padding-left:12px; transition:.2s; }
.scrim{ position:fixed; inset:0; background:rgba(4,4,6,.62); backdrop-filter:blur(2px); z-index:110; opacity:0; pointer-events:none; transition:.3s; }
body.menu-open .scrim{ opacity:1; pointer-events:auto; } body.menu-open{ overflow:hidden; }

/* ===== header novo: hambúrguer à esquerda, avatar, submenu ===== */
.nav-inner{ gap:14px; }
.nav-logo{ margin-right:auto; }      /* empurra ações para a direita */
.nav-avatar{ width:40px; height:40px; border-radius:9px; overflow:hidden; border:1.5px solid var(--gold-soft); display:block; transition:.2s; }
.nav-avatar img{ width:100%; height:100%; object-fit:cover; }
.nav-avatar:hover{ border-color:var(--gold); box-shadow:0 0 16px -4px var(--gold-glow); }
.nav-login{ padding:10px 16px; }

/* submenu de ícones abaixo do header */
.subnav{ border-top:1px solid var(--line-soft); background:linear-gradient(180deg,#0c0b10,#0a090d); }
.subnav-inner{ display:flex; justify-content:center; gap:10px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar{ display:none; }
.subnav a{ flex:0 0 auto; display:grid; place-items:center; padding:12px 26px; color:var(--ink-soft); position:relative; transition:.2s; }
.subnav a svg{ width:25px; height:25px; color:#fff; transition:.2s; }
.subnav a span{ display:none; }                 /* só ícones */
.subnav a::after{ content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:var(--gold); transition:.25s; }
.subnav a:hover svg{ color:var(--gold); transform:translateY(-1px); }
.subnav a:hover::after{ left:22%; right:22%; }

/* gaveta: botão fechar + bloco do usuário + seções */
.drawer-x{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; }
.drawer-x:hover{ color:var(--ink); }
.drawer-links{ display:block; margin-top:6px; }
.drawer-links a{ display:block; padding:12px 8px; border-bottom:1px solid var(--line-soft); font-family:var(--serif); letter-spacing:.04em; color:var(--ink-soft); font-size:16px; }
.drawer-links a:hover{ color:var(--gold); padding-left:12px; transition:.2s; }
.drawer-links .drawer-all{ color:var(--gold); }
.drawer-sep{ font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:18px 0 6px; padding-left:8px; }
.drawer-user{ margin:8px 0 14px; }
.du-card{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--r); background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); }
.du-card img{ width:52px; height:52px; border-radius:10px; object-fit:cover; border:1px solid var(--gold-soft); }
.du-name{ font-family:var(--serif); font-size:17px; color:var(--ink); }
.du-sub{ font-family:var(--ui); font-size:12px; color:var(--gold); letter-spacing:.04em; margin-top:2px; }
.du-logout{ width:100%; margin-top:10px; background:none; border:1px solid var(--line); color:var(--muted); border-radius:var(--r-sm); padding:10px; font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.2s; }
.du-logout:hover{ border-color:var(--blood); color:var(--blood-bright); }
.du-guest p{ color:var(--ink-soft); font-family:var(--body); font-size:16px; margin:0 0 14px; }

@media(max-width:780px){
  .nav-login{ display:none; }            /* no mobile, login fica na gaveta */
  .subnav a{ min-width:64px; padding:9px 12px; font-size:10px; }
  .subnav a span{ font-size:9px; }
}

/* dropdown categorias (desktop) */
.has-drop{ position:relative; }
.drop{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); min-width:240px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-top:2px solid var(--gold);
  border-radius:0 0 var(--r-sm) var(--r-sm); box-shadow:var(--shadow); padding:8px; opacity:0; pointer-events:none; transition:.22s; z-index:40;
  columns:2; column-gap:6px; }
.has-drop:hover .drop{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.drop a{ display:block; padding:9px 12px; border-radius:7px; font-family:var(--ui); font-size:12.5px; letter-spacing:.04em; text-transform:none; color:var(--ink-soft); break-inside:avoid; }
.drop a::after{ display:none; }
.drop a:hover{ background:var(--surface-3); color:var(--gold); }

/* ===== hero (home) ===== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; text-align:center; overflow:hidden; isolation:isolate; }
.hero-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; pointer-events:none; }
.hero-fallback{ position:absolute; inset:0; z-index:-4; background:radial-gradient(900px 600px at 50% 30%, #1a0a0c, #08070a 70%); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(1100px 620px at 50% 12%, rgba(180,26,26,.30), transparent 62%),
            radial-gradient(900px 700px at 50% 120%, rgba(120,17,17,.22), transparent 60%),
            linear-gradient(180deg, rgba(8,7,10,.45), rgba(8,7,10,.92) 72%, var(--bg)); }
.hero-content{ width:100%; max-width:var(--max); margin:0 auto; padding:120px 22px 90px; }
.hero-logo{ width:min(720px,92vw); margin:0 auto 8px; filter:drop-shadow(0 10px 40px rgba(0,0,0,.7)); animation:rise 1s ease both; }
.hero-tag{ font-family:var(--ui); letter-spacing:.42em; text-transform:uppercase; font-size:13px; color:var(--gold); margin:10px 0 0; animation:rise 1s .1s ease both; }
.hero-title{ font-family:var(--display); font-weight:900; letter-spacing:.04em; font-size:clamp(30px,6vw,66px); line-height:1.05; margin:22px 0 0; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.6); animation:rise 1s .18s ease both; }
.hero-title .blood{ color:var(--blood-bright); }
.hero-sub{ font-family:var(--body); font-size:clamp(18px,2.4vw,23px); color:var(--ink-soft); max-width:640px; margin:22px auto 0; animation:rise 1s .26s ease both; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; animation:rise 1s .34s ease both; }
.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; color:var(--gold); font-size:12px; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.85; }
.scroll-cue i{ width:1px; height:32px; background:linear-gradient(var(--gold),transparent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes rise{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }
@keyframes pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ===== trust marquee ===== */
.trust{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,#0b0a0e,#08070a); overflow:hidden; }
.trust-track{ display:flex; width:max-content; padding:18px 0; white-space:nowrap; font-family:var(--serif); letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--muted); animation:marquee 30s linear infinite; }
.trust-track span{ display:inline-flex; align-items:center; gap:54px; padding-right:54px; }
.trust-track b{ color:var(--gold); font-weight:400; } .trust-track .dot{ color:var(--blood); }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== seções ===== */
.section{ position:relative; padding:92px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.section-head h2{ font-size:clamp(28px,4.4vw,46px); margin:14px 0 0; letter-spacing:.06em; }
.section-head h2 .ornament{ color:var(--gold); }
.section-head p{ color:var(--ink-soft); font-family:var(--body); font-size:19px; margin:16px 0 0; }

/* ===== categorias grid ===== */
.cats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.cat-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; padding:18px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); overflow:hidden; transition:.28s; isolation:isolate; }
.cat-card::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(216,179,103,.22); border-radius:9px; transition:.28s; pointer-events:none; }
.cat-card::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:.3s; background:radial-gradient(120% 120% at 50% 0%, rgba(192,29,29,.28), transparent 60%); }
.cat-card .num{ font-family:var(--serif); font-weight:600; font-size:12px; color:var(--gold-2); letter-spacing:.34em; text-transform:uppercase; }
.cat-card .name{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); margin-top:6px; letter-spacing:.04em; line-height:1.2; }
.cat-card .go{ font-family:var(--ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blood-bright); margin-top:10px; opacity:0; transform:translateY(6px); transition:.28s; }
.cat-card:hover{ transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:var(--shadow); }
.cat-card:hover::before{ inset:5px; border-color:rgba(216,179,103,.5); }
.cat-card:hover::after{ opacity:1; } .cat-card:hover .go{ opacity:1; transform:none; } .cat-card:hover .name{ color:#fff; }

/* ===== categorias em esferas (carrossel) ===== */
.orbits{ position:relative; }
.orbits-track{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x proximity; padding:14px 6px 22px; scrollbar-width:none; -ms-overflow-style:none; }
.orbits-track::-webkit-scrollbar{ display:none; }
.orb-item{ flex:0 0 auto; width:118px; text-align:center; scroll-snap-align:center; }
.orb{ width:104px; height:104px; border-radius:50%; display:grid; place-items:center; margin:0 auto; position:relative;
  background:radial-gradient(circle at 50% 34%, #6a1115 0%, #340c0e 62%, #160809 100%);
  border:2px solid var(--gold-soft); box-shadow:0 12px 30px -12px #000, inset 0 0 34px rgba(0,0,0,.55); transition:.3s; }
.orb::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(216,179,103,.28); pointer-events:none; }
.orb-ic svg{ width:46px; height:46px; color:var(--gold); filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.orb-item:hover .orb{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 42px -10px var(--glow), inset 0 0 30px rgba(0,0,0,.5); }
.orb-ic svg{ transition:color .25s, filter .25s, transform .25s; }
.orb-item:hover .orb-ic svg{ color:#ffe9b0; filter:drop-shadow(0 0 12px rgba(216,179,103,.85)) drop-shadow(0 0 4px rgba(255,233,176,.6)); transform:scale(1.08); }
.orb-item:hover .orb::before{ border-color:var(--gold); box-shadow:0 0 18px -2px var(--gold-glow) inset; }
.orb-nm{ display:block; margin-top:13px; font-family:var(--serif); font-size:14px; color:var(--ink-soft); letter-spacing:.03em; line-height:1.25; }
.orb-item:hover .orb-nm{ color:var(--gold); }
.orbits-arrow{ position:absolute; top:46px; z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(13,12,17,.9); color:var(--gold); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.orbits-arrow:hover{ border-color:var(--gold); box-shadow:0 0 22px -6px var(--gold-glow); }
.orbits-arrow.prev{ left:-6px; } .orbits-arrow.next{ right:-6px; }
@media(max-width:780px){ .orbits-arrow{ display:none; } .orbits-track{ gap:12px; padding:8px 4px 14px; } .orb{ width:72px; height:72px; } .orb::before{ inset:4px; } .orb-item{ width:84px; } .orb-ic svg{ width:31px; height:31px; } .orb-nm{ font-size:12px; margin-top:9px; } }
@media(max-width:480px){ .orbits-track{ gap:9px; } .orb{ width:62px; height:62px; } .orb-item{ width:72px; } .orb-ic svg{ width:27px; height:27px; } .orb-nm{ font-size:11px; margin-top:7px; } }

/* ===== seção baixe o app ===== */
.app-cta{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:radial-gradient(800px 400px at 18% 50%, rgba(192,29,29,.14), transparent 60%); }
.app-grid{ display:grid; grid-template-columns:.8fr 1.1fr; gap:50px; align-items:center; }
.app-visual{ position:relative; display:grid; place-items:center; }
.app-visual img{ width:min(300px,70%); border-radius:30px; box-shadow:var(--shadow); position:relative; z-index:1; }
.app-glow{ position:absolute; width:60%; height:60%; border-radius:50%; background:radial-gradient(circle, var(--glow), transparent 70%); filter:blur(20px); }
.app-body h2{ font-family:var(--serif); font-size:clamp(26px,3.6vw,40px); letter-spacing:.05em; margin-top:14px; }
.app-body p{ color:var(--ink-soft); font-family:var(--body); font-size:19px; margin:16px 0 22px; }
.app-body .btn{ margin-top:8px; }
@media(max-width:780px){ .app-grid{ grid-template-columns:1fr; gap:24px; text-align:center; } .app-visual{ order:-1; } .app-body .feature-list{ text-align:left; max-width:340px; margin:0 auto 22px; } }

/* ===== popup PWA ===== */
.pwa-popup{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; padding:18px;
  background:rgba(4,4,6,.55); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.3s; }
.pwa-popup.show{ opacity:1; pointer-events:auto; }
.pwa-card{ width:100%; max-width:420px; background:linear-gradient(180deg,#16131b,#0c0b10); border:1px solid var(--gold-soft);
  border-radius:18px; padding:26px 24px 22px; text-align:center; position:relative; box-shadow:var(--shadow);
  transform:translateY(20px); transition:.3s; }
.pwa-popup.show .pwa-card{ transform:none; }
.pwa-x{ position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; }
.pwa-x:hover{ color:var(--ink); }
.pwa-ico{ width:84px; height:84px; border-radius:20px; margin:0 auto 14px; border:1px solid var(--line); box-shadow:0 10px 26px -8px #000; }
.pwa-tt{ font-family:var(--serif); font-size:22px; letter-spacing:.04em; color:var(--ink); }
.pwa-sub{ color:var(--ink-soft); font-family:var(--body); font-size:17px; margin:10px 0 20px; }
.pwa-go{ width:100%; }
.pwa-later{ display:block; width:100%; margin-top:10px; background:none; border:none; color:var(--muted); font-family:var(--ui); font-size:13px; letter-spacing:.06em; cursor:pointer; padding:8px; }
.pwa-later:hover{ color:var(--ink-soft); }
@media(min-width:560px){ .pwa-popup{ align-items:center; } }

/* ===== produtos grid ===== */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod{ position:relative; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:.26s; display:flex; flex-direction:column; }
.prod:hover{ transform:translateY(-6px); border-color:var(--blood); box-shadow:0 0 0 1px var(--blood), 0 22px 50px -18px var(--glow); }
.prod-img{ position:relative; aspect-ratio:1/1; background:#0c0b0f; overflow:hidden; display:block; }
.prod-img .ph{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s; }
.prod:hover .prod-img .ph{ transform:scale(1.07); }
.prod-img .veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,7,10,.6)); }
.prod-tag{ position:absolute; top:12px; left:12px; z-index:2; background:var(--blood); color:#fff; font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.prod-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.prod-name{ font-family:var(--body); font-size:18px; color:var(--ink); line-height:1.25; }
.prod:hover .prod-name{ color:var(--gold); }
.prod-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prod-price{ font-family:var(--serif); font-weight:600; color:var(--blood-bright); font-size:19px; }
.prod-add{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--blood),var(--blood-deep)); border-radius:10px; transition:.2s; flex:none; }
.prod-add svg{ width:22px; height:22px; }
.prod-add:hover{ filter:brightness(1.15); box-shadow:0 6px 18px -6px var(--glow); transform:translateY(-1px); }
.prod-more{ text-align:center; margin-top:46px; }

/* ===== page header (categoria/loja/produto) ===== */
.page-hd{ position:relative; padding:70px 0 40px; text-align:center; border-bottom:1px solid var(--line-soft);
  background:radial-gradient(800px 320px at 50% -20%, rgba(192,29,29,.16), transparent 60%); }
.page-hd h1{ font-size:clamp(28px,5vw,48px); letter-spacing:.06em; }
.page-hd .crumb{ font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.page-hd .crumb a:hover{ color:var(--gold); }
.page-hd .count{ color:var(--ink-soft); font-family:var(--body); font-size:18px; margin-top:10px; }

/* filtros de categoria (chips) */
.cat-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:34px auto 0; max-width:980px; }
.cat-chips a{ font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; transition:.2s; }
.cat-chips a:hover{ border-color:var(--gold-soft); color:var(--gold); }
.cat-chips a.active{ background:var(--blood); border-color:var(--blood); color:#fff; }

/* ===== produto (detalhe) ===== */
.pd{ display:grid; grid-template-columns:1.05fr 1fr; gap:50px; padding:54px 0; }
.pd-gallery{ position:sticky; top:96px; align-self:start; }
.pd-main{ position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#0c0b0f; aspect-ratio:1/1; }
.pd-main img{ width:100%; height:100%; object-fit:cover; }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumbs button{ width:74px; height:74px; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; padding:0; background:#0c0b0f; transition:.2s; }
.pd-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.pd-thumbs button.active,.pd-thumbs button:hover{ border-color:var(--gold); }
.pd-info h1{ font-size:clamp(26px,3.6vw,40px); line-height:1.15; }
.pd-price{ font-family:var(--serif); font-weight:700; color:var(--blood-bright); font-size:34px; margin:18px 0 6px; }
.pd-meta{ color:var(--muted); font-family:var(--ui); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.pd-desc{ color:var(--ink-soft); font-family:var(--body); font-size:19px; line-height:1.7; margin:24px 0; white-space:pre-line; border-top:1px solid var(--line-soft); padding-top:24px; }
/* seletores de opções/variações (tamanho, espessura, anel…) */
.pd-opts{ display:flex; flex-direction:column; gap:14px; margin:22px 0 6px; }
.pd-opt label{ display:block; font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.pd-opt label .req{ color:var(--blood-bright); }
.pd-opt select{ width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:13px 14px; font-family:var(--ui); font-size:15px; cursor:pointer; }
.pd-opt select:focus{ outline:none; border-color:var(--gold-soft); }
.pd-opt-hint{ display:none; color:var(--blood-bright); font-family:var(--ui); font-size:13px; margin:2px 0 4px; }
.pd-opt-hint.show{ display:block; }
.pd-ring-note{ color:var(--gold-2); font-family:var(--body); font-size:15px; margin:14px 0 2px; }
.btn.btn-disabled{ opacity:.45; pointer-events:none; filter:saturate(.4); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.qty button{ width:44px; height:48px; background:var(--surface); color:var(--ink); border:none; cursor:pointer; font-size:18px; }
.qty button:hover{ background:var(--surface-3); color:var(--gold); }
.qty input{ width:54px; height:48px; text-align:center; background:var(--bg-2); border:none; color:var(--ink); font-family:var(--ui); font-size:16px; }
.pd-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:26px 0 10px; }
.pd-trust{ display:grid; gap:10px; margin-top:26px; border-top:1px solid var(--line-soft); padding-top:22px; }
.pd-trust div{ display:flex; gap:10px; color:var(--ink-soft); font-family:var(--body); font-size:17px; }
.pd-trust .i{ color:var(--gold); }

/* ===== carrinho ===== */
.cart-wrap{ padding:50px 0 80px; }
.cart-grid{ display:grid; grid-template-columns:1.5fr .7fr; gap:34px; align-items:start; }
.cart-item{ display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.cart-item img{ width:96px; height:96px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }
.cart-item .nm{ font-family:var(--body); font-size:19px; color:var(--ink); }
.cart-item .pr{ color:var(--blood-bright); font-family:var(--serif); font-weight:600; margin-top:4px; }
.cart-item .rm{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; margin-top:8px; letter-spacing:.06em; }
.cart-item .rm:hover{ color:var(--blood-bright); }
.cart-side{ position:sticky; top:96px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:26px; }
.cart-side h3{ font-family:var(--serif); letter-spacing:.08em; text-transform:uppercase; font-size:16px; margin-bottom:18px; }
.cart-row{ display:flex; justify-content:space-between; padding:8px 0; color:var(--ink-soft); font-family:var(--body); font-size:18px; }
.cart-total{ border-top:1px solid var(--line); margin-top:10px; padding-top:16px; font-size:24px; color:var(--ink); font-family:var(--serif); font-weight:600; }
.cart-total b{ color:var(--blood-bright); }
.cart-empty{ text-align:center; padding:80px 0; }
.cart-empty .sig{ width:90px; margin:0 auto 22px; opacity:.8; }
/* seletor de foto de perfil (cadastro) */
.avatar-pick{ display:flex; justify-content:center; margin-bottom:20px; }
.avatar-drop{ width:120px; height:120px; border-radius:18px; border:2px dashed var(--gold-soft); background:var(--bg-2);
  display:grid; place-items:center; cursor:pointer; overflow:hidden; position:relative; transition:.2s; }
.avatar-drop:hover{ border-color:var(--gold); }
.avatar-drop img{ width:100%; height:100%; object-fit:cover; display:none; }
.avatar-hint{ text-align:center; font-family:var(--ui); font-size:11px; letter-spacing:.06em; color:var(--muted); line-height:1.5; }
.avatar-hint b{ color:var(--blood-bright); }
.avatar-drop.has{ border-style:solid; border-color:var(--gold); }
.avatar-drop.has img{ display:block; } .avatar-drop.has .avatar-hint{ display:none; }
.auth-card .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.coupon-box{ display:flex; gap:8px; margin-bottom:6px; }
.ck-in{ background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm);
  padding:12px 14px; font-family:var(--ui); font-size:14px; }
.ck-in:focus{ outline:none; border-color:var(--gold-soft); }
.ck-msg{ min-height:18px; font-family:var(--ui); font-size:13px; margin:4px 0 10px; }
.ck-msg.ok{ color:var(--gold); } .ck-msg.err{ color:var(--blood-bright); }

/* ===== feature/creed/cta (home) ===== */
.feature{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.feature-grid{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:56px; }
.feature-media{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.feature-media .ph{ position:absolute; inset:0; background-size:cover; background-position:center; }
.feature-media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px 20px rgba(8,7,10,.8); }
.feature-body h2{ font-family:var(--serif); font-size:clamp(26px,3.6vw,40px); letter-spacing:.05em; margin-top:14px; }
.feature-body p{ color:var(--ink-soft); font-family:var(--body); font-size:19px; margin:18px 0 28px; }
.feature-list{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:12px; }
.feature-list li{ display:flex; gap:12px; color:var(--ink-soft); font-family:var(--body); font-size:18px; }
.feature-list li::before{ content:"✦"; color:var(--gold); }
.creed{ position:relative; text-align:center; }
.creed .sigil{ width:96px; margin:0 auto 26px; object-fit:contain; filter:drop-shadow(0 0 30px var(--blood-deep)); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{filter:drop-shadow(0 0 18px var(--blood-deep));} 50%{filter:drop-shadow(0 0 40px var(--blood));} }
.creed blockquote{ font-family:var(--body); font-style:italic; font-size:clamp(22px,3.4vw,34px); color:var(--ink); max-width:860px; margin:0 auto; line-height:1.4; }
.creed cite{ display:block; margin-top:20px; font-family:var(--ui); font-style:normal; letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--gold); }
.cta{ position:relative; text-align:center; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(700px 360px at 50% 0%, rgba(192,29,29,.22), transparent 60%); }
.cta h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,5vw,52px); color:#fff; letter-spacing:.04em; }
.cta p{ color:var(--ink-soft); font-family:var(--body); font-size:20px; margin:18px auto 34px; max-width:560px; }

/* ===== footer ===== */
.foot{ flex-shrink:0; background:linear-gradient(180deg,#0a090c,#060507); border-top:1px solid var(--line); padding:70px 0 26px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.foot-logo img{ height:54px; margin-bottom:16px; }
.foot p{ color:var(--muted); font-family:var(--body); font-size:17px; margin:0 0 14px; }
.foot h4{ font-family:var(--serif); letter-spacing:.1em; text-transform:uppercase; font-size:14px; color:var(--ink); margin:0 0 18px; }
.foot h4::after{ content:""; display:block; width:30px; height:2px; background:var(--gold); margin-top:8px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.foot ul a{ color:var(--ink-soft); font-family:var(--ui); font-size:14px; }
.foot ul a:hover{ color:var(--gold); padding-left:5px; transition:.2s; }
.foot-contact a{ display:flex; gap:10px; align-items:center; color:var(--ink-soft); font-size:15px; margin-bottom:12px; }
.foot-contact a:hover{ color:var(--gold); }
.foot-contact .ico{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); flex:0 0 auto; }
.foot-contact .ico svg{ width:18px; height:18px; fill:currentColor; }
.foot-legal{ text-align:center; font-family:var(--ui); font-size:12px; color:var(--muted); letter-spacing:.03em; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
/* frete no carrinho */
.ship-box{ margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); }
.ship-head{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.ship-head span{ color:var(--muted); letter-spacing:.04em; }
.ship-cep-link{ display:inline-block; margin-top:8px; font-family:var(--ui); font-size:12px; color:var(--muted); text-decoration:underline; }
.ship-cep-link:hover{ color:var(--gold); }
.ship-opts{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ship-opt{ display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 14px; color:var(--ink); transition:.18s; }
.ship-opt:hover{ border-color:var(--gold-soft); }
.ship-opt.sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.so-l{ display:flex; flex-direction:column; }
.so-l b{ font-family:var(--ui); font-size:14px; }
.so-l small{ color:var(--muted); font-size:12px; margin-top:2px; }
.so-p{ font-family:var(--serif); font-weight:600; color:var(--gold); font-size:16px; }
.ship-msg{ font-family:var(--ui); font-size:13px; margin-top:8px; }
.ship-msg.err{ color:#e0625a; }
/* pagamento (Mercado Pago) */
/* etapa "Qual vendedor te atendeu?" */
.seller-pick{ max-width:620px; margin:0 auto; text-align:center; padding:10px 0; }
.seller-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.seller-card{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; padding:22px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); transition:.18s; }
.seller-card:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:0 14px 32px -14px var(--glow); }
.seller-card.sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.seller-card:disabled{ cursor:default; opacity:.55; }
.seller-card.sel{ opacity:1; }
.seller-av{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:24px; color:var(--gold);
  background:radial-gradient(circle at 50% 35%, rgba(216,179,103,.18), var(--bg-2)); border:2px solid var(--gold-soft); }
.seller-nm{ font-family:var(--serif); font-size:17px; color:var(--ink); }
.seller-rl{ font-family:var(--ui); font-size:11.5px; color:var(--muted); line-height:1.3; }
.seller-msg{ min-height:18px; margin-top:10px; }
@media(max-width:480px){ .seller-grid{ grid-template-columns:1fr 1fr; } }

.pay-wrap{ max-width:540px; margin:0 auto; }
.pay-head{ text-align:center; margin-bottom:24px; }
.pay-head h2{ font-size:26px; }
.pay-amount{ display:inline-flex; align-items:baseline; gap:8px; margin-top:10px; padding:8px 18px; border-radius:999px;
  background:rgba(216,179,103,.07); border:1px solid var(--gold-soft); font-family:var(--ui); font-size:14px; color:var(--ink-soft); }
.pay-amount b{ font-family:var(--serif); font-size:22px; color:var(--gold); }
.pay-testbadge{ background:rgba(232,160,74,.1); border:1px solid rgba(232,160,74,.4); color:#e8a04a;
  font-family:var(--ui); font-size:13px; line-height:1.45; text-align:center; border-radius:10px; padding:11px 14px; margin-bottom:16px; }
#payment-brick-container{ min-height:60px; }
.pay-note{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.55; margin:14px 0; text-align:center; }

/* indicador de etapas do checkout */
.ck-steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 auto 28px; max-width:460px; }
.ck-step{ display:flex; align-items:center; gap:8px; }
.ck-step .dot{ width:26px; height:26px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:12px; font-weight:700; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); }
.ck-step .lbl{ font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.ck-step.done .dot{ color:#fff; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); border-color:transparent; }
.ck-step.active .dot{ color:var(--gold); border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,179,103,.12); }
.ck-step.active .lbl{ color:var(--gold); }
.ck-step-bar{ width:26px; height:1px; background:var(--line); flex:none; }
@media(max-width:480px){ .ck-step .lbl{ display:none; } .ck-step-bar{ width:18px; } }

/* seletor de método */
.pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.pm-btn{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; padding:24px 14px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); transition:.18s; }
.pm-btn:hover{ border-color:var(--gold-soft); transform:translateY(-2px); box-shadow:0 14px 30px -16px var(--glow); }
.pm-btn.sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 12px 30px -12px var(--gold-glow); }
.pm-ic{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold);
  background:radial-gradient(circle at 50% 35%, rgba(216,179,103,.14), var(--bg-2)); border:1px solid var(--gold-soft); }
.pm-ic svg{ width:28px; height:28px; }
.pm-btn b{ font-family:var(--serif); font-size:17px; } .pm-btn small{ color:var(--muted); font-size:12px; }

/* painel do formulário (cartão / pix) */
.pix-form,.card-form{ max-width:480px; margin:0 auto; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 24px; }
.pix-form .field,.card-form .field{ margin-bottom:14px; }
.field label{ display:block; font-family:var(--ui); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.pix-form .ck-in,.card-form .ck-in{ width:100%; padding:13px 15px; font-size:15px; border-radius:10px; }
.card-form select.ck-in{ appearance:auto; }
.card-form .row2,.pix-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card-form .btn-block,.pix-form .btn-block{ margin-top:6px; }
/* campos seguros do Mercado Pago (iframes) estilizados como input */
.mp-field{ height:50px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:0 14px; display:flex; align-items:center; transition:.15s; }
.mp-field.mp-focus{ border-color:var(--gold-soft); }
.mp-field iframe{ width:100%; height:100%; border:0; }
@media(max-width:480px){ .pm-grid{ grid-template-columns:1fr; } .card-form .row2,.pix-form .row2{ grid-template-columns:1fr; } }

/* resultado PIX (QR) */
.pix-box{ text-align:center; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--gold-soft); border-radius:var(--r); padding:26px 22px; }
.pix-box h3{ font-family:var(--serif); font-size:23px; color:var(--gold); margin-bottom:6px; }
.pix-box .pix-sub{ font-family:var(--ui); font-size:13px; color:var(--muted); margin-bottom:18px; }
.pix-qr{ width:220px; height:220px; border-radius:14px; background:#fff; padding:10px; display:block; margin:0 auto 18px;
  box-shadow:0 0 0 6px rgba(216,179,103,.08), 0 16px 40px -16px #000; }
.pix-copy{ display:flex; gap:8px; margin:0 auto 14px; max-width:420px; }
.pix-copy input{ flex:1; min-width:0; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:12px 13px; font-family:var(--ui); font-size:13px; }
.foot-bottom{ border-top:1px solid var(--line-soft); margin-top:50px; padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:13px; font-family:var(--ui); }

/* pagamentos + segurança */
.foot-pay{ border-top:1px solid var(--line-soft); margin-top:30px; padding-top:26px; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between; }
.foot-pay-group{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.foot-pay-group .lbl{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.pay{ display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:48px; padding:0 9px; border-radius:6px;
  background:#fff; color:#1a1a1a; font-family:var(--ui); font-weight:800; font-size:12px; letter-spacing:.02em; box-shadow:0 2px 8px -2px rgba(0,0,0,.5); }
.pay.visa{ color:#1a1f71; } .pay.master{ color:#eb001b; } .pay.elo{ color:#000; } .pay.amex{ color:#2e77bb; } .pay.hiper{ color:#e3001b; }
.pay.pix{ background:#32bcad; color:#fff; } .pay.boleto{ background:#16131b; color:var(--ink); border:1px solid var(--line); }
.foot-sec{ display:flex; flex-wrap:wrap; gap:12px; }
.sec-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); color:var(--ink-soft); font-family:var(--ui); font-size:12px; letter-spacing:.04em; }
.sec-badge svg{ width:16px; height:16px; color:#5fd38a; }
@media(max-width:680px){ .foot-pay{ justify-content:center; flex-direction:column; } }

/* ===== grimório (daemons / anjos) ===== */
.grim-tools{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 auto 36px; max-width:780px; }
.grim-tools input, .grim-tools select{ background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:12px 14px; font-family:var(--ui); font-size:14px; }
.grim-tools input{ flex:1; min-width:200px; }
.grim-tools input:focus, .grim-tools select:focus{ outline:none; border-color:var(--gold-soft); }
.grim-count{ text-align:center; color:var(--muted); font-family:var(--ui); font-size:13px; letter-spacing:.08em; margin-bottom:24px; }
.grim-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.seal-card{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-soft); border-radius:var(--r); padding:18px 12px 16px; text-align:center; cursor:pointer; transition:.25s; }
.seal-card:hover{ transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:var(--shadow); }
.seal{ width:96px; height:96px; margin:0 auto 12px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 36%, #4a0f12, #220a0c 70%, #140809); border:2px solid var(--gold-soft); overflow:hidden; }
.seal img{ width:100%; height:100%; object-fit:contain; padding:11%;
  /* sigilo (linha preta) -> linha marfim/dourada visível no círculo escuro */
  filter: invert(1) sepia(.35) saturate(180%) hue-rotate(2deg) brightness(1.05) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.seal .seal-ph{ font-family:var(--display); color:var(--gold); font-size:26px; }
.seal:has(img) .seal-ph{ display:none; }      /* esconde o número quando há sigilo */
.seal::after{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(216,179,103,.3); pointer-events:none; }
.seal-card:hover .seal{ border-color:var(--gold); box-shadow:0 0 22px -6px var(--gold-glow); }
.seal-n{ font-family:var(--ui); font-size:11px; letter-spacing:.16em; color:var(--gold-2); }
.seal-name{ font-family:var(--serif); font-size:17px; color:var(--ink); margin:3px 0 2px; }
.seal-rank{ font-family:var(--ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.seal-card:hover .seal-name{ color:var(--gold); }

/* modal genérico (grimório) */
.gmodal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(4,4,6,.72); backdrop-filter:blur(4px); }
.gmodal.open{ display:flex; }
.gmodal-box{ width:100%; max-width:600px; max-height:92vh; overflow:auto; background:linear-gradient(180deg,#15131b,#0c0b10); border:1px solid var(--gold-soft); border-radius:var(--r); padding:30px; position:relative; box-shadow:var(--shadow); }
.gmodal-x{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; }
.gmodal-x:hover{ color:var(--ink); }
.gm-head{ display:flex; gap:20px; align-items:center; margin-bottom:8px; }
.gm-head .seal{ width:110px; height:110px; flex:0 0 auto; margin:0; }
.gm-title .n{ font-family:var(--ui); font-size:12px; letter-spacing:.2em; color:var(--gold-2); }
.gm-title h2{ font-family:var(--display); font-size:32px; color:#fff; letter-spacing:.03em; margin:4px 0; }
.gm-title .rk{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.gm-office{ color:var(--ink-soft); font-family:var(--body); font-size:18px; line-height:1.6; margin:16px 0 22px; border-top:1px solid var(--line-soft); padding-top:18px; }
.attr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; }
.attr{ background:var(--surface); padding:12px 14px; }
.attr .k{ font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.attr .v{ font-family:var(--serif); font-size:16px; color:var(--ink); margin-top:3px; }
.gm-invoke{ margin-top:18px; padding:18px 20px; border-radius:var(--r-sm); border:1px solid var(--gold-soft);
  background:radial-gradient(120% 140% at 50% 0%, rgba(192,29,29,.12), transparent 60%), var(--surface); }
.gm-invoke-h{ font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.gm-invoke p{ font-family:var(--body); font-size:18px; line-height:1.6; color:var(--ink); font-style:italic; margin:0; }
.gm-enn{ margin-top:18px; padding:18px 20px; border-radius:var(--r-sm); border:1px solid var(--gold-soft);
  background:radial-gradient(120% 140% at 50% 0%, rgba(216,179,103,.14), transparent 62%), var(--surface); text-align:center; }
.enn-text{ font-family:var(--serif); font-size:23px; line-height:1.35; color:var(--gold); margin:0 0 8px; letter-spacing:.02em; }
.enn-note{ font-family:var(--ui); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.gm-cross{ margin-top:18px; text-align:center; font-family:var(--body); font-size:16px; color:var(--ink-soft); }
.gm-cross a{ color:var(--gold); }
.gm-note{ text-align:center; color:var(--muted); font-family:var(--body); font-size:14px; margin-top:30px; }
@media(max-width:980px){ .grim-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:680px){ .grim-grid{ grid-template-columns:repeat(3,1fr); } .gm-head{ flex-direction:column; text-align:center; } .attr-grid{ grid-template-columns:1fr; } }
@media(max-width:420px){ .grim-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== biblioteca (hub) ===== */
.lib-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; }
.lib-card{ display:block; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:32px; transition:.26s; position:relative; overflow:hidden; }
.lib-card::after{ content:""; position:absolute; inset:0; z-index:0; opacity:0; transition:.3s; background:radial-gradient(120% 120% at 50% 0%, rgba(192,29,29,.16), transparent 60%); }
.lib-card:hover{ transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:var(--shadow); }
.lib-card:hover::after{ opacity:1; }
.lib-card > *{ position:relative; z-index:1; }
.lib-ic{ width:64px; height:64px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:radial-gradient(circle at 50% 35%, #4a0f12, #220a0c 75%); border:1px solid var(--gold-soft); }
.lib-ic svg{ width:32px; height:32px; color:var(--gold); }
.lib-card h3{ font-family:var(--serif); font-size:24px; color:var(--ink); letter-spacing:.03em; }
.lib-card:hover h3{ color:var(--gold); }
.lib-card p{ color:var(--ink-soft); font-family:var(--body); font-size:18px; margin:12px 0 16px; }
.lib-go{ font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-bright); }
@media(max-width:680px){ .lib-grid{ grid-template-columns:1fr; } }

/* ===== biblioteca de livros ===== */
.biblio-tools{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 auto 30px; max-width:760px; }
.biblio-tools input, .biblio-tools select{ background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:13px 15px; font-family:var(--ui); font-size:14px; }
.biblio-tools input{ flex:1; min-width:220px; }
.biblio-tools select{ max-width:260px; }
.biblio-tools input:focus, .biblio-tools select:focus{ outline:none; border-color:var(--gold-soft); }
.biblio-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.book{ cursor:pointer; transition:.22s; }
.book-cover{ position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--bg-2)); box-shadow:0 10px 24px -12px #000; }
.book-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.book-ph{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:14px;
  font-family:var(--serif); font-size:14px; color:var(--gold); line-height:1.3; }
.book-cover.noimg .book-ph{ display:flex; }
.book-cover::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(216,179,103,.12); border-radius:10px; pointer-events:none; transition:.22s; }
.book:hover{ transform:translateY(-5px); }
.book:hover .book-cover::after{ box-shadow:inset 0 0 0 2px var(--gold), 0 0 22px -6px var(--gold-glow); }
.book-info{ padding:10px 2px 0; }
.book-title{ font-family:var(--serif); font-size:14px; color:var(--ink); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book:hover .book-title{ color:var(--gold); }
.book-author{ font-family:var(--ui); font-size:11.5px; color:var(--muted); margin-top:3px; letter-spacing:.02em; }
/* modal do livro */
.book-modal{ display:grid; grid-template-columns:160px 1fr; gap:24px; }
.bm-cover{ aspect-ratio:2/3; border-radius:10px; overflow:hidden; border:1px solid var(--gold-soft); background:var(--bg-2); }
.bm-cover img{ width:100%; height:100%; object-fit:cover; }
.bm-cat{ font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.bm-info h2{ font-family:var(--display); font-size:26px; color:#fff; letter-spacing:.02em; margin:6px 0 4px; line-height:1.15; }
.bm-author{ font-family:var(--body); font-size:18px; color:var(--ink-soft); font-style:italic; }
.bm-desc{ font-family:var(--body); font-size:17px; color:var(--ink-soft); line-height:1.6; margin:16px 0 22px; border-top:1px solid var(--line-soft); padding-top:16px; }
@media(max-width:1080px){ .biblio-grid{ grid-template-columns:repeat(5,1fr); } }
@media(max-width:820px){ .biblio-grid{ grid-template-columns:repeat(4,1fr); gap:14px; } }
@media(max-width:560px){ .biblio-grid{ grid-template-columns:repeat(3,1fr); gap:12px; } .book-modal{ grid-template-columns:110px 1fr; gap:16px; } .bm-info h2{ font-size:21px; } }
@media(max-width:380px){ .biblio-grid{ grid-template-columns:repeat(2,1fr); } }
/* paginação da biblioteca */
.biblio-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:40px; }
.pg-btn{ font-family:var(--ui); font-size:14px; min-width:40px; padding:9px 13px; border-radius:9px;
  border:1px solid var(--gold-soft); background:transparent; color:var(--gold); cursor:pointer; transition:.2s; }
.pg-btn:hover{ border-color:var(--gold); background:rgba(216,179,103,.06); box-shadow:0 0 22px -8px var(--gold-glow); }
.pg-btn.is-active{ background:var(--gold); color:#08070a; border-color:var(--gold); font-weight:600; cursor:default; }
.pg-btn.is-disabled{ opacity:.35; cursor:default; }
.pg-btn.is-disabled:hover{ border-color:var(--gold-soft); background:transparent; box-shadow:none; }
.pg-gap{ color:var(--muted); padding:0 2px; }
@media(max-width:560px){ .biblio-pager{ gap:6px; } .pg-btn{ min-width:34px; padding:8px 10px; font-size:13px; } }
.bm-acts{ display:flex; flex-wrap:wrap; gap:10px; }
/* leitor embutido */
.reader{ position:fixed; inset:0; z-index:1200; background:rgba(6,5,8,.96); display:none; flex-direction:column; }
.reader.open{ display:flex; }
.reader-bar{ display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.reader-title{ font-family:var(--serif); font-size:15px; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-actions{ display:flex; align-items:center; gap:8px; }
.rd-act{ font-family:var(--ui); font-size:13px; color:var(--gold); background:transparent; border:1px solid var(--gold-soft);
  border-radius:8px; padding:7px 12px; cursor:pointer; transition:.2s; text-decoration:none; white-space:nowrap; }
.rd-act:hover{ border-color:var(--gold); background:rgba(216,179,103,.06); }
.reader-x{ font-size:14px; padding:7px 11px; }
.reader-body{ flex:1; display:flex; min-height:0; }
.reader-frame{ flex:1; border:0; width:100%; height:100%; background:#1b1b1f; }
.reader-trans{ display:none; width:340px; flex:none; border-left:1px solid var(--line); background:var(--bg-2);
  flex-direction:column; padding:18px; overflow:auto; }
.reader.show-trans .reader-trans{ display:flex; }
.rt-head{ font-family:var(--display); font-size:17px; color:#fff; letter-spacing:.02em; }
.rt-head span{ font-family:var(--ui); font-size:12px; color:var(--gold-2); letter-spacing:.14em; margin-left:6px; }
.rt-hint{ font-family:var(--ui); font-size:12px; color:var(--muted); line-height:1.5; margin:8px 0 12px; }
#rt-in{ width:100%; min-height:120px; resize:vertical; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:10px; font-family:var(--body); font-size:14px; line-height:1.5; }
#rt-in:focus{ outline:none; border-color:var(--gold-soft); }
.reader-trans .btn-blood{ margin-top:10px; width:100%; }
.rt-out{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); font-family:var(--body);
  font-size:15px; line-height:1.6; color:var(--ink-soft); white-space:pre-wrap; }
/* tradutor apenas no desktop */
@media(min-width:900px){ .reader.show-trans .reader-frame{ min-width:0; } }
@media(max-width:899px){ .rd-trans-toggle{ display:none; } .reader-trans{ display:none!important; } }
/* ============ FÓRUM ============ */
.forum-wrap{ max-width:720px; }
.forum-empty,.fr-c-loading{ text-align:center; color:var(--muted); font-family:var(--body); font-size:16px; padding:34px 16px; line-height:1.6; }
.fr-av{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-soft); background:var(--bg-2); flex:none; }
.fr-av-sm{ width:34px; height:34px; }
.fr-badge{ font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#08070a;
  background:var(--gold); padding:2px 6px; border-radius:5px; vertical-align:middle; margin-left:4px; }
.fr-pin{ font-family:var(--ui); font-size:11px; color:var(--gold-2); margin-left:6px; }
.fr-name{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.fr-time{ font-family:var(--ui); font-size:12px; color:var(--muted); }
/* composer */
.fr-composer{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; margin-bottom:26px; }
.fr-co-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.fr-co-hi{ font-family:var(--body); font-size:15px; color:var(--ink-soft); }
.fr-title-in,.fr-body-in{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:var(--body); padding:11px 12px; margin-bottom:10px; }
.fr-title-in{ font-family:var(--serif); font-size:16px; }
.fr-body-in{ font-size:15px; line-height:1.55; min-height:90px; resize:vertical; }
.fr-title-in:focus,.fr-body-in:focus{ outline:none; border-color:var(--gold-soft); }
.fr-co-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fr-icon-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-size:13px; color:var(--gold);
  border:1px solid var(--gold-soft); border-radius:9px; padding:8px 12px; cursor:pointer; transition:.2s; }
.fr-icon-btn:hover{ border-color:var(--gold); background:rgba(216,179,103,.06); }
.fr-icon-btn svg{ width:18px; height:18px; }
.fr-icon-sm{ padding:7px 9px; }
.fr-msg{ font-family:var(--ui); font-size:13px; color:var(--gold-2); margin-top:8px; min-height:0; }
.fr-img-prev,.fr-c-prev{ position:relative; display:inline-block; margin-bottom:10px; }
.fr-img-prev img{ max-height:220px; max-width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.fr-c-prev img{ max-height:120px; border-radius:8px; border:1px solid var(--line); display:block; }
.fr-img-rm{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(8,7,10,.8); color:#fff; cursor:pointer; font-size:13px; }
/* guest */
.fr-guest{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px; text-align:center; margin-bottom:26px; }
.fr-guest p{ font-family:var(--body); font-size:16px; color:var(--ink-soft); margin:0 0 16px; }
.fr-guest-acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* post */
.fr-feed{ display:flex; flex-direction:column; gap:18px; }
.fr-post{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.fr-post-head{ display:flex; align-items:center; gap:12px; }
.fr-meta{ flex:1; min-width:0; }
.fr-del{ background:transparent; border:1px solid var(--line); color:var(--muted); width:30px; height:30px; border-radius:8px;
  cursor:pointer; flex:none; transition:.2s; font-size:13px; }
.fr-del:hover{ border-color:var(--blood-bright); color:var(--blood-bright); }
.fr-del-sm{ width:24px; height:24px; font-size:11px; }
.fr-post-title{ font-family:var(--serif); font-size:20px; color:var(--ink); margin:14px 0 6px; line-height:1.25; }
.fr-post-body{ font-family:var(--body); font-size:16px; color:var(--ink-soft); line-height:1.62; margin-top:12px; white-space:normal; word-wrap:break-word; text-align:justify; }
.fr-post-body.clamp{ max-height:220px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent); mask-image:linear-gradient(180deg,#000 74%,transparent); }
.fr-more{ margin-top:8px; background:none; border:none; cursor:pointer; font-family:var(--ui); font-size:13px; color:var(--gold); letter-spacing:.03em; }
.fr-more:hover{ text-decoration:underline; }
.fr-post-img{ margin-top:14px; }
.fr-post-img img{ width:100%; border-radius:12px; border:1px solid var(--line); display:block; }
.fr-actions{ display:flex; gap:8px; margin-top:14px; border-top:1px solid var(--line-soft); padding-top:12px; }
.fr-act{ display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; cursor:pointer;
  font-family:var(--ui); font-size:13.5px; color:var(--muted); padding:7px 12px; border-radius:9px; transition:.18s; }
.fr-act:hover{ background:var(--bg-2); color:var(--ink); }
.fr-act svg{ width:19px; height:19px; }
.fr-like.liked{ color:var(--blood-bright); }
/* comentários */
.fr-comments{ margin-top:14px; border-top:1px solid var(--line-soft); padding-top:14px; }
.fr-c-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.fr-comment{ display:flex; gap:10px; }
.fr-c-bubble{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:12px; padding:9px 13px; flex:1; min-width:0; }
.fr-c-head{ display:flex; align-items:center; gap:8px; }
.fr-c-head .fr-name{ font-size:14px; }
.fr-c-body{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.55; margin-top:3px; word-wrap:break-word; }
.fr-c-img{ margin-top:8px; }
.fr-c-img img{ max-width:240px; max-height:240px; border-radius:8px; border:1px solid var(--line); display:block; }
.fr-c-form{ display:flex; align-items:flex-start; gap:8px; }
.fr-c-input{ flex:1; min-width:0; }
.fr-c-input textarea{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:18px; color:var(--ink);
  font-family:var(--body); font-size:15px; padding:9px 14px; resize:none; line-height:1.4; }
.fr-c-input textarea:focus{ outline:none; border-color:var(--gold-soft); }
.fr-c-send{ padding:9px 14px; flex:none; }
.fr-c-guest{ font-family:var(--body); font-size:14px; color:var(--muted); }
.fr-c-guest a{ color:var(--gold); }
.fr-c-loading{ padding:14px; }
@media(max-width:560px){
  .fr-post-title{ font-size:18px; } .fr-act span{ } .fr-c-send{ padding:9px 11px; }
  .fr-icon-btn span,.fr-act:last-child{ }
}

/* ===== calendário lunar ===== */
.cal-head{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:8px; }
.cal-head h2{ font-family:var(--display); font-size:28px; color:var(--ink); letter-spacing:.04em; min-width:240px; text-align:center; text-transform:capitalize; }
.cal-nav{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--gold); font-size:22px; cursor:pointer; }
.cal-nav:hover{ border-color:var(--gold); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:24px; }
.cal-dow{ text-align:center; font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; }
.cal-cell{ min-height:96px; border:1px solid var(--line-soft); border-radius:10px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:8px; position:relative; }
.cal-cell.empty{ background:transparent; border:none; }
.cal-cell.today{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-soft) inset; }
.cal-date{ font-family:var(--ui); font-size:13px; color:var(--ink-soft); }
.cal-moon{ font-size:22px; line-height:1; position:absolute; top:7px; right:8px; }
.cal-planet{ position:absolute; bottom:7px; left:8px; font-family:var(--serif); font-size:12px; color:var(--gold); display:flex; align-items:center; gap:4px; }
.cal-planet .ps{ font-size:14px; }
.cal-legend{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; margin-top:30px; color:var(--ink-soft); font-family:var(--body); font-size:15px; }
.cal-legend b{ color:var(--gold); }
@media(max-width:680px){ .cal-cell{ min-height:74px; } .cal-moon{ font-size:17px; } .cal-planet{ font-size:10px; } .cal-date{ font-size:11px; } }

/* ===== flutuantes ===== */
#toTop{ position:fixed; left:18px; bottom:18px; z-index:90; width:48px; height:48px; border-radius:50%; border:1px solid rgba(216,179,103,.4);
  background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s; box-shadow:0 8px 24px -8px var(--glow); }
#toTop.show{ opacity:1; pointer-events:auto; transform:none; }
.wpp-float{ position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:row-reverse; align-items:center; gap:10px; }
.wpp-float .bub{ width:56px; height:56px; border-radius:50%; background:var(--wpp); color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(31,175,79,.6); transition:.2s; }
.wpp-float .bub svg{ width:30px; height:30px; fill:#fff; }
.wpp-float:hover .bub{ transform:scale(1.08); }
.wpp-float .lbl{ background:#11140f; color:#eafff0; border:1px solid #1f3a26; font-family:var(--ui); font-size:13px; padding:8px 14px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow); }

/* toast add-to-cart */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:200;
  background:linear-gradient(180deg,#16131b,#0d0c11); border:1px solid var(--gold-soft); color:var(--ink); font-family:var(--ui); font-size:14px;
  padding:13px 22px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.3s; display:flex; gap:10px; align-items:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ck{ color:var(--gold); }

/* ===== responsivo ===== */
@media (max-width:1080px){
  .cats-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .pd{ grid-template-columns:1fr; gap:30px; } .pd-gallery{ position:static; }
  .cart-grid{ grid-template-columns:1fr; } .cart-side{ position:static; }
}
@media (max-width:780px){
  .nav-links,.nav-cta-desk{ display:none; } .burger{ display:grid; }
  .nav-inner{ height:64px; } .nav-logo img{ height:38px; }
  .section{ padding:64px 0; } .feature-grid{ grid-template-columns:1fr; } .feature-media{ order:-1; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .cats-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .wpp-float .lbl{ display:none; }
}
@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .prod-name{ font-size:16px; } .prod-price{ font-size:17px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; }
  .pd-price{ font-size:28px; }
}
a:focus-visible,button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ============================================================
   AJUSTES MOBILE (refino)
   ============================================================ */
@media(max-width:820px){
  .nav-inner{ height:60px; gap:10px; }
  .nav-logo img{ height:42px; }
  .nav-actions{ gap:8px; }
  .nav-icon{ width:38px; height:38px; }
  .nav-avatar{ width:36px; height:36px; }
  .subnav-inner{ gap:2px; justify-content:space-around; }
  .subnav a{ padding:10px 12px; flex:1; }
  .subnav a svg{ width:23px; height:23px; }
  /* hero compacto e legível */
  .hero{ min-height:86vh; }
  .hero::before{ background:
    radial-gradient(700px 460px at 50% 14%, rgba(180,26,26,.30), transparent 60%),
    linear-gradient(180deg, rgba(8,7,10,.55), rgba(8,7,10,.95) 64%, var(--bg)); }
  .hero-content{ padding:54px 20px 60px; }
  .hero-logo{ width:86vw; margin-bottom:4px; }
  .hero-tag{ letter-spacing:.26em; font-size:11px; }
  .hero-title{ font-size:clamp(26px,8vw,40px); margin-top:16px; }
  .hero-sub{ font-size:17px; margin-top:16px; }
  .hero-cta{ margin-top:26px; gap:12px; }
  .section{ padding:54px 0; }
  .section-head{ margin-bottom:30px; }
  .page-hd{ padding:48px 0 30px; }
}
@media(max-width:430px){
  .nav-login{ display:none; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .hero-title{ font-size:clamp(24px,8.5vw,34px); }
  .btn{ padding:14px 22px; font-size:12px; }
  .subnav a{ padding:10px 6px; }
  .gmodal-box,.modal-box{ padding:22px 18px; }
  .pd-actions{ flex-direction:column; align-items:stretch; }
  .pd-actions .qty{ align-self:center; }
}

/* ===== loja: busca + filtros ===== */
.loja-tools{ display:flex; gap:12px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.loja-search{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:999px; padding:0 16px; transition:.2s; }
.loja-search:focus-within{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(216,179,103,.08); }
.loja-search svg{ width:20px; height:20px; color:var(--muted); flex:none; }
.loja-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--ink);
  font-family:var(--ui); font-size:15px; padding:13px 0; }
.loja-search input::placeholder{ color:var(--muted); }
.loja-search input::-webkit-search-cancel-button{ filter:grayscale(1) brightness(2); cursor:pointer; }
.loja-filtros-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; flex:none;
  font-family:var(--ui); font-size:14px; letter-spacing:.04em; color:var(--gold);
  background:transparent; border:1px solid var(--gold-soft); border-radius:999px; padding:12px 20px; transition:.2s; }
.loja-filtros-btn svg{ width:19px; height:19px; }
.loja-filtros-btn:hover{ border-color:var(--gold); background:rgba(216,179,103,.06); }
.loja-filtros-btn.active{ background:var(--gold); color:#08070a; border-color:var(--gold); }
.cat-panel{ margin-top:16px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); animation:rise .35s ease both; }
.cat-panel-title{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.loja-empty{ text-align:center; color:var(--muted); font-family:var(--body); font-size:18px; padding:50px 16px; }
@media(max-width:560px){ .loja-filtros-btn{ flex:1; justify-content:center; } }

/* ============================================================
   CURSOR DE ESPADA — somente desktop (ponteiro fino c/ hover)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  *{ cursor: url('/assets/img/cursor-sword.png') 3 3, auto !important; }
  a, button, [role="button"], .btn, label, select, summary,
  .book, .seal-card, .orb-item, .prod-add, .pm-btn, .ship-opt, .pg-btn,
  [data-add], [data-buynow], [onclick], input[type="submit"], input[type="button"],
  input[type="checkbox"], input[type="radio"]{
    cursor: url('/assets/img/cursor-sword-gold.png') 3 3, pointer !important; }
  input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  textarea, [contenteditable="true"]{ cursor: text !important; }
}

/* tooltip estilizado (data-tip) */
.umbra-tip{ position:fixed; z-index:2000; background:var(--surface); color:var(--ink); border:1px solid var(--gold-soft);
  border-radius:8px; padding:7px 12px; font-family:var(--ui); font-size:12.5px; letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 10px 28px -10px #000; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s, transform .15s; }
.umbra-tip.show{ opacity:1; transform:translateY(0); }

/* ============ FÓRUM › abas + Comunidade (chat) ============ */
.forum-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:24px; }
.ftab{ font-family:var(--ui); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:10px 22px; cursor:pointer; transition:.2s; }
.ftab:hover{ border-color:var(--gold-soft); }
.ftab.active{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:transparent; }
.chat{ display:grid; grid-template-columns:200px 1fr 220px; gap:16px; height:min(72vh,640px); }
.chat-rooms,.chat-online{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; overflow:auto; }
.cr-title,.co-title{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.cr-room{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer; color:var(--ink);
  background:transparent; border:1px solid transparent; border-radius:9px; padding:9px 10px; margin-bottom:4px; transition:.15s; position:relative; }
.cr-room:hover{ background:var(--bg-2); }
.cr-room.active{ background:var(--bg-2); border-color:var(--gold-soft); }
.cr-ico{ font-size:15px; flex:none; }
.cr-name{ flex:1; min-width:0; font-family:var(--serif); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-on{ display:inline-flex; align-items:center; gap:4px; font-family:var(--ui); font-size:11px; color:#5fd38a; flex:none; }
.cr-on i{ width:7px; height:7px; border-radius:50%; background:#5fd38a; box-shadow:0 0 6px #5fd38a; }
.cr-del{ color:var(--muted); font-size:11px; padding:0 2px; }
.cr-del:hover{ color:var(--blood-bright); }
.cr-new{ width:100%; margin-top:8px; cursor:pointer; font-family:var(--ui); font-size:12px; color:var(--gold);
  background:transparent; border:1px dashed var(--gold-soft); border-radius:9px; padding:9px; }
.chat-main{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.chat-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--serif); }
.chat-head b{ font-size:16px; } .ch-ico{ font-size:18px; } .ch-on{ font-family:var(--ui); font-size:12px; color:#5fd38a; }
.chat-rules{ font-family:var(--ui); font-size:11.5px; color:var(--muted); background:rgba(216,179,103,.05);
  border-bottom:1px solid var(--line-soft); padding:8px 16px; line-height:1.4; }
.chat-msgs{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.chat-empty,.co-empty{ color:var(--muted); font-family:var(--body); font-size:14px; text-align:center; margin:auto; padding:20px; }
.cmsg{ display:flex; gap:10px; }
.cm-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-soft); flex:none; }
.cm-body{ flex:1; min-width:0; }
.cm-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cm-head b{ font-family:var(--serif); font-size:14px; color:var(--ink); }
.cm-badge{ font-family:var(--ui); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-soft); background:rgba(216,179,103,.08); padding:2px 7px; border-radius:5px; white-space:nowrap; }
.cm-badge.adm{ background:var(--blood); border-color:var(--blood); color:#fff; }
.cm-title{ font-family:var(--ui); font-size:11px; color:var(--gold-2); }
.cm-time{ font-family:var(--ui); font-size:11px; color:var(--muted); }
.cm-del{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px; margin-left:auto; }
.cm-del:hover{ color:var(--blood-bright); }
.cm-text{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.5; margin-top:2px; word-wrap:break-word; }
.chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat-form input{ flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--ink);
  font-family:var(--body); font-size:15px; padding:11px 16px; }
.chat-form input:focus{ outline:none; border-color:var(--gold-soft); }
.chat-form button{ padding:11px 20px; }
.chat-guest{ padding:14px; text-align:center; font-family:var(--body); color:var(--muted); border-top:1px solid var(--line); }
.chat-guest a{ color:var(--gold); }
.co-user{ display:flex; align-items:center; gap:8px; padding:7px 0; }
.co-dot{ width:8px; height:8px; border-radius:50%; background:#5fd38a; box-shadow:0 0 6px #5fd38a; flex:none; }
.co-user img{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.co-meta{ min-width:0; }
.co-name{ font-family:var(--serif); font-size:13px; color:var(--ink); }
.co-name small{ color:var(--muted); }
.co-title2{ font-family:var(--ui); font-size:11px; color:var(--gold-2); }
.co-user.off{ opacity:.5; }
.co-user.off .co-dot{ background:var(--muted); box-shadow:none; }

/* sino de notificações + dropdown */
.nav-notif{ background:transparent; cursor:pointer; position:relative; }
.notif-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--blood-bright); box-shadow:0 0 6px var(--blood-bright); }
.notif-pop{ position:fixed; z-index:1200; width:260px; background:var(--surface); border:1px solid var(--gold-soft);
  border-radius:var(--r-sm); box-shadow:0 16px 40px -12px #000; overflow:hidden; }
.np-head{ font-family:var(--ui); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  padding:12px 16px; border-bottom:1px solid var(--line-soft); }
.np-empty{ font-family:var(--body); font-size:15px; color:var(--muted); padding:22px 16px; text-align:center; }
/* nomes dos vendedores no rodapé (Atendimento) */
.foot-contact .fc-t{ line-height:1.3; }
.foot-contact .fc-t b{ color:var(--ink); }
.foot-contact .fc-t small{ display:block; color:var(--muted); font-size:11px; margin-top:1px; }

/* Comunidade: cards de membros */
.mem-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.mem-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 14px; transition:.2s; }
.mem-card:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:0 14px 32px -14px var(--glow); }
.mem-av{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-soft); }
.mem-stat{ position:absolute; top:14px; right:16px; width:10px; height:10px; border-radius:50%; background:var(--muted); border:2px solid var(--surface); }
.mem-stat.on{ background:#5fd38a; box-shadow:0 0 8px #5fd38a; }
.mem-name{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.mem-title{ font-family:var(--ui); font-size:11px; color:var(--gold-2); }
.mem-city{ font-family:var(--ui); font-size:11px; color:var(--muted); }
/* página de perfil público */
.perfil{ max-width:520px; margin:0 auto; text-align:center; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:40px 26px; }
.perfil-av{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--gold-soft); margin-bottom:16px; }
.perfil-name{ font-family:var(--display); font-size:30px; color:#fff; letter-spacing:.02em; margin:0; }
.perfil-tag{ margin-top:8px; display:flex; gap:8px; justify-content:center; align-items:center; }
.pf-title{ font-family:var(--ui); font-size:13px; color:var(--gold-2); letter-spacing:.08em; }
.pf-lv{ font-family:var(--ui); font-size:12px; color:var(--muted); }
.perfil-stats{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:18px;
  font-family:var(--body); font-size:15px; color:var(--ink-soft); }
.perfil-social{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.pf-soc{ font-family:var(--ui); font-size:13px; color:var(--gold); border:1px solid var(--gold-soft);
  border-radius:999px; padding:8px 16px; transition:.2s; }
.pf-soc:hover{ border-color:var(--gold); background:rgba(216,179,103,.06); }

/* seletor de emojis */
.emoji-pop{ position:fixed; z-index:2100; width:260px; max-height:220px; overflow-y:auto; padding:8px;
  background:var(--surface); border:1px solid var(--gold-soft); border-radius:12px; box-shadow:0 16px 40px -12px #000;
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.emoji-b{ background:none; border:none; cursor:pointer; font-size:20px; line-height:1; padding:6px; border-radius:7px; transition:.12s; }
.emoji-b:hover{ background:var(--bg-2); transform:scale(1.18); }
.chat-emoji{ background:transparent; border:1px solid var(--line); border-radius:50%; width:40px; height:40px;
  cursor:pointer; font-size:18px; color:var(--gold); flex:none; transition:.2s; }
.chat-emoji:hover{ border-color:var(--gold-soft); }

/* ===== compositor estilo Facebook (cores do site) ===== */
.fb-composer{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:26px; }
.fb-top{ display:flex; gap:12px; align-items:flex-start; }
.fb-top .fr-av{ width:44px; height:44px; flex:none; }
.fb-top-in{ flex:1; min-width:0; }
.fb-title{ width:100%; background:transparent; border:none; outline:none; color:var(--ink); font-family:var(--serif); font-size:17px; padding:6px 2px; }
.fb-title::placeholder{ color:var(--muted); }
.fb-body{ width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.5; padding:12px 14px; resize:none; min-height:54px; margin-top:6px; }
.fb-body:focus{ outline:none; border-color:var(--gold-soft); }
.fb-body::placeholder{ color:var(--muted); }
.fb-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
.fb-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.fb-act{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:transparent; border:none;
  border-radius:10px; padding:9px 14px; font-family:var(--ui); font-size:14px; color:var(--ink-soft); transition:.16s; }
.fb-act:hover{ background:var(--bg-2); }
.fb-act svg{ width:21px; height:21px; }
.fb-act.photo svg{ color:#5fd38a; }
.fb-act.emoji svg{ color:var(--gold); }
.fb-publish{ padding:11px 26px; flex:none; }
@media(max-width:560px){
  /* abas do fórum (Feed/Tópicos/Chat/Comunidade) — menores e sem aglomerar */
  .forum-tabs{ gap:5px; margin-bottom:18px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; padding-bottom:2px; }
  .forum-tabs::-webkit-scrollbar{ display:none; }
  .ftab{ flex:0 0 auto; font-size:11px; letter-spacing:.03em; padding:7px 13px; }
  /* compositor de publicação mais enxuto no celular */
  .fb-composer{ padding:12px 13px; margin-bottom:18px; border-radius:14px; }
  .fb-top{ gap:9px; }
  .fb-top .fr-av{ width:38px; height:38px; }
  .fb-title{ font-size:15px; padding:4px 2px; }
  .fb-body{ font-size:15px; padding:10px 12px; min-height:46px; border-radius:12px; }
  .fb-bar{ gap:8px; margin-top:10px; padding-top:10px; }
  .fb-acts{ gap:2px; }
  .fb-act{ padding:8px 10px; gap:0; }
  .fb-act span{ display:none; }
  .fb-act svg{ width:20px; height:20px; }
  .fb-publish{ padding:10px 16px; font-size:13px; }
}

/* ============ FÓRUM › Stories (24h) ============ */
.stories-bar{ display:flex; gap:14px; overflow-x:auto; padding:6px 2px 14px; scrollbar-width:none; }
.stories-bar::-webkit-scrollbar{ display:none; }
.story-empty{ font-family:var(--body); font-size:15px; color:var(--muted); padding:10px 2px; }
.story-empty a{ color:var(--gold); }
.story-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px; width:86px; background:none; border:none; cursor:pointer; }
.story-ring{ width:80px; height:80px; border-radius:50%; padding:3px; position:relative;
  background:conic-gradient(from 210deg, var(--gold), var(--blood-bright), var(--gold)); display:grid; place-items:center; }
.story-ring.add{ background:var(--line); }
.story-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg); }
.story-plus{ position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:50%; background:var(--blood); color:#fff;
  display:grid; place-items:center; font-size:16px; border:2px solid var(--bg); }
.story-nm{ font-family:var(--ui); font-size:12px; color:var(--ink-soft); max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-item:hover .story-nm{ color:var(--gold); }
/* criar status */
.st-create{ position:fixed; inset:0; z-index:3000; background:rgba(4,4,6,.82); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px; }
.stc-box{ width:100%; max-width:380px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--gold-soft); border-radius:var(--r); padding:24px; }
.stc-box h3{ font-family:var(--serif); font-size:21px; margin-bottom:16px; } .stc-box h3 span{ color:var(--gold-2); font-family:var(--ui); font-size:12px; }
.stc-drop{ display:block; cursor:pointer; }
.stc-prev{ aspect-ratio:9/16; max-height:46vh; margin:0 auto; border:1px dashed var(--gold-soft); border-radius:14px; display:grid; place-items:center; overflow:hidden; background:var(--bg-2); text-align:center; color:var(--muted); font-family:var(--ui); font-size:13px; line-height:1.5; }
.stc-prev img,.stc-prev video{ width:100%; height:100%; object-fit:cover; }
.stc-box textarea{ width:100%; margin-top:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-family:var(--body); font-size:15px; padding:10px 12px; resize:vertical; min-height:54px; }
.stc-msg{ font-family:var(--ui); font-size:13px; color:var(--blood-bright); min-height:16px; margin:8px 0; }
.stc-acts{ display:flex; gap:10px; }
/* visualizador */
.st-viewer{ position:fixed; inset:0; z-index:3100; background:rgba(2,2,4,.95); display:flex; align-items:center; justify-content:center; }
.stv-card{ position:relative; width:min(420px,100%); height:100%; max-height:100vh; background:#000; display:flex; flex-direction:column; }
.stv-bars{ position:absolute; top:10px; left:10px; right:10px; display:flex; gap:4px; z-index:3; }
.stv-bar{ flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.stv-bar i{ display:block; height:100%; width:0; background:#fff; }
.stv-bar i.done{ width:100%; } .stv-bar i.run{ width:100%; transition:width 5s linear; animation:stvfill 5s linear forwards; }
@keyframes stvfill{ from{ width:0 } to{ width:100% } }
.stv-head{ position:absolute; top:22px; left:10px; right:10px; display:flex; align-items:center; gap:10px; z-index:3; color:#fff; }
.stv-head img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.5); }
.stv-meta{ flex:1; min-width:0; line-height:1.2; } .stv-meta b{ font-family:var(--serif); font-size:14px; } .stv-meta small{ display:block; color:rgba(255,255,255,.7); font-family:var(--ui); font-size:11px; }
.stv-x,.stv-del{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:4px; }
.stv-img{ width:100%; height:100%; object-fit:contain; background:#000; }
.stv-text{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 28px; color:#fff;
  font-family:var(--serif); font-size:24px; line-height:1.5; background:radial-gradient(120% 80% at 50% 30%, #2a1414, #08070a); }
.stv-cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 26px; color:#fff; font-family:var(--body); font-size:16px;
  background:linear-gradient(transparent, rgba(0,0,0,.75)); }
.stv-nav{ position:absolute; top:60px; bottom:0; width:34%; background:none; border:none; cursor:pointer; z-index:2; }
.stv-nav.prev{ left:0; } .stv-nav.next{ right:0; width:66%; }
@media(min-width:560px){ .stv-card{ border-radius:14px; height:min(90vh,760px); } }

/* compositor: chip de documento + link de documento no post */
.fr-doc-chip{ display:flex; align-items:center; gap:8px; margin-top:10px; background:var(--bg-2); border:1px solid var(--gold-soft);
  border-radius:10px; padding:9px 12px; font-family:var(--ui); font-size:14px; color:var(--ink); }
.fr-doc-chip svg{ width:18px; height:18px; color:var(--gold); flex:none; }
.fr-doc-chip span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-doc-chip button{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; }
.fr-doc-chip button:hover{ color:var(--blood-bright); }
.fb-act.doc svg{ color:#7aa2ff; }
.fr-post-doc{ display:flex; align-items:center; gap:10px; margin-top:12px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; transition:.18s; }
.fr-post-doc:hover{ border-color:var(--gold-soft); }
.fr-post-doc svg{ width:24px; height:24px; color:var(--gold); flex:none; }
.fr-post-doc span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--ui); font-size:14px; color:var(--ink); }
.fr-post-doc b{ font-family:var(--ui); font-size:12px; color:var(--gold); letter-spacing:.04em; flex:none; }

/* feed: alternador lista/grelha */
.feed-toggle{ display:flex; justify-content:flex-end; gap:6px; margin-bottom:14px; }
.ftg{ width:40px; height:36px; display:grid; place-items:center; cursor:pointer; background:var(--bg-2);
  border:1px solid var(--line); border-radius:9px; color:var(--muted); transition:.18s; }
.ftg svg{ width:20px; height:20px; }
.ftg:hover{ color:var(--ink); border-color:var(--gold-soft); }
.ftg.active{ color:var(--gold); border-color:var(--gold); background:rgba(216,179,103,.08); }
.feed-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.fg-item{ position:relative; aspect-ratio:4/5; padding:0; border:none; cursor:pointer; background:var(--bg-2); overflow:hidden; border-radius:3px; }
.fg-item img{ width:100%; height:100%; object-fit:cover; transition:.2s; }
.fg-item:hover img{ transform:scale(1.05); opacity:.92; }
.fg-ic{ position:absolute; right:6px; bottom:6px; font-family:var(--ui); font-size:12px; color:#fff; text-shadow:0 1px 3px #000; }
@media(max-width:560px){ .feed-grid{ gap:3px; } }

/* modal de publicação (clique na grelha do feed) */
.pm-modal-box{ max-width:600px; width:100%; max-height:90vh; overflow:auto; position:relative; padding:0; }
.pm-modal-box .gmodal-x{ position:absolute; top:10px; right:10px; z-index:5; }
.pm-post .fr-post{ border:none; border-radius:var(--r); margin:0; }
.pm-post .fr-post-img img{ border-radius:0; }

/* aba Tópicos */
.topics-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.topics-count{ font-family:var(--ui); font-size:13px; color:var(--muted); letter-spacing:.06em; }
.topics-list{ display:flex; flex-direction:column; gap:8px; }
.topic-item{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; transition:.18s; }
.topic-item:hover{ border-color:var(--gold-soft); transform:translateY(-1px); }
.topic-thumb{ width:54px; height:54px; border-radius:10px; object-fit:cover; flex:none; }
.topic-thumb.ph{ display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--line); color:var(--gold-2); font-size:18px; }
.topic-main{ flex:1; min-width:0; }
.topic-title{ font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.topic-item:hover .topic-title{ color:var(--gold); }
.topic-sub{ font-family:var(--ui); font-size:12px; color:var(--muted); margin-top:4px; }
.topic-stats{ display:flex; flex-direction:column; gap:4px; flex:none; font-family:var(--ui); font-size:12px; color:var(--muted); text-align:right; }
.chat-emoji svg{ width:20px; height:20px; }

/* stories: "visto por" (só o dono) */
.stv-seen{ position:absolute; left:0; right:0; bottom:0; z-index:4; background:linear-gradient(transparent, rgba(0,0,0,.8));
  border:none; color:#fff; cursor:pointer; font-family:var(--ui); font-size:14px; padding:26px 16px 16px; text-align:center; }
.stv-seen b{ color:var(--gold); }
.stv-viewers{ position:absolute; inset:0; z-index:6; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; }
.sv-box{ width:100%; max-height:70%; background:var(--surface); border-top:1px solid var(--gold-soft); border-radius:16px 16px 0 0; overflow:auto; }
.sv-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft);
  font-family:var(--ui); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); position:sticky; top:0; background:var(--surface); }
.sv-head .sv-x{ background:none; border:none; color:var(--ink); font-size:18px; cursor:pointer; }
.sv-list{ padding:10px 12px 18px; }
.sv-u{ display:flex; align-items:center; gap:10px; padding:8px 6px; }
.sv-u img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.sv-nm{ flex:1; font-family:var(--serif); font-size:15px; color:var(--ink); }
.sv-empty{ color:var(--muted); font-family:var(--body); text-align:center; padding:24px; }
.stv-nav{ bottom:54px; }

/* compositor: seletor de categoria */
.fb-titlerow{ display:flex; gap:8px; align-items:center; }
.fb-titlerow .fb-title{ flex:1; }
.fb-cat{ flex:none; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:8px;
  font-family:var(--ui); font-size:13px; padding:8px 10px; max-width:46%; }
.fb-cat:focus{ outline:none; border-color:var(--gold-soft); }
/* aba Tópicos: por categoria */
.topic-cat{ margin-bottom:22px; }
.topic-cat-h{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; }
.topic-cat-h span{ background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; font-size:11px; color:var(--muted); letter-spacing:0; }
.topic-cat .topics-list,.topic-cat{ display:flex; flex-direction:column; gap:8px; }
.topics-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
@media(max-width:560px){ .topics-head .btn{ flex:1; } .fb-cat{ max-width:42%; } }

/* chat: botão voltar (só mobile/Direct) */
.chat-back{ display:none; background:none; border:none; color:var(--gold); font-size:30px; line-height:1; cursor:pointer; padding:0 6px 0 0; margin-right:2px; }
/* mobile: estilo "Direct" do Instagram */
@media(max-width:860px){
  .chat{ display:block; height:auto; position:relative; }
  .chat-rooms{ display:block; overflow:visible; border:none; background:transparent; padding:0; }
  .chat-rooms .cr-title{ display:block; }
  .cr-room{ width:100%; margin:0 0 6px; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:var(--surface); }
  .cr-name{ font-size:14px; }
  .cr-ico{ font-size:14px; }
  .cr-on{ font-size:10px; }
  .chat-main{ display:none; }
  /* lista de membros aparece no mobile, abaixo dos grupos (para iniciar conversas) */
  .chat-online{ display:block; order:0; margin-top:18px; max-height:none; padding:0; border:none; background:transparent; overflow:visible; }
  .co-title{ font-size:10px; }
  .co-user{ padding:9px 12px; margin-bottom:6px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
  .co-user img{ width:34px; height:34px; }
  .co-name{ font-size:14px; }
  .co-title2{ font-size:10px; }
  /* dentro de uma conversa de grupo: texto e espaçamento menores */
  .chat.conv .chat-msgs{ padding:12px; gap:9px; }
  .chat.conv .cm-av{ width:30px; height:30px; }
  .chat.conv .cm-head b{ font-size:13px; }
  .chat.conv .cm-text{ font-size:13.5px; line-height:1.45; }
  .chat.conv .cm-time{ font-size:10px; }
  .chat.conv .chat-head b{ font-size:15px; }
  .chat.conv .chat-rules{ font-size:10.5px; padding:7px 12px; }
  .chat.conv .chat-form{ padding:10px; gap:6px; }
  .chat.conv .chat-form input{ font-size:14px; padding:10px 14px; }
  .chat.conv .chat-form button{ padding:10px 16px; }
  .chat.conv .chat-emoji{ width:38px; height:38px; }
  /* quando uma conversa de grupo é aberta, esconde grupos e membros */
  .chat.conv .chat-rooms{ display:none; }
  .chat.conv .chat-online{ display:none; }
  .chat.conv .chat-main{ display:flex; height:calc(100vh - 150px); border:1px solid var(--line); border-radius:var(--r-sm); }
  .chat.conv .chat-back{ display:inline-flex; }
}

/* ============ Mensagens privadas (Direct) ============ */
/* cartão de membro: link de perfil + botão de mensagem */
.mem-link{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; width:100%; }
.mem-msg{ margin-top:4px; font-family:var(--ui); font-size:12px; color:var(--gold); cursor:pointer;
  background:transparent; border:1px solid var(--gold-soft); border-radius:999px; padding:6px 14px; transition:.18s; }
.mem-msg:hover{ background:rgba(216,179,103,.08); border-color:var(--gold); }
/* linha de membro no chat (clicável para DM) */
.co-user.co-dm{ cursor:pointer; border-radius:8px; padding:7px 6px; margin:0 -6px; transition:.15s; }
.co-user.co-dm:hover{ background:var(--bg-2); }
.co-msg{ margin-left:auto; color:var(--gold); font-size:14px; opacity:0; transition:.15s; flex:none; }
.co-user.co-dm:hover .co-msg{ opacity:1; }
/* botão "Minhas mensagens" no topo da lista de membros */
.dm-launch{ display:flex; align-items:center; gap:8px; width:100%; justify-content:center; cursor:pointer;
  font-family:var(--ui); font-size:13px; color:var(--gold); background:rgba(216,179,103,.06);
  border:1px solid var(--gold-soft); border-radius:10px; padding:10px; margin-bottom:14px; transition:.18s; }
.dm-launch:hover{ background:rgba(216,179,103,.12); }
.dm-launch-badge,.dm-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--blood-bright); color:#fff; font-family:var(--ui); font-size:11px; font-weight:700; }

/* overlay */
.dm[hidden]{ display:none; }
.dm{ position:fixed; inset:0; z-index:3000; }
.dm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.dm-panel{ position:absolute; right:24px; bottom:24px; width:380px; height:min(560px,80vh);
  background:var(--surface); border:1px solid var(--gold-soft); border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px -16px #000; display:flex; flex-direction:column; }
.dm-screen{ display:flex; flex-direction:column; height:100%; min-height:0; }
.dm-screen[hidden]{ display:none; }
.dm-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:17px; color:#fff; }
.dm-x{ background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
.dm-x:hover{ color:var(--ink); }
.dm-list{ flex:1; overflow-y:auto; padding:6px; }
.dm-empty{ color:var(--muted); font-family:var(--body); font-size:14px; text-align:center; margin:auto; padding:30px 18px; line-height:1.5; }
.dm-thread{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; color:var(--ink);
  background:transparent; border:none; border-radius:11px; padding:10px 11px; transition:.14s; }
.dm-thread:hover{ background:var(--bg-2); }
.dm-av-wrap{ position:relative; flex:none; }
.dm-av{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-soft); }
.dm-on{ position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; background:#5fd38a; border:2px solid var(--surface); box-shadow:0 0 6px #5fd38a; }
.dm-tmeta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dm-tname{ font-family:var(--serif); font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-tlast{ font-family:var(--ui); font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-thread.unread .dm-tlast{ color:var(--ink-soft); font-weight:600; }
.dm-thread.unread .dm-tname{ color:#fff; }
.dm-tright{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.dm-ttime{ font-family:var(--ui); font-size:10.5px; color:var(--muted); }
/* conversa */
.dm-conv-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); font-family:var(--serif); }
.dm-conv-head .dm-av{ width:36px; height:36px; }
.dm-conv-head b{ font-size:16px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-conv-head .dm-x{ margin-left:auto; }
.dm-back{ background:none; border:none; color:var(--gold); font-size:28px; line-height:1; cursor:pointer; padding:0 4px 0 0; }
.dm-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.dm-msg{ display:flex; }
.dm-msg.me{ justify-content:flex-end; }
.dm-bubble{ max-width:78%; position:relative; font-family:var(--body); font-size:14.5px; line-height:1.45; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:9px 13px 18px; word-wrap:break-word; }
.dm-msg.me .dm-bubble{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); border-color:transparent; color:#fff; }
.dm-time{ position:absolute; right:11px; bottom:5px; font-family:var(--ui); font-size:9.5px; opacity:.7; }
.dm-form{ display:flex; gap:8px; padding:11px; border-top:1px solid var(--line); }
.dm-form input{ flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--ink);
  font-family:var(--body); font-size:14.5px; padding:10px 15px; }
.dm-form input:focus{ outline:none; border-color:var(--gold-soft); }
.dm-form button{ padding:10px 18px; }
@media(max-width:560px){
  .dm-panel{ right:0; bottom:0; left:0; top:0; width:auto; height:auto; border-radius:0; border:none; }
}

/* ============ Página de Atualizações (changelog) ============ */
.upd-head{ text-align:center; margin-bottom:30px; }
.upd-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.upd-card{ display:flex; gap:16px; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; transition:.2s; }
.upd-card:hover{ border-color:var(--gold-soft); }
.upd-ic{ flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; }
.upd-body{ flex:1; min-width:0; }
.upd-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.upd-title{ font-family:var(--serif); font-size:18px; color:#fff; margin:0; }
.upd-tag{ font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-soft); border-radius:6px; padding:2px 8px; }
.upd-tag.melhoria{ color:#5fd38a; border-color:rgba(95,211,138,.4); }
.upd-tag.correcao{ color:#e8a04a; border-color:rgba(232,160,74,.4); }
.upd-date{ font-family:var(--ui); font-size:12px; color:var(--muted); margin-left:auto; }
.upd-text{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; }
@media(max-width:560px){ .upd-card{ padding:14px; gap:12px; } .upd-ic{ width:40px; height:40px; font-size:20px; }
  .upd-title{ font-size:16px; } .upd-text{ font-size:14px; } .upd-date{ width:100%; margin-left:0; } }

/* ============ Notificações (sino) — itens dinâmicos ============ */
.np-list{ max-height:340px; overflow-y:auto; }
.np-item{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--line-soft);
  color:var(--ink); transition:.14s; }
.np-item:hover{ background:var(--bg-2); }
.np-ic{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.np-ic img{ width:100%; height:100%; object-fit:cover; }
.np-meta{ min-width:0; flex:1; }
.np-title{ font-family:var(--body); font-size:13.5px; color:var(--ink); line-height:1.35; }
.np-sub{ font-family:var(--ui); font-size:11px; color:var(--muted); margin-top:2px; }
.np-foot{ display:block; text-align:center; padding:11px; font-family:var(--ui); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold); border-top:1px solid var(--line-soft); }
.np-foot:hover{ background:var(--bg-2); }

/* ============ Página Tutorial / Guia do site ============ */
.tut-hero{ text-align:center; max-width:760px; margin:0 auto; }
.tut-hero p{ color:var(--ink-soft); font-family:var(--body); font-size:19px; line-height:1.65; margin-top:14px; }
.tut-toc{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:920px; margin:30px auto 0; }
.tut-toc a{ font-family:var(--ui); font-size:13px; letter-spacing:.04em; color:var(--ink-soft); background:var(--bg-2);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; transition:.18s; }
.tut-toc a:hover{ border-color:var(--gold-soft); color:var(--gold); }
.tut-sec{ max-width:920px; margin:0 auto; padding:46px 0 8px; border-top:1px solid var(--line-soft); scroll-margin-top:90px; }
.tut-sec-head{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.tut-ic{ flex:none; width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:26px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--gold-soft); }
.tut-sec-head .n{ font-family:var(--ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tut-sec-head h2{ font-family:var(--serif); font-size:26px; color:#fff; margin:2px 0 0; }
.tut-lead{ color:var(--ink-soft); font-family:var(--body); font-size:17px; line-height:1.65; margin:4px 0 22px; }
.tut-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.tut-card{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.tut-card h3{ font-family:var(--serif); font-size:18px; color:var(--ink); margin:0 0 8px; display:flex; gap:9px; align-items:center; }
.tut-card h3 .e{ font-size:19px; }
.tut-card p{ color:var(--ink-soft); font-family:var(--body); font-size:15px; line-height:1.6; margin:0; }
.tut-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tut-feats li{ position:relative; padding-left:24px; color:var(--ink-soft); font-family:var(--body); font-size:15.5px; line-height:1.55; }
.tut-feats li::before{ content:'✦'; position:absolute; left:0; top:1px; color:var(--gold); }
.tut-feats li b{ color:var(--ink); }
.tut-steps{ counter-reset:tut; display:flex; flex-direction:column; gap:13px; }
.tut-step{ display:flex; gap:14px; align-items:flex-start; }
.tut-step .num{ counter-increment:tut; flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--ui); font-weight:700; font-size:14px; color:#fff; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); }
.tut-step .num::before{ content:counter(tut); }
.tut-step .t{ color:var(--ink-soft); font-family:var(--body); font-size:16px; line-height:1.55; padding-top:3px; }
.tut-step .t b{ color:var(--ink); }
.tut-note{ background:rgba(216,179,103,.06); border:1px solid var(--gold-soft); border-radius:12px; padding:14px 16px;
  margin-top:18px; font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.6; }
.tut-note b{ color:var(--gold-2); }
.tut-sec.is-admin .tut-ic{ border-color:var(--blood); }
.tut-sec.is-admin .tut-sec-head .n{ color:var(--blood-bright); }
.tut-cta{ text-align:center; max-width:920px; margin:48px auto 0; padding-top:32px; border-top:1px solid var(--line-soft); }
@media(max-width:560px){ .tut-sec-head h2{ font-size:22px; } .tut-ic{ width:46px; height:46px; font-size:22px; } }

/* ============ Tutorial em SLIDES (apresentação) ============ */
.deck{ max-width:1000px; margin:0 auto; }
.deck-bar{ height:4px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:20px; }
.deck-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blood),var(--gold)); transition:width .4s ease; }
.deck-stage{ position:relative; }
.slide{ display:none; }
.slide.active{ display:block; animation:slfade .45s ease; }
@keyframes slfade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.slide-card{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,4vw,46px); min-height:clamp(440px,64vh,620px); display:flex; flex-direction:column; justify-content:flex-start;
  box-shadow:0 30px 70px -40px #000; overflow:auto; }
.slide-card.cover{ justify-content:center; align-items:center; text-align:center; }
.slide-card.cover .tut-hero p{ font-size:20px; }
.slide-kicker{ font-family:var(--ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.slide-card .tut-sec{ border:none; padding:0; margin:0; max-width:none; }
.slide-card .tut-sec-head{ margin-bottom:12px; }
.slide-card .tut-lead{ margin-bottom:22px; }

.deck-ctrl{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; }
.deck-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-size:14px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:12px 22px; cursor:pointer; transition:.18s; }
.deck-btn:hover{ border-color:var(--gold-soft); color:var(--gold); }
.deck-btn:disabled{ opacity:.35; cursor:default; color:var(--ink); border-color:var(--line); }
.deck-btn.next{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:transparent; }
.deck-btn.next:hover{ color:#fff; filter:brightness(1.06); }
.deck-mid{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.deck-dots{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:340px; }
.deck-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; transition:.18s; }
.deck-dot.on{ background:var(--gold); transform:scale(1.3); }
.deck-count{ font-family:var(--ui); font-size:12px; letter-spacing:.08em; color:var(--muted); }
@media(max-width:560px){
  .deck-btn .t{ display:none; } .deck-btn{ padding:12px 16px; }
  .slide-card{ padding:20px 16px; min-height:auto; }
  .deck-dots{ max-width:200px; }
}

/* ---- partículas de fundo + animações do tutorial ---- */
#tut-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.slide-card.cover{ background:transparent; border-color:transparent; box-shadow:none; }
.cover-logo{ width:clamp(200px,44vw,340px); height:auto; margin:0 auto 22px; display:block; }
@keyframes covpulse{ 0%,100%{ filter:drop-shadow(0 6px 26px rgba(140,20,30,.40)); } 50%{ filter:drop-shadow(0 8px 44px rgba(216,179,103,.5)); } }
@keyframes slup{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.slide.active .tut-sec-head{ animation:slup .5s both; }
.slide.active .tut-lead{ animation:slup .5s .07s both; }
.slide.active .tut-note{ animation:slup .5s .34s both; }
.slide.active .tut-grid>*,.slide.active .tut-steps>*{ animation:slup .5s both; }
.slide.active .tut-grid>*:nth-child(1),.slide.active .tut-steps>*:nth-child(1){ animation-delay:.12s; }
.slide.active .tut-grid>*:nth-child(2),.slide.active .tut-steps>*:nth-child(2){ animation-delay:.20s; }
.slide.active .tut-grid>*:nth-child(3),.slide.active .tut-steps>*:nth-child(3){ animation-delay:.28s; }
.slide.active .tut-grid>*:nth-child(4){ animation-delay:.36s; }
.slide.active .tut-grid>*:nth-child(5){ animation-delay:.44s; }
.slide.active .tut-grid>*:nth-child(6){ animation-delay:.52s; }
.slide-card.cover>*{ animation:slup .6s both; }
.slide-card.cover>*:nth-child(2){ animation-delay:.12s; } .slide-card.cover>*:nth-child(3){ animation-delay:.22s; }
.slide-card.cover>*:nth-child(4){ animation-delay:.32s; } .slide-card.cover>*:nth-child(5){ animation-delay:.42s; }
.slide-card.cover .cover-logo{ animation:slup .7s both, covpulse 4.5s 0.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ #tut-particles{ display:none; } .slide.active *,.slide-card.cover>*,.cover-logo{ animation:none !important; } }

/* ---- abas da conta ---- */
.acc-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:26px; flex-wrap:wrap; }
.acc-tabs button{ font-family:var(--ui); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:11px 24px; cursor:pointer; transition:.2s; }
.acc-tabs button:hover{ border-color:var(--gold-soft); }
.acc-tabs button.active{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:transparent; }
.acc-view[hidden]{ display:none; }

/* ---- páginas legais / institucionais ---- */
.legal-doc{ max-width:840px; margin:0 auto; }
.legal-doc .updated{ font-family:var(--ui); font-size:13px; color:var(--muted); margin-bottom:24px; }
.legal-doc .lead{ font-family:var(--body); font-size:18px; line-height:1.7; color:var(--ink-soft); margin-bottom:8px; }
.legal-doc h2{ font-family:var(--serif); font-size:23px; color:#fff; margin:34px 0 10px; padding-top:20px; border-top:1px solid var(--line-soft); scroll-margin-top:90px; }
.legal-doc h3{ font-family:var(--serif); font-size:18px; color:var(--gold-2); margin:20px 0 8px; }
.legal-doc p,.legal-doc li{ font-family:var(--body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); }
.legal-doc p{ margin:0 0 14px; }
.legal-doc ul{ margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:7px; }
.legal-doc li::marker{ color:var(--gold); }
.legal-doc a{ color:var(--gold); }
.legal-doc strong,.legal-doc b{ color:var(--ink); }
.legal-toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; margin-bottom:30px; }
.legal-toc h4{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.legal-toc a{ display:inline-block; margin:3px 16px 3px 0; font-family:var(--ui); font-size:14px; color:var(--gold); }
.legal-note{ background:rgba(216,179,103,.06); border:1px solid var(--gold-soft); border-radius:12px; padding:14px 18px; margin:18px 0; }
.legal-note p{ margin:0; }
/* aceite dos termos no cadastro */
.terms-agree{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 14px; font-family:var(--body); font-size:14px; color:var(--ink-soft); line-height:1.5; }
.terms-agree input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--blood); cursor:pointer; }
.terms-agree a{ color:var(--gold); }

/* links institucionais no rodapé */
.foot-links{ margin-top:10px; font-family:var(--ui); font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 12px; }
.foot-links a{ color:var(--muted); transition:.18s; }
.foot-links a:hover{ color:var(--gold); }