/* ============================================================
   OFICIAL GEEK — Design System
   v1.0 | Carregado globalmente em todas as páginas
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. TOKENS — fonte única de verdade para todo o site
   ════════════════════════════════════════════════════════════ */
:root {

  /* ── Cores ──────────────────────────────────────────────── */
  --og-yellow:        #F4EC00;
  --og-yellow-hover:  #d4cc00;
  --og-yellow-text:   #b8a800;   /* amarelo legível sobre branco */
  --og-black:         #070707;
  --og-dark:          #111111;
  --og-dark-2:        #1a1a1a;
  --og-bg:            #f2f2f2;
  --og-surface:       #ffffff;
  --og-text-1:        #111111;   /* títulos */
  --og-text-2:        #333333;   /* body */
  --og-text-3:        #555555;   /* secondary */
  --og-text-muted:    #888888;   /* meta, captions */
  --og-border:        rgba(0,0,0,.07);
  --og-border-strong: rgba(0,0,0,.14);

  /* ── Cores por categoria ────────────────────────────────── */
  --cat-animes:    #7c3aed;
  --cat-filmes:    #dc2626;
  --cat-series:    #2563eb;
  --cat-jogos:     #16a34a;
  --cat-esportes:  #ea580c;
  --cat-famosos:   #db2777;
  --cat-eventos:   #0891b2;
  --cat-veredito:  #b8a800;
  --cat-uncategorized: #666666;

  /* ── Tipografia ─────────────────────────────────────────── */
  --og-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --og-font-read: 'Lora', Georgia, 'Times New Roman', serif; /* corpo editorial */

  /* Escala de tamanhos */
  --og-fs-2xs:   10px;                          /* badges, labels */
  --og-fs-xs:    11px;                          /* meta, captions */
  --og-fs-sm:    12px;                          /* small UI */
  --og-fs-base:  13px;                          /* cards, UI */
  --og-fs-md:    15px;                          /* corpo de artigo */
  --og-fs-lg:    17px;                          /* h4, card featured */
  --og-fs-xl:    20px;                          /* h3 artigo */
  --og-fs-2xl:   24px;                          /* h2 artigo */
  --og-fs-3xl:   clamp(26px, 3.2vw, 34px);     /* h1 artigo */
  --og-fs-hero:  clamp(18px, 2vw, 22px);        /* título hero card */

  /* Pesos */
  --og-fw-normal:    400;
  --og-fw-medium:    500;
  --og-fw-semibold:  600;
  --og-fw-bold:      700;
  --og-fw-black:     800;

  /* Entrelinhas */
  --og-lh-tight:   1.15;
  --og-lh-snug:    1.28;
  --og-lh-normal:  1.45;
  --og-lh-relaxed: 1.65;
  --og-lh-loose:   1.8;

  /* Letter-spacing */
  --og-ls-tight:  -0.02em;
  --og-ls-normal: 0;
  --og-ls-wide:   0.04em;
  --og-ls-wider:  0.07em;

  /* ── Espaçamento (base 4 px) ────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Raios ──────────────────────────────────────────────── */
  --og-r-sm:  2px;
  --og-r:     4px;
  --og-r-md:  6px;
  --og-r-lg:  12px;

  /* ── Sombras ────────────────────────────────────────────── */
  --og-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --og-shadow-sm: 0 2px 6px rgba(0,0,0,.07);
  --og-shadow:    0 4px 14px rgba(0,0,0,.09);
  --og-shadow-lg: 0 8px 28px rgba(0,0,0,.12);

  /* ── Layout ─────────────────────────────────────────────── */
  --og-max-width:     1200px;
  --og-content-width: 720px;
  --og-narrow-width:  600px;
}


/* ════════════════════════════════════════════════════════════
   2. RESET GLOBAL — fonte e box-model
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-base) !important;
  font-weight: var(--og-fw-normal) !important;
  line-height: var(--og-lh-relaxed) !important;
  color: var(--og-text-2) !important;
  background-color: var(--og-bg) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}


/* ════════════════════════════════════════════════════════════
   3. TIPOGRAFIA GLOBAL — headings normalizados
   Independente de como o redator escreve, a hierarquia é
   sempre a mesma. Usa !important para sobrescrever Elementor
   e UICore sem quebrar layouts do Vault.
   ════════════════════════════════════════════════════════════ */

