/* ═══════════════════════════════════════════════════════════
   TEMA PRETO LUXO
   ÍNDICE: 1 Variáveis/reset · 2 Header · 3 Menu do usuário · 4 Chips
   5 Stories/busca · 6 Cards · 7 Zoom/viewer · 8 Comentários
   9 Modais/barra/toast · 10 SEO

   CAMADAS: 900 faixa preta · 9000 zoom/viewer · 9500 header
            9999+ modais, comentários e toast
   ═══════════════════════════════════════════════════════════ */

/* 1. VARIÁVEIS E RESET */
:root {
  color-scheme: dark;

  --bg:#000; --surface:#111;   --surface-2:#1a1a1a;  --line:#2a2417;  --text:#f5f1e6; --text2:#a6a5a4;--muted:#b5b5b3;--accent:#faa914;--accent-2:#d1ad6b;--accent-soft:#1c1708; --on-accent:#111; --red:#e8192c;  

  --font-serif: Georgia, "Times New Roman", Times, "Noto Serif", "DejaVu Serif", "Liberation Serif", serif;
  --font-sans: var(--font-serif);
  --display: var(--font-sans); --body: var(--font-sans); --displayv: var(--font-sans);

  --shadow-light:rgba(0,0,0,.4); --shadow-medium:rgba(0,0,0,.6);
  --z-bottom-nav:1000; --z-modal-overlay:2000; --z-modal-sheet:2001;

  --header-h:50px; --cat-h:34px; --logo-h:18px;
  --z-header-bg:900; --z-header:9500; --z-toast:10100;

  --sombra-baixo:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  --sombra-topo:linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
  --card-ar:9/16;   /* formato do card: 9/16 Snapchat · 2/3 · 3/4 mais baixos */
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html, body { width:100%; max-width:100%; margin:0 auto; font-weight:700; background:var(--bg); color:var(--text); font-family:Georgia,"Times New Roman",serif; line-height:1.5; -webkit-tap-highlight-color:transparent; }
html { overflow-x:hidden; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { padding:0 3px; overflow-x:clip; }
a { text-decoration:none; color:inherit; }
img, video { display:block; max-width:100%; -webkit-user-select:none; user-select:none; }
button, input, select, textarea, optgroup { font-family:inherit; font-size:inherit; font-weight:700; }
:where(svg:not([width]):not([height])) { width:1.25em; height:1.25em; flex-shrink:0; }
main { padding-top:var(--header-h); }

/* 2. HEADER */
body::before { content:""; position:fixed; inset:0 0 auto 0; height:var(--header-h); background:#000; z-index:var(--z-header-bg); pointer-events:none; }

.vei-titulo {color:#ed0202;font-weight:900;text-shadow: 0 -2px 8px rgba(0, 0, 0, 0.85),
             0 -5px 16px rgba(0, 0, 0, 0.45);}






.site-header { position:fixed; inset:0 0 auto 0; z-index:var(--z-header); padding:.3rem; background:transparent; pointer-events:none; }
.site-header::after { content:""; position:absolute; inset:0 0 -12px 0; z-index:-1; background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent); pointer-events:none; }
.logo-area, .cat-texto, .user-menu { pointer-events:auto; }
.header-top { display:flex; align-items:center; justify-content:space-between; gap:.4rem; max-width:100%; margin:0 auto; }
.logo-area { display:flex; align-items:center; flex:0 0 auto; }
.logo-img { height:var(--logo-h); width:auto; flex-shrink:0; }

.cat-texto { flex:1 1 0; min-width:0; height:var(--cat-h); display:flex; align-items:center; gap:.8rem; padding:5px 12px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; }
.cat-texto::-webkit-scrollbar { display:none; }
.cat-texto > :first-child { margin-left:auto; }
.cat-texto > :last-child  { margin-right:auto; }
.cat-texto__item { flex:0 0 auto; scroll-snap-align:center; font-size:13px; font-weight:400; color:#cfc9b8; -webkit-text-fill-color:#cfc9b8; text-shadow:0 1px 2px rgba(0,0,0,.7); white-space:nowrap; -webkit-user-select:none; user-select:none; }
.cat-texto__item.on { color:#fff; -webkit-text-fill-color:#fff; font-weight:700; }

/* 3. MENU DO USUÁRIO */
.user-menu { position:relative; flex:0 0 auto; }
.user-menu-btn { position:relative; display:flex; align-items:center; justify-content:center; width:35px; height:35px; padding:0; border-radius:50%; background:var(--surface-2); border:2px solid var(--line); cursor:pointer; overflow:visible; transition:border-color .2s, background-color .2s, transform .2s; }
.user-menu-btn:hover { border-color:var(--accent); background:var(--accent-soft); transform:scale(1.04); }
.user-menu-btn.logado { border-color:var(--accent); background:var(--accent-soft); }
.user-header-avatar-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; font-weight:800; font-size:14px; color:var(--accent-2); }
.user-header-avatar-inner svg { width:18px; height:18px; }
.user-header-avatar-inner img { width:100%; height:100%; object-fit:cover; }
.user-plus-badge { position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:11px; line-height:1; font-weight:800; pointer-events:none; }

.user-menu-panel { position:absolute; top:calc(100% + 8px); right:0; width:min(320px, calc(100vw - 24px)); max-height:0; padding:0; overflow:hidden; background:var(--surface); border:0 solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.7); opacity:0; visibility:hidden; content-visibility:hidden; transform:translateY(-8px); transition:max-height .25s ease, opacity .2s ease, transform .2s ease, padding .2s ease, visibility 0s linear .25s; }
.user-menu-panel.open { max-height:min(640px,80vh); padding:10px; overflow-y:auto; border-width:1px; opacity:1; visibility:visible; content-visibility:visible; transform:none; transition-delay:0s; }

.user-badge-header { display:flex; align-items:center; gap:8px; padding:6px 10px 10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.user-avatar-mini { position:relative; width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:bold; cursor:pointer; }
.user-avatar-mini img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.user-badge-info { flex:1; min-width:0; overflow:hidden; }
.user-nome-txt, .user-email-txt { line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-nome-txt { font-size:11px; color:var(--text); }
.user-email-txt { font-size:9px; color:var(--muted); }

#header-user-badge, #user-menu-logged-group { display:none; flex-direction:column; }
.menu-guest-container { display:flex; flex-direction:column; }

.user-menu-panel .menu-link, .user-menu-panel .user-menu-item { display:flex; align-items:center; gap:12px; min-height:54px; padding:8px 10px; border-radius:12px; color:var(--text); font-size:13.5px; font-weight:650; cursor:pointer; transition:background-color .15s; }
.user-menu-panel .menu-link:hover, .user-menu-panel .user-menu-item:hover { background:var(--surface-2); }
.user-menu-item { gap:8px; font-size:.84rem; font-weight:600; }
.user-menu-item--perigo { color:#f87171 !important; }
.menu-icone { width:38px; height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:var(--surface-2); color:var(--accent); font-size:20px; line-height:1; }
.menu-icone svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu-texto { flex:1; min-width:0; }
.menu-seta { color:#6b6556; font-size:21px; line-height:1; }
.menu-link.cadastro .menu-icone { background:var(--accent); color:var(--on-accent); }
#user-menu-excluir-conta .menu-icone { background:#2a1212; color:#f87171; }
@media (prefers-reduced-motion:reduce) { .user-menu-panel, .user-menu-btn { transition:none; } }

/* 4. CARROSSEL DE ÍCONES E CHIPS */
.inf-car-outer { background:var(--bg); padding:10px 0; }
.inf-car-vp { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.inf-car-vp::-webkit-scrollbar { display:none; }
.inf-car-track { display:flex; gap:12px; width:max-content; min-width:0; margin:0 auto; padding:0 12px; }

/* Todos os chips no mesmo visual (sem as 8 cores: mais leve e mais elegante) */
#js-chips .chip-icon { display:flex; flex-direction:column; align-items:center; flex:0 0 55px; cursor:pointer; padding:4px 2px 6px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.chip-icon .chip-circulo { display:flex; align-items:center; justify-content:center; width:48px; height:48px; font-size:1.6rem; line-height:1; background:transparent !important; transition:transform .2s, opacity .2s; }
.chip-icon .chip-texto { font-size:.65rem; text-align:center; color:var(--text2); font-family:var(--displayv); text-transform:uppercase; line-height:1.1; }
.chip-icon.on { border-color:var(--accent); background:var(--accent-soft); }
.chip-icon.on .chip-texto { color:var(--accent-2); }
.chip-icon.on .chip-circulo { transform:scale(.95); }

.chips-scroll { display:flex; gap:1.53rem; padding:.34rem 0; margin:1px 0; min-height:41px; overflow-x:auto; scrollbar-width:none; background:var(--bg); }
.chips-scroll::-webkit-scrollbar { display:none; }
.chips-scroll > :first-child { margin-left:auto; }
.chips-scroll > :last-child  { margin-right:auto; }
.chip { flex:0 0 auto; padding:.25rem .6rem; font-size:.9rem; font-family:var(--font-sans); color:var(--text2); white-space:nowrap; cursor:pointer; -webkit-user-select:none; user-select:none; border-radius:8px; }
.chip:active { transform:scale(.95); }
.chip.on { background:var(--accent-soft); color:var(--accent-2); }

/* 5. STORIES, BUSCA E FILTROS */


/* 5. STORIES, BUSCA E FILTROS */
.stories-thumbs-outer { width:100%; overflow-x:auto; scrollbar-width:none; padding:20px 0 8px; background:var(--bg); }
.stories-thumbs-outer::-webkit-scrollbar { display:none; }
.stories-thumbs-track { display:flex; gap:10px; padding:0 4px 2px; width:max-content; margin:0 auto; }
.story-thumb-item { flex:0 0 auto; width:84px; }
.pg-home #secao-stories { min-height:140px; }
.story-thumb-ring { position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; background:var(--surface-2); border:3px solid transparent; background-clip:padding-box; border-radius:50%; contain:layout paint; outline:2px solid transparent; outline-offset:-1px;}

.story-thumb-ring::before { content:""; position:absolute; inset:0; border-radius:50%; padding:3px;
background:linear-gradient(  135deg,#833AB4 0%,#C13584 30%,#FD1D1D 60%,#FCAF45 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;pointer-events:none; z-index:2;}
.story-thumb-ring > img {position:absolute;inset:0;width:100%; height:100%; object-fit:cover; background:var(--surface-2);}
.story-thumb-ring .story-thumb-fallback {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--accent-2);font-size:1.4rem;font-weight:800;}
.story-thumb-label {display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;word-break:break-word;font-size:.62rem;line-height:1.2;text-align:center;max-width:100%;margin-top:3px;}
#categoriaTitulo { padding:10px; }
#categoriaTitulo h2 { font-size:1rem; line-height:24px; color:#fff; }
html.tem-cat #categoriaTitulo { display:block !important; min-height:44px; }

.filter-zone { height:48px; background:var(--bg); border-radius:28px; display:flex; align-items:center; }
.search-bar { display:flex; align-items:center; gap:4px; padding:.1rem; width:100%; }
.search-input { flex:1 1 auto; min-width:0; background:var(--surface-2); border:2px solid #63615d; border-radius:20px; padding:.6rem .8rem; margin:6px 4px; font-size:.78rem; outline:none; transition:border-color .2s, box-shadow .2s; font-weight:700; }
.search-input:focus { border-color:#ad8e53; box-shadow:0 0 0 2px rgba(241,210,122,.25); }
.search-input::placeholder { color:#fff; }
.btn-filter-all { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.2rem; max-width:100px; background:var(--accent); color:#8a6508; border:none; border-radius:16px; padding:.4rem .55rem !important; font-size:.8rem !important;font-weight:700; white-space:nowrap; cursor:pointer; visibility:hidden;
  border: 1px solid #C13584;
box-shadow:
  0 0 0 3px rgba(131, 58, 180, 0.45),
  0 0 8px rgba(193, 53, 132, 0.35);
}




.btn-filter-all.visivel { visibility:visible; }

/* 6. CARDS E GRID */
#grid-cards.cards { min-height:70vh; }
#grid-cards.cards, ul.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; list-style:none; padding:10px 0 80px; width:100%; }
#grid-cards.cards > li, ul.cards > li { min-width:0; width:100%; }
@media (min-width:640px)  { #grid-cards.cards { min-height:480px; } #grid-cards.cards, ul.cards { gap:14px; padding:0 16px 90px; } }
@media (min-width:1024px) { #grid-cards.cards, ul.cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0 20px 100px; } }
@media (min-width:1280px) { #grid-cards.cards, ul.cards { grid-template-columns:repeat(4,minmax(0,1fr)); } }

.card { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; color:var(--text); }
#grid-cards .card { position:relative; display:block; background:#000; }

.card-image { position:relative; width:100%; aspect-ratio:var(--ar, var(--card-ar)); overflow:hidden; background:var(--surface-2); cursor:pointer; contain:layout paint; }
.card-image > img, .card-image > video, .card-image > .card-video-wrap, .zoom-midia-el, .viewer-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-image > .card-video-wrap video { width:100%; height:100%; object-fit:cover; }

/* Título no topo da foto */
.card-titulo-img { position:absolute; inset:0 0 auto 0; padding:8px 10px 24px; display:flex; align-items:center; gap:6px; color:#fff; font-size:.85rem; line-height:1.2; background:var(--sombra-topo); pointer-events:none; font-weight:900; }
.card-titulo-img .titulo-texto { flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .card-image.tem-video .card-titulo-img { pointer-events:auto; }

/* NA GRADE: só título (topo) e cidade (embaixo).
   Curtir, comentar, compartilhar, redes e descrição só aparecem no zoom/viewer. */
#grid-cards .card-actions, #grid-cards .redes-sociais, #grid-cards .zoom-desc { display:none; }
#grid-cards .card-zoom-dados { position:absolute; inset:auto 0 0 0; padding:24px 8px 6px; background:var(--sombra-baixo); pointer-events:none; }
.card-rodape-linha { display:flex; align-items:center; gap:6px; }
.card-rodape-cidade { flex:1; min-width:0; font-size:.75rem; color:var(--accent-2); text-align:left !important; overflow-wrap:break-word; line-height:1.25; }
.card-content { background:transparent; padding:0; border:0; }

/* Ícones (só no zoom e no viewer): um visual só, branco sobre a foto */
.zoom-info, .viewer-info { --ic:17px; --ic-rede:17px; }
.zoom-info   { --ic:20px; --ic-rede:22px; }
.viewer-info { --ic:24px; }
.card-actions { display:flex; align-items:center; gap:4px; }
.icone-social { display:flex; align-items:center; gap:6px; background:none; border:none; padding:6px; border-radius:8px; cursor:pointer; color:#fff; font-size:.8rem; transition:transform .15s; }
.icone-social:active { transform:scale(.92); }
.icone-social svg { width:var(--ic); height:var(--ic); stroke:currentColor; fill:none; stroke-width:2; display:block; flex-shrink:0; }
.icone-curtir.curtiu { color:#ef4444; }
.icone-curtir.curtiu svg { fill:currentColor; }
.social-contador { font-size:.8rem; font-weight:600; min-width:12px; line-height:1; }
.redes-sociais { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.icone-rede { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; background:rgba(0,0,0,.5); transition:transform .15s; }
.icone-rede:active { transform:scale(.9); }
.icone-rede svg { width:var(--ic-rede); height:var(--ic-rede); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* 7. ZOOM E VIEWER */
#zoom-overlay, .viewer-modal { position:fixed; inset:0; z-index:9000; background:#000; }
.zoom-midia, .viewer-slide { position:relative; overflow:hidden; background:#000; contain:layout paint; }
.zoom-info, .viewer-info { position:absolute; inset:auto 0 0 0; color:#fff; line-height:1.3; text-align:left; background:var(--sombra-baixo); }
.zoom-fechar, .viewer-close { display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; color:#fff; line-height:1; cursor:pointer; pointer-events:auto !important; }

#zoom-overlay { display:flex; align-items:center; justify-content:center; animation:zoomFundo .2s ease; }
#zoom-overlay .zoom-card { position:relative; width:100vw; height:100dvh; background:transparent; animation:zoomEntra .25s ease; }
.zoom-fechar { position:absolute; margin-top:20px; right:6px; z-index:20; width:40px; height:40px; font-size:26px; background:rgba(0,0,0,.45); }
.zoom-midia { width:100%; height:100%; line-height:0; }
.zoom-info { z-index:10 !important; padding:52px 14px calc(env(safe-area-inset-bottom,0px) + 14px); pointer-events:auto !important; }
.zoom-midia.tem-video .zoom-info { inset:0 0 auto 0; padding:calc(var(--header-h) + 8px) 52px 32px 14px; background:var(--sombra-topo); }
.zoom-titulo-linha { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.zoom-info .zoom-titulo { font-size:1.05rem; font-weight:800; }
.zoom-info .zoom-desc { margin:0 0 10px; font-size:.85rem; line-height:1.35; color:#e8e4d8; }
.zoom-info .card-actions { gap:16px; margin:0 0 10px; }
.zoom-info .card-rodape-linha { justify-content:space-between; gap:12px; flex-wrap:wrap; }
.zoom-info .card-rodape-cidade { flex:0 1 auto; font-size:.82rem; }
.zoom-info .redes-sociais { gap:12px; }
.zoom-info .icone-rede { width:auto; height:auto; padding:4px; }

@keyframes zoomFundo { from { opacity:0; } to { opacity:1; } }
@keyframes zoomEntra { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }

.viewer-modal { display:none; flex-direction:column; opacity:0; transition:opacity .25s; }
.viewer-modal.aberto { display:flex; opacity:1; }
.viewer-header { position:absolute; inset:0 0 auto 0; z-index:20; display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top,0px) + 5px) 8px 8px; pointer-events:none; }
.viewer-contador { pointer-events:auto; }
.viewer-close { margin-top:25px; width:55px; height:55px; font-size:34px; background:transparent; }
.viewer-body { position:absolute; inset:0; overflow:hidden; background:#000; }
.viewer-track { display:flex; flex-direction:column; height:100%; width:100%; transition:transform .35s cubic-bezier(.25,.8,.25,1); will-change:transform; }
.viewer-slide { flex:0 0 100%; min-width:100%; height:100%; }
.viewer-info { z-index:12; padding:70px 16px calc(env(safe-area-inset-bottom,0px) + 20px); }
.viewer-actions { display:flex; gap:18px; margin-bottom:10px; }
.viewer-actions .icone-social { font-size:14px; }
.viewer-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; font-size:36px; width:48px; height:48px; border-radius:50%; cursor:pointer; z-index:15; display:flex; align-items:center; justify-content:center; }
.viewer-nav:hover { background:rgba(255,255,255,.22); }
.viewer-prev { left:12px; }
.viewer-next { right:12px; }
@media (max-width:640px) { .viewer-nav { display:none; } }

/* 8. COMENTÁRIOS */
.comentarios-lista { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:14px; background:var(--bg); }
.comentario-item { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.comentario-avatar { position:relative; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); font-size:.75rem; flex-shrink:0; overflow:hidden; }
.comentario-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comentario-conteudo { width:100%; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.comentarios-post-topo { padding:10px; }
.comentario-topo { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.comentario-autor { color:var(--accent-2); font-size:.95rem; }
.comentario-texto { color:#e8e4d8; line-height:1.5; word-break:break-word; font-size:1rem; font-weight:500; }
.comentario-footer { display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.comentario-acao { background:none; border:none; padding:2px 0; cursor:pointer; font-size:.82rem; color:var(--muted); line-height:1; display:flex; align-items:center; gap:5px; }
.comentario-acao:hover { color:var(--text); }
.comentario-acao svg { width:16px !important; height:16px !important; stroke:currentColor; fill:none; stroke-width:2; display:block; }
.comentario-acao.curtido { color:#ef4444; }
.comentario-acao.curtido svg { fill:currentColor; }
.comentario-tempo { font-size:.76rem; color:#fff; font-weight:700; line-height:1; }
.post-topo-horario { color:#fff !important; }

/* ── Formulário de baixo (comentar no post) ── */
.comentarios-form-bottom { padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.comentarios-form-bottom input { flex:1; border:1px solid var(--line); background:var(--surface-2); color:var(--text); outline:none; border-radius:24px; padding:10px 14px; font-size:16px; }
.comentarios-form-bottom input:focus { border-color:var(--accent); }

/* Botão de enviar de BAIXO: regra própria, pelo id */
#btn-enviar-comentario {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:0; outline:0; box-shadow:none;
  -webkit-appearance:none; appearance:none;
  border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  cursor:pointer;
}
#btn-enviar-comentario:active { transform:scale(.92); }

.comentarios-sheet-header { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; }
.btn-fechar-modal { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; }
.comentario-thread { display:flex; flex-direction:column; gap:8px; }
.comentario-respostas { display:flex; flex-direction:column; gap:8px; margin-left:10px; padding-left:10px; border-left:2px solid var(--line); }

/* ── Formulário de resposta (de CIMA, dentro de cada comentário) ── */
.comentario-form-resposta { display:none; align-items:center; gap:8px; }
.comentario-form-resposta.aberto { display:flex; }
.comentario-form-resposta input { padding:8px 12px; border-radius:20px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); outline:none; }
.comentario-form-resposta input:focus { border-color:var(--accent); }

/* Botão de enviar de CIMA: regra própria, sem borda */
.comentario-form-resposta button {
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:0; outline:0; box-shadow:none;
  -webkit-appearance:none; appearance:none;
  border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  cursor:pointer;
}
.comentario-form-resposta button:active { transform:scale(.92); }
.comentario-form-resposta button svg { width:16px; height:16px; }

.comentario-btn-apagar { margin-left:auto; background:none; border:none; padding:2px 0; font-size:.82rem; color:#f87171; cursor:pointer; line-height:1; }
#modal-comentarios.aberto { z-index:10050; }

/* 9. MODAIS, BARRA INFERIOR E TOAST */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9998; display:none; opacity:0; transition:opacity .3s; }
.modal-overlay.aberto { display:block; opacity:1; z-index:9999; }
.modal-overlay.viewer-modal.aberto { display:flex; z-index:9000; }   /* viewer abaixo do header */

.mu-sheet { position:fixed; bottom:0; left:0; width:100%; height:90vh; max-height:100vh; background:var(--surface); color:var(--text); border-top:1px solid var(--line); transform:translateY(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); z-index:9999; box-shadow:0 -10px 30px rgba(0,0,0,.6); overflow-y:auto; padding:0 10px 40px; }
.modal-overlay.aberto .mu-sheet { transform:translateY(0); }
.mu-sheet.mu-sheet-comentarios { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.mu-sheet-comentarios .comentarios-lista { min-height:0; }
.modal-handle { background:#3a3a3a; width:40px; height:4px; margin:8px auto; border-radius:2px; }

#modal-filtros { overscroll-behavior:contain; touch-action:none; }
#modal-filtros .modal-sheet { position:fixed; left:0; bottom:0; width:100%; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; background:var(--surface); color:var(--text) !important; padding:16px 16px 40px; border-radius:20px 20px 0 0; border-top:1px solid var(--line); }
#modal-filtros .modal-top { position:fixed; top:0; left:0; width:100%; height:50px; display:flex; justify-content:space-between; align-items:center; padding:0 12px; background:var(--surface); border-bottom:1px solid var(--line); z-index:10000; }
#modal-filtros .modal-fechar { background:var(--surface-2); border:none; border-radius:50%; width:32px; height:32px; font-size:18px; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; }
#modal-filtros .modal-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }
#modal-filtros .modal-btn-limpar, #modal-filtros .btn-filter-all { width:100%; max-width:none; display:flex; align-items:center; justify-content:center; padding:12px !important; border:none; border-radius:5px; background:var(--accent); color:var(--on-accent); font-family:inherit; font-size:.85rem !important; line-height:1.2; cursor:pointer; visibility:visible; }
html:has(#modal-filtros.aberto), body:has(#modal-filtros.aberto) { overflow:hidden; overscroll-behavior:none; }

.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%;  height:30px; background:var(--surface);  border-bottom:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:center; z-index:950;  }
.nav-item { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:#7a7467; transition:color .2s; min-height:26px; }
.nav-item:hover, .nav-item.active { color:var(--accent); }
.nav-icon { display:flex; align-items:center; justify-content:center; line-height:1; font-size:14px;}
.nav-plus-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.nav-plus-wrap .plus-circle { width:20px; height:20px; background:#f23333; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s;padding:4px; }
/* Ícones da navegação inferior */
.bottom-nav .nav-icon {
  font-size: 14px;
}

/* Ícone da câmera */
.bottom-nav .plus-circle svg {
  width: 16px;
  height: 16px;
  display: block;
  padding:1px;
}

.toast-box { position:fixed; z-index:var(--z-toast); pointer-events:none; }
#site-toast { position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 60px); left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-2); color:var(--text); border:1px solid var(--accent); padding:12px 24px; border-radius:24px; font-size:.9rem; font-weight:600; max-width:85%; text-align:center; z-index:var(--z-toast); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
#site-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* 10. SEO — sempre por último */
.seo-bloco { margin:6px 3px 0; padding:14px 14px 66px; background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--text); font-weight:400; font-size:.85rem; line-height:1.55; contain:layout style; }
.seo-bloco h1 { margin:0 0 8px; font-size:1.1rem; line-height:1.25; font-weight:800; color:var(--accent-2); }
.seo-bloco h2 { margin:16px 0 6px; font-size:.9rem; color:var(--accent-2); }
.seo-bloco p { margin:0 0 8px; color:var(--text2); }
.seo-bloco ul { list-style:none; margin:0; padding:0; }
.seo-lista li { padding:6px 0; border-top:1px solid var(--line); color:var(--text2); }
.seo-lista li strong { color:var(--text); }
.seo-ramos { display:grid; grid-template-columns:1fr; gap:6px; }
.seo-ramos a { display:block; padding:6px 8px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); color:var(--text2); font-size:.78rem; line-height:1.25; text-align:center; overflow-wrap:break-word; }
.seo-ramos a:hover { color:#d1ad6b; border-color:#d1ad6b; }
@media (min-width:1024px) { .seo-ramos { grid-template-columns:repeat(3,1fr); } }
@media (min-width:600px) { .seo-ramos { grid-template-columns:repeat(2,1fr); } }