/* ============================================================
   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;
  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; }
/* texto "IA" no lugar do ícone do Familiar de Umbra */
.nav-ia{ font-family:var(--ui); font-size:14px; font-weight:700; letter-spacing:.03em; line-height:1; color:var(--gold); }
.nav-icon:hover .nav-ia{ color:var(--gold); }
.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); }
/* ===== moldura de avatar (recompensa: borda de perfil) ===== */
.avb{ position:relative; display:inline-block; overflow:visible; line-height:0; }
.avb > img{ display:block; border-radius:50%; object-fit:cover; }
.avb::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:172%; height:172%; background:var(--avb) center/contain no-repeat; pointer-events:none; z-index:3;
  filter:drop-shadow(0 0 4px var(--avb-glow, rgba(216,179,103,.45))); }
/* header: mantém o quadradinho mas deixa a moldura aparecer (menor) */
.nav-avatar.avb{ overflow:visible; border-color:transparent; box-shadow:none; }
.nav-avatar.avb img{ border-radius:50%; }
.nav-avatar.avb::after{ width:152%; height:152%; }
.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; margin:0; border-radius:10px; object-fit:cover; border:1px solid var(--gold-soft); }
/* avatar com moldura (recompensa): foto redonda p/ casar com o medalhão circular.
   CAUSA DO OVAL: a regra ".drawer img{ height:40px; margin-bottom:22px }" (linha ~88, feita p/ o logo)
   vaza na foto do avatar. As regras abaixo só trocavam width/height, deixando o margin-bottom:22px
   passar — a foto virava 52+22=74px de alto, o .avb (inline-block) esticava e a moldura (172% do
   .avb) virava um oval vertical. Fix: margin:0 na foto + box .avb TRAVADO em 52x52. */