/* --- Headings base ---------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--og-font) !important;
  font-weight: var(--og-fw-bold) !important;
  line-height: var(--og-lh-snug) !important;
  letter-spacing: var(--og-ls-tight) !important;
  color: var(--og-text-1) !important;
  margin-top: 0 !important;
}

/* Escala de headings — só os não-UICore/Elementor */
:not(.elementor-widget-heading):not(.uicore-navbar) h1,
:not(.elementor-widget-heading):not(.uicore-navbar) .h1 {
  font-size: var(--og-fs-3xl) !important;
  font-weight: var(--og-fw-black) !important;
  line-height: var(--og-lh-tight) !important;
}

:not(.elementor-widget-heading):not(.uicore-navbar) h2,
:not(.elementor-widget-heading):not(.uicore-navbar) .h2 {
  font-size: var(--og-fs-2xl) !important;
  font-weight: var(--og-fw-bold) !important;
}

:not(.elementor-widget-heading):not(.uicore-navbar) h3,
:not(.elementor-widget-heading):not(.uicore-navbar) .h3 {
  font-size: var(--og-fs-xl) !important;
}

:not(.elementor-widget-heading):not(.uicore-navbar) h4,
:not(.elementor-widget-heading):not(.uicore-navbar) .h4 {
  font-size: var(--og-fs-lg) !important;
}

:not(.elementor-widget-heading):not(.uicore-navbar) h5,
:not(.elementor-widget-heading):not(.uicore-navbar) .h5 {
  font-size: var(--og-fs-base) !important;
  font-weight: var(--og-fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--og-ls-wider) !important;
}

:not(.elementor-widget-heading):not(.uicore-navbar) h6,
:not(.elementor-widget-heading):not(.uicore-navbar) .h6 {
  font-size: var(--og-fs-sm) !important;
  font-weight: var(--og-fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--og-ls-wider) !important;
}


/* ════════════════════════════════════════════════════════════
   4. POST ÚNICO (single.php via UICore)
   ════════════════════════════════════════════════════════════ */

/* Título do artigo */
.entry-title,
.uicore-post-content .entry-title,
h1.entry-title {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-3xl) !important;
  font-weight: var(--og-fw-black) !important;
  line-height: var(--og-lh-tight) !important;
  letter-spacing: var(--og-ls-tight) !important;
  color: var(--og-text-1) !important;
  margin-bottom: var(--sp-4) !important;
  max-width: var(--og-content-width);
}

/* Meta linha (autor, data, categoria) */
.uicore-entry-meta,
.uicore-single-header .uicore-entry-meta {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-xs) !important;
  font-weight: var(--og-fw-normal) !important;
  color: var(--og-text-muted) !important;
  letter-spacing: 0 !important;
  line-height: var(--og-lh-normal) !important;
}

.uicore-entry-meta a,
.uicore-entry-meta .uicore-post-category a {
  color: var(--og-text-muted) !important;
  font-weight: var(--og-fw-semibold) !important;
  text-decoration: none !important;
}
.uicore-entry-meta a:hover { color: var(--og-text-1) !important; }

/* Imagem de destaque do post */
.uicore-feature-img-wrapper img,
.uicore-feature-img-wrapper .wp-post-image {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: cover !important;
  border-radius: var(--og-r-md) !important;
  display: block !important;
  margin-bottom: var(--sp-6) !important;
}


/* ════════════════════════════════════════════════════════════
   5. CONTEÚDO EDITORIAL (entry-content)
   Normaliza TUDO que o redator escreve no editor
   ════════════════════════════════════════════════════════════ */

.entry-content,
.uicore-post-content .entry-content {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-md) !important;
  font-weight: var(--og-fw-normal) !important;
  line-height: var(--og-lh-relaxed) !important;
  color: var(--og-text-2) !important;
  max-width: var(--og-content-width);
}

