/* =====================================================================
   SHOW GLASS — COMPONENTES DO SITE  (estilos reutilizáveis das páginas)
   ---------------------------------------------------------------------
   Aqui ficam os estilos dos BLOCOS reutilizáveis do redesign "Ateliê"
   (hero, coleção, projetos, prova social, FAQ, CTA...) aplicados via
   classes nos containers/widgets do Elementor (aba Avançado → CSS Classes).
   Tudo deve usar os tokens de tokens.css (var(--sg-*)) — nunca hex solto —
   para manter o site consistente e fácil de retematizar.

   Convenção de prefixo: .sgc-  (Show Glass Component)
   Ex.: .sgc-section, .sgc-eyebrow, .sgc-title, .sgc-btn, .sgc-index
   ===================================================================== */

/* ----------  Utilitários base (estilo Ateliê) — exemplos prontos  ---------- */

/* Olho editorial (micro-etiqueta acima de um título) */
.sgc-eyebrow {
	font-family: var(--sg-ui);
	font-size: 11px; font-weight: 600; letter-spacing: .22em;
	text-transform: uppercase; color: var(--sg-gold);
}

/* Título de seção em display (Cormorant) */
.sgc-title .elementor-heading-title,
.sgc-title {
	font-family: var(--sg-display);
	color: var(--sg-ink);
	font-weight: 500; line-height: 1.05;
}

/* Índice editorial 01–06 (numeração das seções da home) */
.sgc-index {
	font-family: var(--sg-display);
	font-size: 13px; color: var(--sg-gold); letter-spacing: .1em;
}

/* Hairline (filete fino de separação) */
.sgc-hairline { height: 1px; background: var(--sg-gold-line); border: 0; }

/* Botão "joia" dourado (mesma linguagem do CTA do header) */
.sgc-btn .elementor-button, a.sgc-btn, .sgc-btn {
	background: var(--sg-grad-gold) !important;
	color: var(--sg-gold-ink) !important;
	border: none !important; border-radius: 6px !important;
	font-family: var(--sg-ui); font-weight: 600; letter-spacing: .02em;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.sgc-btn:hover .elementor-button, a.sgc-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 7px 18px rgba(198, 160, 83, 0.40);
	filter: brightness(1.05);
}

/* Botão "fantasma" (contorno dourado, fundo transparente) */
.sgc-btn-ghost .elementor-button, a.sgc-btn-ghost {
	background: transparent !important;
	color: var(--sg-gold) !important;
	border: 1px solid var(--sg-gold-line) !important; border-radius: 6px !important;
	font-family: var(--sg-ui); font-weight: 600; letter-spacing: .02em;
	transition: border-color .2s ease, color .2s ease;
}
.sgc-btn-ghost:hover .elementor-button, a.sgc-btn-ghost:hover {
	border-color: var(--sg-gold) !important; color: var(--sg-gold-l) !important;
}

/* ====================================================================
   PADRÃO: blocos de fundo escuro com BRILHO NAVY (degradê suave)
   --------------------------------------------------------------------
   ATENÇÃO: o Elementor NÃO renderiza CSS Classes em CONTAINER no front
   deste site (só em widgets). Por isso o brilho dos blocos escuros é
   aplicado pela "Sobreposição de fundo" NATIVA do Elementor — não por
   classe. Esta é a RECEITA-PADRÃO (mesmos valores do token --sg-grad-ink):

     Container → Estilo → Sobreposição de fundo:
       Tipo:        Gradiente
       1ª cor:      #1D2D46  (var --sg-navy-glow) · posição 0%
       2ª cor:      #1D2D46 com alfa 0 (transparente) · posição 100%
       Tipo grad.:  Radial · Posição: Centro ao centro
       Opacidade:   0.5

   Aplicar em todos os blocos escuros (Projetos, Atendimento, FAQ, CTA...).
   O token --sg-grad-ink em tokens.css documenta esse valor como fonte única.

   .sgc-ink abaixo é um atalho para quando o degradê for usado em um WIDGET
   (onde a classe renderiza) ou via [data-id] — não funciona em container. */
.sgc-ink { background-image: var(--sg-grad-ink); }

/* A partir daqui: estilos específicos dos blocos do redesign, conforme formos montando. */