/*
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");*/

/*@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");*/


@import url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css");

/* FrontEnd/shared/css/global.css */

:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-alt: #F1F0EC;
  --ink: #15171C;
  --black: #3a3a3a;
  --ink-soft: #4B4D55;
  --ink-mute: #8A8C93;
  --border: #E4E2DB;
  --border-soft: #ECEAE3;
  --accent: #3B2FE0;
  --accent-ink: #2A20A8;
  --accent-soft: #EDEBFC;
  --good: #1C8A56;
  --good-soft: #E7F3EC;
  --warn: #C1552F;
  --warn-soft: #FBE9E3;
  --blue-icon: #38a6e2;

/* FONTES */


  --mono: 'JetBrains Mono', monospace;
  --sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans-plus: 'Plus Jakarta Sans', sans-serif;
  --sans-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1100px;
  
  --bg-fmetric:
    radial-gradient(at 0% 0%, rgba(215, 230, 255, 0.3) 0px, transparent 40%),
    /* Azul fraco no topo esquerdo */
    radial-gradient(at 100% 0%, rgba(225, 240, 255, 0.3) 0px, transparent 50%),
    /* Outro tom azulado no topo direito */
    radial-gradient(at 50% 50%, rgba(240, 245, 255, 0.5) 0px, transparent 60%),
    /* Mistura suave no centro da página */
    radial-gradient(at 0% 100%, rgba(235, 242, 255, 0.3) 0px, transparent 50%),
    /* Toque sutil no canto inferior esquerdo */
    radial-gradient(at 100% 100%, rgba(218, 232, 255, 0.4) 0px, transparent 50%),
    /* Azul suave no canto inferior direito */
    #fafdff;
  /* A cor sólida de fundo que une e preenche o resto da tela */

  
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}


body {
  background: var(--bg-fmetric);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}





img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* Elementos Compartilhados de Design */
.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ink-mute);
  border-radius: 1px;
  flex: none;
}

.eyebrow.mute {
  color: var(--ink-mute);
}

.eyebrow.mute::before {
  background: var(--ink-mute);
}

/* Botões Padronizados */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.btn:active {
  transform: scale(.98);
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-primary:hover {
  background: #000;
}

.btn-accent {
  background: var(--blue);
  color: #fff;
}

.btn-accent:hover {
  background: var(--accent-ink);
}

.btn-ghost {
  border-color: var(--blue);
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--ink-mute);
  background: var(--surface-alt);
}

/* Efeito de Reveal no Scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}



/*  Global Header - menu geral 9 pontinhos   */


.global-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  align-items: center;
  border-bottom: 1px solid var(--u-border);
}

.product-menu {
  position: absolute;
  right: 2rem;
  top: 60px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
}

.product-menu.hidden {
  display: none;
}

.product-menu a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #333;
}

.launcher-btn {
  background: none;
  border: none;
  cursor: pointer;
}



/* --- PACOTES GLOBAIS DE ESTILO (DESIGN SYSTEM) --- */

/* 1. Pacote para o Título Principal do Topo (Hero) */
.g-hero-title {
  font-size: clamp(32px, 10vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.g-hero-subtitle {
  font-size: 15px;
  color: var(--ink-soft, #666666);
  line-height: 1.30;
}


/* 2. Pacote para Títulos de Seções (H2) */
.g-section-title {
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}




/* 3. Pacote para Subtítulos (P) de H1 ou H2 */
.g-main-subtitle {
  font-size: 16px;
  color: var(--ink-soft, #666666);
  line-height: 1.20;
  
  font-weight: 400;
}

/* 4. Pacote para Títulos de Produtos/Cards (H3) */
.g-item-title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* 5. Pacote para Descrições de Produtos/Cards (P) */
.g-item-description {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 200;
  color: var(--ink-soft);
  max-width: 440px;
}

/* Ajuste cirúrgico para o subtítulo no mobile */
@media (max-width: 480px) {
  .wrap {
    padding: 0 20px; /* Aumenta a área útil para o texto no celular */
  }

  .global-header {
    padding: 1rem; /* Evita que o topo fique apertado lateralmente */
  }

/* --- AJUSTES GLOBAIS PARA FONTE (CELULAR) --- */

  /* 1. Hero */
  .g-hero-title {
    font-size: 30px; /* Tamanho aprovado por você */
  }
  .g-hero-subtitle {
    font-size: 14px;
  }

  /* 2. Títulos de Seções (H2) */
  .g-section-title {
    font-size: 26px; /* Tamanho aprovado por você */
  }

  /* 3. Subtítulos de Seção (P) */
  .g-main-subtitle {
    font-size: 15px;
  }

  /* 4. Títulos de Produtos/Cards (H3) */
  .g-item-title {
    font-size: 22px; /* Ajuste proporcional para H3 */
  }

  /* 5. Descrições de Produtos/Cards (P) */
  .g-item-description {
    font-size: 13px;
    line-height: 1.4;
  }
}