/*
 * Diagnóstico CSC — folha de estilo.
 *
 * Reescrita legível do CSS do build original (que era Tailwind compilado):
 * mesmas cores, tamanhos, sombras e animações, agora com nomes de classe
 * descritivos. Para mudar o visual, comece pelas variáveis de :root.
 */

/* ------------------------------------------------------------------- tema */

:root {
  /* paleta Milldesk */
  --laranja: #ff7f00;        /* cor principal (botões, nota, destaques)     */
  --laranja-escuro: #d96c00; /* hover dos botões laranja                    */
  --navy: #1a1038;           /* títulos e cartões escuros                   */
  --ciano: #03c4eb;          /* cor de apoio (barras, seleção múltipla)     */
  --ciano-escuro: #0292af;   /* textos em cima de fundos cianos claros      */
  --tinta: #232323;          /* texto padrão                                */
  --tinta-suave: #5c5c66;    /* texto secundário                            */
  --cinza-fundo: #f7f7f9;    /* fundos de cartões neutros                   */
  --fundo: #fff;
  --vermelho: #e40014;       /* borda de campo com erro                     */
  --vermelho-escuro: #bf000f;/* mensagens de erro                           */
  --vermelho-fundo: #fef2f2; /* fundo do aviso de falha no envio            */

  /* fontes (definidas em fontes.css) */
  --fonte-titulos: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
  --fonte-texto: "Open Sans", "Open Sans Fallback", Arial, Helvetica, sans-serif;

  /* transição padrão (mesma curva e duração do original) */
  --transicao: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------- reset (o que importa) */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  height: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulos);
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

ol,
ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button,
input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

