/* =========================================================================
   Marca Simples — tema claro.

   Valores retirados do guia de identidade (sites/marca/simples.html), medidos
   no arquivo original da logo. O azul #274291 tem 9,23:1 sobre branco e
   sustenta texto sem problema.

   O verde #46AF74 e o ponto da marca: serve como forma (marcador, bolinha),
   nao como texto — sobre branco ele fica em 2,75:1. Quando precisa virar
   letra, usa-se #317A51 (5,21:1).
   ========================================================================= */

:root {
  /* --- superficies --- */
  --bg: #FFFFFF;
  --bg-alt: #F4F6FA;
  --surface: #FFFFFF;
  --line: #E1E5EE;

  /* --- texto --- */
  --ink: #131A2B;
  --ink-2: #46506A;
  --ink-3: #575E70;         /* 4,77:1 ate no fundo mais tingido */

  /* --- marca --- */
  --brand: #274291;         /* valor medido na logo */
  --brand-hover: #1F3574;
  --brand-text: #274291;    /* 9,23:1 sobre branco */
  --on-brand: #FFFFFF;
  --accent: #46AF74;        /* o ponto: so como forma */

  /* --- cabecalho --- */
  --header-bg: rgba(255, 255, 255, .92);
  --header-line: #E1E5EE;

  /* --- faixa institucional --- */
  --band-bg: #274291;
  --band-ink: rgba(255, 255, 255, .82);
  --band-title: #FFFFFF;
  --band-accent: #90CFAC;
  --btn-light-bg: #FFFFFF;
  --btn-light-ink: #274291;

  /* --- etiqueta --- */
  --tag-bg: #E9ECF4;
  --tag-ink: #1F3574;

  /* --- rodape --- */
  --footer-bg: #172857;
  --footer-ink: rgba(255, 255, 255, .68);
  --footer-title: #FFFFFF;
  --footer-line: rgba(255, 255, 255, .14);

  /* --- capa --- */
  --hero-bg:
    radial-gradient(1000px 440px at 80% -8%, #E9ECF4, transparent 62%),
    #FFFFFF;

  /* --- tipografia (guia: geometrica de cantos suaves) --- */
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --peso-titulo: 600;
  --peso-forte: 600;
}

/* Verde legivel, para quando o acento precisar virar texto. */
.verde-texto { color: #317A51; }

/* =========================================================================
   Arte da capa: o ponto.

   A marca nao tem simbolo separado — tem o ponto verde. Aqui ele aparece
   ampliado, cortado pela borda direita, como assinatura da capa.
   O guia pede que o ponto signifique "concluido": na capa ele encerra a
   frase "e ponto".
   ========================================================================= */

/* Halo azul suave, para o ponto nao flutuar sozinho no branco. */
.arte-ponto {
  background: radial-gradient(closest-side at 78% 50%, var(--azul-c95, #F4F6FA), transparent 72%);
}

.arte-ponto span {
  position: absolute;
  top: 50%;
  right: -4%;
  width: clamp(240px, 34vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* O ponto, parado. */
.arte-ponto .ponto {
  background: var(--accent);
}

@media (max-width: 900px) {
  .arte-ponto span { top: auto; bottom: -12%; right: -26%; transform: none; }
}