/*
 * Tema SGroup Nacional sobre o template Vuexy
 * ============================================================================
 *
 * REGRA DESTE ARQUIVO: aqui só entram FONTE e CORES.
 *
 * O painel administrativo tem que ser o Vuexy fielmente. Não reestilize
 * componente (raio de botão, sombra de card, padding, altura de input) —
 * se algo parece fora do lugar, compare com a página original do template
 * em referencias/ antes de escrever regra nova.
 *
 * As poucas regras estruturais que existem estão na seção da landing, no
 * fim do arquivo, e valem só para ela (`body.pagina-landing`). A landing
 * segue o design do site institucional; o painel segue o Vuexy.
 */

/* --- Cores da marca -------------------------------------------------------
 *
 * Valores lidos das variáveis CSS do site institucional
 * (sgroupnacional.com.br), não estimados de screenshot.
 *
 * O Vuexy v10 deriva botões, badges, bordas e fundos de `--bs-primary` via
 * `color-mix()`, então trocar a variável recolore o template inteiro sem
 * precisar tocar em nenhum componente.
 */

:root {
  --sg-primary: #0000cd;
  --sg-primary-dark: #00009e;
  --sg-primary-soft: #e6e6fb;

  --sg-accent: #eab737;
  --sg-accent-soft: #fcf5e1;

  --sg-ink: #0a1130;
  --sg-ink-soft: #5a6387;
  --sg-ink-muted: #8a94b8;

  --sg-bg: #fafafa;
  --sg-line: #0a113024;
}

:root,
[data-bs-theme='light'] {
  --bs-primary: var(--sg-primary);
  --bs-primary-rgb: 0, 0, 205;
  --bs-primary-text-emphasis: var(--sg-primary-dark);
  --bs-primary-bg-subtle: var(--sg-primary-soft);
  --bs-primary-border-subtle: #c2c2f4;

  /* O dourado da marca entra como `warning` — é a cor de destaque do Vuexy */
  --bs-warning: var(--sg-accent);
  --bs-warning-rgb: 234, 183, 55;
  --bs-warning-contrast: var(--sg-ink); /* dourado não tem contraste com branco */
  --bs-warning-text-emphasis: #7c5a0f;
  --bs-warning-bg-subtle: var(--sg-accent-soft);
  --bs-warning-border-subtle: #f3d57a;
}

/* --- Fonte ----------------------------------------------------------------
 *
 * Montserrat no lugar da Public Sans do template. O peso e a entreletras dos
 * títulos são o traço da marca — sem eles a fonte fica igual a qualquer
 * outra sans-serif.
 */

:root {
  --bs-body-font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family);
}

/* --- Landing --------------------------------------------------------------
 *
 * Daqui para baixo vale só para a landing (`body.pagina-landing`), que segue
 * o design do site institucional e não o do Vuexy. O painel não é afetado.
 */

body.pagina-landing {
  --bs-heading-color: var(--sg-ink);
  --bs-body-color: var(--sg-ink-soft);
  --bs-secondary-color: var(--sg-ink-muted);
  --bs-border-color: var(--sg-line);
}

body.pagina-landing h1,
body.pagina-landing h2,
body.pagina-landing h3,
body.pagina-landing .h1,
body.pagina-landing .h2,
body.pagina-landing .h3 {
  font-weight: 800;
  letter-spacing: -0.04em;
}

body.pagina-landing h4,
body.pagina-landing h5,
body.pagina-landing h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.pagina-landing .btn {
  --bs-btn-border-radius: 10px;

  font-weight: 700;
}

body.pagina-landing .btn-lg {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 1.75rem;
}

body.pagina-landing .card {
  --bs-card-border-radius: 14px;
}

/* Hover dourado nos botões azuis */
body.pagina-landing .btn-primary,
body.pagina-landing .btn-outline-primary {
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-warning-contrast);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-active-color: var(--bs-warning-contrast);
}

/*
 * Rótulo antes do título da seção ("— COMO FUNCIONA"). Valores do
 * `.site-section-head__eyebrow` do site institucional.
 */
.rotulo-secao {
  color: var(--bs-primary);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
 * Dourado da marca para texto.
 *
 * Decisão de marca tomada com o contraste na mesa: sobre fundo claro este tom
 * fica abaixo dos 3:1 que o WCAG pede para texto grande. É intencional — não
 * "corrija" para um dourado mais escuro sem falar com o André antes.
 */
.text-dourado {
  color: var(--bs-warning);
}

/*
 * O hero ocupa a tela inteira, com o conteúdo centralizado na vertical. O
 * padding do topo abre espaço para a navbar fixa, que flutua sobre ele.
 *
 * `svh` é a altura da viewport com as barras do navegador visíveis — em
 * mobile evita o salto quando a barra recolhe ao rolar. O `vh` antes dele é
 * o fallback para navegadores sem suporte.
 */
.landing-hero {
  --bs-hero-bg: #fff;

  display: flex;
  align-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: 7.5rem 3rem;
}

.landing-hero > .container {
  inline-size: 100%;
}

/* O Vuexy pinta o título do hero com um gradiente animado. Desligamos. */
.landing-hero .hero-title {
  animation: none;
  background: none;
  color: var(--bs-heading-color);
  -webkit-text-fill-color: currentcolor;
}

/* Fundo alternado das seções, no cinza do site institucional */
body.pagina-landing .section-py.bg-body {
  background-color: var(--sg-bg) !important;
  border-start-start-radius: 3.75rem;
  border-start-end-radius: 3.75rem;
}

/*
 * Marca d'água do leão no hero, no mesmo padrão do site institucional.
 *
 * A imagem é escura e chapada, então a opacidade escurece o hero inteiro
 * junto — por isso o valor é menor que o do site oficial (0.14 sobre branco).
 * Ao mexer, confira o efeito no fundo, não só no leão.
 */
.hero-leao {
  position: absolute;
  z-index: 0;
  background-image: url('../img/leao-fundo.webp');
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0.055;
  pointer-events: none;
}

/* Inclinação 3D no hover (ver landing.js) */
[data-inclinar] {
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  will-change: transform;
}