.du-card .avb{ flex:none; align-self:center; width:52px; height:52px; }
.du-card .avb > img{ width:52px; height:52px; aspect-ratio:1/1; margin:0; display:block; border-radius:50%; object-fit:cover; }
.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:url('/assets/img/loja-capa.jpg?v=4') center 42%/cover no-repeat, radial-gradient(900px 600px at 50% 30%, #1a0a0c, #08070a 70%); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(8,7,10,.12), rgba(8,7,10,.40) 80%, var(--bg)); }
.hero-content{ width:100%; max-width:var(--max); margin:0 auto; padding:92px 22px 72px; }
.hero-logo{ width:min(560px,80vw); margin:0 auto 6px; filter:drop-shadow(0 10px 40px rgba(0,0,0,.7)); animation:rise 1s ease both; }
.hero-tag{ font-family:var(--ui); letter-spacing:.40em; text-transform:uppercase; font-size:12px; color:var(--gold); margin:8px 0 0; animation:rise 1s .1s ease both; }
.hero-title{ font-family:var(--display); font-weight:900; letter-spacing:.04em; font-size:clamp(26px,4.8vw,50px); line-height:1.05; margin:18px 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(16px,1.9vw,20px); color:var(--ink-soft); max-width:560px; margin:18px auto 0; animation:rise 1s .26s ease both; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; animation:rise 1s .34s ease both; }
/* busca global (index) */
.gsearch{ position:relative; z-index:90; max-width:560px; margin:26px auto 4px; text-align:left; animation:rise 1s .3s ease both; }
.gsearch-box{ display:flex; align-items:center; gap:10px; background:rgba(10,9,13,.72); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px; padding:13px 20px; transition:.2s; }
.gsearch-box:focus-within{ border-color:var(--gold-soft); }
.gsearch-box svg{ width:20px; height:20px; color:var(--muted); flex:none; }
.gsearch-box input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-family:var(--ui); font-size:15px; }
.gsearch-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.6); max-height:62vh; overflow-y:auto; z-index:60; padding:8px; text-align:left; }
.gs-sec{ margin-bottom:6px; }
.gs-sec-h{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:8px 10px 4px; }
.gs-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; text-decoration:none; transition:.12s; }
.gs-item:hover{ background:var(--bg-2); }
.gs-item img,.gs-item .gs-ic{ width:42px; height:42px; border-radius:8px; object-fit:cover; flex:none; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:20px; }
.gs-it-main{ min-width:0; display:flex; flex-direction:column; }
.gs-it-main b{ font-family:var(--body); font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-it-main span{ font-family:var(--ui); font-size:12px; color:var(--muted); }
.gs-empty{ padding:16px; color:var(--muted); font-family:var(--body); text-align:center; }
.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; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.orbits-track{ display:flex; gap:34px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; padding:34px clamp(24px,5vw,70px) 26px; scrollbar-width:none; -ms-overflow-style:none; }
/* loja: seções por categoria com carrossel + paginação */
.loja-cats{ display:block; }
.loja-cat-sec{ margin-bottom:36px; }
.loja-cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
.loja-cat-head h2{ font-family:var(--serif); font-size:24px; margin:0; letter-spacing:.02em; }
.loja-cat-all{ font-family:var(--ui); font-size:13px; color:var(--gold); text-decoration:none; white-space:nowrap; }
.loja-cat-all:hover{ text-decoration:underline; }
.loja-carousel-wrap{ position:relative; }
.loja-carousel{ display:flex; gap:18px; overflow-x:auto; padding:4px 2px 16px; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; }
.loja-carousel::-webkit-scrollbar{ display:none; }
.loja-carousel .prod{ flex:0 0 232px; scroll-snap-align:start; }
.lc-arrow{ position:absolute; top:40%; transform:translateY(-50%); z-index:4; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(13,12,17,.92); color:var(--gold); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s; box-shadow:0 8px 22px -8px #000; }
.lc-arrow:hover{ border-color:var(--gold); box-shadow:0 0 22px -6px var(--gold-glow); color:#ffe9b0; }
.lc-arrow.prev{ left:-8px; } .lc-arrow.next{ right:-8px; }
.loja-carousel-wrap.no-scroll .lc-arrow{ display:none; }
.loja-carousel-wrap.at-start .lc-arrow.prev{ opacity:0; pointer-events:none; }
.loja-carousel-wrap.at-end .lc-arrow.next{ opacity:0; pointer-events:none; }
@media(max-width:560px){ .lc-arrow{ display:none; } }
.loja-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:26px 0 6px; }
@media(max-width:560px){ .loja-carousel .prod{ flex-basis:158px; } .loja-cat-head h2{ font-size:20px; } }
.orbits-track::-webkit-scrollbar{ display:none; }
.orb-item{ flex:0 0 auto; width:158px; text-align:center; scroll-snap-align:center; }
/* orbs de categoria: mostra só o PNG do medalhão (sem anel nem fundo do CSS).
   o border-radius recorta os cantos pretos do quadrado; glow neon só no hover. */
.orb{ width:144px; height:144px; display:grid; place-items:center; margin:0 auto; position:relative; transition:transform .3s; }
.orb-ic svg{ width:62px; height:62px; color:var(--gold); filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition:color .25s, filter .25s, transform .25s; }
.orb-ic:has(img){ position:absolute; inset:0; }
.orb-ic img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .3s, filter .3s; }
.orb-item:hover .orb{ transform:translateY(-5px); }
.orb-item:hover .orb-ic img{ transform:scale(1.05);
  filter:brightness(1.04) drop-shadow(0 0 4px rgba(255,224,150,.55)) drop-shadow(0 0 10px rgba(255,120,50,.38)); }
.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-nm{ display:block; margin-top:15px; font-family:var(--serif); font-size:16px; color:var(--ink-soft); letter-spacing:.03em; line-height:1.25; }
.orb-item:hover .orb-nm{ color:var(--gold); }
/* categoria selecionada (ao clicar na esfera para filtrar a loja) */
.orb-item.is-active .orb{ transform:translateY(-3px); }
.orb-item.is-active .orb-ic img{ filter:brightness(1.05) drop-shadow(0 0 6px rgba(255,224,150,.6)) drop-shadow(0 0 12px rgba(255,120,50,.4)); }
.orb-item.is-active .orb-ic svg{ color:#ffe9b0; filter:drop-shadow(0 0 12px rgba(216,179,103,.85)); }
.orb-item.is-active .orb-nm{ color:var(--gold); font-weight:600; }
.orbits-arrow{ position:absolute; top:82px; z-index:4; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(13,12,17,.86); backdrop-filter:blur(4px); color:var(--gold); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.orbits-arrow:hover{ border-color:var(--gold); color:#ffe9b0; box-shadow:0 0 22px -6px var(--gold-glow); }
.orbits-arrow.prev{ left:14px; } .orbits-arrow.next{ right:14px; }
@media(max-width:780px){ .orbits-arrow{ display:none; } .orbits-track{ gap:18px; padding:12px clamp(14px,4vw,22px) 16px; } .orb{ width:100px; height:100px; } .orb::before{ inset:4px; } .orb-item{ width:112px; } .orb-ic svg{ width:44px; height:44px; } .orb-nm{ font-size:13px; margin-top:11px; } }
@media(max-width:480px){ .orbits-track{ gap:14px; padding:10px 12px 14px; } .orb{ width:84px; height:84px; } .orb-item{ width:96px; } .orb-ic svg{ width:36px; height:36px; } .orb-nm{ font-size:12px; margin-top:9px; } }

/* ===== 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:4/5; background:#0c0b0f; overflow:hidden; display:block; }
.prod-img .ph,.prod-img .prod-photo{ position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; object-fit:cover; transition:transform .6s; }
.prod:hover .prod-img .ph,.prod:hover .prod-img .prod-photo{ transform:scale(1.07); }
.prod-img .veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,7,10,.6)); }
/* fade-in suave: a imagem surge ao carregar em vez de "pipocar" (esferas e produtos) */
@keyframes umbraImgIn{ from{ opacity:0 } to{ opacity:1 } }
.prod-img .prod-photo{ opacity:1; }
.prod-img .prod-photo.ld{ animation:umbraImgIn .55s ease both; }
.orb-ic img.ld{ animation:umbraImgIn .5s ease both; }
@media (prefers-reduced-motion:reduce){ .prod-img .prod-photo.ld,.orb-ic img.ld{ animation:none; } }
/* selos/tags do card (canto superior esquerdo, empilháveis) */
.prod-tags{ position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:calc(100% - 20px); }
.prod-tag{ display:inline-block; background:var(--blood); color:#fff; font-family:var(--ui); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); white-space:nowrap; }
.prod-tag.is-promo{ background:linear-gradient(180deg,var(--blood-bright),var(--blood-deep)); }
.prod-tag.is-hot{ background:linear-gradient(180deg,#e0571f,#a8330c); }
.prod-tag.is-new{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#1a1206; }
.prod-tag.is-excl{ background:linear-gradient(180deg,#6b3fa8,#3f2470); }
.prod-tag.is-lim{ background:#0d0c11; color:var(--gold); border:1px solid var(--gold-soft); }
.prod-tag.is-low{ background:linear-gradient(180deg,#e0a020,#b8761a); color:#1a1206; }
.prod-tag.is-free{ background:var(--wpp); color:#fff; }
.prod-tag.is-cons{ background:#0d0c11; color:var(--gold); border:1px solid var(--gold-soft); }
.prod-tag.is-out{ background:#2a2630; color:var(--ink-soft); }
.prod-out .prod-photo,.prod-out .ph{ filter:grayscale(.65) brightness(.62); }
.prod-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.prod-name{ font-family:var(--body); font-size:18px; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod:hover .prod-name{ color:var(--gold); }
/* prova social: estrelas ou vendas */
.prod-rate{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:12.5px; margin-top:-3px; }
.prod-rate .prs{ letter-spacing:1px; color:#4d4a52; }
.prod-rate .prs .on{ color:var(--gold); }
.prod-rate i{ font-style:normal; color:var(--muted); }
.prod-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.prod-prices{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.prod-price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.prod-price{ font-family:var(--serif); font-weight:600; color:var(--blood-bright); font-size:19px; }
.prod-was{ font-family:var(--ui); font-size:13px; color:var(--muted); text-decoration:line-through; }
.prod-inst{ font-family:var(--ui); font-size:11.5px; color:var(--muted); letter-spacing:.01em; }
.prod-sold{ font-family:var(--ui); font-size:11.5px; color:var(--muted); margin-top:-3px; letter-spacing:.02em; }
.prod-add{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px; min-width:42px; padding:0 15px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--blood),var(--blood-deep)); border-radius:999px; transition:.2s; flex:none; }
.prod-add:not(:has(.prod-add-t)){ width:42px; padding:0; border-radius:10px; }
.prod-add-t{ font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.02em; }
.prod-add svg{ width:20px; height:20px; }
.prod-add:hover{ filter:brightness(1.15); box-shadow:0 6px 18px -6px var(--glow); transform:translateY(-1px); }
.prod-add:disabled,.prod-add[disabled]{ background:#2a2630; color:var(--muted); cursor:not-allowed; box-shadow:none; transform:none; }
.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; }
/* hero da loja — capa de fundo + partículas + logo/descrição por cima */
.loja-hero{ position:relative; width:100%; overflow:hidden; background:#0c0b0f; display:grid; place-items:center;
  min-height:clamp(540px,58vw,820px); }
.loja-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0; }
.loja-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 44%, rgba(8,7,10,.42), rgba(8,7,10,.16) 55%, transparent 78%),
    linear-gradient(180deg, rgba(8,7,10,.32), transparent 26%, transparent 60%, var(--bg)); }
.loja-hero .hero-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.loja-hero-content{ position:relative; z-index:3; text-align:center; padding:52px 20px; max-width:940px; }
.loja-hero-logo{ display:block; width:min(640px,90vw); height:auto; margin:0 auto;
  filter:drop-shadow(0 8px 38px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(216,179,103,.32)); }
.loja-hero-tag{ font-family:var(--ui); font-size:clamp(13px,2.2vw,19px); letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:26px 0 0; }
.loja-hero-sub{ font-family:var(--body); font-size:clamp(20px,3.4vw,34px); color:var(--ink); margin:18px auto 0; max-width:860px; line-height:1.5; text-shadow:0 2px 14px rgba(0,0,0,.85); }
@media(max-width:560px){ .loja-hero{ min-height:72vh; } .loja-hero-content{ padding:44px 18px; } .loja-hero-logo{ width:90vw; } }
.loja-toolbar{ padding:30px 0 6px; }
.loja-toolbar .loja-tools{ margin-top:0; }
/* nas categorias o hero fica acima do cabeçalho — reduz o respiro do topo */
.loja-hero + .page-hd{ padding-top:36px; }
@media(max-width:560px){ .loja-toolbar{ padding:18px 0 4px; } .loja-hero + .page-hd{ padding-top:26px; } }

/* 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:minmax(0,1.25fr) minmax(0,1fr); gap:46px; padding:46px 0 70px; align-items:start; }
/* galeria acompanha a rolagem (estilo SHEIN) — fica visível enquanto lê a descrição, sem sobrepor o menu */
.pd-gallery{ position:sticky; top:84px; align-self:start; }
.pd-stage{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:14px; align-items:start; }
.pd-main{ position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#0c0b0f; aspect-ratio:1/1; max-height:calc(100vh - 110px); cursor:zoom-in; box-shadow:var(--shadow); }
/* zoom nítido: SEM will-change/cache de textura — assim o scale reamostra da imagem-fonte
   (1200px+) em vez de ampliar um snapshot rasterizado em 1x (que é o que borrava o zoom). */
.pd-main img{ width:100%; height:100%; object-fit:cover; transition:transform .18s ease; transform-origin:center; backface-visibility:hidden; image-rendering:auto; }
.pd-main.zoom img{ transform:scale(1.9); }
.pd-imgcount{ position:absolute; right:12px; bottom:12px; background:rgba(8,7,10,.72); backdrop-filter:blur(6px); color:var(--ink); font-family:var(--ui); font-size:12px; letter-spacing:.06em; padding:5px 11px; border-radius:999px; border:1px solid var(--line); pointer-events:none; }
.pd-imgcount b{ color:var(--gold); }
.pd-zoomhint{ position:absolute; right:12px; top:12px; width:34px; height:34px; display:grid; place-items:center; background:rgba(8,7,10,.62); border:1px solid var(--line); border-radius:50%; color:var(--gold); pointer-events:none; opacity:.85; transition:.2s; }
.pd-main.zoom .pd-zoomhint{ opacity:0; }
.pd-zoomhint svg{ width:17px; height:17px; }
.pd-thumbs{ display:flex; flex-direction:column; gap:10px; max-height:540px; overflow:auto; padding-right:2px; scrollbar-width:thin; }
.pd-thumbs button{ width:74px; height:74px; flex:0 0 auto; border:1px solid var(--line); border-radius:9px; overflow:hidden; cursor:pointer; padding:0; background:#0c0b0f; transition:.2s; position:relative; }
.pd-thumbs button img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:.2s; }
.pd-thumbs button:hover img{ opacity:1; }
.pd-thumbs button.active{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.pd-thumbs button.active img{ opacity:1; }
.pd-info h1{ font-size:clamp(26px,3.6vw,40px); line-height:1.15; }
/* bloco de preço em destaque (estilo SHEIN) */
.pd-pricebox{ margin:18px 0 10px; padding:16px 18px; background:var(--bg-2); border:1px solid var(--line-soft); border-left:3px solid var(--blood-bright); border-radius:var(--r-sm); }
.pd-price{ font-family:var(--serif); font-weight:700; color:var(--blood-bright); font-size:clamp(32px,4.4vw,42px); line-height:1; }
.pd-price-line{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.pd-pricewas{ display:inline-flex; align-items:center; gap:9px; }
.pd-was{ font-family:var(--ui); font-size:17px; color:var(--muted); text-decoration:line-through; }
.pd-off{ font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; background:linear-gradient(180deg,var(--blood-bright),var(--blood-deep)); padding:4px 9px; border-radius:999px; }
.pd-install{ font-family:var(--ui); font-size:15px; color:var(--ink-soft); margin-top:8px; }
.pd-install:empty{ display:none; }
.pd-install b{ color:var(--gold-2); font-weight:600; }
/* simulador de parcelas */
.pd-inst-title{ font-family:var(--ui); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); font-weight:600; margin:2px 0 10px; }
.pd-inst-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.pd-inst-row{ display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px dashed var(--line-soft); }
.pd-inst-n{ color:var(--muted); min-width:32px; font-variant-numeric:tabular-nums; }
.pd-inst-v{ color:var(--ink); font-weight:600; }
.pd-inst-tag{ margin-left:auto; font-size:11px; letter-spacing:.04em; color:var(--muted); font-variant-numeric:tabular-nums; }
.pd-inst-note{ font-size:12px; line-height:1.5; color:var(--muted); margin-top:10px; }
.pd-inst-note b{ color:var(--ink-soft); }
/* parcelamento recolhível: o título vira uma barra clicável; lista/nota escondem quando fechado */
.pd-install.pd-collapsible .pd-inst-title{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; margin:2px 0; padding:9px 12px; border:1px solid var(--line-soft); border-radius:10px; transition:border-color .15s, color .15s; }
.pd-install.pd-collapsible .pd-inst-title:hover{ border-color:var(--gold-soft); color:var(--gold); }
.pd-install.pd-collapsible .pd-inst-title .pd-inst-sum{ text-transform:none; letter-spacing:.01em; font-weight:600; }
.pd-install.pd-collapsible .pd-inst-title .pd-inst-caret{ margin-left:auto; font-size:14px; line-height:1; transition:transform .2s ease; opacity:.85; }
.pd-install.pd-collapsible:not(.collapsed) .pd-inst-title .pd-inst-caret{ transform:rotate(180deg); }
.pd-install.pd-collapsible .pd-inst-list{ margin-top:12px; }
.pd-install.pd-collapsible.collapsed .pd-inst-list,
.pd-install.pd-collapsible.collapsed .pd-inst-note{ display:none; }
.ck-install{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:14px; }
@media(max-width:560px){ .pd-inst-list{ grid-template-columns:1fr; } }
/* acordeão de detalhes (descrição / envio / garantia) */
.pd-acc{ margin-top:26px; border-top:1px solid var(--line-soft); }
.pd-acc-item{ border-bottom:1px solid var(--line-soft); }
.pd-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:0; cursor:pointer; padding:18px 2px; font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-align:left; }
.pd-acc-head:hover{ color:var(--gold); }
.pd-acc-head .pd-acc-ico{ flex:none; width:22px; height:22px; display:grid; place-items:center; color:var(--gold); font-size:22px; line-height:1; transition:transform .2s; }
.pd-acc-item.open .pd-acc-ico{ transform:rotate(45deg); }
.pd-acc-body{ display:none; padding:0 2px 22px; color:var(--ink-soft); font-family:var(--body); font-size:17px; line-height:1.7; white-space:pre-line; }
.pd-acc-item.open .pd-acc-body{ display:block; }
.pd-acc-body p{ margin:0 0 10px; }
.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; }
/* ações de compra empilhadas e em largura total (estilo SHEIN) */
.pd-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; margin:26px 0 10px; }
.pd-actions .qty{ align-self:flex-start; }
.pd-actions .btn{ width:100%; justify-content:center; padding:16px 24px; font-size:16px; letter-spacing:.04em; }
/* hierarquia de CTA: "Adicionar" é o primário (sangue sólido); WhatsApp vira secundário (contorno) */
.pd-actions .btn-wpp{ background:transparent; color:var(--wpp); border:1px solid var(--wpp); box-shadow:none; }
.pd-actions .btn-wpp:hover{ background:rgba(31,175,79,.10); filter:none; }

/* faixa de confiança (abaixo dos botões de compra) */
.pd-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0 4px; padding:16px 4px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.pd-trust-i{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; color:var(--ink-soft); font-family:var(--ui); font-size:11px; line-height:1.3; letter-spacing:.02em; }
.pd-trust-i svg{ width:25px; height:25px; color:var(--gold); }
@media(max-width:480px){ .pd-trust{ grid-template-columns:repeat(2,1fr); gap:16px 10px; } }

/* calculadora de frete + prazo por CEP */
.pd-frete{ margin:18px 0 6px; padding:16px 18px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); }
.pd-frete-h{ display:flex; align-items:center; gap:9px; font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-2); margin-bottom:12px; }
.pd-frete-h svg{ width:19px; height:19px; }
.pd-frete-row{ display:flex; gap:10px; }
.pd-frete-row input{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:12px 14px; font-family:var(--ui); font-size:15px; letter-spacing:.06em; }
.pd-frete-row input:focus{ outline:none; border-color:var(--gold-soft); }
.pd-frete-row .btn{ flex:none; padding:12px 20px; font-size:14px; margin:0; }
.pd-frete-link{ display:inline-block; margin-top:9px; font-family:var(--ui); font-size:12.5px; color:var(--muted); text-decoration:underline; }
.pd-frete-link:hover{ color:var(--gold); }
.pd-frete-out:not(:empty){ margin-top:4px; }
.pd-frete-load,.pd-frete-err{ display:block; margin-top:12px; font-family:var(--ui); font-size:13.5px; color:var(--muted); }
.pd-frete-err{ color:var(--blood-bright); }
.pd-frete-opt{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-bottom:10px; border-bottom:1px dashed var(--line-soft); font-family:var(--ui); font-size:14px; }
.pd-frete-opt b{ color:var(--ink); min-width:54px; }
.pd-frete-d{ color:var(--ink-soft); }
.pd-frete-pr{ margin-left:auto; font-weight:700; color:var(--gold-2); font-variant-numeric:tabular-nums; }
.pd-frete-note{ margin-top:12px; font-family:var(--ui); font-size:12px; line-height:1.5; color:var(--muted); }
.pd-frete-note b{ color:var(--ink-soft); }

/* seções extras da PDP (correspondências mágicas + ficha técnica) */
#pd-extras:empty{ display:none; }
.pd-lore,.pd-specs{ margin:42px 0; padding:34px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.pd-lore{ position:relative; overflow:hidden; }
.pd-lore::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.6; pointer-events:none;
  background:radial-gradient(620px 300px at 100% 0%, rgba(140,20,20,.16), transparent 62%); }
.pd-lore>*{ position:relative; z-index:1; }
.pd-lore-hd{ text-align:center; margin-bottom:26px; }
.pd-lore-hd h2{ font-size:clamp(26px,4vw,38px); margin-top:10px; letter-spacing:.04em; }
.pd-lore-sub{ font-family:var(--ui); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.pd-corr{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 auto; max-width:840px; }
.pd-corr-i{ display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; padding:14px 10px;
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); }
.pd-corr-k{ font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pd-corr-v{ font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.2; }
.pd-enn{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:24px auto 0; max-width:840px; text-align:center;
  padding:16px; border:1px dashed var(--gold-soft); border-radius:var(--r-sm); background:rgba(216,179,103,.05); }
.pd-enn-k{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); }
.pd-enn-v{ font-family:var(--body); font-style:italic; font-size:20px; color:var(--gold); }
.pd-lore-link{ display:block; text-align:center; margin-top:24px; font-family:var(--ui); font-size:14px; color:var(--blood-bright); letter-spacing:.04em; }
.pd-lore-link:hover{ color:var(--gold); }
.pd-specs-hd{ margin-bottom:16px; }
.pd-spec-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
.pd-spec-r{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-soft); font-family:var(--ui); font-size:14.5px; }
.pd-spec-k{ color:var(--muted); }
.pd-spec-v{ color:var(--ink); text-align:right; font-weight:500; }
@media(max-width:680px){ .pd-corr{ grid-template-columns:repeat(2,1fr); } .pd-lore,.pd-specs{ padding:24px 18px; } .pd-spec-list{ grid-template-columns:1fr; } }

/* selos/tags sobre a imagem principal da PDP */
.pd-imgtags{ position:absolute; top:14px; left:14px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }

/* galeria em tela cheia (lightbox + zoom/swipe) */
body.lb-open{ overflow:hidden; }
.pd-lb{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(5,4,7,.95); }
.pd-lb[hidden]{ display:none; }
.pd-lb-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.pd-lb-img{ max-width:94vw; max-height:90vh; object-fit:contain; transform-origin:center; will-change:transform; user-select:none; -webkit-user-drag:none; }
.pd-lb-x{ position:absolute; top:14px; right:16px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(12,11,16,.7); color:var(--ink); font-size:20px; cursor:pointer; }
.pd-lb-x:hover{ color:var(--gold); border-color:var(--gold-soft); }
.pd-lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(12,11,16,.62); color:var(--ink); font-size:28px; line-height:1; cursor:pointer; display:none; }
.pd-lb.multi .pd-lb-nav{ display:block; }
.pd-lb-nav.prev{ left:14px; } .pd-lb-nav.next{ right:14px; }
.pd-lb-nav:hover{ color:var(--gold); border-color:var(--gold-soft); }
.pd-lb-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--ui); font-size:13px; color:var(--ink-soft); background:rgba(12,11,16,.6); border:1px solid var(--line); padding:5px 12px; border-radius:999px; }
.pd-lb:not(.multi) .pd-lb-count{ display:none; }
/* linha social: estrelas + nº de vendas */
.pd-social{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px; font-family:var(--ui); font-size:13.5px; }
.pd-social:empty{ display:none; }
.pd-rate{ display:inline-flex; align-items:center; gap:6px; }
.pd-rate .stars{ letter-spacing:1px; color:#5c5c5c; }
.pd-rate .stars .st.on{ color:var(--gold); }
.pd-rate b{ color:var(--ink); font-weight:700; }
.pd-rate i{ font-style:normal; color:var(--muted); }
.pd-sold{ color:var(--ink-soft); padding-left:16px; border-left:1px solid var(--line); }
.pd-social .pd-sold:first-child{ padding-left:0; border-left:0; }
/* seção de avaliações do produto */
.pd-reviews{ grid-column:1/-1; border-top:1px solid var(--line-soft); margin-top:14px; padding-top:34px; }
.pd-reviews:empty{ display:none; }
.pr-title{ font-family:var(--serif); font-size:24px; color:var(--ink); margin-bottom:18px; }
.pr-title .pr-count{ font-family:var(--ui); font-size:14px; color:var(--muted); font-weight:400; }
.pr-load,.pr-empty{ color:var(--muted); font-family:var(--body); font-size:16px; }
.pr-form{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:18px; margin-bottom:22px; max-width:680px; }
.pr-flabel{ font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.pr-pick{ font-size:30px; letter-spacing:5px; cursor:pointer; color:#5c5c5c; user-select:none; margin-bottom:12px; }
.pr-pick .st{ cursor:pointer; transition:.12s; }
.pr-pick .st.on{ color:var(--gold); }
.pr-pick .st:hover{ color:var(--gold-soft); }
.pr-form textarea{ width:100%; min-height:70px; resize:vertical; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:11px 13px; font-family:var(--body); font-size:15px; }
.pr-fact{ display:flex; gap:10px; margin-top:12px; }
.pr-fact .btn{ padding:10px 20px; font-size:14px; }
.pr-msg{ font-family:var(--ui); font-size:13px; margin-top:8px; color:var(--muted); }
.pr-msg.err{ color:var(--blood-bright); }
.pr-login{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; font-family:var(--body); color:var(--ink-soft); font-size:15px; margin-bottom:22px; max-width:680px; }
.pr-login a{ color:var(--gold); }
.pr-list{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.pr-item{ border-top:1px solid var(--line-soft); padding-top:14px; }
.pr-it-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pr-it-top img,.pr-it-ava{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); background:var(--bg-2); flex:none; }
.pr-it-top b{ font-family:var(--ui); font-size:14px; color:var(--ink); }
.pr-it-stars{ color:#5c5c5c; font-size:14px; letter-spacing:1px; }
.pr-it-stars .st.on{ color:var(--gold); }
.pr-it-date{ margin-left:auto; color:var(--muted); font-family:var(--ui); font-size:12px; }
.pr-it-body{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.6; margin-top:6px; }
/* barra fixa de compra (mobile) */
.pd-buybar{ display:none; }
body.has-buybar{ }

/* ===== 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-wide{ grid-column:1 / -1; padding:18px 14px; }
.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-name-link{ color:inherit; text-decoration:none; transition:.15s; }
.fr-name-link:hover{ color:var(--gold); text-decoration:underline; }
.fr-link{ color:var(--gold-soft); text-decoration:underline; word-break:break-all; }
.fr-link:hover{ color:var(--gold); }
/* vídeo do YouTube no feed */
.fr-yt{ position:relative; width:100%; aspect-ratio:16/9; margin-top:12px; border-radius:12px; overflow:hidden; background:#000; border:1px solid var(--line); }
.fr-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.fr-yt-prev{ position:relative; width:100%; max-width:380px; aspect-ratio:16/9; margin-top:10px; border-radius:10px; overflow:hidden; background:#000; border:1px solid var(--line); }
.fr-yt-prev iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.fr-yt-prev > button{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.72); color:#fff; cursor:pointer; z-index:2; line-height:1; }
.fb-act.yt svg{ color:#ff2f46; }
/* etiqueta de linhagem (cor por tradição) */
.lin-badge{ display:inline-block; font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:2px 8px; border:1px solid;
  color:var(--gold); border-color:var(--gold-soft); background:rgba(216,179,103,.12); }
.lin-magia-do-caos{ color:#c89bff; border-color:#7a3fb0; background:rgba(120,40,180,.16); }
.lin-goetia{ color:#ff8a8a; border-color:#a8203a; background:rgba(168,32,58,.18); }
.lin-wicca{ color:#7fe0a8; border-color:#2c6b43; background:rgba(44,107,67,.18); }
.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; align-items:flex-start; }
.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-actions{ display:flex; align-items:flex-start; gap:8px; 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{ }
  /* no mobile, os botões (imagem + Enviar) descem para uma 2ª linha,
     dando mais espaço para ler e editar o comentário */
  .fr-c-form{ flex-wrap:wrap; }
  .fr-c-actions{ flex:1 1 100%; justify-content:flex-end; }
}
/* respiro entre as publicações do feed (antes ficavam coladas) */
.forum-feed:not(.feed-grid){ display:flex; flex-direction:column; gap:16px; }
@media(max-width:560px){ .forum-feed:not(.feed-grid){ gap:13px; } }
/* foto do autor clicável -> perfil */
.fr-av-link{ display:inline-flex; flex:none; line-height:0; border-radius:50%; }
.fr-av-link:hover .fr-av{ border-color:var(--gold); }
/* moldura no feed/comentários: a moldura é ~172% do avatar — deixa respiro p/ não colar no nome
   e some com o anel dourado quando há moldura (a própria moldura é a borda) */
.fr-post-head > .avb, .fr-post-head > .fr-av-link, .fr-comment > .avb, .fr-comment > .fr-av-link{ margin-right:8px; }
.avb > .fr-av{ border-color:transparent !important; background:transparent !important; }
/* menção a @todos (não vira link de perfil) */
.fr-mention-all{ color:var(--gold); font-weight:600; }

/* ===== 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 ===== */
.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); }
/* Chat da comunidade — botão flutuante logo acima do WhatsApp */
.chat-fab{ position:fixed; right:21px; bottom:86px; z-index:91; width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-soft); background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--gold); display:grid; place-items:center; cursor:pointer; text-decoration:none; box-shadow:0 10px 26px -8px rgba(0,0,0,.65); transition:.2s; }
.chat-fab:hover{ transform:scale(1.08); border-color:var(--gold); }
.chat-fab svg{ width:26px; height:26px; }
/* FABs com emoji (doação 🎁, sugestões 💡, chat 💬) — grande e centralizado */
.fab-emo{ font-size:30px; line-height:1; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.chat-fab-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--blood-bright); color:#fff; font-family:var(--ui); font-size:10px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--bg); display:none; }
.chat-fab.has-unread .chat-fab-badge{ display:block; animation:chatpulse 1.8s ease-in-out infinite; }
@keyframes chatpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
/* SAC / Melhorias — botão flutuante acima do chat */
.sac-fab{ position:fixed; right:21px; bottom:154px; z-index:91; width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-soft); background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px -8px rgba(168,32,58,.7); transition:.2s; }
.sac-fab svg{ width:25px; height:25px; }
/* no fórum o chat-fab é redundante (você já está no chat) */
body.page-forum .chat-fab{ display:none !important; }
/* fórum no mobile: esconder flutuantes p/ não cobrir o chat/composer */
@media(max-width:680px){
  body.page-forum .wpp-float, body.page-forum #sac-fab, body.page-forum .donate-fab{ display:none !important; }
}
/* páginas que não querem o botão de sugestões (ex.: Umbra IA) */
body.no-sac #sac-fab, body.no-sac #sac-panel{ display:none !important; }
body.no-sac .chat-fab{ bottom:86px; }
.sac-fab:hover{ transform:scale(1.08); } .sac-fab.on{ transform:scale(.96); }
.sac-panel{ position:fixed; right:18px; bottom:150px; z-index:92; width:340px; max-width:calc(100vw - 36px); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.5); overflow:hidden; display:flex; flex-direction:column; max-height:min(70vh,520px); }
.sac-panel[hidden]{ display:none !important; }
.sac-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; font-family:var(--ui); }
.sac-x{ background:none; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; }
.sac-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--bg-2); }
.sac-bot,.sac-user{ font-family:var(--body); font-size:14px; line-height:1.5; padding:10px 12px; border-radius:12px; max-width:88%; white-space:pre-wrap; }
.sac-bot{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-bottom-left-radius:4px; }
.sac-user{ align-self:flex-end; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-bottom-right-radius:4px; }
.sac-foot{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--surface); }
.sac-foot textarea{ flex:1; resize:none; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 10px; font-family:var(--body); font-size:14px; }
.sac-send{ border:none; border-radius:10px; padding:0 16px; background:var(--gold); color:#1a1208; font-weight:700; cursor:pointer; }

/* ===== Doação ao projeto — FAB + painel PIX ===== */
.donate-fab{ position:fixed; right:21px; bottom:222px; z-index:91; width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-soft); background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:var(--gold); display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px -8px rgba(168,32,58,.7); transition:.2s; }
.donate-fab svg{ width:26px; height:26px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.donate-fab::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--gold-soft); opacity:0; animation:donpulse 2.8s ease-out infinite; pointer-events:none; }
@keyframes donpulse{ 0%{ transform:scale(.82); opacity:.55; } 70%{ transform:scale(1.28); opacity:0; } 100%{ opacity:0; } }
.donate-fab:hover{ transform:scale(1.08); } .donate-fab.on{ transform:scale(.96); }
body.page-forum .donate-fab{ display:none !important; }

/* ===== Mobile: "..." recolhe os FABs · chat no header · seção apoie (só no celular) ===== */
.fab-more{ display:none; }           /* botão "..." — só aparece no mobile */
.nav-chat{ display:none; }            /* ícone de chat no cabeçalho — só no mobile */
.apoie-sec{ display:none; }           /* seção "Apoie o projeto" — só no mobile */
@media(max-width:780px){
  /* botão "..." que abre o leque de FABs */
  .fab-more{ position:fixed; right:23px; bottom:86px; z-index:93; width:46px; height:46px; border-radius:50%;
    border:1px solid var(--gold-soft); background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--gold);
    display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px -8px rgba(0,0,0,.65); transition:transform .25s ease, border-color .2s; }
  .fab-more svg{ width:24px; height:24px; }
  body.fabs-open .fab-more{ transform:rotate(90deg); border-color:var(--gold); }
  body.page-forum .fab-more{ display:none; }
  /* FABs menores no mobile */
  #chat-fab, #sac-fab, #donate-fab{ width:46px; height:46px; }
  #chat-fab svg, #donate-fab svg{ width:23px; height:23px; }
  #sac-fab svg{ width:22px; height:22px; }
  .donate-fab::after{ display:none; }
  /* recolhidos por padrão — invisíveis até abrir o leque */
  #chat-fab, #sac-fab, #donate-fab{ opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(10px) scale(.5);
    transition:transform .24s cubic-bezier(.2,.9,.3,1.25), opacity .18s ease, visibility .18s; }
  /* abertos: pilha acima do "..." (IDs vencem as regras antigas de posição) */
  body.fabs-open #chat-fab{ opacity:1; visibility:visible; pointer-events:auto; transform:none; right:23px; bottom:140px; }
  body.fabs-open #sac-fab{ opacity:1; visibility:visible; pointer-events:auto; transform:none; right:23px; bottom:196px; }
  body.fabs-open #donate-fab{ opacity:1; visibility:visible; pointer-events:auto; transform:none; right:23px; bottom:252px; }
  /* página de produto (barra de compra fixa, só ≤430): sobe o conjunto */
  @media(max-width:430px){
    body.has-buybar .fab-more{ bottom:146px; }
    body.has-buybar.fabs-open #chat-fab{ bottom:200px; }
    body.has-buybar.fabs-open #sac-fab{ bottom:256px; }
    body.has-buybar.fabs-open #donate-fab{ bottom:312px; }
  }
  /* ícone de chat no cabeçalho */
  .nav-chat{ display:grid; position:relative; color:var(--gold); }
  .nav-chat-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
    background:var(--blood-bright); color:#fff; font-family:var(--ui); font-size:9px; font-weight:700; line-height:16px;
    text-align:center; box-shadow:0 0 0 2px var(--bg); display:none; }
  .nav-chat.has-unread .nav-chat-badge{ display:block; }
  /* seção "Apoie o projeto" */
  .apoie-sec{ display:block; }
  .apoie-card{ text-align:center; max-width:420px; margin:0 auto; background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--gold-soft); border-radius:18px; padding:30px 22px; box-shadow:0 16px 40px -18px rgba(0,0,0,.7); }
  .apoie-ic{ display:inline-grid; place-items:center; width:60px; height:60px; border-radius:50%;
    background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:var(--gold); margin-bottom:14px;
    box-shadow:0 8px 22px -8px rgba(168,32,58,.7); }
  .apoie-ic svg{ width:30px; height:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
  .apoie-card h2{ margin:0 0 10px; }
  .apoie-card p{ color:var(--muted); margin:0 0 20px; }
}

.donate-panel{ position:fixed; right:18px; bottom:150px; z-index:92; width:340px; max-width:calc(100vw - 36px); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.5); overflow:hidden; display:flex; flex-direction:column; max-height:min(82vh,600px); }
.donate-panel[hidden]{ display:none !important; }
.don-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; font-family:var(--ui); }
.don-head b{ font-size:15px; letter-spacing:.03em; }
.don-x{ background:none; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; opacity:.85; }
.don-body{ padding:16px; overflow-y:auto; background:var(--bg-2); }
.don-intro{ font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-bottom:14px; }
.don-chips{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.don-chip{ flex:1; min-width:62px; padding:9px 4px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:var(--ui); font-size:13px; cursor:pointer; transition:.15s; }
.don-chip:hover{ border-color:var(--gold-soft); } .don-chip.on{ background:var(--gold); color:#1a1208; border-color:var(--gold); font-weight:700; }
.don-lbl{ display:block; font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.don-amt{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0 12px; margin-bottom:12px; }
.don-amt span{ font-family:var(--ui); color:var(--gold); font-size:16px; }
.don-amt input{ flex:1; min-width:0; background:none; border:none; color:var(--ink); font-family:var(--ui); font-size:20px; padding:12px 0; outline:none; }
.don-inp{ width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:10px 12px; font-family:var(--body); font-size:14px; margin-bottom:10px; }
.don-msg{ color:var(--blood-bright); font-family:var(--ui); font-size:13px; min-height:16px; margin-bottom:4px; }
.don-go{ width:100%; border:none; border-radius:10px; padding:13px; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.04em; cursor:pointer; }
.don-go:disabled{ opacity:.6; cursor:default; }
.don-secure{ text-align:center; font-family:var(--ui); font-size:11.5px; color:var(--muted); margin-top:12px; }
.don-qr{ display:block; width:200px; height:200px; margin:6px auto 14px; border-radius:12px; background:#fff; padding:8px; }
.don-copy{ display:flex; gap:8px; margin-bottom:14px; }
.don-copy input{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-radius:10px; padding:9px 10px; font-family:var(--ui); font-size:12px; }
.don-copybtn{ border:none; border-radius:10px; padding:0 16px; background:var(--gold); color:#1a1208; font-family:var(--ui); font-weight:700; cursor:pointer; white-space:nowrap; }
.don-wait{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ui); font-size:13px; color:var(--gold); margin-bottom:14px; }
.don-spin{ width:14px; height:14px; border:2px solid var(--gold-soft); border-top-color:transparent; border-radius:50%; animation:donspin 1s linear infinite; }
@keyframes donspin{ to{ transform:rotate(360deg); } }
.don-back{ width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; background:var(--surface); color:var(--ink-soft); font-family:var(--ui); font-size:13px; cursor:pointer; }
.don-thanks{ text-align:center; }
.don-bigheart{ font-size:46px; margin:6px 0; }
.don-thanks h3{ font-family:var(--serif); font-size:22px; color:var(--gold); margin-bottom:8px; }
.don-thanks p{ font-family:var(--body); font-size:14px; line-height:1.55; color:var(--ink-soft); margin-bottom:16px; }

/* link discreto no rodapé */
.foot-donate{ text-align:center; margin-top:16px; }
.foot-donate-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-size:13px; color:var(--muted); border:1px solid var(--line-soft); border-radius:999px; padding:7px 16px; transition:.18s; cursor:pointer; }
.foot-donate-link:hover{ color:var(--gold); border-color:var(--gold-soft); }
.foot-donate-link .fd-h{ color:var(--blood-bright); }

/* 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); }

/* ===== molduras de avatar (bordas de perfil) ===== */
.avb{ position:relative; display:inline-block; line-height:0; vertical-align:middle; isolation:isolate; flex:none; }
.avb > img{ position:relative; z-index:1; border-color:transparent !important; }
/* moldura decorativa: definida uma única vez acima (.avb::after, centralizada a 172%) */
/* halo de iluminação atrás da foto, com a cor da moldura */
.avb::before{ content:""; position:absolute; inset:-7%; z-index:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 16px 3px var(--avb-glow, var(--gold-glow)), 0 0 5px 1px var(--avb-glow, var(--gold-glow));
  animation:avb-pulse 3.4s ease-in-out infinite; }
@keyframes avb-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.9 } }
@media (prefers-reduced-motion:reduce){ .avb::before{ animation:none; opacity:.7 } }

/* ===== 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; }
  .pd-stage{ grid-template-columns:1fr; gap:12px; }
  .pd-main{ cursor:default; order:0; } .pd-main.zoom img{ transform:none; }
  .pd-thumbs{ order:1; flex-direction:row; max-height:none; overflow-x:auto; padding-bottom:4px; }
  .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; }
  /* card compacto no celular: botão abaixo do preço (largura total), selos e parcela menores */
  .prod-add{ height:40px; }
  .prod-body{ padding:12px 12px 14px; gap:8px; }
  .prod-inst{ font-size:11px; } .prod-was{ font-size:12px; }
  .prod-tag{ font-size:9px; padding:3px 7px; letter-spacing:.06em; }
  .prod-foot{ gap:8px; }
}
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:8px; }
  .nav-logo img{ height:40px; }
  .nav-actions{ gap:5px; flex-wrap:nowrap; }
  .nav-icon{ width:36px; height:36px; }
  .nav-icon svg{ width:18px; height:18px; }
  .nav-avatar{ width:34px; height:34px; }
  .nav-actions .btn{ padding:7px 12px; font-size:12px; }
  .subnav-inner{ gap:4px; justify-content:center; }
  .subnav a{ padding:10px 9px; flex:0 0 auto; }
  .subnav a svg{ width:23px; height:23px; }
  /* telas bem pequenas: ícones do topo mais juntos e alinhados */
  @media(max-width:430px){
    .nav-inner{ gap:6px; }
    .nav-logo img{ height:34px; }
    .nav-actions{ gap:3px; }
    .nav-icon{ width:32px; height:32px; border-width:0; }
    .nav-icon svg{ width:17px; height:17px; }
    .nav-avatar{ width:31px; height:31px; }
    .nav-actions .btn{ padding:6px 10px; font-size:11px; }
  }
  /* hero compacto e legível */
  .hero{ min-height:86vh; }
  .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; }
  /* barra fixa de compra no rodapé (estilo app) */
  .pd-buybar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95; gap:8px; align-items:center;
    background:rgba(12,11,16,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px -12px rgba(0,0,0,.7); }
  .pd-bb-price{ font-family:var(--serif); font-weight:700; color:var(--blood-bright); font-size:19px; white-space:nowrap; }
  .pd-bb-btn{ flex:1; padding:12px 8px; font-size:14px; margin:0; }
  body.has-buybar{ padding-bottom:70px; }
  body.has-buybar .wpp-float{ bottom:78px; }
  body.has-buybar .chat-fab{ bottom:146px; } body.has-buybar #sac-fab{ bottom:214px; }
  body.has-buybar .donate-fab{ bottom:282px; }
  body.has-buybar.no-sac .chat-fab{ bottom:146px; }
}

