/* Diagnostico de Maturidade - Reforma Tributaria
   Visual de referencia: Larafy (navy + ciano), sobrio e corporativo.

   TROCA DE MARCA: mexa so no bloco :root. Nenhuma outra regra deste arquivo
   tem cor escrita na mao. */

:root {
  /* Cores do site larafy.com.br, pela contagem de uso no HTML de lá:
     #07e0ff (154x) e o acento vivo, usado SOBRE FUNDO ESCURO;
     #0090ad (31x) e a versao que aguenta fundo claro;
     #001621 e o fundo do hero, #002e43 o navy secundario. */
  --marca:        #0090ad;   /* acento sobre claro  */
  --marca-viva:   #07e0ff;   /* acento sobre escuro */
  --marca-fundo:  #e8f6fa;
  --marca-borda:  #b9e3ef;
  --capa-fundo:   #01202e;   /* igual ao fundo da arte da capa */
  --navy:         #10293a;
  --tinta:        #1d3644;
  --tinta-fraca:  #45606d;
  --fundo:        #f2f6f8;
  --papel:        #ffffff;
  --borda:        #dfe8ed;
  --borda-forte:  #c8d6dd;
  --bom:          #0a7266;
  --bom-fundo:    #eaf6f4;
  --ruim:         #c33d4e;
  --ruim-fundo:   #fbeef0;
  --alerta:       #8a5a10;
  --alerta-fundo: #fbf4e6;
  /* Dourado da arte da capa (Novo fundo.png, 21/09/2026). Amostrado
     da propria imagem. Da 5,94:1 sobre o navy da capa, passa em AA.
     So vive na capa: o resto do sistema continua navy e ciano. */
  --dourado:      #ac985f;
  --fonte: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* nada pode empurrar a pagina para fora da tela */
img, table, video, pre { max-width: 100%; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
}

/* A topografia do site vale para o tema claro (relatorio, painel, erro).
   No formulario ela saiu a pedido do cliente. */
body:not(.tema-escuro) {
  background:
    url("../img/topografia.png") center bottom / 100% auto no-repeat fixed,
    var(--fundo);
}

.envoltorio {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

/* o cartao precisa ficar acima da topografia do fundo */
.cartao { position: relative; }

/* capa com video de fundo ----------------------------------------------- */
/* Mesma montagem do hero de larafy.com.br: filmagem de industria, um
   gradiente escuro da esquerda para a direita (escuro onde fica o texto,
   aberto onde a imagem aparece) e outro de baixo para cima. */

.capa {
  position: relative;
  overflow: hidden;
  /* So a cor aqui. A arte vive na camada .capa::after, que e a que se
     aproxima devagar. Declarar a imagem nos dois lugares faria o mesmo
     arquivo ser pintado duas vezes sem motivo. Esta cor e o que aparece
     enquanto a foto carrega, e se ela falhar. */
  background: var(--capa-fundo);

  /* Tela cheia. A arte foi feita como uma tela inteira (1920x1584), nao
     como faixa de topo: cortada numa tira de 460px virava um pedaco de
     foto com texto por cima.

     100svh e nao 100vh: no celular o 'vh' conta a barra de endereco que
     some ao rolar, entao a capa nascia mais alta que a tela e empurrava a
     chamada "Comece agora" para fora. O 100vh fica antes como reserva para
     navegador que nao conhece svh. */
  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;
  /* respiro generoso: com a arte ocupando tudo, texto perto da borda e o
     que da a impressao de peca montada as pressas */
  padding: 72px 24px;
  text-align: center;
}

/* fio de acento no topo, igual ao da moldura de video do site */
.capa__fio {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent, var(--marca-viva) 50%, transparent);
}

.capa__conteudo {
  position: relative;
  z-index: 2;
  max-width: 660px;
  width: 100%;
}

/* Entrada em sequencia: logo, titulo, fio, explicacao, chamada.
   Cada peca sobe um pouco depois da anterior, com 90ms entre elas. E o
   suficiente para a tela parecer viva sem virar apresentacao de slide.
   Tudo em CSS: nenhum arquivo novo, nenhum JavaScript. */
.capa__logo    { animation: sobe .6s ease-out .10s both; }
.capa__titulo  { animation: sobe .6s ease-out .19s both; }
.capa__regua   { animation: risca .5s ease-out .46s both; }
.capa__linha   { animation: sobe .6s ease-out .55s both; }
.capa__chamada { animation: sobe .6s ease-out .64s both; }
.capa__nota    { animation: sobe .6s ease-out .73s both; }

/* o fio da regua e desenhado do centro para fora, como na arte */
@keyframes risca {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* A foto se aproxima devagar, 14 segundos, e para. Movimento lento e
   continuo puxa o olho sem competir com o texto; zoom rapido em foto de
   fundo e efeito de banner. */
.capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                 /* o conteudo tem z-index 2 e fica por cima */
  /* Ancora no TOPO, e nao embaixo.
     Medido na arte: a cabeca do Waldir comeca em 29% da altura. Com a
     ancora embaixo, o corte comia o topo: 31,8% em monitor de 1920x1080,
     1366x768 e 2560x1440, ou seja, cortava o rosto dele em quase todo
     monitor. So escapava num notebook de 1440x900.
     Ancorando no topo, o corte passa a comer a base (o rodape do predio e
     a cintura dele), que nao faz falta, e a cabeca fica inteira.
     O texto vive no centro da tela e o Waldir na faixa esquerda (0 a 25%
     da largura), entao os dois nao se cruzam. */
  background: url("../img/capa-larafy.jpg") center top / cover no-repeat;
  animation: aproxima 14s ease-out both;
  pointer-events: none;
}

/* Vinheta suave no miolo. A arte ja e escura, mas em tela larga o texto
   cai por cima da parte clara do predio. Isso escurece so o centro, sem
   apagar o palestrante nem o ceu das laterais. */
.capa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 70% 62% at 50% 45%,
    rgba(1, 32, 46, .82) 0%,
    rgba(1, 32, 46, .55) 45%,
    rgba(1, 32, 46, 0) 100%);
  pointer-events: none;
}

