/* =====================================================================
   Comissão Familiar de Assuntos Afetivos
   Faixa institucional escura + fichas sobre creme. O peso está na chamada
   direta ao Fernando; o resto do texto fica quieto e legível.
   ===================================================================== */

:root {
  /* Autoridade */
  --marinho:       #16243f;
  --marinho-fundo: #0f1a2e;
  --marinho-fio:   #2b3e60;

  /* Papel */
  --creme:         #f4efe6;
  --creme-fundo:   #ebe4d8;
  --branco:        #fffdfa;
  --borda:         #e0d7c8;

  /* Tinta */
  --tinta:         #1c2536;
  --tinta-suave:   #62708a;
  --tinta-clara:   #d6ddea;

  /* Acento: cobre de carimbo antigo */
  --cobre:         #a8552c;
  --cobre-claro:   #c4693a;
  --cobre-fraco:   #f6e6dc;

  --ouro:          #c49a4a;

  --titulo: 'Prata', Georgia, 'Times New Roman', serif;
  --texto:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala modular, razão 1.25 sobre 16.5px */
  --t-0: 0.72rem;
  --t-1: 0.815rem;
  --t-2: 0.92rem;
  --t-3: 1.03rem;
  --t-4: 1.24rem;
  --t-5: 1.55rem;
  --t-6: 2.1rem;
  --t-7: 2.7rem;

  --raio: 14px;
  --gutter: clamp(1.15rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` perde para qualquer seletor de classe que defina
   display (.pilha usa flex). Sem isto, esconder #processo não funciona e a
   confirmação aparece por cima do formulário antigo. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--creme);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-3);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.folha {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  /* clip, e não hidden: hidden criaria um contêiner de rolagem que não rola,
     o que atrapalha scrollIntoView e a âncora do link "pular". */
  overflow: clip;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cobre);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: var(--t-2);
  z-index: 50;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ============================ CAPA ============================ */

.capa {
  background-color: var(--marinho);
  background-image:
    radial-gradient(110% 80% at 15% 0%, #1e3050 0%, var(--marinho) 55%, var(--marinho-fundo) 100%);
  color: #fff;
  padding: clamp(1.75rem, 5vw, 2.75rem) var(--gutter) clamp(2rem, 6vw, 3rem);
}

.capa__interior > * {
  animation: subir 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* Uma sequência só, no carregamento — não em cada seção ao rolar. */
.capa__interior > *:nth-child(1) { animation-delay: 40ms; }
.capa__interior > *:nth-child(2) { animation-delay: 130ms; }
.capa__interior > *:nth-child(3) { animation-delay: 200ms; }
.capa__interior > *:nth-child(4) { animation-delay: 280ms; }
.capa__interior > *:nth-child(5) { animation-delay: 340ms; }
.capa__interior > *:nth-child(6) { animation-delay: 390ms; }

@keyframes subir {
  from { opacity: 0; transform: translateY(0.65rem); }
  to   { opacity: 1; transform: none; }
}

.marca {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.brasao { width: 3.9rem; height: auto; flex: none; }

.br-campo     { fill: #1b2c4b; }
.br-contorno  { fill: none; stroke: var(--ouro); stroke-width: 3; }
.br-fio       { stroke: var(--ouro); stroke-width: 1.4; opacity: 0.35; }
.br-carga     { fill: var(--ouro); }
.br-rotulo    { fill: #1b2c4b; }
.br-raio      { stroke: var(--ouro); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.br-raio--grosso { stroke-width: 3; }
.br-escudete  { fill: #fffdfa; stroke: var(--ouro); stroke-width: 1.5; }
.br-coracao   { fill: var(--cobre-claro); }

.marca__texto { min-width: 0; }

.marca__orgao {
  margin: 0;
  font-family: var(--titulo);
  font-size: var(--t-5);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marca__sub {
  margin: 0.25rem 0 0;
  font-size: var(--t-1);
  color: var(--tinta-clara);
  line-height: 1.35;
}

.marca__processo {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.22rem 0.7rem;
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-clara);
  border: 1px solid var(--marinho-fio);
  border-radius: 999px;
}

.alerta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffd9c4;
  background-color: rgba(168, 85, 44, 0.28);
  border: 1px solid rgba(196, 105, 58, 0.55);
  border-radius: 999px;
}

.alerta__sinal {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--cobre-claro);
  border-radius: 50%;
}

.chamada {
  margin: 0 0 0.9rem;
  font-family: var(--titulo);
  font-size: clamp(2rem, 8.5vw, var(--t-7));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.capa__linha {
  margin: 0;
  max-width: 34rem;
  font-size: var(--t-3);
  line-height: 1.55;
  color: #dfe5ef;
}
.capa__linha strong { color: #fff; font-weight: 600; }

.risco {
  width: 2.75rem;
  height: 3px;
  margin: 1.5rem 0 1.1rem;
  background-color: var(--cobre-claro);
  border-radius: 2px;
}

.capa__vocativo {
  margin: 0;
  font-size: var(--t-2);
  color: var(--tinta-clara);
}

/* A CSP não permite style= inline; estas duas nasceram no 404. */
.chamada--404 { margin-top: 1.5rem; }
.ficha__nota--fim { margin-bottom: 0; }

/* ============================ TRILHA ============================ */

.trilha {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 1.75rem var(--gutter) 0.5rem;
}

.trilha__passo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-1);
  color: var(--tinta-suave);
}

/* O fio que liga um passo ao seguinte. */
.trilha__passo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: calc(50% + 1.4rem);
  right: calc(-50% + 1.4rem);
  height: 2px;
  background-color: var(--borda);
}
.trilha__passo--feito:not(:last-child)::after { background-color: var(--marinho); }

.trilha__marca {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  font-size: var(--t-1);
  font-weight: 700;
  border-radius: 50%;
  background-color: var(--borda);
  color: var(--tinta-suave);
}
.trilha__passo--feito .trilha__marca { background-color: var(--marinho); color: #fff; }
.trilha__passo--agora .trilha__marca {
  background-color: var(--cobre);
  color: #fff;
  box-shadow: 0 0 0 4px var(--cobre-fraco);
}

.trilha__nome { text-align: center; }
.trilha__passo--agora .trilha__nome { color: var(--cobre); font-weight: 600; }

/* ============================ FICHAS ============================ */

.pilha {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem var(--gutter) 0;
}

.ficha {
  background-color: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.4rem 1.35rem 1.5rem;
}

.ficha__topo {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.ficha h2 {
  margin: 0;
  font-family: var(--titulo);
  font-size: var(--t-4);
  font-weight: 400;
  line-height: 1.25;
  color: var(--marinho);
}

.icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background-color: var(--creme-fundo);
}
.icone svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--marinho);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--acao { background-color: var(--branco); }
.icone--acao svg { stroke: var(--cobre); }

.ficha__nota {
  margin: 0.4rem 0 1.1rem;
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--tinta-suave);
}
.ficha__nota--acao { margin-bottom: 0; }
.ficha__nota--acao strong { color: var(--cobre); font-weight: 600; }

/* --- pares rótulo/valor --- */

.dados { margin: 0; }
.dados > div {
  display: grid;
  grid-template-columns: minmax(5rem, auto) 1fr;
  align-items: baseline;
  gap: 0.15rem 1.25rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--creme-fundo);
}
.dados > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dados > div:first-child { padding-top: 0; }

.dados dt {
  font-size: var(--t-2);
  color: var(--tinta-suave);
}
.dados dd {
  margin: 0;
  font-size: var(--t-2);
  font-weight: 600;
  text-align: right;
}

.pendura {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--cobre);
  background-color: var(--cobre-fraco);
  border-radius: 999px;
}
.pendura::before { content: "◷"; font-size: 0.9em; }

/* --- parecer --- */

.parecer { list-style: none; margin: 0; padding: 0; }
/* Grid, não flex-wrap: com flex, um item longo joga o estado para a linha
   de baixo e ele vai para a esquerda, furando o alinhamento da coluna. */
.parecer li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--creme-fundo);
}
.parecer li:last-child { border-bottom: 0; padding-bottom: 0; }
.parecer li:first-child { padding-top: 0; }

.parecer__item { font-size: var(--t-2); color: var(--tinta-suave); }

.parecer__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-2);
  font-weight: 600;
  white-space: nowrap;
}
.parecer__estado::before {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 50%;
}
.parecer__estado--ok { color: var(--marinho); }
.parecer__estado--ok::before { content: "✓"; background-color: #3d7a5c; }

.parecer__estado--falta { color: var(--cobre); }
.parecer__estado--falta::before { content: "!"; background-color: var(--cobre); }
.parecer li:has(.parecer__estado--falta) .parecer__item {
  color: var(--tinta);
  font-weight: 600;
}

/* --- etapas: sequência de verdade, por isso numerada --- */

.ficha--anexo { background-color: var(--creme-fundo); border-color: transparent; }
.ficha--anexo .icone { background-color: #ded5c5; }

.etapas { list-style: none; margin: 0; padding: 0; }
.etapas li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.55rem 0;
}
.etapas__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  font-size: var(--t-0);
  font-weight: 700;
  color: var(--marinho);
  background-color: #ded5c5;
  border-radius: 50%;
}
.etapas__texto { font-size: var(--t-2); line-height: 1.5; color: var(--tinta-suave); }

/* ============================ AÇÃO ============================ */

.ficha--acao {
  background-color: var(--cobre-fraco);
  border-color: rgba(168, 85, 44, 0.3);
}
.ficha--acao .ficha__topo { margin-bottom: 1.35rem; }

.requerimento__rotulo {
  display: block;
  font-size: var(--t-2);
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.campo {
  display: flex;
  align-items: center;
  background-color: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.campo:focus-within {
  border-color: var(--cobre);
  box-shadow: 0 0 0 3px rgba(168, 85, 44, 0.16);
}
.campo:has(.campo__entrada[aria-invalid="true"]) { border-color: var(--cobre); }

.campo__icone {
  display: grid;
  place-items: center;
  padding: 0 0.1rem 0 0.9rem;
}
.campo__icone svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--tinta-suave);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campo__entrada {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem 0.9rem 0.7rem;
  font-family: var(--texto);
  font-size: var(--t-3);
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: 10px;
}
.campo__entrada::placeholder { color: #a9b2c2; }
.campo__entrada:focus { outline: none; }
.campo__entrada:disabled { opacity: 0.55; cursor: not-allowed; }

.requerimento__nota {
  margin: 0.55rem 0 0;
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--tinta-suave);
}

.requerimento__erro {
  display: flex;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.9rem;
  font-size: var(--t-2);
  color: #7d3a1c;
  background-color: #fbdcc9;
  border-radius: 8px;
}
.requerimento__erro::before { content: "!"; font-weight: 700; }
.requerimento__erro[hidden] { display: none; }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: 1.05rem 1.25rem;
  font-family: var(--texto);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--cobre);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease, transform 110ms ease;
}
.botao:hover:not(:disabled) { background-color: #934823; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--marinho); outline-offset: 2px; }
.botao:disabled { cursor: progress; background-color: #b99280; }

.botao__selo { display: grid; place-items: center; flex: none; }
.botao__selo svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao__espera { display: none; }
.botao--enviando .botao__texto { display: none; }
.botao--enviando .botao__espera { display: inline; }
.botao--enviando .botao__selo { display: none; }

.requerimento__ressalva {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--tinta-suave);
}
.requerimento__ressalva::before { content: "§"; font-weight: 700; color: var(--cobre); }

/* ============================ CONFIRMAÇÃO ============================ */

.confirmacao {
  padding: 1.25rem var(--gutter) 0;
  animation: subir 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.confirmacao[hidden] { display: none; }

.ficha--fecho { text-align: center; padding: 2rem 1.35rem 1.75rem; }

.carimbo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0 auto 1.75rem;
  padding: 0.55rem 1.2rem 0.5rem;
  border: 2.5px solid var(--cobre);
  outline: 1px solid var(--cobre);
  outline-offset: 2.5px;
  color: var(--cobre);
  opacity: 0;
  transform: rotate(-9deg);
  animation: prensar 520ms cubic-bezier(0.25, 1.4, 0.45, 1) 140ms both;
}
.carimbo__linha {
  font-family: var(--titulo);
  font-size: var(--t-5);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
}
.carimbo__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.85;
}

@keyframes prensar {
  0%   { opacity: 0;    transform: rotate(-9deg) scale(2.4); }
  60%  { opacity: 0.95; transform: rotate(-9deg) scale(0.94); }
  80%  { opacity: 0.92; transform: rotate(-9deg) scale(1.03); }
  100% { opacity: 0.9;  transform: rotate(-9deg) scale(1); }
}

/* O foco é movido para cá por JS, para o leitor de tela anunciar o desfecho.
   O anel só aparece se o foco tiver vindo do teclado. */
.confirmacao__titulo:focus:not(:focus-visible) { outline: none; }

.confirmacao__titulo {
  margin: 0;
  font-family: var(--titulo);
  font-size: var(--t-6);
  font-weight: 400;
  line-height: 1.15;
  color: var(--marinho);
}

.confirmacao__chamada {
  margin: 0.5rem 0 1.5rem;
  font-size: var(--t-4);
  font-weight: 600;
  color: var(--cobre);
}

.confirmacao__texto,
.confirmacao__rodape {
  margin: 0 auto;
  max-width: 27rem;
  font-size: var(--t-2);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.confirmacao__rodape { margin-top: 1.1rem; font-style: italic; }

.confirmacao__destino {
  display: inline-block;
  margin: 1.35rem auto 0;
  padding: 0.7rem 1.15rem;
  font-size: var(--t-2);
  background-color: var(--creme-fundo);
  border-radius: 8px;
}
.confirmacao__destino strong { color: var(--marinho); font-weight: 700; }

.dados--fecho {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--creme-fundo);
  text-align: left;
}

/* ============================ RODAPÉ ============================ */

.rodape {
  margin-top: 2.5rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  text-align: center;
  border-top: 1px solid var(--borda);
}
.rodape p {
  margin: 0;
  font-size: var(--t-0);
  line-height: 1.55;
  color: var(--tinta-suave);
}
.rodape__lema {
  margin-top: 0.5rem !important;
  font-family: var(--titulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobre);
}

/* ============================ CONFETE ============================ */

.confete {
  position: absolute;
  top: 0;
  width: 6px;
  height: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: cair var(--duracao, 2400ms) cubic-bezier(0.3, 0.5, 0.6, 1) var(--atraso, 0ms) forwards;
}

@keyframes cair {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--deriva, 0px), var(--queda, 320px), 0) rotate(var(--giro, 540deg));
  }
}

/* ============================ TELAS LARGAS ============================ */

@media (min-width: 46rem) {
  body { padding: 2.5rem 1.5rem; }
  .folha {
    border-radius: 20px;
    box-shadow: 0 1.5rem 3rem rgba(22, 36, 63, 0.16), 0 0.25rem 0.75rem rgba(22, 36, 63, 0.08);
    background-color: var(--creme);
  }
  .rodape { padding-bottom: 2rem; }
}

/* ============================ TELAS ESTREITAS ============================ */

@media (max-width: 26rem) {
  .marca { gap: 0.75rem; }
  .brasao { width: 3.1rem; }
  .marca__orgao { font-size: 1.25rem; }
  .trilha__nome { font-size: 0.72rem; }
  .botao { letter-spacing: 0.06em; font-size: 0.85rem; }
}

/* Abaixo disto duas colunas não cabem mais; aí sim, empilha. */
@media (max-width: 21rem) {
  .dados > div { grid-template-columns: 1fr; }
  .dados dd { text-align: left; }
  .parecer li { flex-direction: column; align-items: flex-start; }
}

/* ============================ ACESSIBILIDADE ============================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .capa__interior > *, .carimbo { opacity: 1; }
  .carimbo { opacity: 0.9; }
  .confete { display: none; }
}

@media print {
  body { background: #fff; }
  .folha { box-shadow: none; }
  .capa { background: var(--marinho) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .requerimento, .pular { display: none; }
}