/* ===== 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(--gold-soft); border-radius:999px; padding:0 18px; transition:.25s;
  box-shadow:0 0 0 1px rgba(216,179,103,.22), 0 0 16px -3px rgba(216,179,103,.4);
  animation:searchGlow 3.6s ease-in-out infinite; }
.loja-search:hover{ border-color:var(--gold); }
.loja-search:focus-within{ border-color:var(--gold); animation:none;
  box-shadow:0 0 0 2px rgba(216,179,103,.45), 0 0 26px -2px rgba(216,179,103,.7), 0 0 46px -8px rgba(220,40,40,.45); }
.loja-search svg{ width:21px; height:21px; color:var(--gold); flex:none; filter:drop-shadow(0 0 4px rgba(216,179,103,.5)); }
.loja-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--ink);
  font-family:var(--ui); font-size:15px; padding:14px 0; }
.loja-search input::placeholder{ color:var(--ink-soft); }
@keyframes searchGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(216,179,103,.22), 0 0 15px -4px rgba(216,179,103,.38); }
  50%{ box-shadow:0 0 0 1px rgba(216,179,103,.42), 0 0 26px -2px rgba(216,179,103,.62); }
}
@media(prefers-reduced-motion:reduce){ .loja-search{ animation:none; } }
.loja-search input::-webkit-search-cancel-button{ filter:grayscale(1) brightness(2); cursor:pointer; }
/* busca em destaque dentro do hero da loja — entre o logo e o texto "Phylacterium" */
.loja-hero-search-row{ display:flex; gap:12px; align-items:stretch; justify-content:center; width:min(820px,94%); margin:14px auto 4px; }
.loja-hero-search{ flex:1 1 auto; min-width:0; margin:0; padding:2px 24px;
  background:rgba(18,15,22,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-color:var(--gold); border-width:1.5px;
  box-shadow:0 0 0 1px rgba(216,179,103,.34), 0 14px 40px -10px rgba(0,0,0,.78), 0 0 30px -4px rgba(216,179,103,.55); }
.loja-hero-search svg{ width:23px; height:23px; }
.loja-hero-search input{ font-size:16px; padding:17px 0; }
/* botão "Filtros" ao lado da busca, no hero (mesmo visual de vidro/dourado) */
.loja-hero-search-row .loja-filtros-btn{ flex:none; align-self:stretch; border-radius:999px;
  border:1.5px solid var(--gold); color:var(--gold); padding:0 22px; font-size:15px;
  background:rgba(18,15,22,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(216,179,103,.34), 0 14px 40px -10px rgba(0,0,0,.78), 0 0 30px -4px rgba(216,179,103,.55); }
.loja-hero-search-row .loja-filtros-btn:hover{ background:rgba(216,179,103,.14); }
.loja-hero-search-row .loja-filtros-btn.active{ background:var(--gold); color:#08070a; border-color:var(--gold); }
.loja-hero-search-row .loja-filtros-btn.active svg{ color:#08070a; }
@media(max-width:560px){ .loja-hero-search-row{ margin-top:10px; flex-wrap:wrap; } .loja-hero-search input{ font-size:15px; padding:15px 0; }
  .loja-hero-search-row .loja-filtros-btn{ flex:1 1 100%; justify-content:center; padding:12px 22px; } }
/* dropdown de resultados da busca (autocomplete) — ancorado ao body, sob a barra */
.loja-ac{ position:fixed; z-index:1200; background:var(--surface); border:1px solid var(--gold-soft);
  border-radius:16px; padding:6px; box-shadow:0 22px 54px -14px rgba(0,0,0,.82), 0 0 0 1px rgba(216,179,103,.16);
  max-height:min(62vh,440px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.loja-ac[hidden]{ display:none; }
.loja-ac-item{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; text-decoration:none; }
.loja-ac-item + .loja-ac-item{ border-top:1px solid rgba(255,255,255,.03); }
.loja-ac-item:hover, .loja-ac-item.is-active{ background:rgba(216,179,103,.12); }
.loja-ac-item .ac-thumb{ width:48px; height:48px; border-radius:9px; overflow:hidden; flex:none; background:var(--bg-2); border:1px solid var(--line); }
.loja-ac-item .ac-thumb img{ width:100%; height:100%; object-fit:cover; }
.loja-ac-item .ac-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.loja-ac-item .ac-name{ font-family:var(--ui); font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loja-ac-item .ac-price{ font-family:var(--ui); font-size:13px; color:var(--gold); display:flex; gap:8px; align-items:baseline; }
.loja-ac-item .ac-was{ color:var(--muted); text-decoration:line-through; font-size:11px; }
.loja-ac-item .ac-out{ color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.loja-ac-item.is-out .ac-name{ color:var(--muted); }
.loja-ac-all{ display:block; text-align:center; padding:11px; margin-top:4px; border-top:1px solid var(--line);
  font-family:var(--ui); font-size:13px; letter-spacing:.04em; color:var(--gold); text-decoration:none; }
.loja-ac-all:hover{ background:rgba(216,179,103,.08); border-radius:10px; }
/* dropdown de categorias do botão "Filtros" — ancorado ao body, sob o botão */
.loja-cat-dd{ position:fixed; z-index:1200; background:var(--surface); border:1px solid var(--gold-soft);
  border-radius:14px; padding:8px; box-shadow:0 22px 54px -14px rgba(0,0,0,.82), 0 0 0 1px rgba(216,179,103,.16);
  max-height:min(60vh,440px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.loja-cat-dd[hidden]{ display:none; }
.loja-cat-dd .cat-dd-title{ grid-column:1 / -1; font-family:var(--ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:5px 12px 7px; }
.loja-cat-dd a{ display:block; padding:9px 13px; border-radius:9px; text-decoration:none; color:var(--ink);
  font-family:var(--ui); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
.loja-cat-dd a:hover{ background:rgba(216,179,103,.12); color:var(--gold); }
.loja-cat-dd a.active{ background:var(--gold); color:#08070a; }
@media(max-width:560px){ .loja-cat-dd{ grid-template-columns:1fr; } }
.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; }
/* ordenação (injetada pela loja-live.js) */
.loja-sort{ display:inline-flex; align-items:center; gap:8px; flex:none; position:relative;
  border:1px solid var(--line); border-radius:999px; padding:0 14px 0 16px; background:var(--bg-2); transition:.2s; }
.loja-sort:focus-within{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(216,179,103,.08); }
.loja-sort svg{ width:18px; height:18px; color:var(--muted); flex:none; }
.loja-sort select{ appearance:none; -webkit-appearance:none; background:transparent; border:none; outline:none; cursor:pointer;
  color:var(--ink); font-family:var(--ui); font-size:14px; letter-spacing:.02em; padding:12px 22px 12px 0; }
.loja-sort::after{ content:"⌄"; position:absolute; right:14px; color:var(--gold); font-size:14px; pointer-events:none; line-height:1; top:50%; transform:translateY(-60%); }
.loja-sort option{ background:var(--surface); color:var(--ink); }
@media(max-width:560px){ .loja-filtros-btn{ flex:1; justify-content:center; } .loja-sort{ flex:1; justify-content:center; } .loja-sort select{ flex:1; } }

/* ============================================================
   CURSOR — Dark Fantasy: espada (padrão) + mão do olho amaldiçoado
   (clicáveis). 32px: acima disso o Chrome/Windows mostra 2 cursores.
   Somente desktop (ponteiro fino c/ hover).
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  *{ cursor: url('/assets/img/cursor-df-sword.png') 1 1, 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-df-hand.png') 1 2, 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; align-items:flex-start; }
/* o avatar (e sua moldura) não pode esticar com a altura da mensagem: a moldura
   é dimensionada em % do .avb, então um .avb esticado vira uma moldura oval. */
.cmsg > .avb{ align-self:flex-start; }
.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-edited{ font-style:italic; opacity:.7; }
body.chat-tab .foot{ display:none; } /* aba Chat: sem rodapé */
.cm-text{ font-family:var(--body); font-size:15px; color:var(--ink-soft); line-height:1.5; margin-top:2px; word-wrap:break-word; text-align:justify; text-justify:inter-word; }
/* balão da mensagem — a borda usa o brilho da moldura de perfil do autor (--bub) */
/* balão + ações lado a lado; o botão de reagir fica FORA do balão, centralizado na vertical */
.cm-row{ display:flex; align-items:center; gap:6px; }
.cm-bubble{ display:inline-block; max-width:80%; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--bub,var(--line)); border-radius:4px 14px 14px 14px; padding:7px 13px 9px;
  box-shadow:0 0 14px -7px var(--bub,transparent), 0 1px 0 rgba(0,0,0,.18); }
.cmsg.mine .cm-bubble{ background:linear-gradient(180deg,var(--surface-2,var(--surface)),var(--bg-2)); }
.cm-bubble .cm-text:first-child{ margin-top:0; }
/* dentro do balão, cartões estruturados não repetem moldura/fundo (evita "caixa na caixa") */
.cm-bubble .cm-poll,.cm-bubble .cm-event,.cm-bubble .cm-doc{ background:transparent; border:none; padding:0; max-width:none; }
.cm-bubble .cm-doc{ padding-top:6px; }
/* ações por mensagem: reagir (☺) e menu ⋯ (editar/excluir) */
.cm-acts{ flex:none; display:flex; align-items:center; gap:1px; opacity:0; transition:opacity .15s; }
.cmsg:hover .cm-acts{ opacity:1; }
.cm-act{ background:none; border:none; color:var(--muted); cursor:pointer; line-height:1; padding:3px 5px; border-radius:6px; display:grid; place-items:center; }
.cm-act:hover{ color:var(--gold); background:var(--bg-2); }
.cm-act svg{ width:16px; height:16px; display:block; }
.cm-menu-btn{ font-size:18px; }
@media(hover:none){ .cm-acts{ opacity:.65; } } /* sem hover (toque): ações sempre visíveis */
/* reações da mensagem (chips) */
.cm-reacts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.cm-reacts:empty{ display:none; }
.cm-react{ display:inline-flex; align-items:center; gap:4px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px 2px 7px; cursor:pointer; font-family:var(--ui); font-size:12px; color:var(--ink-soft); transition:.14s; }
.cm-react:hover{ border-color:var(--gold-soft); }
.cm-react.mine{ border-color:var(--gold); background:rgba(216,179,103,.12); color:var(--gold); }
.cr-em{ font-size:13px; line-height:1; }
.cr-n{ font-variant-numeric:tabular-nums; }
/* seletor rápido de reações */
.react-pop{ position:fixed; z-index:3300; display:flex; gap:2px; padding:6px; background:var(--surface-2);
  border:1px solid var(--gold-soft); border-radius:999px; box-shadow:0 16px 40px -12px #000; }
.react-opt{ background:none; border:none; cursor:pointer; font-size:22px; line-height:1; padding:5px; border-radius:50%; transition:.12s; }
.react-opt:hover{ background:var(--bg-2); transform:scale(1.25); }
/* menu ⋯ da mensagem (reaproveita .chat-attach) */
.msg-menu{ min-width:150px; }
.ca-item.ca-danger,.ca-item.ca-danger .ca-ic{ color:var(--blood-bright); }
/* edição inline de mensagem */
.cm-edit{ margin-top:4px; }
.cm-edit-in{ width:100%; background:var(--bg-2); border:1px solid var(--gold-soft); border-radius:10px; color:var(--ink);
  font-family:var(--body); font-size:15px; padding:8px 10px; resize:vertical; min-height:38px; }
.cm-edit-in:focus{ outline:none; }
.cm-edit-acts{ display:flex; gap:8px; margin-top:6px; }
.cm-edit-save,.cm-edit-cancel{ font-family:var(--ui); font-size:13px; border-radius:8px; padding:6px 16px; cursor:pointer; border:1px solid var(--line); }
.cm-edit-save{ background:var(--blood); border-color:var(--blood); color:#fff; }
.cm-edit-cancel{ background:none; color:var(--ink-soft); }
.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); }

/* ===== Responder (citação) + Reportar no chat ===== */
.cm-reply{ display:flex; flex-direction:column; gap:1px; align-items:flex-start; text-align:left; max-width:100%;
  background:rgba(216,179,103,.08); border:none; border-left:3px solid var(--gold-soft); border-radius:8px;
  padding:5px 9px; margin:0 0 6px; cursor:pointer; transition:.15s; }
.cm-reply:hover{ background:rgba(216,179,103,.16); }
.cm-reply-a{ font-family:var(--ui); font-size:11.5px; font-weight:700; color:var(--gold); letter-spacing:.02em; }
.cm-reply-t{ font-family:var(--body); font-size:12.5px; color:var(--muted); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmsg.mine .cm-reply{ border-left-color:var(--blood-bright); background:rgba(192,29,29,.10); }
.cm-flash .cm-bubble{ animation:cmflash 1.4s ease-out; }
@keyframes cmflash{ 0%,40%{ box-shadow:0 0 0 2px var(--gold), 0 0 22px -2px var(--gold-soft); } 100%{ box-shadow:none; } }

.chat-replybar{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--line); background:var(--bg-2); }
.chat-replybar .crb-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; border-left:3px solid var(--gold-soft); padding-left:10px; }
.crb-a{ font-family:var(--ui); font-size:12px; font-weight:700; color:var(--gold); }
.crb-t{ font-family:var(--body); font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crb-x{ flex:none; background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 7px; border-radius:8px; }
.crb-x:hover{ color:var(--ink); background:var(--surface); }

.report-back{ position:fixed; inset:0; z-index:3400; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(4,4,6,.62); backdrop-filter:blur(3px); }
.report-card{ width:300px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px -12px #000; overflow:hidden; padding:8px; }
.report-card .rp-h{ font-family:var(--ui); font-size:13px; letter-spacing:.04em; color:var(--gold); padding:10px 10px 8px; border-bottom:1px solid var(--line-soft); margin-bottom:6px; }
.report-card .ca-item{ width:100%; padding:10px 12px; }
.rp-cancel{ width:100%; margin-top:6px; background:none; border:none; border-top:1px solid var(--line-soft); color:var(--muted); font-family:var(--ui); font-size:13px; padding:10px; cursor:pointer; }
.rp-cancel:hover{ color:var(--ink); }
.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{ flex:none; 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; }
.co-title-staff{ color:var(--gold); }
.co-title-mt{ margin-top:14px; }
.co-user.co-staff .co-name{ color:var(--gold-2); }

/* 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); }
/* rosto de quem mandou a última mensagem, sobre o sino */
.notif-face{ position:absolute; right:-3px; bottom:-3px; width:18px; height:18px; border-radius:50%; object-fit:cover; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--gold-soft); background:var(--bg-2); z-index:2; }
.nav-notif[data-mcount]::after{ content:attr(data-mcount); position:absolute; top:-3px; right:-5px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--blood-bright); color:#fff; font-family:var(--ui); font-size:9px; font-weight:700; line-height:15px; text-align:center; box-shadow:0 0 0 2px var(--bg); z-index:3; }
.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-search{ display:flex; align-items:center; gap:8px; max-width:420px; margin:0 auto 18px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:999px; }
.mem-search svg{ width:18px; height:18px; color:var(--muted); flex:none; }
.mem-search input{ flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--ui); font-size:14px; }
.mem-sec{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:24px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
.mem-sec small{ color:var(--muted); letter-spacing:0; }
.mem-staff{ box-shadow:0 0 0 1px var(--gold-soft) inset; }
.mem-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:24px 0 6px; }
.mem-pg{ min-width:36px; height:36px; padding:0 8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:8px; font-family:var(--ui); font-size:13px; cursor:pointer; transition:.15s; }
.mem-pg:hover{ border-color:var(--gold-soft); color:var(--gold); }
.mem-pg.on{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:var(--blood); }
.mem-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:16px; }
.mem-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 14px 16px; transition:.2s; }
.mem-card:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:0 14px 32px -14px var(--glow); }
.mem-av{ width:66px; height:66px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-soft); }
/* a moldura é desenhada a ~172% do avatar; reservamos espaço p/ ela caber dentro do card */
.mem-card .avb{ display:block; margin:8px auto 24px; }
.mem-card .avb .mem-av{ border-color:transparent; }
.mem-stat{ position:absolute; top:12px; right:14px; width:10px; height:10px; border-radius:50%; background:var(--muted); border:2px solid var(--surface); z-index:4; }
.mem-stat.on{ background:#5fd38a; box-shadow:0 0 8px #5fd38a; }
.mem-name{ font-family:var(--serif); font-size:15.5px; color:var(--ink); line-height:1.25; }
.mem-meta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; margin-top:1px; }
.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); display:flex; align-items:center; gap:3px; }
/* 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-form .chat-emoji{ background:transparent; border:1px solid var(--line); border-radius:50%; width:40px; height:40px;
  padding:0; display:grid; place-items:center; line-height:1; 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-dir-title{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:6px 0 12px; }
.topic-dir{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:26px; }
.topic-dir-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; transition:.18s; position:relative; }
.topic-dir-card:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.topic-dir-card.active{ border-color:var(--blood); box-shadow:0 0 0 1px var(--blood) inset; }
.topic-dir-card .td-ic{ font-size:22px; line-height:1; }
.topic-dir-card b{ font-family:var(--serif); font-size:15px; color:var(--ink); font-weight:600; }
.topic-dir-card .td-n{ position:absolute; top:12px; right:12px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:1px 8px; font-family:var(--ui); font-size:11px; color:var(--muted); }
.topic-dir-card.active .td-n{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:var(--blood); }
.topic-empty{ font-family:var(--body); color:var(--muted); padding:14px 4px; }
/* filtros de tema no feed */
.feed-filters{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px; scrollbar-width:none; }
.feed-filters::-webkit-scrollbar{ display:none; }
.feed-filters:empty{ display:none; }
.feed-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-family:var(--ui); font-size:13px; border-radius:999px; padding:7px 14px; cursor:pointer; white-space:nowrap; transition:.15s; }
.feed-chip:hover{ border-color:var(--gold-soft); color:var(--gold); }
.feed-chip.active{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-color:var(--blood); }
.feed-chip span{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:999px; padding:0 7px; font-size:11px; color:var(--muted); }
.feed-chip.active span{ background:rgba(255,255,255,.18); border-color:transparent; color:#fff; }
.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:5px; text-align:center; width:100%; }
.mem-followers{ font-family:var(--ui); font-size:11.5px; color:var(--muted); margin-top:2px; }
/* ações: dois botões lado a lado, largura total e mesma altura */
.mem-acts{ display:flex; gap:7px; justify-content:center; width:100%; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line-soft); }
.mem-acts:empty{ display:none; }
.mem-msg, .mem-follow{ flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 10px; font-family:var(--ui); font-size:12px; font-weight:600; cursor:pointer;
  border-radius:999px; transition:.18s; white-space:nowrap; }
.mem-msg{ margin-top:0; color:var(--gold); background:transparent; border:1px solid var(--gold-soft); }
.mem-msg:hover{ background:rgba(216,179,103,.08); border-color:var(--gold); }
.mem-follow{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border:1px solid transparent; }
.mem-follow:hover{ box-shadow:0 0 18px -6px var(--glow); }
.mem-follow.on{ background:transparent; color:var(--gold); border-color:var(--gold-soft); }
.mem-follow.on:hover{ background:rgba(216,179,103,.08); }
/* 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 14px 16px; display:flex; flex-direction:column; gap:2px; }
.dm-msg{ display:flex; flex-direction:column; align-items:flex-start; max-width:82%; }
.dm-msg.me{ align-self:flex-end; align-items:flex-end; }
.dm-msg.dm-first{ margin-top:9px; }
.dm-msg:first-child{ margin-top:0; }
.dm-bubble{ font-family:var(--body); font-size:14.5px; line-height:1.42; color:var(--ink);
  background:var(--surface-2); border-radius:18px; padding:8px 13px; word-wrap:break-word; overflow-wrap:anywhere;
  box-shadow:0 1px 1.5px rgba(0,0,0,.2); }
.dm-msg:not(.me) .dm-bubble{ border-bottom-left-radius:6px; }
.dm-msg.me .dm-bubble{ background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-bottom-right-radius:6px; }
/* horário discreto embaixo da bolha (sem sobrepor o texto) */
.dm-time{ font-family:var(--ui); font-size:10px; color:var(--muted); opacity:0; max-height:0; overflow:hidden; padding:0 7px; transition:opacity .15s ease, max-height .15s ease; }
.dm-msg:hover .dm-time{ opacity:.65; max-height:16px; margin-top:2px; }
.dm-msg.dm-show-time .dm-time{ opacity:.65; max-height:16px; margin-top:2px; }
.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; }
.upd-author{ display:inline-flex; align-items:center; gap:12px; margin-top:16px; text-decoration:none;
  background:linear-gradient(180deg,var(--surface-3),var(--bg-2)); border:1px solid var(--gold-soft); border-radius:14px;
  padding:8px 16px 8px 8px; transition:.18s; box-shadow:0 6px 18px -10px #000; }
.upd-author:hover{ border-color:var(--gold); box-shadow:0 0 22px -8px var(--gold-glow); }
.upd-au-av{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); box-shadow:0 0 0 2px rgba(216,179,103,.18); }
.upd-au-meta{ display:flex; flex-direction:column; gap:1px; }
.upd-au-by{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.upd-au-name{ display:inline-flex; align-items:center; gap:8px; font-family:var(--serif); font-weight:700; font-size:17px; color:var(--gold); letter-spacing:.02em; }
.upd-au-role{ font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.1em; color:#fff;
  background:linear-gradient(180deg,var(--blood),var(--blood-deep)); border-radius:999px; padding:2px 9px; box-shadow:0 2px 8px -2px var(--glow); }
@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; }
/* baixar documento em PDF */
.legal-dl{ margin-top:18px; }
.legal-dl .btn{ padding:12px 22px; }
.legal-dl .btn svg{ width:17px; height:17px; }
.legal-dl .btn[disabled]{ opacity:.6; cursor:wait; pointer-events:none; }
/* 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); }

/* selo de compra segura na área de pagamento */
.pay-seal{ background:#f3f3f5; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:18px; text-align:center; }
.pay-seal img{ width:340px; max-width:100%; height:auto; display:block; margin:0 auto; }

/* imagem ilustrativa do daemon no modal da Goetia */
.daemon-art{ margin:18px 0 8px; text-align:center; }
.daemon-art img{ max-width:100%; width:auto; max-height:460px; display:inline-block; filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)); }
/* linha de domínios (palavras-chave) acima da descrição */
.gm-domains{ font-family:var(--ui); color:var(--gold); text-align:center; font-size:13px; font-weight:600; letter-spacing:.08em; line-height:1.5; text-transform:uppercase; border-top:1px solid var(--line-soft); padding-top:18px; margin:16px 0 6px; }
.gm-domains + .gm-office{ border-top:none; padding-top:0; margin-top:8px; }

