/* =========================================================
   Capital360Invest — Tokens e componentes da marca
   Versão 1.0 · outubro/2026
   Fontes gratuitas (Google Fonts): Montserrat + Inter
   Uso: <link rel="stylesheet" href="capital360-tokens.css">
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@300;400;600;700;800&display=swap");

:root {
  /* ---- Cores principais ---- */
  --c360-azul:            #0A3D5C; /* Azul 360 — fundo principal */
  --c360-azul-profundo:   #06263D; /* Azul Profundo — fundos escuros, rodapés */
  --c360-azul-claro:      #0E4A6E; /* Azul Claro — brilho central dos fundos */
  --c360-grafite:         #071114; /* Grafite Noturno — fundo do logo original */

  /* ---- Cores de destaque (do anel do logo) ---- */
  --c360-ciano:           #00D6E3; /* Ciano 360 */
  --c360-turquesa:        #00B0BC; /* Turquesa */
  --c360-verde:           #1EDB92; /* Verde 360 — destaque principal */
  --c360-verde-capital:   #019C77; /* Verde Capital — "360" sobre fundo claro */
  --c360-lima:            #89F083; /* Lima — realces pontuais */

  /* ---- Neutros ---- */
  --c360-nevoa:           #E8EEF2; /* Névoa — faixas e fundos claros */
  --c360-branco:          #FFFFFF;
  --c360-ardosia:         #6F8CA3; /* Ardósia — botão pílula, bordas */
  --c360-cinza:           #5B6B78; /* Texto secundário em fundo claro */
  --c360-tinta:           #0F1F2B; /* Texto principal em fundo claro */

  /* ---- Estados ---- */
  --c360-alta:            #1EDB92;
  --c360-baixa:           #FF5A6A;
  --c360-alerta:          #FFC94D;

  /* ---- Gradientes ---- */
  --c360-grad-anel:  linear-gradient(120deg, #00D6E3 0%, #1EDB92 55%, #89F083 100%);
  --c360-grad-fundo: radial-gradient(120% 90% at 50% 30%, #0E4A6E 0%, #0A3D5C 45%, #06263D 100%);

  /* ---- Tipografia ---- */
  --c360-fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --c360-fonte-texto:  "Inter", "Segoe UI", Arial, sans-serif;
  --c360-peso-leve: 300;
  --c360-peso-regular: 400;
  --c360-peso-semi: 600;
  --c360-peso-bold: 700;
  --c360-peso-extra: 800;
  --c360-tracking-titulo: 0.01em;
  --c360-tracking-apoio:  0.08em;
  --c360-tracking-faixa:  0.12em;

  /* escala (base 16px, razão ~1.25) */
  --c360-fs-xs: 0.75rem;   /* 12 — notas de rodapé */
  --c360-fs-sm: 0.875rem;  /* 14 */
  --c360-fs-md: 1rem;      /* 16 — texto */
  --c360-fs-lg: 1.25rem;   /* 20 — apoio */
  --c360-fs-xl: 1.75rem;   /* 28 */
  --c360-fs-2xl: 2.5rem;   /* 40 — título */
  --c360-fs-3xl: 3.5rem;   /* 56 — título de destaque */

  /* ---- Forma, espaço e sombra ---- */
  --c360-raio-sm: 8px;
  --c360-raio-md: 16px;
  --c360-raio-lg: 24px;
  --c360-raio-pilula: 999px;
  --c360-esp-1: 4px;  --c360-esp-2: 8px;  --c360-esp-3: 16px;
  --c360-esp-4: 24px; --c360-esp-5: 40px; --c360-esp-6: 64px;
  --c360-sombra: 0 6px 18px rgba(3, 20, 33, .35);
  --c360-sombra-suave: 0 2px 8px rgba(3, 20, 33, .18);

  /* ---- Textura (trama inspirada em tecido) ---- */
  --c360-trama: url("../img/trama_overlay_400.png");
}

/* =========================================================
   Componentes
   ========================================================= */

/* Fundo de marca: azul com trama sutil */
.c360-fundo {
  background-color: var(--c360-azul);
  background-image: var(--c360-trama), var(--c360-grad-fundo);
  color: var(--c360-branco);
}
.c360-fundo--grafite {
  background-color: var(--c360-grafite);
  background-image: var(--c360-trama), radial-gradient(120% 90% at 50% 30%, #0B2A30 0%, #050D10 100%);
  color: var(--c360-branco);
}

/* Faixa de topo (cinza-claro com chamada curta em azul) */
.c360-faixa {
  background: var(--c360-nevoa);
  color: var(--c360-azul);
  font: var(--c360-peso-semi) var(--c360-fs-md)/1 var(--c360-fonte-titulo);
  letter-spacing: var(--c360-tracking-faixa);
  text-transform: uppercase;
  text-align: center;
  padding: 14px 16px;
}
.c360-faixa--verde { background: var(--c360-verde); color: var(--c360-azul-profundo); }

/* Hierarquia: apoio leve + título forte, ambos em caixa-alta */
.c360-apoio {
  font: var(--c360-peso-leve) var(--c360-fs-lg)/1.25 var(--c360-fonte-titulo);
  letter-spacing: var(--c360-tracking-apoio);
  text-transform: uppercase;
  margin: 0;
}
.c360-titulo {
  font: var(--c360-peso-extra) var(--c360-fs-3xl)/1.05 var(--c360-fonte-titulo);
  letter-spacing: var(--c360-tracking-titulo);
  text-transform: uppercase;
  margin: 0;
}
.c360-destaque { color: var(--c360-verde); }
.c360-texto { font: var(--c360-peso-regular) var(--c360-fs-md)/1.6 var(--c360-fonte-texto); }
.c360-nota {
  font: var(--c360-peso-semi) var(--c360-fs-xs)/1.4 var(--c360-fonte-texto);
  opacity: .85;
}

/* Botões em pílula */
.c360-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 40px;
  border-radius: var(--c360-raio-pilula);
  font: var(--c360-peso-bold) var(--c360-fs-md)/1 var(--c360-fonte-titulo);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.c360-botao:hover { transform: translateY(-1px); filter: brightness(1.06); }
.c360-botao:focus-visible { outline: 3px solid var(--c360-ciano); outline-offset: 3px; }
/* pílula translúcida (sobre fundo azul) — inspirada na referência */
.c360-botao--pilula {
  background: rgba(150, 180, 205, .42);
  border-color: rgba(255, 255, 255, .28);
  color: var(--c360-branco);
  box-shadow: var(--c360-sombra), inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
}
/* ação principal */
.c360-botao--primario { background: var(--c360-verde); color: var(--c360-azul-profundo); box-shadow: var(--c360-sombra-suave); }
/* contorno */
.c360-botao--contorno { background: transparent; border-color: currentColor; color: inherit; }

/* Cartões */
.c360-cartao {
  background: var(--c360-branco); color: var(--c360-tinta);
  border-radius: var(--c360-raio-lg); padding: var(--c360-esp-4);
  box-shadow: var(--c360-sombra-suave);
}
.c360-cartao--vidro {
  background: rgba(255, 255, 255, .07); color: var(--c360-branco);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--c360-raio-lg); padding: var(--c360-esp-4);
}
.c360-cartao__rotulo {
  font: var(--c360-peso-semi) var(--c360-fs-xs)/1 var(--c360-fonte-titulo);
  letter-spacing: var(--c360-tracking-faixa); text-transform: uppercase;
  color: var(--c360-verde-capital);
}
.c360-cartao--vidro .c360-cartao__rotulo { color: var(--c360-verde); }

/* Selos */
.c360-selo {           /* selo circular branco com o símbolo */
  width: 120px; aspect-ratio: 1; border-radius: 50%;
  background: var(--c360-branco) url("../img/Capital360_selo.svg") center/100% no-repeat;
  box-shadow: var(--c360-sombra);
}
.c360-etiqueta {       /* selo em pílula pequena: "NOVO", "AULA 3", "B3" */
  display: inline-block; padding: 6px 14px; border-radius: var(--c360-raio-pilula);
  font: var(--c360-peso-bold) var(--c360-fs-xs)/1 var(--c360-fonte-titulo);
  letter-spacing: var(--c360-tracking-faixa); text-transform: uppercase;
  background: var(--c360-verde); color: var(--c360-azul-profundo);
}
.c360-etiqueta--ciano { background: var(--c360-ciano); }
.c360-etiqueta--vidro { background: rgba(255,255,255,.12); color: var(--c360-branco); border: 1px solid rgba(255,255,255,.25); }

/* Divisor com o gradiente do anel */
.c360-divisor { height: 4px; width: 72px; border: 0; border-radius: 2px; background: var(--c360-grad-anel); }