@keyframes aproxima {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.capa__logo {
  height: 46px;
  width: auto;
  display: block;
  margin: 0 auto 26px;
}

.capa__titulo {
  margin: 0 0 20px;
  /* 27px e nao 31px: o titulo novo tem quase o dobro de caracteres do
     anterior e, em caixa alta, no tamanho velho ele passava de tres
     linhas e empurrava o botao para fora da tela. */
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}

.capa__titulo em {
  font-style: normal;
  color: var(--dourado);
}

/* fio fino separando titulo e explicacao, como na arte */
.capa__regua {
  display: block;
  width: 190px;
  height: 1px;
  margin: 0 auto 20px;
  background: rgba(255, 255, 255, .28);
}

.capa__linha {
  margin: 0 auto 26px;
  max-width: 34em;
  font-size: 15.5px;
  line-height: 1.6;
  font-style: italic;
  color: #d3dfe6;
}

.capa__linha strong { color: #fff; }

.capa__chamada {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* seta dupla para baixo, desenhada em CSS: a arte tem um chevron ali e
   nao vale pedir um arquivo de imagem so para isso */
.capa__seta {
  display: block;
  width: 15px;
  height: 15px;
  margin: 8px auto 0;
  border-right: 2px solid var(--dourado);
  border-bottom: 2px solid var(--dourado);
  transform: rotate(45deg);
  animation: seta 1.8s ease-in-out infinite;
}

@keyframes seta {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .65; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.capa__nota {
  margin: 22px 0 0;
  font-size: 13px;
  color: #8fa8b5;
}

/* entrada das etapas e das perguntas ------------------------------------ */

@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.etapa.entrando { animation: sobe .34s ease-out both; }

/* Escalonado pela posicao ENTRE PERGUNTAS.
   Antes era :nth-of-type, que conta divs irmaos: dentro do bloco os divs
   sao progresso, barra, cabeca e so depois as perguntas. Os indices 1 a 3
   nao casavam com pergunta nenhuma, e a 3a e a 4a ficavam sem atraso,
   entrando ANTES da 1a. A cascata aparecia invertida. */
.etapa.entrando .pergunta { animation: sobe .3s ease-out both; }
.etapa.entrando .pergunta:nth-of-type(4)  { animation-delay: .06s; }
.etapa.entrando .pergunta:nth-of-type(5)  { animation-delay: .12s; }
.etapa.entrando .pergunta:nth-of-type(6)  { animation-delay: .18s; }
.etapa.entrando .pergunta:nth-of-type(7)  { animation-delay: .24s; }

/* a opcao escolhida dá um pulinho curto */
@keyframes marcou {
  50% { transform: scale(1.06); }
}

.opcao[aria-pressed="true"] { animation: marcou .22s ease-out; }

/* quem pediu menos movimento fica com a imagem parada e sem entradas */
@media (prefers-reduced-motion: reduce) {
  .capa__seta,
  .capa::after,
  .capa__logo,
  .capa__titulo,
  .capa__regua,
  .capa__linha,
  .capa__chamada,
  .capa__nota { animation: none; }
  .capa__conteudo,
  .etapa.entrando,
  .etapa.entrando .pergunta,
  .opcao[aria-pressed="true"] { animation: none; }
}

/* topografia no fundo da pagina, como no site.
   Vai no proprio body, presa na viewport: cobre a tela inteira e nao cria
   emenda. O PNG tem 91% de transparencia, entao as linhas aparecem sobre o
   cinza sem bloco branco por baixo. */
.envoltorio { position: relative; }

/* topo interno das telas sem capa (painel, erro) ------------------------ */

.topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}

.topo__logo {
  height: 26px;
  width: auto;
  display: block;
}

.topo__contexto {
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* cartao ---------------------------------------------------------------- */

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 28px;
}

h1 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -.5px;
  color: var(--navy);
  margin: 0 0 8px;
}

h2 {
  font-size: 19px;
  letter-spacing: -.2px;
  color: var(--navy);
  margin: 0 0 3px;
}

h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.subtexto {
  color: var(--tinta-fraca);
  margin: 0 0 24px;
}

.subtexto--justo { margin-bottom: 16px; }




/* criterios e botao dentro da capa --------------------------------------- */
/* Eram uma tela inteira (a etapa "instrucoes"), que a pessoa lia antes de
   decidir se ia responder. Aqui chegam junto com a decisao, e o fluxo
   perde um clique. Linha tipografica, nao tres cartoes lado a lado. */

.capa__criterios {
  margin: 0 auto 26px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  max-width: 560px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

.capa__criterios > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 5px 0;
}

.capa__criterios dt {
  margin: 0;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--marca-viva);   /* 10,5:1 sobre o navy da capa */
  padding-top: 2px;
}

.capa__criterios dd {
  margin: 0;
  color: #c3d3dc;
}

.capa__acao { margin-top: 4px; }

.capa__botao {
  min-width: 240px;
  font-size: 16px;
  padding: 14px 32px;
}

.capa__acao .capa__nota {
  margin: 16px auto 0;
  max-width: 44em;
}

@media (max-width: 680px) {
  /* No celular a capa e alta e estreita, e a foto sobe muito: os criterios
     caiam em cima do Waldir e viravam texto sobre rosto. Fica so o botao.
     Os tres niveis reaparecem onde a pessoa precisa deles de verdade, que
     e na hora de responder, nao antes de comecar. */
  .capa__criterios { display: none; }

  .capa__botao { width: 100%; min-width: 0; }

  .capa__acao .capa__nota {
    margin-top: 14px;
    font-size: 12.5px;
  }
}

/* capa recolhida ---------------------------------------------------------- */
/* A partir da primeira etapa de preenchimento a capa vira uma faixa com a
   logo. Sem isso, a capa de tela cheia empurrava o formulario para baixo da
   dobra e a pessoa tinha que rolar a cada pergunta respondida. */

.capa {
  transition: min-height .45s ease, padding .45s ease;
}

.capa--compacta {
  min-height: 96px;
  padding: 18px 24px;
}

/* o texto grande sai; a logo fica, para a pagina continuar assinada */
.capa--compacta .capa__titulo,
.capa--compacta .capa__regua,
.capa--compacta .capa__linha,
.capa--compacta .capa__chamada,
.capa--compacta .capa__criterios,
.capa--compacta .capa__acao,
.capa--compacta .capa__nota {
  display: none;
}

.capa--compacta .capa__logo {
  height: 30px;
  margin: 0 auto;
}

/* A FOTO SAI DA FAIXA.
   Recolhida, a capa tem 96px (76px no celular). A camada da arte continuava
   ligada e, com o dimensionamento do celular (auto 56%, ancorada na
   esquerda), sobrava um retangulo com o pedaco do palestrante e do predio
   colado no canto, parecendo um selo solto. Na faixa fica so o navy e a
   logo, que e o que uma barra de marca precisa ter. */
.capa--compacta::after,
.capa--compacta::before { display: none; }

@media (max-width: 680px) {
  .capa--compacta { min-height: 76px; padding: 14px 20px; }
  .capa--compacta .capa__logo { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .capa { transition: none; }
}


/* ======================================================================
   TEMA ESCURO (formulario e confirmacao)
   ======================================================================
   O fundo claro com a topografia saiu a pedido do cliente. A pagina
   inteira acompanha a capa: navy no fundo, cartao um tom acima, texto
   claro e o ciano como unico acento.

   Fica preso a .tema-escuro de proposito. O relatorio NAO usa esta
   classe: ele e documento e precisa sair em papel branco na impressao.

   Todo par de cor abaixo foi conferido. Os numeros estao ao lado.
   ====================================================================== */

.tema-escuro {
  /* Diz ao navegador que a pagina e escura. Sem isto o autofill do Chrome
     pinta os campos preenchidos de azul claro com texto preto, a lista do
     select abre em modo claro e a barra de rolagem sai branca. */
  color-scheme: dark;

  --fundo:        #01202e;
  --papel:        #0a2634;
  /* No escuro, "tinta forte" e branco. Sem redefinir, o --navy do tema
     claro (#10293a) ficava a 1,04:1 sobre o cartao e sumia em
     "Bloco X de 5", na ressalva das instrucoes e na estacao ativa. */
  --navy:         #ffffff;
  --tinta:        #dbe7ee;   /* 12,45:1 sobre o cartao */
  --tinta-fraca:  #9fb6c2;   /*  7,42:1 */
  --borda:        #1d4256;   /* 1,58:1 sobre o fundo: o fio aparece.
                                #17394b dava 1,29:1 e o cartao perdia
                                a moldura inteira no escuro. */
  --borda-forte:  #45788f;   /*  3,24:1, o minimo para borda de campo */
  --marca:        #07e0ff;   /*  9,79:1 */
  --marca-fundo:  #0f3547;
  --marca-borda:  #1d5f78;
  --bom:          #6fdcc0;
  --bom-fundo:    #10362f;
  --ruim:         #ff9aa4;   /*  7,77:1 */
  --ruim-fundo:   #3a1a20;
  --alerta:       #e8c07a;
  --alerta-fundo: #332a17;

  /* A topografia do site, relida para o escuro: mesmo desenho, linha em
     ciano fraco. O motivo nautico e a identidade da casa; o que saiu foi a
     versao clara, nao a textura. Navy chapado deixava a tela de preencher
     com cara de caixa vazia. */
  /* 'cover' e nao '100% auto': ancorada embaixo, a textura deixava a
     metade de cima chapada, que era justamente a reclamacao. Assim ela
     cobre a tela inteira. A arte e 16:9, entao o corte nao distorce nada. */
  background:
    url("../img/topografia-escura.png") center center / cover no-repeat fixed,
    var(--fundo);
  color: var(--tinta);
}

.tema-escuro h1,
.tema-escuro h2,
.tema-escuro h3 { color: #fff; }

.tema-escuro .cartao {
  background: var(--papel);
  border-color: var(--borda);
}

/* Os tres rotulos em ciano, sem verde e vermelho.
   Pintar SIM de verde e NAO de vermelho contradiz a frase que esta logo
   abaixo ("nao existem respostas certas ou erradas") e transforma a escala
   num julgamento. */
.tema-escuro .criterio__rotulo--sim,
.tema-escuro .criterio__rotulo--parcialmente,
.tema-escuro .criterio__rotulo--nao { color: var(--marca); }

.tema-escuro .criterio__texto { color: var(--tinta); }

/* campos ---------------------------------------------------------------- */

.tema-escuro .campo input,
.tema-escuro .campo select {
  background: #071d29;
  border-color: var(--borda-forte);
  color: var(--tinta);
}

.tema-escuro .campo input::placeholder { color: #7d97a5; }  /* 5,11:1 */

/* rotulo secundario, valor digitado primario: padrao de formulario
   denso. Com os dois em --tinta os 7 campos viravam um bloco so. */
.tema-escuro .campo label { color: var(--tinta-fraca); }

/* a lista do select e desenhada pelo sistema: sem isto, em alguns
   navegadores ela sai com texto claro sobre fundo claro */
.tema-escuro .campo select option {
  background: #0a2634;
  color: var(--tinta);
}

/* opcoes de resposta ---------------------------------------------------- */

.tema-escuro .opcao {
  background: #071d29;
  border-color: var(--borda-forte);
  color: var(--tinta-fraca);
}

.tema-escuro .opcao:hover { border-color: var(--marca); color: #fff; }

/* Marcada e marcada: as tres usam o mesmo ciano. Verde para Sim e
   vermelho para Nao transformaria a resposta em acerto e erro. */
.tema-escuro .opcao[aria-pressed="true"][data-valor="sim"],
.tema-escuro .opcao[aria-pressed="true"][data-valor="parcialmente"],
.tema-escuro .opcao[aria-pressed="true"][data-valor="nao"] {
  background: var(--marca-fundo);
  border-color: var(--marca);
  color: var(--marca);
}

/* botoes ---------------------------------------------------------------- */

/* Navy sumiria no cartao escuro. Ciano com texto NAVY da 9,79:1; e o ciano
   com texto BRANCO que reprova (1,60:1), e foi por isso que o botao virou
   navy no tema claro. */
.tema-escuro .botao--principal {
  background: var(--marca);
  color: #04202c;
}

.tema-escuro .botao--principal:hover:not(:disabled) { background: #5ceaff; }

.tema-escuro .botao--principal:disabled {
  background: #1b3f52;
  /* 4,2:1. O botao "Proximo bloco" NASCE desativado e so libera com as 4
     perguntas respondidas: e o estado que mais aparece na tela. */
  color: #8aa5b3;
}

.tema-escuro .botao--secundario {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--tinta);
}

.tema-escuro .botao--secundario:hover {
  border-color: var(--marca);
  color: #fff;
}

.tema-escuro .botao:focus-visible,
.tema-escuro .opcao:focus-visible,
.tema-escuro .campo input:focus-visible,
.tema-escuro .campo select:focus-visible,
.tema-escuro a.botao:focus-visible { outline-color: var(--marca); }

/* avisos ---------------------------------------------------------------- */

.tema-escuro .erros {
  background: var(--ruim-fundo);
  border-left-color: var(--ruim);
  color: #ffd9dd;
}

.tema-escuro .campo--erro input,
.tema-escuro .campo--erro select { border-color: var(--ruim); }

.tema-escuro .campo__erro { color: var(--ruim); }

.tema-escuro .bloco__numero { color: var(--marca); }

.tema-escuro .girando { border-top-color: var(--marca); }


/* progresso ------------------------------------------------------------- */

.progresso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
}

.progresso__etapa {
  font-weight: 700;
  color: var(--navy);
}

.progresso__pct { color: var(--tinta-fraca); }

.barra {
  height: 4px;
  background: var(--borda);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 22px;
}

.barra__preenchida {
  height: 100%;
  width: 0;
  background: var(--marca);
  transition: width .3s ease;
}

/* instrucoes ------------------------------------------------------------ */
/* Sem caixa. Dois criterios em linha, rotulo forte na esquerda e o texto
   corrido na direita, separados por fio fino. Card com barrinha verde de um
   lado e vermelha do outro e o padrao "certo e errado" de pagina gerada por
   maquina, e nao e assim que documento de consultoria se parece. */

.criterios {
  margin: 0 0 22px;
  border-top: 1px solid var(--borda);
}

.criterio {
  display: grid;
  /* minmax em vez de 78px fixos: PARCIALMENTE em maiuscula com espaco
     entre letras mede bem mais que SIM e NAO, e numa faixa de largura
     chutada ele estourava por cima do texto do criterio. */
  grid-template-columns: minmax(78px, max-content) 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borda);
}

.criterio__rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 2px;
}

.criterio__rotulo--sim          { color: var(--bom); }
.criterio__rotulo--parcialmente { color: var(--alerta); }
.criterio__rotulo--nao          { color: var(--ruim); }

.criterio__texto { margin: 0; }

.ressalva {
  margin: 0;
  font-size: 14.5px;
  color: var(--tinta-fraca);
}

.ressalva strong { color: var(--navy); }

/* campos ---------------------------------------------------------------- */

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.campo { display: flex; flex-direction: column; }
.campo--largo { grid-column: 1 / -1; }

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}

.campo input,
.campo select {
  font: inherit;
  padding: 10px 12px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  transition: border-color .12s, box-shadow .12s;
}

.campo select { cursor: pointer; }

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-fundo);
}

