/* ==========================================================================
   GadgetLusa, sistema de desenho
   Tudo o que o layout precisa vive aqui. Os templates do Elementor usam
   estas variaveis e estas classes, nunca valores soltos.
   ========================================================================== */

:root {
  /* superficies */
  --gl-bg: #F7F6FC;
  --gl-ink: #171233;
  --gl-ink-2: #3B3566;
  --gl-muted: #6B6494;
  --gl-muted-2: #8B84B0;

  /* paleta base, so para categorias e artigos sem produto */
  --gl-guias-a: #00E58F;   --gl-guias-b: #00B4D8;
  --gl-melhores-a: #FFCF4D; --gl-melhores-b: #FF9A3D;
  --gl-analises-a: #FF7A6B; --gl-analises-b: #FF5C9D;
  --gl-comp-a: #9B6BFF;     --gl-comp-b: #5B7CFA;

  /* grafite dos blocos fixos */
  --gl-graf-a: #3D424B;
  --gl-graf-b: #1B1E23;
  --gl-graf-chip-a: #3A3F49;
  --gl-graf-chip-b: #1E2127;

  /* cor do cartao. sobreposta por publicacao pelo mu-plugin */
  --card-a: var(--gl-guias-a);
  --card-b: var(--gl-guias-b);
  --card-ink: #06231A;
  --card-ink-soft: rgba(6,35,26,0.78);
  --card-shadow: rgba(0,190,170,0.95);

  /* medidas */
  --gl-r-lg: 26px;
  --gl-r-md: 20px;
  --gl-r-sm: 14px;
  --gl-pill: 999px;

  /* vidro */
  --gl-glass-bg: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(255,255,255,0.62));
  --gl-glass-border: 1px solid rgba(255,255,255,0.9);
  --gl-glass-shadow: 0 30px 56px -34px rgba(23,18,51,0.55), inset 0 1px 0 rgba(255,255,255,0.95);

  /* tipos */
  --gl-display: Outfit, "Segoe UI", system-ui, sans-serif;
  --gl-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --gl-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Fundo da pagina.
   A grelha vive SO aqui, atras de tudo, com veu no centro.
   Nunca meter grelha dentro de um cartao nem por cima de uma imagem.
   -------------------------------------------------------------------------- */
body.gl {
  background-color: var(--gl-bg);
  background-image:
    radial-gradient(900px 520px at 50% 6%, rgba(255,255,255,0.78), rgba(255,255,255,0) 72%),
    linear-gradient(90deg, rgba(247,246,252,0) 0%, rgba(247,246,252,0.86) 26%, rgba(247,246,252,0.97) 50%, rgba(247,246,252,0.86) 74%, rgba(247,246,252,0) 100%),
    linear-gradient(rgba(23,18,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,18,51,0.055) 1px, transparent 1px),
    radial-gradient(900px 620px at 6% -6%, rgba(0,229,143,0.28), transparent 62%),
    radial-gradient(820px 600px at 96% -2%, rgba(255,154,61,0.24), transparent 62%),
    radial-gradient(1100px 820px at 46% 104%, rgba(139,107,255,0.24), transparent 62%);
  background-size: auto, auto, 56px 56px, 56px 56px, auto, auto, auto;
  background-attachment: scroll, scroll, scroll, scroll, fixed, fixed, fixed;
  color: var(--gl-ink);
  font-family: var(--gl-body);
}

body.gl h1, body.gl h2, body.gl h3, body.gl h4 {
  font-family: var(--gl-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Vidro. Usar com conta.
   O desfoque real e caro na GPU. Em listas repetidas usar .gl-glass--flat,
   que e visualmente quase igual e nao pesa no scroll de telemovel fraco.
   -------------------------------------------------------------------------- */
.gl-glass {
  background: var(--gl-glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: var(--gl-glass-border);
  box-shadow: var(--gl-glass-shadow);
  border-radius: var(--gl-r-lg);
}

.gl-glass--flat {
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
  border: var(--gl-glass-border);
  box-shadow: var(--gl-glass-shadow);
  border-radius: var(--gl-r-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 1024px) {
  .gl-glass {
    background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* fio de luz no topo do cartao */
.gl-hair { position: relative; overflow: hidden; }
.gl-hair::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-a), var(--card-b), transparent);
}
.gl-hair--fixo::before {
  background: linear-gradient(90deg, transparent, rgba(23,18,51,0.38), transparent);
}

/* --------------------------------------------------------------------------
   Cartao com a cor do produto.
   A cor vem do campo da publicacao. A receita nunca muda, so a cor.
   -------------------------------------------------------------------------- */
.gl-card {
  border-radius: var(--gl-r-lg);
  background: linear-gradient(140deg, var(--card-a), var(--card-b));
  box-shadow: 0 30px 52px -28px var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
  color: var(--card-ink);
  position: relative;
  overflow: hidden;
}
.gl-card::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px 180px at 88% 6%, rgba(255,255,255,0.4), transparent 68%);
}
.gl-card > * { position: relative; z-index: 1; }
.gl-card h1, .gl-card h2, .gl-card h3, .gl-card h4 { color: var(--card-ink); }
.gl-card p, .gl-card .gl-mono { color: var(--card-ink-soft); }

/* bloco fixo, sempre grafite */
.gl-fixo {
  border-radius: var(--gl-r-lg);
  background: linear-gradient(150deg, var(--gl-graf-a), var(--gl-graf-b));
  box-shadow: 0 30px 54px -28px rgba(24,26,31,0.85), inset 0 1px 0 rgba(255,255,255,0.14);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.gl-fixo::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 180px at 88% 4%, rgba(255,255,255,0.14), transparent 68%);
}
.gl-fixo > * { position: relative; z-index: 1; }
.gl-fixo h1, .gl-fixo h2, .gl-fixo h3, .gl-fixo h4 { color: #FFFFFF; }
.gl-fixo p { color: rgba(255,255,255,0.82); }

/* --------------------------------------------------------------------------
   Moldura de imagem. Cantos de mira, sem grelha por cima.
   -------------------------------------------------------------------------- */
.gl-frame { position: relative; overflow: hidden; border-radius: var(--gl-r-lg); }
.gl-frame::before,
.gl-frame::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
}
.gl-frame::before {
  top: 18px; left: 18px;
  border-top: 2px solid rgba(255,255,255,0.75);
  border-left: 2px solid rgba(255,255,255,0.75);
  border-top-left-radius: 6px;
}
.gl-frame::after {
  bottom: 18px; right: 18px;
  border-bottom: 2px solid rgba(255,255,255,0.75);
  border-right: 2px solid rgba(255,255,255,0.75);
  border-bottom-right-radius: 6px;
}