/* ====== @menções no fórum ====== */
.fr-mention{ color:var(--gold); font-weight:600; text-decoration:none; }
.fr-mention:hover{ text-decoration:underline; }
.fr-mention-pop{ position:fixed; z-index:9999; background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 44px -14px #000; padding:6px; max-height:288px; overflow:auto; }
.fr-mp-item{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; background:none; border:0;
  border-radius:10px; cursor:pointer; color:var(--ink); text-align:left; font:inherit; }
.fr-mp-item:hover, .fr-mp-item.active{ background:rgba(216,179,103,.14); }
.fr-mp-item img{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line); }
.fr-mp-all{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-family:var(--ui); font-weight:700; color:var(--gold); background:rgba(216,179,103,.12); border:1px solid var(--gold-soft); }
.fr-mp-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.93rem; }
.fr-mb-badge{ font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-soft); padding:1px 6px; border-radius:999px; flex:0 0 auto; }

/* ============ Figurinhas & GIFs no chat ============ */
.dm-form .dm-media-btn{ flex:0 0 auto; background:transparent; border:1px solid var(--line); border-radius:50%; width:40px; height:40px; padding:0; display:grid; place-items:center; color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; transition:.2s; }
.dm-form .dm-media-btn:hover{ border-color:var(--gold-soft); color:var(--gold); }
.dm-media-btn svg, .chat-media-btn svg{ width:20px; height:20px; }