/* Parágrafos — Lora para leitura fluida */
.entry-content p {
  font-family: var(--og-font-read) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  margin-bottom: var(--sp-5) !important;
  color: #2a2a2a !important;
  letter-spacing: .01em !important;
}

/* Listas também em Lora para consistência de leitura */
.entry-content li {
  font-family: var(--og-font-read) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* Headings dentro do conteúdo editorial — escala fixa */
.entry-content h1,
.entry-content h2 {
  font-size: var(--og-fs-2xl) !important;
  font-weight: var(--og-fw-bold) !important;
  line-height: var(--og-lh-snug) !important;
  color: var(--og-text-1) !important;
  margin: var(--sp-8) 0 var(--sp-3) !important;
  letter-spacing: var(--og-ls-tight) !important;
}

.entry-content h3 {
  font-size: var(--og-fs-xl) !important;
  font-weight: var(--og-fw-bold) !important;
  line-height: var(--og-lh-snug) !important;
  color: var(--og-text-1) !important;
  margin: var(--sp-6) 0 var(--sp-2) !important;
}

.entry-content h4 {
  font-size: var(--og-fs-lg) !important;
  font-weight: var(--og-fw-semibold) !important;
  color: var(--og-text-1) !important;
  margin: var(--sp-5) 0 var(--sp-2) !important;
}

.entry-content h5,
.entry-content h6 {
  font-size: var(--og-fs-base) !important;
  font-weight: var(--og-fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--og-ls-wider) !important;
  color: var(--og-text-1) !important;
  margin: var(--sp-5) 0 var(--sp-2) !important;
}

/* Links no conteúdo */
.entry-content a {
  color: var(--og-text-1) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--og-yellow) !important;
  text-underline-offset: 3px !important;
  font-weight: var(--og-fw-medium) !important;
  transition: color .15s !important;
}
.entry-content a:hover { color: var(--og-yellow-text) !important; }

/* Listas */
.entry-content ul,
.entry-content ol {
  font-size: var(--og-fs-md) !important;
  line-height: var(--og-lh-relaxed) !important;
  padding-left: var(--sp-5) !important;
  margin-bottom: var(--sp-4) !important;
}
.entry-content li { margin-bottom: var(--sp-1) !important; }

/* Blockquote */
.entry-content blockquote {
  border-left: 3px solid var(--og-yellow) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  margin: var(--sp-6) 0 !important;
  background: rgba(0,0,0,.025) !important;
  border-radius: 0 var(--og-r) var(--og-r) 0 !important;
}
.entry-content blockquote p {
  font-size: var(--og-fs-lg) !important;
  font-weight: var(--og-fw-medium) !important;
  font-style: italic !important;
  color: var(--og-text-1) !important;
  margin-bottom: 0 !important;
}

/* Imagens no conteúdo */
.entry-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--og-r-md) !important;
  display: block !important;
  margin: var(--sp-4) auto !important;
}

/* Strong / Bold */
.entry-content strong, .entry-content b {
  font-weight: var(--og-fw-bold) !important;
  color: var(--og-text-1) !important;
}

/* Code */
.entry-content code, .entry-content pre {
  font-family: 'SF Mono', 'Fira Code', Menlo, monospace !important;
  font-size: .9em !important;
  background: rgba(0,0,0,.05) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}


/* ════════════════════════════════════════════════════════════
   6. ARQUIVO DE CATEGORIA / BLOG (UICore Blog Grid)
   ════════════════════════════════════════════════════════════ */

/* Container do grid */
.uicore-blog .uicore-container,
.uicore-blog-grid {
  max-width: var(--og-max-width) !important;
}

/* Título dos posts no grid */
.uicore-blog .uicore-post-title,
.uicore-blog-grid .uicore-post-title,
.uicore-blog-grid h2.uicore-post-title,
.uicore-blog-grid h3.uicore-post-title {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-base) !important;
  font-weight: var(--og-fw-semibold) !important;
  line-height: var(--og-lh-snug) !important;
  letter-spacing: var(--og-ls-tight) !important;
  color: var(--og-text-1) !important;
  margin: var(--sp-2) 0 var(--sp-1) !important;
}