.campo--erro input,
.campo--erro select { border-color: var(--ruim); }

.campo__erro {
  font-size: 12.5px;
  color: var(--ruim);
  margin-top: 4px;
}

/* perguntas ------------------------------------------------------------- */

.bloco__cabeca {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borda);
}

.bloco__numero {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--borda-forte);
  padding-top: 2px;
}

.pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
}

/* :last-of-type nao casava: o ultimo div do cartao e o .rodape, nao uma
   pergunta. Sobrava o fio da ultima pergunta MAIS o fio do rodape, dois
   riscos com 24px de vazio entre eles, nas 5 telas de perguntas. */
.pergunta:has(+ .rodape) { border-bottom: 0; }

.pergunta__texto {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.pergunta__num {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-fraca);
  min-width: 18px;
}

.opcoes { display: flex; gap: 8px; flex: 0 0 auto; }

.opcao {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 84px;
  min-height: 44px;
  padding: 8px 16px;
  color: var(--tinta-fraca);
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  transition: border-color .12s, color .12s, background .12s;
}

.opcao:hover { border-color: var(--marca); color: var(--navy); }

.opcao:focus-visible,
.botao:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
a.botao:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.opcao[aria-pressed="true"][data-valor="sim"] {
  background: var(--bom-fundo);
  border-color: var(--bom);
  color: var(--bom);
}

