@import url("govinda-tokens.css");

/* ============================================================
   /cadastro-de-agencia — O CADASTRO DO AGENTE PARCEIRO
   Design System v2. Tudo sob .ag para nao colidir com o CSS do clone.

   Este e' o formulario mais longo do site: 26 campos. A decisao de desenho
   que sustenta o resto e' parti-lo em cinco blocos com pergunta propria
   ("Quem e' voce", "Onde voce mora"...), em vez de uma coluna unica de 26
   linhas. Formulario longo nao cansa pelo tamanho; cansa por nao mostrar
   onde termina.
   ============================================================ */

/* O clone nao define border-box global — medido. Sem isto, campo com padding
   e largura em % estoura a grade. */
.ag, .ag *, .ag *::before, .ag *::after { box-sizing: border-box; }

.ag {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background: linear-gradient(180deg, var(--fundo-alto), var(--fundo-baixo));
  position: relative;
  isolation: isolate;
}
/* Grao de papel — 3,2%, fixo, nunca intercepta clique. */
.ag::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: .032; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ag__caixa {
  max-width: 940px;
  margin: 0 auto;
  /* margens assimetricas — externa maior que interna */
  padding-inline: clamp(20px, 5vw, 64px) clamp(20px, 5vw, 48px);
  padding-bottom: clamp(48px, 8vw, 112px);
  position: relative; z-index: 1;
}

/* ---------------------------  ABERTURA  --------------------------- */
/* Respiro assimetrico ~2:1: o ar acima do titulo e' o dobro do de baixo. */
.ag__abertura { padding-block: clamp(56px, 9vh, 128px) clamp(28px, 4vh, 56px); }

.ag__rotulo {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.ag__rotulo::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--ouro); }

.ag__titulo {
  font-family: var(--f-pagina); font-weight: 400;   /* titulo nunca engorda */
  font-size: var(--t-display); line-height: 1.04; letter-spacing: -.015em;
  margin: var(--e-4) 0 0;
}
.ag__titulo em { font-style: italic; color: var(--acento); }  /* acafrao e' display */

.ag__linha {
  max-width: var(--w-leitura);
  margin-top: var(--e-5);
  font-size: var(--t-corpo-ed);
  line-height: 1.95;   /* a entrelinha larga e' da marca; nao apertar */
}

/* ---------------------------  BLOCOS  --------------------------- */
.ag__bloco {
  border: 0; margin: 0; padding: 0;
  padding-block: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--superficie-2);
}
.ag__bloco:first-of-type { border-top: 1px solid var(--ouro); }

.ag__legenda {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15;
  padding: 0; margin-bottom: var(--e-5);
}

/* Grade de 12 colunas: e' o que deixa o campo de UF ocupar duas e o de PIX
   ocupar a linha inteira sem inventar largura em pixel. */
.ag__grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e-4);
}
.ag__campo--1 { grid-column: span 12; }
.ag__campo--2 { grid-column: span 6; }
.ag__campo--3 { grid-column: span 4; }
.ag__campo--4 { grid-column: span 2; }
@media (max-width: 720px) {
  .ag__campo--2, .ag__campo--3 { grid-column: span 12; }
  .ag__campo--4 { grid-column: span 6; }
}

/* ---------------------------  CAMPO  --------------------------- */
.ag__campo { margin: 0; display: flex; flex-direction: column; }

.ag__campo label {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-selo); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta);   /* tinta, e nao tinta-suave: neste corpo o suave nao chega a 4,5:1 */
  margin-bottom: 6px;
}
.ag__campo label b { color: var(--acento-forte); font-weight: 600; }

.ag__campo input,
.ag__campo select {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--superficie-2);
  border-bottom: 1px solid var(--tinta-suave);   /* a linha de baixo marca onde se escreve */
  border-radius: var(--raio);
  padding: 11px 12px;
  width: 100%;
  transition: border-color var(--dur-rapida) var(--ease),
              background var(--dur-rapida) var(--ease);
}
.ag__campo input::placeholder { color: #8C877D; opacity: .75; }

.ag__campo input:hover, .ag__campo select:hover { background: var(--superficie-2); }
.ag__campo input:focus, .ag__campo select:focus {
  outline: 2px solid var(--acento);   /* foco visivel: obrigatorio, nunca outline:none */
  outline-offset: 2px;
  background: var(--superficie);
  border-bottom-color: var(--acento);
}
.ag__campo input[aria-invalid="true"] { border-bottom-color: #9E3B32; border-bottom-width: 2px; }

.ag__ajuda {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .10em;
  color: var(--tinta-suave); margin-top: 5px;
}

.ag__erro {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-selo); letter-spacing: .08em;
  color: #9E3B32;   /* o vermelhao dos tokens: 5,52:1 sobre a areia */
  margin-top: 5px;
}
.ag__erro[hidden] { display: none; }
.ag__erro--geral {
  display: block; margin: 0 0 var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border-left: 3px solid #9E3B32;
  border-radius: var(--raio);
  font-size: var(--t-legenda); letter-spacing: .02em; text-transform: none;
}

/* ---------------------------  ENVIO  --------------------------- */
.ag__enviar {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--e-5);
  border-top: 1px solid var(--ouro);
  display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center;
}
/* Botao-pilula navy: excecao declarada da v2 (§7.2), ainda em ratificacao. */
.ag__botao {
  display: inline-block;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: .9rem; letter-spacing: .06em;
  color: var(--fundo); background: var(--navy);
  padding: 16px 34px; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-normal) var(--ease);
}
.ag__botao:hover:not(:disabled) { background: linear-gradient(90deg, var(--acento), var(--acento-forte)); }
.ag__botao:disabled { opacity: .55; cursor: default; }
.ag__botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.ag__nota {
  flex: 1 1 22ch; margin: 0;
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .10em;
  color: var(--tinta-suave); line-height: 1.7;
}
.ag__nota b { color: var(--acento-forte); }

/* ---------------------------  AGRADECIMENTO  --------------------------- */
.ag__feito {
  border-top: 1px solid var(--ouro);
  padding-block: clamp(48px, 8vw, 96px);
  max-width: var(--w-leitura);
}
.ag__feito[hidden] { display: none; }
.ag__feito-titulo {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.12;
  margin: var(--e-5) 0 0;
}
.ag__feito-texto {
  margin: var(--e-4) 0 var(--e-6);
  font-size: var(--t-corpo-ed); line-height: 1.95;
}

@media (prefers-reduced-motion: reduce) { .ag * { transition-duration: .01ms !important; } }