.uicore-blog .uicore-post-title a,
.uicore-blog-grid .uicore-post-title a {
  color: var(--og-text-1) !important;
  text-decoration: none !important;
}
.uicore-blog .uicore-post-title a:hover,
.uicore-blog-grid .uicore-post-title a:hover {
  color: var(--og-black) !important;
}

/* Meta no grid (autor, data) */
.uicore-blog .uicore-post-meta,
.uicore-blog .uicore-meta,
.uicore-blog-grid .uicore-post-meta {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-xs) !important;
  color: var(--og-text-muted) !important;
  font-weight: var(--og-fw-normal) !important;
  letter-spacing: 0 !important;
}

/* Excerpt no grid */
.uicore-blog .uicore-post-content p,
.uicore-blog-grid .entry-summary,
.uicore-blog-grid .uicore-excerpt {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-sm) !important;
  line-height: var(--og-lh-normal) !important;
  color: var(--og-text-3) !important;
  font-weight: var(--og-fw-normal) !important;
}

/* Badge de categoria no UICore blog */
.uicore-post-category a,
.uicore-body .uicore-post-category a {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-2xs) !important;
  font-weight: var(--og-fw-black) !important;
  letter-spacing: var(--og-ls-wider) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 2px 7px !important;
  border-radius: var(--og-r-sm) !important;
  background: var(--og-dark) !important;
  color: #fff !important;
  display: inline-block !important;
  line-height: 1.6 !important;
}


/* ════════════════════════════════════════════════════════════
   7. BADGES DE CATEGORIA — escala global
   ════════════════════════════════════════════════════════════ */
.ogc-cat,
span.ogc-cat,
a.ogc-cat {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-2xs) !important;
  font-weight: var(--og-fw-black) !important;
  letter-spacing: var(--og-ls-wider) !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: var(--og-r-sm) !important;
  display: inline-block !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
  color: #fff !important;
  background: var(--og-dark) !important;
  white-space: nowrap !important;
}