.opcao[aria-pressed="true"][data-valor="parcialmente"] {
  background: var(--alerta-fundo);
  border-color: var(--alerta);
  color: var(--alerta);
}

.opcao[aria-pressed="true"][data-valor="nao"] {
  background: var(--ruim-fundo);
  border-color: var(--ruim);
  color: var(--ruim);
}

/* botoes ---------------------------------------------------------------- */

.rodape {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}

.botao {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background .12s, border-color .12s, color .12s;
}

.botao--principal {
  flex: 1;
  background: var(--navy);
  color: #fff;
}

.botao--principal:hover:not(:disabled) { background: #1b405a; }

.botao--principal:disabled {
  background: var(--borda);
  color: var(--tinta-fraca);
  cursor: not-allowed;
}

.botao--secundario {
  background: var(--papel);
  border-color: var(--borda-forte);
  color: var(--tinta-fraca);
}

.botao--secundario:hover { border-color: var(--tinta-fraca); color: var(--navy); }

.nota-rodape {
  text-align: center;
  font-size: 13px;
  color: var(--tinta-fraca);
  margin-top: 14px;
}

/* estados --------------------------------------------------------------- */

.oculto { display: none !important; }

/* Some da tela, continua no leitor de tela. Diferente de .oculto, que some
   para os dois: elemento com display:none nao e anunciado nem por regiao
   viva. Mesma definicao do relatorio.css. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.carregando { text-align: center; padding: 56px 20px; }

.girando {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border: 2px solid var(--borda);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* as cinco estacoes da analise ------------------------------------------ */

/* Um trilho unico com as areas em ordem, nao cinco cartoes lado a lado:
   cartao lado a lado nao diz por onde a analise esta passando. A linha fina
   atras e o que faz a lista ser lida como percurso. */
.estacoes {
  list-style: none;
  margin: 28px auto 24px;
  padding: 0;
  max-width: 320px;
  text-align: left;
  position: relative;
}

.estacoes::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--borda);
}