/* mídia dentro de uma mensagem (sala ou DM) */
.cm-media{ position:relative; margin-top:6px; display:inline-block; }
.cm-media img{ display:block; border-radius:12px; }
.cm-sticker img{ width:128px; height:128px; object-fit:contain; }
.cm-photo img{ max-width:260px; max-height:340px; width:auto; height:auto; border:1px solid var(--line); cursor:pointer; }
.cm-gif img{ max-width:220px; max-height:220px; border:1px solid var(--line); }
.dm-msg .cm-media{ margin-top:0; }
.dm-msg.me .cm-media{ margin-left:auto; }
.cm-save{ position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(8,7,10,.78); color:var(--gold); font-size:14px; cursor:pointer; display:grid; place-items:center;
  opacity:0; transition:.18s; }
.cm-media:hover .cm-save{ opacity:1; }
.cm-save.saved{ color:#7ddf8e; opacity:1; }

/* ===== Chat: + (anexos), áudio, documento, enquete, evento, busca ===== */
.chat-emoji.chat-plus{ font-size:26px; font-weight:300; line-height:0; padding-bottom:3px; }
/* menu do botão + */
.chat-attach{ position:fixed; z-index:3300; min-width:210px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.6); overflow:hidden; padding:6px; }
.ca-item{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; cursor:pointer;
  color:var(--ink); font-family:var(--ui); font-size:15px; padding:11px 12px; border-radius:9px; text-align:left; }