/* Cores por categoria */
.ogc-cat--animes,
.uicore-post-category a[href*="/animes"] { background: var(--cat-animes) !important; }
.ogc-cat--filmes,
.uicore-post-category a[href*="/filmes"] { background: var(--cat-filmes) !important; }
.ogc-cat--series,
.uicore-post-category a[href*="/series"] { background: var(--cat-series) !important; }
.ogc-cat--jogos,
.uicore-post-category a[href*="/jogos"]  { background: var(--cat-jogos) !important; }
.ogc-cat--esportes,
.uicore-post-category a[href*="/esportes"] { background: var(--cat-esportes) !important; }
.ogc-cat--famosos,
.uicore-post-category a[href*="/famosos"] { background: var(--cat-famosos) !important; }
.ogc-cat--eventos,
.uicore-post-category a[href*="/eventos"] { background: var(--cat-eventos) !important; }
.ogc-cat--veredito,
.uicore-post-category a[href*="/veredito"] { background: var(--cat-veredito) !important; color: #fff !important; }
.ogc-cat--uncategorized { background: var(--cat-uncategorized) !important; }
.ogc-cat--noticias      { background: #2563eb !important; }


/* ════════════════════════════════════════════════════════════
   8. HEADER UICore — padronização
   ════════════════════════════════════════════════════════════ */
#wrapper-navbar,
.uicore-navbar {
  background: var(--og-black) !important;
  border-bottom: 2px solid var(--og-yellow) !important;
}

/* Links do menu */
.uicore-nav-menu .uicore-menu > li > a,
.uicore-nav-menu .uicore-menu > li > a span {
  font-family: var(--og-font) !important;
  font-size: 11px !important;
  font-weight: var(--og-fw-semibold) !important;
  letter-spacing: var(--og-ls-wider) !important;
  text-transform: uppercase !important;
  color: #c0c0c0 !important;
  transition: color .15s !important;
}
.uicore-nav-menu .uicore-menu > li > a:hover span,
.uicore-nav-menu .uicore-menu > li.current-menu-item > a span,
.uicore-nav-menu .uicore-menu > li.current-menu-parent > a span {
  color: var(--og-yellow) !important;
}

/* Menu mobile — painel overlay do UICore */
.uicore-navigation-wrapper {
  background: var(--og-black) !important;
}

/* Logo dentro do drawer — colado à esquerda */
.uicore-navigation-wrapper nav.uicore-container {
  position: relative !important;
}
.uicore-navigation-wrapper nav .uicore-branding.uicore-mobile {
  margin-left: 0 !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
}
.uicore-navigation-wrapper nav .uicore-branding.uicore-desktop {
  display: none !important;
}
/* Tira o botão fechar do fluxo flex para não empurrar o logo */
.uicore-navigation-wrapper nav .uicore-mobile-head-right {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* Barras do X brancas (visíveis no fundo preto) */
.uicore-navigation-wrapper .uicore-ham .bar {
  background: #ffffff !important;
}
.uicore-navigation-wrapper nav .uicore-branding img.uicore-logo {
  height: 52px !important;
  width: auto !important;
  max-width: none !important;
}

/* Espaço entre o nav do drawer e os itens do menu */
.uicore-navigation-wrapper .uicore-navigation-content {
  padding-top: 24px !important;
}

/* Itens do menu: branco com hover amarelo */
.uicore-navigation-wrapper .uicore-menu-container ul .menu-item > a,
.uicore-mobile-menu-wrapper .uicore-menu li.menu-item > a {
  font-family: var(--og-font) !important;
  color: #ffffff !important;
}
.uicore-mobile-menu-wrapper .uicore-menu li.current-menu-item > a,
.uicore-mobile-menu-wrapper .uicore-menu li.menu-item:hover > a {
  color: var(--og-yellow) !important;
}

/* Seta de submenu e ícone de fechar: cor branca */
.uicore-navigation-wrapper .uicore-menu-container ul .menu-item-has-children > a:after {
  color: #ffffff !important;
}

/* Mobile: logo maior + padding na barra; ANUNCIE só dentro do drawer; hamburger à direita */
@media (max-width: 1024px) {
  #wrapper-navbar .uicore-header-wrapper > nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #wrapper-navbar .uicore-branding {
    margin-left: 29px !important;
  }
  #wrapper-navbar .uicore-branding img.uicore-logo {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
  }
  .uicore-mobile-head-right .uicore-cta-wrapper {
    display: none !important;
  }
  #wrapper-navbar .uicore-mobile-head-right {
    margin-left: auto;
  }
}

/* Botão ANUNCIE */
.uicore-cta-wrapper a,
.uicore-btn.uicore-inverted {
  font-family: var(--og-font) !important;
  font-size: 11px !important;
  font-weight: var(--og-fw-bold) !important;
  letter-spacing: var(--og-ls-wide) !important;
  text-transform: uppercase !important;
  background: var(--og-yellow) !important;
  color: var(--og-black) !important;
  border-radius: var(--og-r) !important;
  padding: 7px 14px !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.uicore-cta-wrapper a:hover,
.uicore-btn.uicore-inverted:hover {
  background: var(--og-yellow-hover) !important;
  color: var(--og-black) !important;
}


/* ════════════════════════════════════════════════════════════
   9. FOOTER (elementor-11 / uicore-tb-footer)
   ════════════════════════════════════════════════════════════ */
#uicore-tb-footer,
.uicore-tb-footer {
  background: var(--og-black) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Títulos das colunas do footer */
#uicore-tb-footer h5.elementor-heading-title,
.uicore-tb-footer .elementor-heading-title {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-2xs) !important;
  font-weight: var(--og-fw-black) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--og-ls-wider) !important;
  color: #ffffff !important;
  margin-bottom: var(--sp-3) !important;
}

/* Links do footer */
#uicore-tb-footer .elementor-icon-list-text,
#uicore-tb-footer .elementor-icon-list-item a,
.uicore-tb-footer .elementor-icon-list-text {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-xs) !important;
  color: #888888 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