.estacao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--tinta-fraca);
  transition: color .2s;
}

.estacao__marca {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  position: relative;
  z-index: 1;
  transition: background .2s, border-color .2s;
}

/* area ja percorrida: marcador cheio, texto em tinta normal */
.estacao--feita { color: var(--tinta); }
.estacao--feita .estacao__marca {
  background: var(--navy);
  border-color: var(--navy);
}

/* No escuro o --navy e branco, e a bolinha do que JA passou gritaria mais
   que a da area sendo analisada. Concluido fica cheio, mas discreto. */
.tema-escuro .estacao--feita .estacao__marca {
  background: var(--tinta-fraca);
  border-color: var(--tinta-fraca);
}

/* area sendo analisada agora: marcador no acento, texto em navy */
.estacao--ativa { color: var(--navy); font-weight: 600; }
.estacao--ativa .estacao__marca {
  background: var(--marca);
  border-color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-fundo);
}

@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2s; }
  .barra__preenchida { transition: none; }
}

.erros {
  background: var(--ruim-fundo);
  border-left: 3px solid var(--ruim);
  border-radius: 0 6px 6px 0;
  color: var(--ruim);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}

.erros ul { margin: 0; padding-left: 18px; }

/* telas estreitas ------------------------------------------------------- */

@media (max-width: 900px) {
  .pergunta { flex-direction: column; align-items: stretch; gap: 12px; }
  .opcoes { width: 100%; }
  .opcoes .opcao { flex: 1; min-width: 0; padding: 8px 6px; }
}

