/* ============================================================
   MASSEI UNIFORMES — CSS GLOBAL
   Tema: Vermelho Futurista & Moderno
   ============================================================ */

/* ── Fontes (auto-hospedadas) ──
   Servidas do próprio domínio (assets/fonts/), não do Google Fonts.
   Motivo: a fonte externa entrava por @import serializado e, mesmo via
   <link>, era uma requisição render-blocking a terceiros — a cada
   refresh (sobretudo Ctrl+Shift+R, que ignora o cache) o navegador
   pintava com a fonte de fallback e depois TROCAVA para a Inter,
   causando o "flash". Do mesmo domínio, o arquivo chega em milissegundos.
   Combina com a filosofia do projeto (infra própria, sem dependência de
   serviço externo). Só os pesos realmente usados.

   font-display: OPTIONAL (e não swap) é o que fecha a questão: com
   `swap`, se a fonte chega depois do primeiro paint o texto é
   RE-DESENHADO com outra métrica e o menu inteiro se desloca — foi
   isso, medido quadro a quadro, que fazia a navbar "pular" ao
   atualizar. Com `optional` o navegador decide ANTES de pintar: usa a
   Inter se ela já está pronta (o caso normal, com preload e mesmo
   domínio) ou mantém a fonte do sistema por aquela visita. Nunca
   troca com a página na tela. Trocar de fonte depois nunca é aceitável;
   render numa fonte de sistema numa visita lenta, sim. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400;
    font-display: optional; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500;
    font-display: optional; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600;
    font-display: optional; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700;
    font-display: optional; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900;
    font-display: optional; src: url('../fonts/inter-900.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400;
    font-display: optional; src: url('../fonts/rajdhani-400.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500;
    font-display: optional; src: url('../fonts/rajdhani-500.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600;
    font-display: optional; src: url('../fonts/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700;
    font-display: optional; src: url('../fonts/rajdhani-700.woff2') format('woff2'); }

/* ── Variáveis CSS (Design Tokens) ── */
:root {
  /* Cores primárias — vermelho Massei */
  --color-primary:        #c41e3a;
  --color-primary-dark:   #8b0000;
  --color-primary-light:  #c41e3a;
  --color-primary-glow:   rgba(196, 30, 58, 0.3);

  /* Gradientes */
  --gradient-primary:     linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
  --gradient-hero:        linear-gradient(135deg, #f2f2f2 0%, #e8e8e8 50%, #f2f2f2 100%);
  --gradient-card:        linear-gradient(180deg, rgba(196,30,58,0.05) 0%, transparent 100%);
  --gradient-glow:        radial-gradient(ellipse at center, rgba(196,30,58,0.1) 0%, transparent 70%);

  /* Cores neutras — tema claro */
  --color-neutral-1:      #f0f0f0;
  --color-neutral-2:      #e8e8e8;
  --color-neutral-3:      #dedede;
  --color-neutral-4:      #d4d4d4;
  --color-neutral-5:      #c8c8c8;
  --color-surface:        #ffffff;
  --color-surface-2:      #f5f5f5;
  --color-border:         rgba(196, 30, 58, 0.2);
  --color-border-subtle:  rgba(0, 0, 0, 0.1);

  /* Texto */
  --color-text:           #1a1a1a;
  --color-text-muted:     #555555;
  --color-text-faint:     #999999;
  --color-white:          #ffffff;

  /* Tipografia */
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading:         'Rajdhani', 'Inter', sans-serif;

  /* Espaçamento */
  --spacing-xs:   0.5rem;
  --spacing-sm:   1rem;
  --spacing-md:   2rem;
  --spacing-lg:   4rem;
  --spacing-xl:   6rem;
  --spacing-2xl:  8rem;

  /* Bordas */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* Sombras — ajustadas para tema claro */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.1);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:    0 16px 64px rgba(0,0,0,0.15);
  --shadow-red:   0 8px 32px rgba(196,30,58,0.2);
  --shadow-red-lg:0 16px 64px rgba(196,30,58,0.25);

  /* Transições */
  --transition-fast:    0.15s ease;
  --transition-normal:  0.3s ease;
  --transition-slow:    0.6s ease;

  /* Layout */
  --header-height:      72px;
  --container-max:      1280px;
  --container-padding:  clamp(1rem, 4vw, 3rem);
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Reserva SEMPRE o espaço da barra de rolagem. No Windows a barra é
     sólida (~17px) e entra no cálculo do layout: quando ela aparece
     durante o carregamento — ou some porque um menu/modal põe
     overflow:hidden no html — a página inteira, navbar fixa incluída,
     salta 17px para o lado. No Linux/macOS a barra é sobreposta e o
     efeito não existe, que é por que só se vê o problema no Windows. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-neutral-1);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ── Tipografia ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p { color: var(--color-text-muted); line-height: 1.7; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }

/* ── Botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn:hover::before { opacity: 1; }

.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-red);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-red-lg);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  box-shadow: inset 0 0 0 0 var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border-subtle);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}

.btn-lg { padding: 1.1rem 2.5rem; font-size: 1rem; }
/* Valores alinhados ao visual vigente (antes herdados do override do admin.css) */
.btn-sm { padding: .35rem .85rem; font-size: .82rem; }

/* ── Section Header ── */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 1rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: rgba(196,30,58,0.08);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.section-title span {
  color: var(--color-primary-light);
  position: relative;
}

/* ── Linhas de grade decorativas ── */
.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196,30,58,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,30,58,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.py-section {
  padding: var(--spacing-xl) 0;
}

/* ── Scrollbar customizada ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-neutral-3); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* ── Seleção de texto ── */
::selection {
  background: rgba(196,30,58,0.4);
  color: var(--color-white);
}

/* ── Forms ── */
.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
}

.form-control {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--color-neutral-4);
  border: 1.5px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(196,30,58,0.15);
}

.form-control::placeholder { color: var(--color-text-faint); }

textarea.form-control { resize: vertical; min-height: 140px; }

/* ── Stats/Numbers section ── */
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

/* ── Responsivo - Utilitários ── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .py-section { padding: var(--spacing-lg) 0; }
}