/* Galeria VHE — estilo perfil do Instagram, fundo escuro que destaca a imagem (ui-ux-pro-max: portfolio/image showcase, motion sutil). */
:root{
  --bg:#ffffff; --surface:#f3f4f6; --surface-2:#e8ebef; --line:#e5e7eb;
  --ink:#0e1116; --ink-soft:#344054; --muted:#667085;
  --accent:#cf1720; --accent-hover:#b5161b; --accent-soft:rgba(207,23,32,.09);
  --wa:#22c55e; --ring:#0e1116; --top-bg:rgba(255,255,255,.94);
  --radius:8px; --radius-lg:12px;
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  --dur:180ms;
}
/* tema escuro: opção do visitante (botão da lua no topo) */
html.dark{
  --bg:#0e1116; --surface:#161b22; --surface-2:#1f2630; --line:rgba(255,255,255,.12);
  --ink:#f8fafc; --ink-soft:#cbd5e1; --muted:#94a3b8;
  --accent-soft:rgba(207,23,32,.18); --ring:#ffffff; --top-bg:rgba(14,17,22,.92);
  --paper:#161b22; --paper-ink:#f8fafc; --paper-muted:#94a3b8; --paper-line:rgba(255,255,255,.12); --paper-pale:#1f2630;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:var(--radius);z-index:50}
.skip:focus{left:8px}

/* topo do site */
.top{position:sticky;top:0;z-index:20;background:var(--top-bg);border-bottom:1px solid var(--line)}
.top-acoes{display:flex;align-items:center;gap:8px;order:2}
.top .nav{order:1;margin-left:auto}
.tema{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color var(--dur)}
.tema:hover{border-color:var(--accent)}
.tema svg{width:18px;height:18px}
.tema .sol{display:none}html.dark .tema .sol{display:block}html.dark .tema .lua{display:none}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.wrap{width:min(1080px,100% - 32px);margin:0 auto}
.top img{width:120px;height:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:10px 12px;border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--ink-soft);min-height:44px;display:inline-flex;align-items:center;transition:background-color var(--dur),color var(--dur)}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);min-height:44px;padding:0 14px;font:500 14px var(--font-body);cursor:pointer}
@media(max-width:820px){
  .menu-btn{display:inline-flex;align-items:center;gap:6px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .nav.aberto{display:flex}
}

/* perfil */
.perfil{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:28px 0 8px}
.avatar{width:84px;height:84px;border-radius:50%;padding:3px;background:conic-gradient(var(--accent),#ff7a59,var(--accent))}
.avatar span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;overflow:hidden}
.avatar img{width:74%;height:auto}
.perfil h1{font:700 22px/1.2 var(--font-display);margin:0 0 6px}
.numeros{display:flex;gap:18px;font-size:14px;color:var(--ink-soft);margin:0 0 8px;padding:0;list-style:none}
.numeros strong{color:var(--ink);font-weight:600}
.bio{grid-column:1/-1;margin:0;color:var(--ink-soft);font-size:15px;max-width:60ch}
.acoes{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius);font:600 14px var(--font-body);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:background-color var(--dur),border-color var(--dur)}
.btn:hover{border-color:var(--ink-soft)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#04210f}
.btn.wa:hover{filter:brightness(1.06)}
.btn svg{width:18px;height:18px}
@media(min-width:720px){.perfil{grid-template-columns:150px 1fr;gap:32px}.avatar{width:150px;height:150px;grid-row:span 3}.bio,.acoes{grid-column:2}.perfil h1{font-size:26px}}

/* destaques (filtro por serviço) */
.destaques{display:flex;gap:16px;overflow-x:auto;padding:18px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.destaques::-webkit-scrollbar{display:none}
.destaque{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--ink-soft);cursor:pointer;font:500 12px var(--font-body);width:76px;padding:0}
.destaque .bola{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);transition:border-color var(--dur)}
.destaque svg{width:26px;height:26px;color:var(--ink)}
.destaque[aria-pressed=true] .bola{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.destaque[aria-pressed=true]{color:var(--ink)}
.destaque span:last-child{text-align:center;line-height:1.25}

/* abas */
.abas{display:flex;justify-content:center;gap:4px;border-top:1px solid var(--line);margin-top:4px}
.aba{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;background:none;border:0;border-top:2px solid transparent;margin-top:-1px;color:var(--muted);font:600 13px var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.aba[aria-selected=true]{color:var(--ink);border-top-color:var(--ink)}
.aba svg{width:16px;height:16px}

/* grade */
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:0 0 40px;list-style:none;margin:0}
@media(min-width:900px){.grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
/* a grade é montada pelo JS: enquanto vazia, ocupa a tela para a chamada de baixo não subir e depois pular (CLS) */
.grade:empty{min-height:100vh}
.quadro{position:relative;aspect-ratio:4/5;background:var(--surface);overflow:hidden;border:0;padding:0;width:100%;cursor:pointer;color:var(--ink);display:block}
.quadro img,.quadro video{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.quadro:hover img,.quadro:hover video{transform:scale(1.03)}
.quadro .tipo{position:absolute;top:8px;right:8px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.quadro .faixa{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:12px;font-weight:600;text-align:left;line-height:1.3}
.quadro.vazio{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);border:1px dashed var(--line)}
.quadro.vazio .marca{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600;padding:8px;text-align:center}
.quadro.vazio .marca svg{width:28px;height:28px}
.vazio-msg{text-align:center;color:var(--muted);padding:40px 0}

/* chamada final */
.chamada{border-top:1px solid var(--line);padding:32px 0 48px;text-align:center}
.chamada h2{font:700 22px/1.25 var(--font-display);margin:0 0 8px}
.chamada p{color:var(--ink-soft);margin:0 0 16px}
.rodape{border-top:1px solid var(--line);padding:20px 0 32px;color:var(--muted);font-size:13px}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* janela do vídeo (modelo da galeria Ancoseg): vídeo à esquerda, painel com título e texto à direita */
:root{--paper:#ffffff;--paper-ink:#0e1116;--paper-muted:#667085;--paper-line:#e5e7eb;--paper-pale:#f6f7f9}
html.dark{--paper:#161b22;--paper-ink:#f8fafc;--paper-muted:#94a3b8;--paper-line:rgba(255,255,255,.12);--paper-pale:#1f2630}
html.g-travado{overflow:hidden}
.g-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:rgba(6,9,14,.92);color:var(--paper-ink)}
.g-dialog[open]{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:20px}
.g-dialog::backdrop{background:transparent}
.gd-box{display:grid;grid-template-columns:auto 400px;grid-template-rows:minmax(0,1fr);height:min(88dvh,860px);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.gd-media{position:relative;height:100%;min-height:0;aspect-ratio:9/16;background:#000;overflow:hidden}
.gd-media video,.gd-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* carrossel de fotos (4:5, como no Instagram) */
/* largura 4:5 pela altura da janela, sem passar do espaço que sobra ao lado do painel (setas + margens = 184px) */
.gd-media.car{aspect-ratio:auto;width:min(calc(min(88dvh,860px)*.8),calc(100vw - 184px - var(--painel,400px)))}
.gd-car{position:absolute;inset:0}
.gd-trilho{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gd-trilho::-webkit-scrollbar{display:none}
.gd-slide{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.gd-car-btn{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#0e1116;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:opacity var(--dur),background-color var(--dur)}
.gd-car-btn:hover{background:#fff}
.gd-car-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gd-car-btn:disabled{opacity:0;pointer-events:none}
.gd-car-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gd-car-btn.ant{left:12px}.gd-car-btn.prox{right:12px}
.gd-conta{position:absolute;top:12px;right:12px;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(14,17,22,.72);color:#fff;font:600 12px/1.4 var(--font-body)}
.gd-pontos{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gd-pontos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.5);transition:background-color .2s,transform .2s}
.gd-pontos i.on{background:#fff;transform:scale(1.3)}
.gd-vazio{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:28px;text-align:center;color:#94a3b8;background:repeating-linear-gradient(135deg,#161b22 0 18px,#1f2630 18px 36px)}
.gd-vazio svg{width:44px;height:44px}
.gd-vazio b{color:#f8fafc;font:600 18px/1.3 var(--font-display)}
.gd-panel{display:flex;flex-direction:column;min-height:0;position:relative;font-family:var(--font-body)}
.gd-head{display:flex;align-items:center;gap:12px;padding:16px 16px 16px 20px;border-bottom:1px solid var(--paper-line)}
.gd-avatar .av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper-pale);border:1px solid var(--paper-line);overflow:hidden;font:700 14px var(--font-body);color:var(--paper-ink)}
.gd-avatar .av img{width:80%;height:auto}
.gd-who{flex:1;min-width:0}
.gd-who b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-collab{font-size:12px;color:var(--paper-muted)}
.gd-collab b{display:inline;color:var(--paper-ink);font-weight:600}
.gd-close{flex:none;width:44px;height:44px;border:0;border-radius:var(--radius);background:transparent;color:var(--paper-ink);cursor:pointer;display:grid;place-items:center;transition:background-color var(--dur)}
.gd-close:hover{background:var(--paper-pale)}
.gd-close svg,.gd-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gd-scroll{flex:1;overflow:auto;padding:20px;overscroll-behavior:contain}
.gd-chip{display:inline-block;padding:5px 9px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.3px}
.gd-title{margin:12px 0 14px;font:700 21px/1.3 var(--font-display);letter-spacing:-.2px;color:var(--paper-ink)}
.gd-caption{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--paper-ink);white-space:pre-line;overflow-wrap:anywhere}
.gd-cap-user{font-weight:700}
.gd-date{display:block;font-size:12px;color:var(--paper-muted);margin-bottom:14px}
.gd-date:empty{display:none}
.gd-servico{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--accent)}
.gd-servico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.gd-actions{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border-top:1px solid var(--paper-line)}
.gd-actions button,.gd-actions a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;border:1px solid var(--paper-line);border-radius:var(--radius);background:var(--paper);color:var(--paper-ink);font:600 12px/1.2 var(--font-body);cursor:pointer;transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.gd-actions button:hover,.gd-actions a:hover{border-color:var(--accent);color:var(--accent);background:var(--paper-pale)}
.gd-actions svg{width:24px;height:24px;fill:currentColor}
.gd-actions .gd-whats svg{fill:#1fa855}
.g-dialog :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gd-toast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);margin:0;padding:9px 14px;border-radius:var(--radius);background:var(--paper-ink);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.gd-toast.show{opacity:1;transform:translate(-50%,0)}
.gd-nav{width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--paper-ink);cursor:pointer;display:grid;place-items:center;transition:background-color var(--dur),opacity var(--dur)}
.gd-nav:hover{background:#fff}
.gd-nav:disabled{opacity:0;pointer-events:none}
@media(max-width:1100px){.gd-box{grid-template-columns:auto 340px;--painel:340px}}
@media(max-width:820px){
  .g-dialog{padding:0}
  .g-dialog[open]{display:block}
  .gd-box{display:flex;flex-direction:column;width:100%;height:100dvh;border-radius:0}
  .gd-media{flex:none;width:100%;height:56dvh;aspect-ratio:auto}
  .gd-media.car{width:100%;height:min(125vw,62dvh)}
  /* no carrossel o arrastar e as setas passam as fotos: as setas de post somem para não brigar com elas */
  .e-car .gd-nav{display:none}
  .gd-conta{right:auto;left:12px}
  .gd-panel{flex:1}
  .gd-head{padding:12px 64px 12px 16px}
  .gd-close{position:fixed;top:10px;right:10px;z-index:3;background:rgba(6,9,14,.7);color:#fff}
  .gd-close:hover{background:rgba(6,9,14,.95)}
  .gd-nav{position:fixed;top:28dvh;z-index:3;width:44px;height:44px;margin-top:-22px;background:rgba(255,255,255,.8)}
  .gd-prev{left:8px}.gd-next{right:8px}
  .gd-scroll{padding:16px}
  .gd-title{font-size:18px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.gd-toast{transform:translate(-50%,0)}}
/* centraliza os destaques quando cabem; no celular continua rolando de lado sem cortar o primeiro */
.destaque:first-child{margin-left:auto}.destaque:last-child{margin-right:auto}

/* topo animado (mesma animação da página inicial: partículas ligadas; vermelho no claro, azul do logo no escuro) */
:root{--hero-bg:#fafafa;--orb-1:#e31e24;--orb-2:#00a9e8}
html.dark{--hero-bg:#0b0e13;--orb-1:#00a9e8;--orb-2:#1e3a5f}
.g-hero{position:relative;overflow:hidden;background:var(--hero-bg);border-bottom:1px solid var(--line)}
#particles-galeria{position:absolute;inset:0;z-index:0;opacity:.6}
#particles-galeria canvas{display:block}
.g-hero .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.16;pointer-events:none;z-index:0;width:420px;height:420px}
.g-hero .orb-1{background:radial-gradient(circle,var(--orb-1),transparent 60%);top:-160px;left:-120px;animation:g-flutua 9s ease-in-out infinite}
.g-hero .orb-2{background:radial-gradient(circle,var(--orb-2),transparent 60%);bottom:-180px;right:-120px;animation:g-flutua 11s ease-in-out infinite reverse}
@keyframes g-flutua{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
.g-hero-in{position:relative;z-index:1;pointer-events:none}
.g-hero-in a,.g-hero-in button{pointer-events:auto}
.g-hero .destaques{padding-bottom:22px;min-height:140px} /* espaço reservado: as bolinhas entram pelo JS e não podem empurrar a grade (CLS) */
html[data-motion=off] .g-hero .orb{animation:none}
@media(max-width:600px){.g-hero .orb{width:260px;height:260px}}
@media(prefers-reduced-motion:reduce){.g-hero .orb{animation:none}}
html.dark #particles-galeria{opacity:.95}