/* Vidiagraphics — design system da plataforma web (site, conta e painel).
   Cores do guia de marca: azul profundo #0A1A3F, índigo #3B5BFF, azul elétrico #00B0FF, ciano #00F0FF,
   violeta #8B5CF6, azul claro #F5FAFF. O gradiente da marca fica restrito ao nome e a filetes finos. */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/static/fontes/poppins-regular.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/static/fontes/poppins-medium.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/static/fontes/poppins-semibold.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/static/fontes/poppins-bold.woff2) format('woff2'); }

:root {
  /* marca */
  --profundo: #0A1A3F; --indigo: #3B5BFF; --eletrico: #00B0FF; --ciano: #00F0FF; --violeta: #8B5CF6; --claro: #F5FAFF;
  /* tinta (texto) derivada do azul profundo */
  --tinta: #0A1A3F; --tinta-2: #2A3756; --tinta-3: #56627E; --tinta-4: #8792AB;
  /* superfícies e linhas */
  --papel: #FFFFFF; --papel-2: #F5FAFF; --papel-3: #EAF1FC; --linha: #DCE3EF; --linha-forte: #C3CDDE;
  /* ação e estados */
  --acao: #3B5BFF; --acao-escura: #2C47E0; --foco: #00B0FF;
  --ok: #0E7A4F; --ok-fundo: #E6F6EE; --erro: #B4232F; --erro-fundo: #FDECEE; --alerta: #8A5A00; --alerta-fundo: #FFF5DD;
  --gradiente: linear-gradient(90deg, #00B0FF 0%, #3B5BFF 55%, #8B5CF6 100%);
  /* tipo */
  --fonte: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --t-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  --t-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --t-h3: 1.25rem; --t-grande: 1.1875rem; --t-base: 1rem; --t-peq: .875rem; --t-mini: .78rem;
  /* espaço (base 4px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;
  --largura: 1200px; --gutter: clamp(16px, 4vw, 40px);
  --raio: 10px; --raio-g: 18px;
  --transicao: 160ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-base)/1.65 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
p { margin: 0; }
a { color: var(--acao); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acao-escura); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0, 176, 255, .22); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--e4); top: -60px; background: var(--profundo); color: #fff; padding: var(--e2) var(--e4); border-radius: var(--raio); z-index: 50; }
.pular:focus { top: var(--e4); color: #fff; }
.caixa { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; word-break: break-all; }

/* nome da marca: "Vidia" no gradiente, "graphics" na cor do texto (como no guia) */
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-weight: 700; letter-spacing: -.025em; }
.marca img { width: 36px; height: auto; }
.marca .nome { font-size: 1.32rem; line-height: 1; }
.marca .vidia { background: linear-gradient(90deg, #00B0FF, #3B5BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca:hover { color: var(--tinta); }
.escuro .marca, .marca.clara { color: #fff; }

/* botões */
.btn { --b: var(--acao); display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 46px; padding: 0 22px;
  border: 1.5px solid var(--b); border-radius: var(--raio); background: var(--b); color: #fff; font: 600 .95rem/1 var(--fonte);
  text-decoration: none; cursor: pointer; transition: background var(--transicao), border-color var(--transicao), color var(--transicao); white-space: nowrap; }
.btn:hover { --b: var(--acao-escura); color: #fff; }
.btn.secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.btn.secundario:hover { border-color: var(--tinta); color: var(--tinta); }
.btn.claro { --b: #fff; color: var(--profundo); }
.btn.claro:hover { --b: var(--papel-3); color: var(--profundo); }
.btn.perigo { --b: var(--erro); }
.btn.perigo:hover { --b: #921B26; }
.btn.pequeno { min-height: 36px; padding: 0 14px; font-size: .86rem; border-radius: 8px; }
.btn[disabled], .btn.desligado { opacity: .5; pointer-events: none; }
.link-seta { font-weight: 600; text-decoration: none; }
.link-seta::after { content: " →"; transition: margin var(--transicao); }
.link-seta:hover::after { margin-left: 3px; }

/* formulários */
.campo { display: grid; gap: 6px; margin-bottom: var(--e5); }
.campo label, .rotulo { font-weight: 500; font-size: var(--t-peq); color: var(--tinta-2); }
.campo .ajuda { font-size: var(--t-mini); color: var(--tinta-3); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio);
  background: #fff; color: var(--tinta); font: 400 1rem/1.4 var(--fonte); transition: border-color var(--transicao), box-shadow var(--transicao); }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px rgba(59, 91, 255, .18); }
input[aria-invalid=true] { border-color: var(--erro); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-peq); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acao); }

/* mensagens */
.aviso { padding: 12px 16px; border-radius: var(--raio); border-left: 3px solid; font-size: var(--t-peq); margin-bottom: var(--e5); }
.aviso.ok { background: var(--ok-fundo); border-color: var(--ok); color: #0A4F33; }
.aviso.erro { background: var(--erro-fundo); border-color: var(--erro); color: #7A1520; }
.aviso.alerta { background: var(--alerta-fundo); border-color: #C98A00; color: #5C3D00; }
.aviso.info { background: var(--papel-2); border-color: var(--acao); color: var(--tinta-2); }
.aviso strong { font-weight: 600; }

/* carregamento */
.carregando { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; vertical-align: -3px; }
@keyframes girar { to { transform: rotate(360deg); } }
.progresso { height: 6px; border-radius: 3px; background: var(--papel-3); overflow: hidden; }
.progresso > span { display: block; height: 100%; width: 0; background: var(--gradiente); transition: width .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}