#uicore-tb-footer .elementor-icon-list-item a:hover { color: var(--og-yellow) !important; }

/* Copyright */
#uicore-tb-footer .elementor-text-editor p {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-2xs) !important;
  color: #444444 !important;
  text-align: center !important;
  letter-spacing: var(--og-ls-normal) !important;
}

/* Logo no footer */
#uicore-tb-footer .elementor-text-editor:not(:last-child) p {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-xs) !important;
  color: #666666 !important;
}


/* ════════════════════════════════════════════════════════════
   10. PÁGINA DE CATEGORIA — UICore blog archive layout
   ════════════════════════════════════════════════════════════ */

/* Page title da categoria */
.uicore-page-title h1,
.uicore-page-title-wrap h1 {
  font-family: var(--og-font) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: var(--og-fw-black) !important;
  line-height: var(--og-lh-tight) !important;
  letter-spacing: var(--og-ls-tight) !important;
  color: var(--og-text-1) !important;
}

/* Limita largura do conteúdo editorial — SOMENTE dentro do blog grid */
.uicore-blog .uicore-post-content {
  max-width: var(--og-content-width);
  margin-left: auto;
  margin-right: auto;
}



/* ════════════════════════════════════════════════════════════
   11. SEÇÃO DE COMENTÁRIOS
   ════════════════════════════════════════════════════════════ */
#comments,
.comment-reply-title,
#reply-title {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-base) !important;
  font-weight: var(--og-fw-bold) !important;
  color: var(--og-text-1) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--og-ls-wide) !important;
}

.comment-body p {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-base) !important;
  line-height: var(--og-lh-relaxed) !important;
  color: var(--og-text-2) !important;
}

/* Form de comentários */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-base) !important;
  border: 1px solid var(--og-border-strong) !important;
  border-radius: var(--og-r) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  outline: none !important;
  transition: border-color .15s !important;
  width: 100% !important;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--og-yellow) !important;
}

.comment-form input[type="submit"],
.submit {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-xs) !important;
  font-weight: var(--og-fw-bold) !important;
  letter-spacing: var(--og-ls-wider) !important;
  text-transform: uppercase !important;
  background: var(--og-yellow) !important;
  color: var(--og-black) !important;
  border: none !important;
  padding: var(--sp-2) var(--sp-6) !important;
  border-radius: var(--og-r) !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.comment-form input[type="submit"]:hover { background: var(--og-yellow-hover) !important; }


/* ════════════════════════════════════════════════════════════
   12. PAGE TRANSITION + ANIMATION BG — cor padrão do kit
       é #FFBC7D (laranja), substituímos por preto
   ════════════════════════════════════════════════════════════ */
.uicore-animation-bg,
e-page-transition,
.e-page-transition,
.elementor-kit-6 e-page-transition {
  background-color: #070707 !important;
}

/* Páginas secundárias: sem animações de entrada nem transição de página */
body:not(.home) .uicore-animation-bg { display: none !important; }
body:not(.home) #uicore-page { animation: none !important; }
body:not(.home) [data-uicore-animation],
body:not(.home) .uicore-anim-target { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ════════════════════════════════════════════════════════════
   13. BARRA DE PROGRESSO DE LEITURA (UICore)
   ════════════════════════════════════════════════════════════ */
.uicore-progress-bar {
  height: 3px !important;
  background: var(--og-yellow) !important;
}


/* ════════════════════════════════════════════════════════════
   13. SEARCH OVERLAY
   ════════════════════════════════════════════════════════════ */
.uicore-search .search-field,
.uicore-search input {
  font-family: var(--og-font) !important;
  font-size: var(--og-fs-lg) !important;
  font-weight: var(--og-fw-medium) !important;
  color: var(--og-text-1) !important;
}


/* ════════════════════════════════════════════════════════════
   14. RESPONSIVO
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --og-fs-3xl: clamp(22px, 5vw, 28px);
    --og-fs-2xl: 20px;
    --og-fs-xl:  17px;
    --og-fs-md:  14px;
  }

  .entry-title,
  h1.entry-title {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
}

@media (max-width: 480px) {
  :root {
    --og-fs-md: 14px;
    --og-fs-lg: 15px;
  }

  .entry-content p,
  .entry-content li {
    font-size: var(--og-fs-base) !important;
  }

  /* Padding lateral mais justo em telas pequenas */
  .ogc-wrap { padding: 0 14px; }

  /* Cards em coluna única ficam mais altos (melhor proporção) */
  .ogc-card__img-wrap { height: 200px; }
}