.ca-item:hover{ background:var(--bg-2); }
.ca-ic{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--bg-2); font-size:17px; flex:none; }
/* barra de gravação de áudio */
.chat-rec{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:3300; display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--gold-soft); border-radius:999px; padding:8px 10px 8px 16px; box-shadow:0 16px 40px rgba(0,0,0,.6); }
.rec-dot{ width:11px; height:11px; border-radius:50%; background:var(--blood-bright); animation:recpulse 1s infinite; }
@keyframes recpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.rec-time{ font-family:var(--ui); font-size:14px; color:var(--ink); min-width:42px; }
.rec-cancel{ background:none; border:none; color:var(--muted); font-family:var(--ui); font-size:13px; cursor:pointer; }
.rec-send{ background:var(--blood); border:none; color:#fff; font-family:var(--ui); font-size:13px; font-weight:600; border-radius:999px; padding:8px 14px; cursor:pointer; }
/* modal de enquete/evento */
.chat-modal{ position:fixed; inset:0; z-index:3300; background:rgba(4,4,6,.82); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px; }
.cmod-box{ width:100%; max-width:400px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--gold-soft); border-radius:var(--r); padding:22px; }
.cmod-box h3{ font-family:var(--serif); font-size:20px; margin-bottom:14px; }
.cmod-in{ width:100%; 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; margin-bottom:9px; }
.cmod-in:focus{ outline:none; border-color:var(--gold-soft); }
textarea.cmod-in{ resize:vertical; }
.cmod-lbl{ display:block; font-family:var(--ui); font-size:12px; color:var(--muted); margin:2px 0 5px; }
.cmod-add{ background:none; border:1px dashed var(--gold-soft); color:var(--gold); font-family:var(--ui); font-size:13px; border-radius:8px; padding:7px 12px; cursor:pointer; margin-bottom:10px; }
.cmod-check{ display:flex; align-items:center; gap:8px; font-family:var(--body); font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.cmod-acts{ display:flex; gap:10px; }
/* enquete na mensagem */
.cm-poll{ margin-top:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px; max-width:340px; }
.cm-poll-q{ font-family:var(--body); font-size:15px; color:var(--ink); margin-bottom:10px; font-weight:600; }
.cm-poll-opt{ position:relative; display:flex; align-items:center; width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:9px 12px; margin-bottom:7px; cursor:pointer; overflow:hidden; font-family:var(--body); font-size:14px; color:var(--ink-soft); }
.cm-poll-opt:hover{ border-color:var(--gold-soft); }
.cm-poll-opt.voted{ border-color:var(--gold); }
.cm-poll-bar{ position:absolute; left:0; top:0; bottom:0; background:rgba(216,179,103,.16); z-index:0; transition:width .3s; }
.cm-poll-txt{ position:relative; z-index:1; flex:1; }
.cm-poll-pct{ position:relative; z-index:1; font-family:var(--ui); font-size:12px; color:var(--gold); }
.cm-poll-total{ font-family:var(--ui); font-size:12px; color:var(--muted); margin-top:4px; }
/* evento na mensagem */
.cm-event{ margin-top:6px; background:var(--bg-2); border:1px solid var(--gold-soft); border-radius:12px; padding:12px; max-width:340px; }
.cm-ev-head{ font-family:var(--serif); font-size:16px; color:var(--ink); }
.cm-ev-when{ font-family:var(--ui); font-size:13px; color:var(--gold); margin:5px 0; text-transform:capitalize; }
.cm-ev-place,.cm-ev-desc{ font-family:var(--body); font-size:14px; color:var(--ink-soft); margin-top:3px; }
.cm-ev-rsvp{ display:flex; gap:8px; margin-top:10px; }
.cm-ev-btn{ flex:1; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-family:var(--ui); font-size:13px; border-radius:8px; padding:8px; cursor:pointer; }
.cm-ev-btn:hover{ border-color:var(--gold-soft); }
.cm-ev-btn.on{ background:rgba(216,179,103,.16); border-color:var(--gold); color:var(--gold); }
/* documento / áudio / vídeo */
.cm-doc{ display:flex; align-items:center; gap:10px; margin-top:6px; max-width:300px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; text-decoration:none; color:var(--ink); }
.cm-doc:hover{ border-color:var(--gold-soft); }
.cm-doc-ic{ font-size:22px; flex:none; } .cm-doc-nm{ flex:1; font-family:var(--body); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-doc-dl{ color:var(--gold); font-size:16px; flex:none; }
.cm-audio{ margin-top:6px; max-width:280px; height:40px; display:block; }
.cm-video video{ max-width:260px; max-height:320px; border-radius:12px; display:block; }
/* busca de mensagens */
.chat-search-btn{ margin-left:auto; background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:6px; display:grid; place-items:center; }
.chat-search-btn svg{ width:20px; height:20px; }
.chat-search-btn:hover{ color:var(--gold); }
.chat-search{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.chat-search svg{ width:18px; height:18px; color:var(--muted); flex:none; }
.chat-search input{ flex:1; background:none; border:none; color:var(--ink); font-family:var(--body); font-size:15px; outline:none; }
.chat-search button{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; }
.chat-search-info{ font-family:var(--ui); font-size:12px; color:var(--muted); padding:4px 2px 8px; }
/* aba de emojis no seletor de mídia */
.cmedia-emoji{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:8px; overflow-y:auto; height:100%; align-content:start; }
.cmedia-em{ background:none; border:none; cursor:pointer; font-size:22px; padding:5px 0; border-radius:8px; line-height:1; }
.cmedia-em:hover{ background:var(--bg-2); }

/* seletor de mídia (popup) */
.cmedia-pop{ position:fixed; z-index:3200; width:320px; height:400px; display:flex; flex-direction:column;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.6); overflow:hidden; }
.cmedia-tabs{ display:flex; align-items:center; gap:4px; padding:8px; border-bottom:1px solid var(--line); }
.cmedia-tab{ flex:1; background:transparent; border:1px solid transparent; border-radius:9px; color:var(--ink-soft);
  font-family:var(--ui); font-size:13px; font-weight:600; padding:8px 6px; cursor:pointer; transition:.15s; }
.cmedia-tab:hover{ color:var(--gold); }
.cmedia-tab.active{ background:rgba(216,179,103,.14); border-color:var(--gold-soft); color:var(--gold); }
.cmedia-close{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:15px; }
.cmedia-close:hover{ color:var(--ink); }
.cmedia-body{ flex:1; overflow-y:auto; padding:10px; }
.cmedia-create{ width:100%; background:transparent; border:1px dashed var(--gold-soft); color:var(--gold);
  border-radius:10px; padding:10px; font-family:var(--ui); font-weight:600; cursor:pointer; margin-bottom:10px; transition:.15s; }
.cmedia-create:hover{ background:rgba(216,179,103,.08); border-color:var(--gold); }
.cmedia-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cmedia-gifs{ grid-template-columns:repeat(2,1fr); }
.cmedia-st{ position:relative; }
.cmedia-st-pick, .cmedia-gif{ width:100%; aspect-ratio:1; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:0; cursor:pointer; overflow:hidden; display:grid; place-items:center; transition:.15s; }
.cmedia-st-pick:hover, .cmedia-gif:hover{ border-color:var(--gold); }
.cmedia-st-pick img{ width:100%; height:100%; object-fit:contain; }
.cmedia-gif img{ width:100%; height:100%; object-fit:cover; }
.cmedia-st-x{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-3); color:var(--blood-bright); font-size:12px; cursor:pointer; display:none; place-items:center; }
.cmedia-st:hover .cmedia-st-x{ display:grid; }
.cmedia-search{ margin-bottom:10px; }
.cmedia-search input{ width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--ink);
  padding:9px 14px; font-family:var(--ui); font-size:14px; }