button {
  appearance: button;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

svg {
  display: block;
  vertical-align: middle;
}

fieldset {
  min-width: 0;
}

/* -------------------------------------------------------------- animações */

@keyframes entrada-tela {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* cada troca de tela entra com um leve fade + deslize */
.tela {
  animation: entrada-tela 0.28s ease-out both;
}

@keyframes crescer-barra {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

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

/* ----------------------------------------------------------------- layout */

.conteudo {
  margin-inline: auto;
  width: 100%;
  max-width: 42rem;
  padding: 2rem 1rem;
}

@media (min-width: 40rem) {
  .conteudo {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.centrado {
  text-align: center;
}

/* ------------------------------------------------------ barra de progresso */

.progresso {
  margin-bottom: 2rem;
}

.progresso-topo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
  color: var(--tinta-suave);
}

.progresso-voltar {
  font-weight: 600;
  color: var(--tinta-suave);
  transition: color var(--transicao), transform var(--transicao);
}

.progresso-voltar:hover {
  color: var(--navy);
}

.progresso-voltar:active {
  transform: scale(0.95);
}

.progresso-contador {
  font-variant-numeric: tabular-nums;
}

.progresso-trilho {
  height: 0.375rem;
  border-radius: calc(infinity * 1px);
  background: var(--cinza-fundo);
  overflow: hidden;
}

.progresso-barra {
  height: 100%;
  border-radius: calc(infinity * 1px);
  background: var(--laranja);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------- tipografia */

/* selo pequeno no topo (“Ferramenta gratuita”, “Relatório completo”) */
.selo {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: calc(infinity * 1px);
  background: #03c4eb1a;
  color: var(--ciano-escuro);
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.selo--relatorio {
  margin-bottom: 0.5rem;
}

/* h1 da capa */
.titulo-principal {
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy);
}

@media (min-width: 40rem) {
  .titulo-principal {
    font-size: 2.25rem;
  }
}

.intro-chamada {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--tinta-suave);
}

.intro-chamada strong {
  color: var(--tinta);
}

.intro-meta {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  color: var(--tinta-suave);
}

.intro-metodologia {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
  color: var(--tinta-suave);
}

/* h2 das perguntas */
.pergunta-titulo {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.375;
  font-weight: 700;
  color: var(--navy);
}

@media (min-width: 40rem) {
  .pergunta-titulo {
    font-size: 1.5rem;
  }
}

.pergunta-instrucao {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  color: var(--tinta-suave);
}

/* h2 das telas de formulário (“Pronto! Agora…”, “Última etapa…”, “Quase lá!”) */
.titulo-tela {
  font-size: 1.5rem;
  line-height: calc(2 / 1.5);
  font-weight: 700;
  color: var(--navy);
}

.subtitulo-tela {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.625;
  color: var(--tinta-suave);
}

/* subtítulo do formulário final (“Para onde enviamos o seu relatório…”) */
.subtitulo-curto {
  margin-top: 0.5rem;
  color: var(--tinta-suave);
}

.subtitulo-curto strong {
  color: var(--tinta);
}

/* ---------------------------------------------------------------- botões */

/* botão laranja de ação (capa, continuar, enviar, CTAs) */
.botao-laranja {
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  background: var(--laranja);
  color: #fff;
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
  box-shadow:
    0 10px 15px -3px #ff7f0040,
    0 4px 6px -4px #ff7f0040;
  transition:
    background-color var(--transicao),
    transform var(--transicao),
    opacity var(--transicao),
    box-shadow var(--transicao);
}

.botao-laranja:hover {
  background: var(--laranja-escuro);
}

.botao-laranja:active {
  transform: scale(0.97);
}

/* variação de largura total usada nas telas do quiz e formulários */
.botao-laranja--largo {
  width: 100%;
  padding-inline: 1.5rem;
}

.botao-laranja--largo:active {
  transform: scale(0.98);
}

/* “Continuar” fica cinza enquanto nada foi selecionado */
.botao-laranja--largo:disabled {
  cursor: not-allowed;
  background: #5c5c664d;
  box-shadow: none;
}

/* o botão de enviar do formulário continua laranja, só esmaece */
.botao-laranja--enviando:disabled {
  cursor: wait;
  opacity: 0.7;
  background: var(--laranja);
  box-shadow:
    0 10px 15px -3px #ff7f0040,
    0 4px 6px -4px #ff7f0040;
}

/* link com contorno navy (“Falar com um especialista”) */
.botao-contorno {
  padding: 1rem 1.5rem;
  border: 2px solid var(--navy);
  border-radius: 0.75rem;
  color: var(--navy);
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
  text-align: center;
  transition:
    background-color var(--transicao),
    color var(--transicao),
    transform var(--transicao);
}

.botao-contorno:hover {
  background: var(--navy);
  color: #fff;
}

.botao-contorno:active {
  transform: scale(0.98);
}

.botao-intro {
  display: inline-block;
  margin-top: 2rem;
}

/* conteúdo interno do botão enquanto envia (spinner + “Enviando…”) */
.botao-conteudo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.girando {
  height: 1.25rem;
  width: 1.25rem;
  animation: girar 1s linear infinite;
}

.girando circle {
  opacity: 0.25;
}

/* ------------------------------------------------------ opções do quiz */

.lista-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.opcao {
  padding: 1rem 1.25rem;
  border: 2px solid #5c5c6633;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--tinta);
  font-weight: 500;
  text-align: left;
  transition:
    border-color var(--transicao),
    background-color var(--transicao),
    color var(--transicao),
    transform var(--transicao);
}

.opcao:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .opcao:hover {
    border-color: #ff7f0099;
  }
  .opcao--multi:hover {
    border-color: #03c4eb99;
  }
}

/* escolha única: destaque laranja no clique, antes de avançar */
.opcao--escolhida {
  border-color: var(--laranja);
  background: #ff7f001a;
  color: var(--navy);
}

@media (hover: hover) {
  .opcao--escolhida:hover {
    border-color: var(--laranja);
  }
}

/* múltipla escolha: marcadas ficam cianas */
.opcao--marcada {
  border-color: var(--ciano);
  background: #03c4eb1a;
  color: var(--navy);
}

@media (hover: hover) {
  .opcao--marcada:hover {
    border-color: var(--ciano);
  }
}

/* caixinha de marcação das opções múltiplas */
.opcao-caixa {
  display: inline-block;
  margin-right: 0.75rem;
  height: 1.25rem;
  width: 1.25rem;
  border: 2px solid #5c5c6666;
  border-radius: 0.375rem;
  background: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.opcao--marcada .opcao-caixa {
  border-color: var(--ciano);
  background: var(--ciano);
  color: #fff;
}

.botao-continuar {
  margin-top: 1.5rem;
}

/* -------------------------------------------- chips (empresa / sobre você) */

.grupos-formulario {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.grupo-chips legend {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  color: var(--navy);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  padding: 0.5rem 1rem;
  border: 2px solid #5c5c6640;
  border-radius: calc(infinity * 1px);
  background: #fff;
  color: var(--tinta);
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  transition:
    border-color var(--transicao),
    background-color var(--transicao),
    color var(--transicao),
    transform var(--transicao);
}

.chip:active {
  transform: scale(0.95);
}

@media (hover: hover) {
  .chip:hover {
    border-color: #ff7f0099;
  }
}

.chip--ativo,
.chip--ativo:hover {
  border-color: var(--laranja);
  background: var(--laranja);
  color: #fff;
}

.botao-avancar {
  margin-top: 2rem;
}

/* ------------------------------------------------------ campos de texto */

.campo {
  display: block;
}

.campo-rotulo {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  color: var(--navy);
}

.campo-entrada {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #5c5c664d;
  border-radius: 0.5rem;
  color: var(--tinta);
  outline: none;
  transition:
    border-color var(--transicao),
    box-shadow var(--transicao);
}

.campo-entrada:focus {
  border-color: var(--ciano);
  box-shadow: 0 0 0 2px #03c4eb4d;
}

.campo-entrada--erro {
  border-color: var(--vermelho);
}

.campo-entrada--erro:focus {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 2px #e4001440;
}

.campo-erro {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  color: var(--vermelho-escuro);
}

/* aceite LGPD */
.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  color: var(--tinta-suave);
}

.consentimento-caixa {
  margin-top: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  accent-color: #ff7f00;
}

.consentimento-caixa--erro {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
}

/* falha ao enviar o formulário */
.aviso-erro {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--vermelho-fundo);
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  color: var(--vermelho-escuro);
}

.campos-lead {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.botao-enviar {
  margin-top: 1.5rem;
}

/* --------------------------------------------------- resultado: nota geral */

/* espaçamento entre os blocos da tela de resultado */
.bloco-resultado {
  margin-top: 2rem;
}

.cartao-nota {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.cartao-nota-rotulo {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #ffffff99;
}

.cartao-nota-valor {
  margin-top: 0.75rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--laranja);
}

.cartao-nota-escala {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  color: #ffffff99;
}

.cartao-nota-estagio {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.375rem 1rem;
  border-radius: calc(infinity * 1px);
  background: var(--laranja);
  color: #fff;
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.cartao-nota-frase {
  margin-top: 1rem;
  line-height: 1.625;
  color: #ffffffd9;
}

/* título dos blocos internos (“Suas 5 dimensões”, benchmarks, etc.) */
.titulo-bloco {
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
  color: var(--navy);
}

.titulo-bloco--espacado {
  margin-bottom: 1rem;
}

/* --------------------------------------------------- barras por dimensão */

.dimensoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dimensao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.dimensao-nome {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  color: var(--navy);
}

.dimensao-valor {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.selo-fraco {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: calc(infinity * 1px);
  background: #ff7f001a;
  font-size: 11px;
  font-weight: 600;
  color: var(--laranja-escuro);
  vertical-align: middle;
}

.dimensao-trilho {
  height: 0.75rem;
  border-radius: calc(infinity * 1px);
  background: var(--cinza-fundo);
  overflow: hidden;
}

.dimensao-barra {
  height: 100%;
  border-radius: calc(infinity * 1px);
  background: var(--ciano);
  transform-origin: 0;
  animation: crescer-barra 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dimensao-barra--fraca {
  background: var(--laranja);
}

/* ------------------------------------------------------ cartões diversos */

/* “Departamentos prontos para CSC” */
.cartao-areas {
  padding: 1.5rem;
  border: 2px solid #03c4eb4d;
  border-radius: 1rem;
  background: #03c4eb0d;
}

.cartao-areas-texto {
  margin-top: 0.5rem;
  line-height: 1.625;
  color: var(--tinta);
}

/* cartão neutro (estimativa de volume) */
.cartao-cinza {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--cinza-fundo);
}

.cartao-cinza-texto {
  line-height: 1.625;
  color: var(--tinta);
}

.cartao-cinza-texto strong {
  color: var(--navy);
}

.cartao-estimativa {
  margin-top: 1rem;
}

/* chamada para o relatório completo */
.cartao-cta {
  padding: 1.5rem;
  border: 2px solid #ff7f004d;
  border-radius: 1rem;
  background: #ff7f000d;
  text-align: center;
}

.cartao-cta-titulo {
  font-size: 1.25rem;
  line-height: calc(1.75 / 1.25);
  font-weight: 700;
  color: var(--navy);
}

.cartao-cta-texto {
  margin-top: 0.5rem;
  color: var(--tinta-suave);
}

.cartao-cta .botao-laranja {
  margin-top: 1.25rem;
}

/* ---------------------------------------------------------- relatório */

/* espaçamento entre os blocos do relatório */
.bloco-relatorio {
  margin-top: 2.5rem;
}

.titulo-relatorio {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy);
}

@media (min-width: 40rem) {
  .titulo-relatorio {
    font-size: 1.875rem;
  }
}

.titulo-relatorio .destaque {
  color: var(--laranja);
}

.relatorio-resumo {
  margin-top: 0.75rem;
  line-height: 1.625;
  color: var(--tinta-suave);
}

.cartoes-dimensao {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cartao-dimensao {
  padding: 1.5rem;
  border: 1px solid #5c5c6626;
  border-radius: 1rem;
}

.cartao-dimensao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.cartao-dimensao-nota {
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cartao-dimensao-diagnostico {
  margin-top: 0.5rem;
  line-height: 1.625;
  color: var(--tinta);
}

.lista-recomendacoes {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lista-recomendacoes li {
  display: flex;
  gap: 0.5rem;
  line-height: 1.625;
  color: var(--tinta-suave);
}

.lista-recomendacoes .seta {
  font-weight: 700;
  color: var(--ciano-escuro);
}

.cartao-dimensao-atalho {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--cinza-fundo);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--tinta);
}

.cartao-dimensao-atalho strong {
  color: var(--laranja-escuro);
}

/* “O custo do improviso” */
.cartao-custo {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--navy);
  color: #fff;
}

.cartao-custo-titulo {
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
}

.cartao-custo-texto {
  margin-top: 0.75rem;
  line-height: 1.625;
  color: #ffffffd9;
}

.cartao-custo-texto strong {
  color: var(--laranja);
}

/* benchmarks */
.lista-benchmarks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.benchmark {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--cinza-fundo);
}

.benchmark-numero {
  min-width: 7rem;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--navy);
}

.benchmark-texto {
  line-height: 1.625;
  color: var(--tinta-suave);
}

/* plano de 90 dias */
.cartao-plano {
  padding: 1.5rem;
  border: 2px solid #03c4eb4d;
  border-radius: 1rem;
}

.lista-passos {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lista-passos li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.625;
  color: var(--tinta);
}

.passo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  background: var(--ciano);
  font-weight: 700;
  color: #fff;
}

/* CTAs finais */
.acoes-finais {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .acoes-finais {
    flex-direction: row;
  }
}

.acoes-finais > * {
  flex: 1;
}

.acoes-finais .botao-laranja {
  padding-inline: 1.5rem;
  text-align: center;
}

.acoes-finais .botao-laranja:active,
.acoes-finais .botao-contorno:active {
  transform: scale(0.98);
}

.acoes-nota {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
  color: var(--tinta-suave);
}

/* rodapé metodológico */
.nota-legal {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #5c5c6626;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------- botão de imprimir */

.botao-imprimir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid #5c5c6640;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--navy);
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--transicao),
    background-color var(--transicao),
    transform var(--transicao);
}

.botao-imprimir svg {
  height: 1.125rem;
  width: 1.125rem;
}

@media (hover: hover) {
  .botao-imprimir:hover {
    border-color: var(--navy);
    background: var(--cinza-fundo);
  }
}

.botao-imprimir:active {
  transform: scale(0.97);
}

/* Blocos que existem só no PDF (identificação no topo, endereços escritos). */
.so-no-pdf {
  display: none;
}


/* ================================================================ impressão
 *
 * O PDF NÃO é a tela em papel. Aqui o relatório é remontado como documento:
 * abertura com marca e destinatário, quadro-resumo das notas, e a análise em
 * seções tipográficas — sem os cartões, sombras e botões, que são linguagem
 * de tela. Medidas em milímetros e pontos, não em rem.
 *
 * Se o PDF sair sem margem, é a caixa de impressão com "Margens: Nenhuma"
 * selecionado — essa opção do navegador vence o @page abaixo.
 */

@page {
  size: A4;
  margin: 22mm 24mm 20mm;
}

@media print {
  /* Sem isto o navegador descarta fundo e cor de texto claro. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html {
    height: auto;
  }

  body {
    display: block;
    background: #fff;
    color: #1c1c1c;
    orphans: 3;
    widows: 3;
    font-size: 11pt;
    line-height: 1.5;
  }

  .conteudo {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .tela {
    animation: none;
  }

  /* o que é da tela não vai para o papel, e vice-versa */
  .nao-sai-no-pdf,
  .progresso {
    display: none !important;
  }

  .so-no-pdf {
    display: block;
  }

  /* -------------------------------------------------------- abertura */

  .abertura-pdf {
    margin-bottom: 7mm;
  }

  .abertura-pdf-marca {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 2mm;
    border-bottom: 2pt solid var(--navy);
    font-family: var(--fonte-titulos);
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
  }

  .abertura-pdf-quem {
    margin-top: 2mm;
    font-size: 9pt;
    color: var(--tinta-suave);
  }

  .abertura-pdf-rotulo {
    margin-top: 6mm;
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }

  .abertura-pdf-nota {
    margin-top: 1.5mm;
    font-family: var(--fonte-titulos);
    font-size: 17pt;
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
  }

  .abertura-pdf-nota strong {
    font-size: 30pt;
    color: var(--laranja);
  }

  .abertura-pdf-frase {
    margin-top: 2mm;
    max-width: 155mm;
    font-size: 11pt;
    line-height: 1.45;
    color: var(--tinta);
  }

  /* --------------------------------------------------- títulos de seção */

  /* Todo título de seção do documento tem o mesmo tratamento, inclusive os
     que na tela são h3 de bloco — senão o PDF fica com duas hierarquias
     concorrendo. */
  .titulo-secao-pdf,
  .titulo-bloco--espacado,
  .cartao-plano .titulo-bloco {
    margin: 8mm 0 3mm;
    padding-bottom: 1.5mm;
    border-bottom: 0.75pt solid #c9c9d1;
    font-family: var(--fonte-titulos);
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    break-after: avoid;
    page-break-after: avoid;
  }

  .resumo-pdf .titulo-secao-pdf {
    margin-top: 0;
  }

  /* ------------------------------------------------- quadro das notas */

  .resumo-pdf table {
    width: 100%;
    border-collapse: collapse;
  }

  .resumo-pdf tr {
    break-inside: avoid;
  }

  .resumo-pdf th,
  .resumo-pdf td {
    padding: 2mm 0;
    border-bottom: 0.5pt solid #e4e4ea;
    font-size: 11pt;
    vertical-align: baseline;
  }

  .resumo-pdf th {
    text-align: left;
    font-weight: 600;
    color: var(--navy);
  }

  .resumo-pdf td {
    width: 22mm;
    text-align: right;
    font-family: var(--fonte-titulos);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .resumo-pdf-fraca {
    color: var(--laranja);
  }

  .resumo-pdf-marca {
    margin-left: 2.5mm;
    font-family: var(--fonte-texto);
    font-size: 8pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--laranja);
  }

  /* ------------------------------------------- análise por dimensão */

  .cartoes-dimensao,
  .lista-benchmarks,
  .lista-recomendacoes,
  .lista-passos {
    display: block;
  }

  .bloco-relatorio {
    margin-top: 5mm;
  }

  /* A seção da análise já vem logo abaixo do seu título. */
  .titulo-secao-pdf + .cartoes-dimensao {
    margin-top: 0;
  }

  /* Sem caixa: no papel cada dimensão é uma seção de texto, marcada por um
     filete lateral em vez de borda em volta. */
  .cartao-dimensao {
    padding: 0 0 0 4mm;
    border: 0;
    border-left: 2pt solid #dcdce3;
    border-radius: 0;
  }

  .cartoes-dimensao > * + * {
    margin-top: 4mm;
  }

  .cartao-dimensao-topo {
    gap: 4mm;
    break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* A lista pode virar a página item a item: se ela fosse indivisível,
     sobraria o filete lateral descendo sozinho até o pé da folha. */
  .cartao-dimensao-diagnostico {
    break-inside: avoid;
  }

  .cartao-dimensao .titulo-bloco {
    font-size: 12pt;
  }

  .cartao-dimensao-nota {
    font-family: var(--fonte-titulos);
    font-size: 12pt;
    color: var(--navy);
  }

  .cartao-dimensao-diagnostico {
    margin-top: 1.5mm;
    line-height: 1.45;
  }

  .lista-recomendacoes {
    margin-top: 2.5mm;
  }

  .lista-recomendacoes > li {
    display: flex;
    gap: 2mm;
    line-height: 1.45;
    color: #3a3a44;
    break-inside: avoid;
  }

  .lista-recomendacoes > li + li {
    margin-top: 1.2mm;
  }

  /* o "atalho" vira uma nota de rodapé da seção, não um cartãozinho */
  .cartao-dimensao-atalho {
    margin-top: 2.5mm;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--tinta-suave);
    break-inside: avoid;
  }

  /* --------------------------------------------------------- destaque */

  /* Fundo escuro cheio é linguagem de tela e come tinta: no papel vira um
     quadro claro com filete na cor da marca. */
  .cartao-custo {
    padding: 4mm 5mm;
    border: 0;
    border-left: 3pt solid var(--laranja);
    border-radius: 0;
    background: #faf7f3;
    color: var(--tinta);
    break-inside: avoid;
  }

  .cartao-custo-titulo {
    font-size: 11pt;
    color: var(--navy);
  }

  .cartao-custo-texto {
    margin-top: 1.5mm;
    line-height: 1.45;
    color: var(--tinta);
  }

  .cartao-custo-texto strong {
    color: var(--laranja-escuro);
  }

  /* ------------------------------------------------------ benchmarks */

  .lista-benchmarks > * + * {
    margin-top: 0;
  }

  .benchmark {
    gap: 4mm;
    padding: 2mm 0;
    border-radius: 0;
    border-bottom: 0.5pt solid #e4e4ea;
    background: none;
    break-inside: avoid;
  }

  .benchmark-numero {
    min-width: 32mm;
    font-family: var(--fonte-titulos);
    font-size: 10pt;
    color: var(--navy);
  }

  .benchmark-texto {
    font-size: 10pt;
    line-height: 1.4;
    color: #3a3a44;
  }

  /* -------------------------------------------------- plano de 90 dias */

  .cartao-plano {
    padding: 0;
    border: 0;
    border-radius: 0;
    break-inside: avoid;
  }

  .lista-passos {
    margin-top: 3mm;
  }

  .lista-passos > li {
    display: flex;
    gap: 3mm;
    line-height: 1.45;
    break-inside: avoid;
  }

  .lista-passos > li + li {
    margin-top: 2mm;
  }

  .passo-numero {
    height: 5.5mm;
    width: 5.5mm;
    background: var(--navy);
    font-family: var(--fonte-titulos);
    font-size: 8.5pt;
  }

  /* ---------------------------------------------------------- contato */

  .contato-pdf {
    margin-top: 6mm;
    padding: 3.5mm 4.5mm;
    border: 0.75pt solid #d5d5dd;
    break-inside: avoid;
  }

  .contato-pdf h2 {
    font-family: var(--fonte-titulos);
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
  }

  .contato-pdf p {
    margin-top: 2mm;
    font-size: 10pt;
    line-height: 1.4;
  }

  .contato-pdf p:last-child {
    margin-top: 2.5mm;
    font-size: 8.5pt;
    color: var(--tinta-suave);
  }

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

  /* ----------------------------------------------------------- rodapé */

  .nota-legal {
    margin-top: 5mm;
    padding-top: 2.5mm;
    border-top: 0.5pt solid #e4e4ea;
    font-size: 8pt;
    line-height: 1.45;
    color: var(--tinta-suave);
    break-inside: avoid;
  }
}