/* --------------------------------------------------------------------------
   Etiquetas, chips e botoes
   -------------------------------------------------------------------------- */
.gl-mono {
  font-family: var(--gl-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gl-muted-2);
}

.gl-chip {
  display: inline-block;
  border-radius: var(--gl-pill);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--card-a), var(--card-b));
  color: var(--card-ink);
}
.gl-chip--fixo {
  background: linear-gradient(135deg, var(--gl-graf-chip-a), var(--gl-graf-chip-b));
  color: #FFFFFF;
}
.gl-chip--spec {
  font-family: var(--gl-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  border-radius: 7px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(23,18,51,0.12);
  color: var(--gl-ink-2);
}
.gl-chip--sim { background: rgba(0,229,143,0.28); border-color: rgba(0,165,127,0.3); color: #06231A; }
.gl-chip--ver { background: rgba(255,154,61,0.3); border-color: rgba(255,154,61,0.45); color: #7A3F06; }

.gl-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--gl-pill);
  padding: 15px 30px;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, var(--gl-guias-a), var(--gl-guias-b));
  color: #06231A;
  box-shadow: 0 18px 32px -14px rgba(0,190,170,0.95), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gl-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -14px rgba(0,190,170,0.95); }
.gl-btn--escuro {
  background: linear-gradient(135deg, #241C4D, #3B3566);
  color: #FFFFFF;
  box-shadow: 0 18px 32px -16px rgba(23,18,51,0.9);
}

/* selo numerado, sempre grafite */
.gl-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(140deg, var(--gl-graf-chip-a), var(--gl-graf-chip-b));
  box-shadow: 0 12px 22px -10px rgba(24,26,31,0.85), inset 0 1px 0 rgba(255,255,255,0.16);
  font-family: var(--gl-mono); font-size: 14px; font-weight: 700; color: #FFFFFF;
}

/* preco com gradiente recortado no texto */
.gl-preco {
  font-family: var(--gl-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #00C48F, #5B7CFA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* corpo de artigo */
.gl-artigo { font-size: 18px; line-height: 1.78; color: #332C5C; max-width: 760px; }
.gl-artigo h2 { font-size: 34px; line-height: 1.16; margin: 38px 0 16px; color: var(--gl-ink); }
.gl-artigo p { margin-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
  .gl-btn { transition: none; }
  .gl-btn:hover { transform: none; }
}

/* ==========================================================================
   Banner do Complianz.
   As cores do banner sao funcao paga do plugin, por isso vao por CSS.
   O prefixo longo e preciso porque o CSS gerado pelo plugin carrega depois
   e e mais especifico. Isto vivia no tema antigo e perdeu-se na troca.
   ========================================================================== */

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner {
  background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(255,255,255,0.9));
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--gl-r-md);
  box-shadow: 0 30px 60px -28px rgba(23,18,51,0.45);
  color: var(--gl-ink);
  font-family: var(--gl-body);
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  color: var(--gl-ink);
  font-family: var(--gl-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message {
  color: var(--gl-ink-2);
  font-size: 14px;
  line-height: 1.6;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  background: linear-gradient(135deg, var(--gl-guias-a), var(--gl-guias-b));
  color: #06231A;
  border: 0;
  border-radius: var(--gl-pill);
  font-weight: 700;
  box-shadow: 0 14px 26px -12px rgba(0,190,170,0.9);
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
  background: transparent;
  color: var(--gl-ink-2);
  border: 1px solid rgba(23,18,51,0.22);
  border-radius: var(--gl-pill);
  font-weight: 600;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links a,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents .cmplz-link {
  color: var(--gl-muted);
  font-size: 12px;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background: rgba(23,18,51,0.04);
  border-radius: var(--gl-r-sm);
}