@media (max-width: 440px) {
  /* Celular: as tres opcoes empilham em vez de espremer.
     O corte era 380px, e entre 381 e 392 cada botao ficava com ~88px
     uteis enquanto "Parcialmente" mede ~87px na Segoe UI e mais na SF
     Pro do iPhone: o texto vazava para fora da propria borda. 390 e 393
     sao iPhone 14 e 15, que e o aparelho do lead. */
  .opcoes { flex-direction: column; }
  .opcoes .opcao { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 680px) {
  /* fundo preso a viewport trava a rolagem em varios celulares:
     no estreito ele rola junto com a pagina */
  body:not(.tema-escuro) {
    background:
      url("../img/topografia.png") center bottom / 140% auto no-repeat scroll,
      var(--fundo);
  }
  /* Continua tela cheia no celular: o que muda e o tamanho do texto e o
     respiro, nao a altura. */
  .capa { padding: 48px 20px; }
  .capa__logo { height: 34px; margin-bottom: 20px; }
  .capa__titulo { font-size: 19.5px; letter-spacing: .1px; }
  .capa__regua { width: 130px; margin-bottom: 16px; }
  .capa__linha { font-size: 14.5px; margin-bottom: 20px; }
  .capa__chamada { font-size: 15px; }
  .envoltorio { padding: 20px 16px 44px; }
  .cartao { padding: 20px 18px; }
  h1 { font-size: 21px; }
  .campos { grid-template-columns: 1fr; }
  .criterio { grid-template-columns: 1fr; gap: 6px; }
  .pergunta { flex-direction: column; align-items: stretch; gap: 12px; }
  .opcoes .opcao { flex: 1; }
  .rodape { flex-direction: column-reverse; }
  .botao { width: 100%; }
}

/* ======================================================================
   CELULAR
   ====================================================================== */

@media (max-width: 680px) {
  /* 16px nos campos, sem excecao.
     Abaixo de 16px o Safari do iPhone aplica zoom automatico quando a
     pessoa toca no campo: a pagina salta, sai do lugar e depois nao volta
     sozinha. Nao ha como desligar esse zoom sem quebrar o pinch da pessoa,
     entao a saida e o tamanho da fonte. */
  .campo input,
  .campo select {
    font-size: 16px;
    padding: 12px 12px;
  }

  .envoltorio { padding: 18px 12px 44px; }
  .cartao { padding: 20px 18px; border-radius: 10px; }

  /* alvo de toque: a recomendacao e 44px, e a pergunta inteira e uma
     area confortavel de leitura antes das opcoes */
  .opcoes .opcao { min-height: 48px; font-size: 15px; }
  .botao { min-height: 48px; }

  .pergunta { padding: 16px 0; }
  .pergunta__texto { font-size: 15px; }

  /* o cabecalho do bloco perde o numero gigante e fica so a linha */
  .bloco__cabeca { gap: 12px; }

  /* rolagem: sem isto, ao chegar no fim da lista o gesto continua e
     arrasta a pagina inteira atras */
  body { overscroll-behavior-y: contain; }
}

/* Celular pequeno (iPhone SE e parecidos) */
@media (max-width: 380px) {
  .envoltorio { padding: 14px 10px 40px; }
  .cartao { padding: 18px 14px; }
  .capa__titulo { font-size: 20px; }
  .capa__linha { font-size: 14px; }
  .criterio__rotulo { font-size: 12px; }
}

/* capa no celular: o Waldir precisa aparecer -------------------------- */
/* A arte e larga (1920x1584). Em celular de pe o 'cover' corta cerca de
   60% da largura, e ancorado no centro o corte come justamente as pontas.
   Medindo a arte: o Waldir ocupa de 0% a 25% da largura e o predio de 70%
   a 100%; o meio e vazio. Ancorar no centro no celular mostrava so o
   vazio, sem ele e sem o predio.

   Aqui a arte ancora na esquerda, que e onde ele esta, e o texto sobe
   para o alto para nao cair em cima do rosto. */
@media (max-width: 760px) {
  /* :not(.capa--compacta) de proposito: sem isto estas regras venciam as
     da faixa recolhida (mesma especificidade, e este bloco vem depois no
     arquivo), devolvendo a foto e o padding grande para a barra. */
  .capa:not(.capa--compacta) {
    align-items: flex-start;
    padding-top: 42px;
    padding-bottom: 40px;
  }

  /* 'cover' no celular escala a arte pela ALTURA: como a tela e estreita e
     alta, o Waldir vinha ampliado ocupando meia tela, com o texto caindo
     em cima do rosto. Aqui a arte fica com 56% da altura, ancorada embaixo
     na esquerda, e o navy ocupa o resto. Ele aparece inteiro, em tamanho
     de gente, e o texto fica em area limpa. */
  .capa:not(.capa--compacta)::after {
    background-position: left bottom;
    background-size: auto 56%;
  }

  /* a vinheta deixa de ser redonda no meio e vira um degrade de cima para
     baixo: escurece onde esta o texto e abre embaixo, onde ele aparece */
  /* Funde o topo da foto com o navy. Sem isso a imagem termina numa linha
     reta no meio da tela, que denuncia a montagem. */
  .capa:not(.capa--compacta)::before {
    background: linear-gradient(to bottom,
      rgba(1, 32, 46, 1) 0%,
      rgba(1, 32, 46, 1) 38%,
      rgba(1, 32, 46, .78) 48%,
      rgba(1, 32, 46, .30) 62%,
      rgba(1, 32, 46, .05) 100%);
  }

  /* o zoom lento arrastaria o Waldir para fora do corte no celular */
  .capa:not(.capa--compacta)::after { animation: none; }
}

@media (max-width: 680px) {
  /* fundo preso a viewport trava a rolagem em varios celulares: no
     estreito ele rola junto com a pagina */
  .tema-escuro {
    background:
      url("../img/topografia-escura.png") center center / cover no-repeat scroll,
      var(--fundo);
  }
}

/* Tela baixa (celular deitado, janela espremida): tela cheia viraria uma
   faixa onde o texto nao cabe. Aqui a capa para de se esticar e volta a
   crescer conforme o conteudo.
   Estava aninhado dentro do bloco de 680px por engano de chave, entao so
   pegava telas com menos de 680 de LARGURA. Celular deitado tem 844: a
   protecao nao alcancava justamente o caso que existe para resolver. */
@media (max-height: 560px) {
  .capa:not(.capa--compacta) {
    min-height: auto;
    padding: 44px 24px;
  }
  .capa__titulo { font-size: 20px; }
  .capa__linha { font-size: 14px; margin-bottom: 16px; }
  .capa__nota { display: none; }
}

/* Tela bem larga: a arte tem o palestrante e o predio nas pontas, e em
   ultrawide eles ficam longe demais do texto.
   Tambem estava aninhado no bloco de 680px, ou seja, exigia largura maior
   que 1500 E menor que 680 ao mesmo tempo: nunca rodou. Em monitor de
   1920 a capa vinha com o texto do tamanho errado desde que foi escrito. */
@media (min-width: 1500px) {
  .capa__conteudo { max-width: 720px; }
  .capa__titulo { font-size: 31px; }
}