.cmedia-search input:focus{ outline:none; border-color:var(--gold-soft); }
.cmedia-hint{ grid-column:1/-1; color:var(--muted); text-align:center; padding:24px 10px; font-family:var(--body); font-size:13.5px; line-height:1.5; }
.cmedia-msg{ color:var(--gold); font-size:12.5px; text-align:center; margin-top:8px; min-height:16px; }

/* ============ Pop-up de notificação do chat (canto inferior esquerdo) ============ */
.chat-notify-stack{ position:fixed; left:18px; bottom:80px; z-index:95; display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none; }
.chat-notify{ pointer-events:auto; display:flex; align-items:center; gap:11px; width:312px; max-width:80vw;
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:14px;
  padding:11px 12px; box-shadow:0 16px 42px -12px #000; text-decoration:none; color:var(--ink);
  transform:translateX(-120%); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s; }
.chat-notify.show{ transform:translateX(0); opacity:1; }
.chat-notify:hover{ border-color:var(--gold-soft); }
.cn-av{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line); }
.cn-meta{ flex:1; min-width:0; }
.cn-title{ font-family:var(--ui); font-weight:700; font-size:13.5px; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cn-sub{ font-family:var(--body); font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cn-x{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.cn-x:hover{ color:var(--ink); }
@media(max-width:860px){ .chat-notify-stack{ display:none; } }

/* crédito do desenvolvedor no rodapé */
.foot-dev{ text-align:center; margin-top:14px; font-family:var(--ui); font-size:12.5px; letter-spacing:.04em; color:var(--muted); }
.foot-dev a{ color:var(--gold); font-weight:600; }
.foot-dev a:hover{ text-decoration:underline; }

/* ============ Familiar guia 3D no canto inferior esquerdo (desktop) ============ */
.fam-buddy{ position:fixed; left:18px; bottom:18px; z-index:97; }
/* fundo transparente + maior; o 3D "solto" na página (arrastável pela alça ✥) */
.fam-buddy .fb-card{ position:relative; width:280px; background:transparent; border:none;
  box-shadow:none; padding:8px 8px 10px; }
.fam-buddy.min .fb-card{ display:none; }
.fam-buddy:not(.min) .fb-orb{ display:none; }
/* alça de arrastar */
.fb-drag{ position:absolute; top:6px; left:8px; z-index:4; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:rgba(21,19,27,.72); backdrop-filter:blur(4px); color:var(--ink-soft);
  cursor:grab; font-size:14px; line-height:1; display:grid; place-items:center; touch-action:none; }
.fb-drag:hover{ color:var(--gold); border-color:var(--gold-soft); }
.fb-drag:active{ cursor:grabbing; }
/* palco do 3D — maior e com glow atrás pra destacar o objeto */
.fb-stage{ position:relative; width:100%; height:250px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)); }
.fb-stage model-viewer{ position:relative; z-index:1; width:100%; height:100%; background:transparent; --poster-color:transparent; }
.fb-name{ text-align:center; font-family:var(--serif); font-size:15px; color:var(--gold); margin-top:2px; letter-spacing:.03em; text-shadow:0 2px 10px rgba(0,0,0,.85); }
.fb-min{ position:absolute; top:6px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-3); color:var(--ink-soft); cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; }
.fb-min:hover{ color:var(--gold); border-color:var(--gold-soft); }
.fb-bubble{ position:absolute; left:calc(100% + 12px); bottom:46px; width:250px; background:var(--surface-3);
  border:1px solid var(--gold-soft); border-radius:14px 14px 14px 4px; padding:11px 13px; color:var(--ink);
  font-family:var(--body); font-size:14px; line-height:1.45; box-shadow:0 14px 36px -14px #000; }
.fb-bubble::after{ content:""; position:absolute; left:-7px; bottom:10px; width:12px; height:12px; background:var(--surface-3);
  border-left:1px solid var(--gold-soft); border-bottom:1px solid var(--gold-soft); transform:rotate(45deg); }
.fb-ask{ display:flex; gap:6px; margin-top:8px; }
.fb-ask input{ flex:1; min-width:0; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--ink);
  padding:8px 12px; font-family:var(--ui); font-size:13px; }