/* ════════════════════════════════════════════════════════════
   15. COMPONENTE CARD — global (homepage, categoria, single)
   ════════════════════════════════════════════════════════════ */

.ogc-card,
article.ogc-card {
  background: var(--og-surface);
  border-radius: var(--og-r-md);
  overflow: hidden;
  border: .5px solid var(--og-border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ogc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--og-shadow);
}

/* Imagem */
.ogc-card__img-wrap {
  height: 156px;
  overflow: hidden;
  display: block;
  background: #e5e5e5;
}
.ogc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ogc-card:hover .ogc-card__img { transform: scale(1.05); }

.ogc-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Body */
.ogc-card__body {
  padding: 11px 13px 14px;
}

/* Título */
.ogc-card__title {
  display: block;
  font-family: var(--og-font);
  font-size: var(--og-fs-base);
  font-weight: var(--og-fw-semibold);
  line-height: var(--og-lh-snug);
  letter-spacing: var(--og-ls-tight);
  color: var(--og-text-1);
  margin: var(--sp-1) 0 var(--sp-2);

  /* Clamp: máximo 3 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogc-card__title,
.ogc-card__title a {
  color: var(--og-text-1);
  text-decoration: none;
  transition: color .15s;
}
.ogc-card:hover .ogc-card__title,
.ogc-card:hover .ogc-card__title a { color: var(--og-black); }

/* Meta */
.ogc-card__meta {
  font-family: var(--og-font);
  font-size: var(--og-fs-xs);
  color: var(--og-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--sp-1);
}

.ogc-sep { color: var(--og-border-strong); margin: 0 2px; }


/* ── Layout helpers globais ─────────────────────────────── */
.ogc-wrap {
  max-width: var(--og-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Section header com borda amarela */
.ogc-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--og-yellow);
  margin-bottom: 16px;
}
.ogc-section-hd__title {
  font-family: var(--og-font);
  font-size: var(--og-fs-xs);
  font-weight: var(--og-fw-black);
  text-transform: uppercase;
  letter-spacing: var(--og-ls-wider);
  color: var(--og-text-1);
  margin: 0;
}
.ogc-section-hd__link {
  font-family: var(--og-font);
  font-size: var(--og-fs-xs);
  color: var(--og-text-muted);
  text-decoration: none;
  transition: color .15s;
}
.ogc-section-hd__link:hover { color: var(--og-text-1); }

/* Grid utilitários */
.ogc-grid        { display: grid; gap: var(--sp-4); }
.ogc-grid--4     { grid-template-columns: repeat(4, 1fr); }
.ogc-grid--3     { grid-template-columns: repeat(3, 1fr); }
.ogc-grid--2     { grid-template-columns: repeat(2, 1fr); }

/* Botão voltar */
.ogc-btn-back {
  display: inline-block;
  font-family: var(--og-font);
  font-size: var(--og-fs-xs);
  font-weight: var(--og-fw-semibold);
  color: var(--og-text-1);
  background: var(--og-surface);
  border: 1px solid var(--og-border-strong);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--og-r);
  text-decoration: none;
  margin-top: var(--sp-4);
  transition: border-color .15s;
}
.ogc-btn-back:hover { border-color: var(--og-yellow); }

@media (max-width: 1024px) {
  .ogc-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ogc-grid--4,
  .ogc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ogc-grid--4,
  .ogc-grid--3,
  .ogc-grid--2 { grid-template-columns: 1fr; }
}