.fb-ask input:focus{ outline:none; border-color:var(--gold-soft); }
.fb-ask button{ flex:0 0 auto; width:36px; border-radius:50%; border:1px solid var(--gold-soft); background:linear-gradient(180deg,var(--blood),var(--blood-deep));
  color:#fff; cursor:pointer; font-size:13px; }
.fb-orb{ width:58px; height:58px; border-radius:50%; border:1px solid var(--gold-soft); cursor:pointer;
  background:radial-gradient(120% 120% at 50% 30%, var(--surface-3), var(--bg-2)); box-shadow:0 12px 30px -10px #000, inset 0 0 18px rgba(0,0,0,.5);
  font-size:28px; display:grid; place-items:center; transition:.2s; animation:fbFloat 3.4s ease-in-out infinite; }
.fb-orb:hover{ border-color:var(--gold); box-shadow:0 0 24px -6px var(--gold-glow); transform:translateY(-3px); }
#fb-orb-emoji{ font-family:var(--ui); font-weight:700; font-size:20px; letter-spacing:.04em; color:var(--gold); }
@keyframes fbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
/* coordenação com os outros elementos do canto esquerdo */
body.fam-open .chat-notify-stack{ bottom:350px; }
body.fam-min .chat-notify-stack{ bottom:150px; }
@media(max-width:860px){ .fam-buddy{ display:none; } }

/* link de página dentro do balão do familiar */
.fb-bubble .fb-link{ color:var(--gold); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.fb-bubble .fb-link:hover{ color:#ffe9b0; }

/* menu de opções do familiar (⋯): renomear, trocar forma, adereços, histórico */
/* IMPORTANTE: estes painéis usam display:flex, que sobrescreve [hidden]{display:none}.
   Sem esta regra, o painel de histórico (inset:0, opaco) cobre o card e some com o 3D/chat. */
.fb-actions[hidden], .fb-forms[hidden], .fb-history[hidden]{ display:none !important; }
.fb-menu{ position:absolute; top:6px; right:38px; z-index:3; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-3); color:var(--ink-soft); cursor:pointer; font-size:18px; line-height:1; display:grid; place-items:center; padding:0; }
.fb-menu:hover{ color:var(--gold); border-color:var(--gold-soft); }
.fb-actions{ position:absolute; top:36px; right:8px; z-index:6; width:182px; background:var(--surface-3); border:1px solid var(--gold-soft);
  border-radius:12px; box-shadow:0 14px 36px -14px #000; padding:6px; display:flex; flex-direction:column; gap:2px; }
.fb-actions button, .fb-actions a{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink);
  font-family:var(--ui); font-size:13px; padding:8px 10px; border-radius:8px; cursor:pointer; text-decoration:none; }
.fb-actions button:hover, .fb-actions a:hover{ background:var(--bg-2); color:var(--gold); }
.fb-forms{ position:absolute; top:36px; right:8px; z-index:6; width:182px; background:var(--surface-3); border:1px solid var(--gold-soft);
  border-radius:12px; box-shadow:0 14px 36px -14px #000; padding:9px; display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.fb-forms button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; font-size:20px; line-height:1; }
.fb-forms button:hover, .fb-forms button.on{ border-color:var(--gold); box-shadow:0 0 12px -4px var(--gold-glow); }
.fb-history{ position:absolute; inset:0; z-index:7; background:var(--surface-2); border-radius:18px; padding:8px; display:flex; flex-direction:column; }
.fb-history-hd{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 6px; color:var(--gold); font-family:var(--serif); font-size:14px; }
.fb-history-hd button{ background:none; border:0; color:var(--ink-soft); cursor:pointer; font-size:14px; }
.fb-history-hd button:hover{ color:var(--gold); }
.fb-history-body{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; padding:2px; }
.fb-history-body .fh-row{ font-size:12.5px; line-height:1.4; padding:6px 9px; border-radius:9px; max-width:92%; word-break:break-word; }
.fb-history-body .fh-u{ align-self:flex-end; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; }
.fb-history-body .fh-a{ align-self:flex-start; background:var(--surface-3); color:var(--ink); border:1px solid var(--line); }
.fb-history-empty{ color:var(--ink-soft); font-size:12.5px; text-align:center; margin:auto; padding:16px; line-height:1.5; }

/* placeholder enquanto a loja carrega ao vivo (evita flash do conteúdo antigo) */
.loja-loading-msg{ grid-column:1/-1; min-height:200px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:var(--ui); letter-spacing:.06em; }

/* ====== Home: seções alternadas + grade Comunidade & Grimório ====== */
@media(min-width:781px){ .feature-alt .feature-media{ order:2; } }
.feature-media.is-art{ background:radial-gradient(circle at 50% 32%, rgba(96,24,34,.45), var(--bg)); }
.feature-media.is-art .ph{ background-size:contain; background-repeat:no-repeat; }
.feature-media.is-art::after{ box-shadow:inset 0 0 90px 16px rgba(8,7,10,.6); }

.home-explore .explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.explore-card{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; text-decoration:none; padding:26px 22px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); transition:.22s; }
.explore-card:hover{ border-color:var(--gold-soft); transform:translateY(-5px); box-shadow:0 18px 40px -16px var(--glow); }
.explore-ic{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px; border:1px solid var(--gold-soft); color:var(--gold);
  background:radial-gradient(circle at 50% 30%, rgba(120,30,45,.3), var(--bg-2)); }
.explore-ic svg{ width:28px; height:28px; }
.explore-card h3{ font-family:var(--serif); font-size:20px; letter-spacing:.03em; margin:2px 0 0; color:var(--ink); }
.explore-card p{ font-family:var(--body); font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0; flex:1; }
.explore-go{ font-family:var(--ui); font-size:13px; font-weight:600; color:var(--gold); letter-spacing:.02em; }
@media(max-width:900px){ .home-explore .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .home-explore .explore-grid{ grid-template-columns:1fr; } }

/* ====== Mural de atualizações estilo terminal (home) ====== */
.ut-term{ max-width:760px; margin:0 auto; background:#0a0b0d; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 50px -20px #000; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
.ut-bar{ display:flex; align-items:center; gap:8px; padding:9px 14px; background:#15161a; border-bottom:1px solid var(--line); }
.ut-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.ut-dot.r{ background:#ff5f56; } .ut-dot.y{ background:#ffbd2e; } .ut-dot.g{ background:#27c93f; }
.ut-tt{ margin-left:8px; color:var(--muted); font-size:12px; letter-spacing:.02em; }
.ut-body{ padding:14px 16px 16px; font-size:13.5px; line-height:1.5; max-height:360px; overflow:auto; }
.ut-body::-webkit-scrollbar{ width:8px; } .ut-body::-webkit-scrollbar-thumb{ background:#2a2630; border-radius:8px; }
.ut-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.05); }
.ut-time{ color:#6fae6f; flex:0 0 auto; }
.ut-user{ color:var(--gold); flex:0 0 auto; }
.ut-user b{ font-size:9px; background:linear-gradient(180deg,var(--blood),var(--blood-deep)); color:#fff; border-radius:4px; padding:1px 5px; margin-left:5px; font-weight:700; letter-spacing:.06em; vertical-align:middle; }
.ut-sep{ color:var(--muted); }
.ut-title{ color:#d7e0e6; flex:1; min-width:0; }
.ut-loading, .ut-cursor{ color:#6fae6f; padding:6px 0 2px; }
.ut-blink{ color:var(--gold); animation:utBlink 1s steps(2) infinite; }
@keyframes utBlink{ 50%{ opacity:0; } }
@media(max-width:560px){ .ut-title{ flex-basis:100%; padding-left:2px; } }

/* foto de retrato completa numa band (ex.: Gabriella no Tarô) */
.feature-media.is-photo{ aspect-ratio:4/5; }
.feature-media.is-photo .ph-blur{ background-size:cover; background-position:center; filter:blur(24px) brightness(.45); transform:scale(1.15); }
.feature-media.is-photo .ph-fit{ background-size:contain; background-repeat:no-repeat; background-position:center; }

/* ====== Banner de consentimento / privacidade (LGPD) ====== */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:130; display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; padding:14px 22px; background:rgba(10,9,13,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--gold-soft); box-shadow:0 -12px 34px -14px #000; transition:transform .32s ease, opacity .32s ease; }
.cookie-bar.hide{ transform:translateY(110%); opacity:0; }
.cookie-txt{ font-family:var(--body); font-size:14px; color:var(--ink-soft); max-width:820px; line-height:1.55; }
.cookie-txt a{ color:var(--gold); text-decoration:underline; }
.cookie-acts{ display:flex; gap:10px; flex:0 0 auto; align-items:center; }
.cookie-bar .btn{ padding:9px 20px; font-size:13px; }
@media(max-width:600px){ .cookie-bar{ gap:10px; padding:12px 14px; } .cookie-txt{ font-size:12.5px; } .cookie-bar .btn{ padding:8px 14px; } }

/* ====== Denunciar / Bloquear ====== */
.safety-modal{ position:fixed; inset:0; z-index:3400; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(4,4,6,.74); backdrop-filter:blur(4px); }
.safety-box{ width:100%; max-width:440px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 24px 60px -18px #000; }
.sf-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sf-head b{ font-family:var(--serif); font-size:18px; color:var(--gold); }
.sf-x{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; }
.sf-x:hover{ color:var(--ink); }
.sf-sub{ font-family:var(--body); font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px; }
.sf-reasons{ display:grid; gap:4px; margin-bottom:12px; }
.sf-reason{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; cursor:pointer; font-family:var(--ui); font-size:13.5px; color:var(--ink-soft); border:1px solid transparent; }
.sf-reason:hover{ background:var(--bg-2); }
.sf-reason input{ accent-color:var(--blood); }
.sf-note{ width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:9px 12px; font-family:var(--body); font-size:14px; resize:vertical; }
.sf-note:focus{ outline:none; border-color:var(--gold-soft); }
.sf-acts{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.sf-acts .btn{ padding:9px 18px; font-size:13px; }
.sf-msg{ font-family:var(--ui); font-size:13px; color:var(--blood-bright); margin-top:10px; min-height:16px; text-align:center; }
.sf-msg.ok{ color:#7ddf8e; }