/* =============================================================================
   DIAGNÓSTICO DE EXPOSIÇÃO CONTRATUAL
   Sistema visual: documento confidencial de consultoria jurídica boutique.
   Papel off-white quente, grafite quente, vinho fechado com uso restrito,
   filetes de 1px, cantos retos, zero sombra, aparato micro-tipográfico.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. FONTES — hospedadas no próprio domínio, subset latin.
   Archivo é variável: um arquivo cobre 400–600. Nenhuma requisição a
   terceiros, nenhum handshake extra, nada de IP de visitante saindo daqui.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Papel e tinta */
  --papel:          #F1EDE5;
  --papel-alto:     #F7F4EE;   /* leve elevação, usada com parcimônia */
  --papel-fundo:    #EAE5DB;   /* recuo, marca d'água de bloco */
  --tinta:          #191713;
  --tinta-media:    #55504A;   /* 6.7:1 sobre o papel */
  --tinta-fraca:    #6A645A;   /* 4.9:1 — piso para texto */
  --tinta-tenue:    #A8A093;   /* APENAS filetes e marcas. Nunca texto. */

  /* Acento — vinho fechado. Apenas progresso, seleção, CTA e marca editorial. */
  --vinho:          #6B1F2B;
  --vinho-fundo:    #571620;
  --vinho-tenue:    rgba(107, 31, 43, 0.10);

  /* Filetes */
  --filete:         rgba(25, 23, 19, 0.16);
  --filete-forte:   rgba(25, 23, 19, 0.30);
  --filete-tenue:   rgba(25, 23, 19, 0.09);
  --fio:            1px;

  /* Tipografia */
  --serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Quatro degraus de interface. O salto real de hierarquia é a serif. */
  --fs-micro:  0.6875rem;   /* 11px — aparato em caps */
  --fs-peq:    0.8125rem;   /* 13px — aparato secundário */
  --fs-corpo:  1rem;        /* 16px — interface e corpo */
  --fs-lead:   1.125rem;    /* 18px — leitura */
  --fs-leitura: var(--fs-lead);  /* texto do diagnóstico; sobe um passo no desktop */
  --fs-item:   clamp(1.3125rem, 1.02rem + 1.45vw, 1.9375rem);
  --fs-h1:     clamp(1.6875rem, 1.1rem + 2.6vw, 3.25rem);
  --fs-manchete: clamp(1.4375rem, 1.08rem + 1.75vw, 2.1875rem);

  --track-caps: 0.13em;
  --track-h1:  -0.018em;

  /* Espaçamento — escala 4px */
  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 2rem;     --sp-8: 2.5rem;
  --sp-9: 3rem;     --sp-10: 4rem;    --sp-11: 5rem;

  /* Estrutura */
  --marg:      var(--sp-5);     /* margem lateral do documento */
  --largura:   72rem;
  --cabeca-h:  2.875rem;
  --gutter-marcador: 1.75rem;   /* coluna do marcador A/B/C/D */

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-rapido: 140ms;
  --t-medio:  240ms;
  --t-etapa:  320ms;
}

@media (min-width: 30em)  { :root { --marg: var(--sp-7); } }
@media (min-width: 48em)  { :root { --marg: var(--sp-9); --cabeca-h: 3.25rem; --gutter-marcador: 2.125rem; } }
@media (min-width: 64em)  { :root { --marg: var(--sp-10); } }
@media (min-width: 90em)  { :root { --marg: var(--sp-11); } }

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabeca-h) + var(--sp-4));
}

body {
  margin: 0;
  background-color: var(--papel);
  /* Textura de papel: grão fino em duas frequências, custo zero de repaint. */
  background-image:
    radial-gradient(circle at 17% 23%, rgba(25,23,19,0.013) 0 1px, transparent 1.4px),
    radial-gradient(circle at 71% 62%, rgba(25,23,19,0.010) 0 1px, transparent 1.4px);
  background-size: 19px 17px, 31px 29px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--fs-corpo);
  line-height: 1.55;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Superfícies do navegador tratadas pela paleta. */
::selection { background: var(--vinho); color: var(--papel-alto); }
:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
}
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--papel-fundo); }
  ::-webkit-scrollbar-thumb { background: var(--tinta-tenue); border: 3px solid var(--papel-fundo); }
  ::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }
}
html { scrollbar-color: var(--tinta-tenue) var(--papel-fundo); scrollbar-width: thin; }

.pular {
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  z-index: 40;
  transform: translateY(-160%);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: var(--tinta);
  color: var(--papel);
  padding: 0 var(--sp-4);
  font-size: var(--fs-peq);
  text-decoration: none;
  transition: transform var(--t-rapido) var(--ease);
}
.pular:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   3. APARATO — rótulos micro-tipográficos e registro numerado
   ------------------------------------------------------------------------ */
.rotulo {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-media);
  line-height: 1.2;
}
.rotulo__fraco { color: var(--tinta-fraca); font-weight: 500; }
.rotulo--fraco  { color: var(--tinta-fraca); font-weight: 500; }
.rotulo--fim    { text-align: right; }

/* A única marca de acento livre do documento: um traço vinho antes do rótulo. */
.rotulo--marcado { position: relative; padding-left: var(--sp-7); }
.rotulo--marcado::before {
  content: '';
  position: absolute;
  left: 0; top: 0.36em;
  width: var(--sp-4); height: 2px;
  background: var(--vinho);
}

/* Registro: linha numerada com filete-guia. Componente-raiz do sistema. */
.registro { display: block; }

.registro__linha {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: baseline;
  column-gap: var(--sp-3);
  padding: 0.5rem 0;
  border-top: var(--fio) solid var(--filete-tenue);
}
.registro__linha:first-child { border-top-color: var(--filete); }
.registro__linha:last-child  { border-bottom: var(--fio) solid var(--filete-tenue); }

.registro__num {
  font-size: var(--fs-peq);
  font-weight: 500;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.registro__rot {
  font-size: var(--fs-peq);
  color: var(--tinta-media);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Marca de estado: forma, não cor. vazio / atual / registrado. */
.registro__marca {
  width: 1.5rem; height: 0.5rem;
  position: relative;
  justify-self: end;
}
.registro__marca::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  height: var(--fio);
  width: 0.75rem;
  background: var(--filete-forte);
  transform: translateY(-50%);
  transition: background-color var(--t-medio) var(--ease);
}
.registro__linha[data-estado='atual'] .registro__num { color: var(--vinho); font-weight: 600; }
.registro__linha[data-estado='atual'] .registro__rot { color: var(--tinta); }
.registro__linha[data-estado='atual'] .registro__marca::after {
  width: 1.5rem; height: 2px; background: var(--vinho);
}
.registro__linha[data-estado='registrado'] .registro__num { color: var(--tinta-media); }
.registro__linha[data-estado='registrado'] .registro__rot { color: var(--tinta); }
.registro__linha[data-estado='registrado'] .registro__marca::after {
  width: 0.5rem; height: 0.5rem; top: 0; transform: none; background: var(--tinta);
}

/* Sumário de escopo: filete-guia tipográfico, sem barra, sem dado implícito. */
/* O escopo é conteúdo de abertura, não aparato de rodapé: sobe um degrau
   da escala e assume tinta cheia. A geometria da linha não muda. */
.registro--escopo .registro__linha { grid-template-columns: 1.75rem auto 1fr; }
.registro--escopo .registro__num { color: var(--tinta-media); }
.registro--escopo .registro__rot {
  font-size: var(--fs-corpo);
  color: var(--tinta);
}
.registro--escopo .registro__rot { white-space: normal; }
.registro--escopo .registro__guia {
  position: relative;
  height: var(--fio);
  background: var(--filete-tenue);
  align-self: center;
  margin-left: var(--sp-4);
}
.registro--escopo .registro__guia::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: var(--fio); height: 5px;
  background: var(--filete-forte);
}

/* ---------------------------------------------------------------------------
   4. ESTRUTURA DA PÁGINA
   ------------------------------------------------------------------------ */
.pagina {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.cabeca {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papel);
  border-bottom: var(--fio) solid var(--filete);
}
.cabeca__interna {
  height: var(--cabeca-h);
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--marg);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cabeca__titulo {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cabeca__ref {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cabeca__estado { color: var(--tinta-fraca); }
.cabeca__contagem { color: var(--tinta); font-weight: 600; }
.cabeca__contagem .cabeca__total { color: var(--tinta-fraca); font-weight: 500; }

/* Trilho: cinco segmentos finos. Preenche por marca, não por gradiente. */
.trilho {
  display: flex;
  gap: 2px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--marg) 0;
  width: 100%;
  height: 3px;
}
.trilho__seg {
  flex: 1;
  height: 100%;
  background: var(--filete-tenue);
  transition: background-color var(--t-medio) var(--ease);
}
.trilho__seg[data-cheio='parcial'] { background: var(--filete-forte); }
.trilho__seg[data-cheio='sim']     { background: var(--vinho); }

.doc {
  flex: 1 0 auto;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--marg);
  width: 100%;
}

.rodape {
  flex-shrink: 0;
  max-width: var(--largura);
  margin: var(--sp-9) auto 0;
  padding: var(--sp-4) var(--marg) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  width: 100%;
  border-top: var(--fio) solid var(--filete-tenue);
}
.rodape p {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--tinta-fraca);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   5. TRANSIÇÃO ENTRE ETAPAS
   ------------------------------------------------------------------------ */
[data-transicao='saindo'] > section:not([hidden]) {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.etapa-entrando {
  animation: entrar var(--t-etapa) var(--ease) both;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Escalonamento de entrada nas linhas do registro e nas opções. */
.escalonar > * {
  animation: subir 420ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   6. ABERTURA
   ------------------------------------------------------------------------ */
.abertura {
  padding: var(--sp-8) 0 var(--sp-9);
  display: grid;
  gap: var(--sp-8);
}

.abertura__h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.13;
  letter-spacing: var(--track-h1);
  text-wrap: balance;
  max-width: 17ch;
  color: var(--tinta);
}
.abertura__desc {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--tinta-media);
  max-width: 34ch;
}
.abertura__acao {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.abertura__meta {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.escopo {
  border-top: var(--fio) solid var(--filete);
  padding-top: var(--sp-6);
}
.escopo .registro { margin-top: var(--sp-6); }
.escopo .rotulo--marcado { color: var(--tinta); }

/* ---------------------------------------------------------------------------
   7. BOTÃO
   ------------------------------------------------------------------------ */
.botao {
  --botao-fundo: var(--vinho);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 3.25rem;
  padding: 0 var(--sp-6);
  background: var(--botao-fundo);
  color: var(--papel-alto);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.botao__rotulo {
  font-size: var(--fs-corpo);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.botao__filete {
  width: 2.25rem;
  height: var(--fio);
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0.556);
  transform-origin: left center;
  transition: transform var(--t-medio) var(--ease), opacity var(--t-medio) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .botao:hover { --botao-fundo: var(--vinho-fundo); }
  .botao:hover .botao__filete { transform: scaleX(1); opacity: 1; }
}
.botao:active { transform: translateY(1px); }
.botao[aria-disabled='true'] {
  --botao-fundo: transparent;
  box-shadow: inset 0 0 0 var(--fio) var(--filete-forte);
  color: var(--tinta-fraca);
  cursor: not-allowed;
  pointer-events: none;
}
.botao--largo {
  width: 100%;
  justify-content: space-between;
  padding-inline: var(--sp-5);
}
.botao--largo .botao__rotulo { text-wrap: balance; }
.botao--largo .botao__filete { flex: none; }

/* Voltar / refazer — ação discreta */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-peq);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  transition: color var(--t-rapido) var(--ease);
}
.voltar__seta {
  width: 2.25rem; height: var(--fio);
  background: currentColor;
  transform: scaleX(0.667);
  transform-origin: left center;
  transition: transform var(--t-medio) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .voltar:hover { color: var(--tinta); }
  .voltar:hover .voltar__seta { transform: scaleX(1); }
}
.voltar[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   8. ITEM (pergunta)
   ------------------------------------------------------------------------ */
.item {
  padding: var(--sp-7) 0 var(--sp-7);
  display: grid;
  gap: var(--sp-8);
}
.item__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--fio) solid var(--filete);
}
.item__cabeca .rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Títulos recebem foco só para serem anunciados; não são controles. */
.item__pergunta:focus,
.parecer__h2:focus { outline: none; }

.item__pergunta {
  margin-top: var(--sp-6);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-item);
  line-height: 1.24;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  max-width: 32ch;
  color: var(--tinta);
}
.item__rodape { margin-top: var(--sp-6); }

/* Alternativas: linhas de documento, não cartões. */
.opcoes {
  margin-top: var(--sp-7);
  border-top: var(--fio) solid var(--filete);
}

.opcao {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter-marcador) 1fr;
  align-items: baseline;
  column-gap: var(--sp-3);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-3);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--fio) solid var(--filete-tenue);
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opcao:last-child { border-bottom-color: var(--filete); }

/* Filete de acento no bordo esquerdo — 1px, aparece só quando há intenção. */
.opcao::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: -1px;
  width: var(--fio);
  background: var(--vinho);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-medio) var(--ease);
}

.opcao__marcador {
  font-size: var(--fs-peq);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
  line-height: 1;
  transition: color var(--t-rapido) var(--ease);
}
.opcao__texto {
  font-size: var(--fs-corpo);
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 46ch;
  transition: color var(--t-rapido) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .opcao:hover { background: var(--papel-alto); }
  .opcao:hover::before { transform: scaleY(1); }
  .opcao:hover .opcao__marcador { color: var(--vinho); }
  .opcao:hover .opcao__texto { color: var(--tinta); }
}
.opcao:active { background: var(--papel-fundo); }
.opcao:focus-visible { outline-offset: -2px; background: var(--papel-alto); }
.opcao:focus-visible::before { transform: scaleY(1); }

.opcao[aria-checked='true'] {
  background: var(--vinho-tenue);
}
.opcao[aria-checked='true']::before { transform: scaleY(1); width: 2px; }
.opcao[aria-checked='true'] .opcao__marcador { color: var(--vinho); }
.opcao[aria-checked='true'] .opcao__texto { color: var(--tinta); }

/* Enquanto a resposta é registrada, as irmãs recuam. */
.opcoes[data-registrando='true'] .opcao:not([aria-checked='true']) {
  opacity: 0.4;
  transition: opacity var(--t-medio) var(--ease);
}
.opcoes[data-registrando='true'] .opcao { pointer-events: none; }

.registro-lateral {
  display: none;
  border-top: var(--fio) solid var(--filete);
  padding-top: var(--sp-6);
}
.registro-lateral .registro { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------------------
   9. ANÁLISE — transição curta entre a última resposta e o diagnóstico
   ------------------------------------------------------------------------ */
.analise {
  padding: var(--sp-7) 0 var(--sp-9);
  min-height: min(28rem, calc(100svh - var(--cabeca-h) - 12rem));
  max-width: 34rem;
}
.analise .registro { margin-top: var(--sp-6); }

/* O indicador que percorre: uma varredura sob o título, com a mesma duração
   da sequência de marcas. Nada de barra de carregamento fictícia. */
.analise__varredura {
  position: relative;
  height: var(--fio);
  margin-top: var(--sp-4);
  background: var(--filete);
  overflow: hidden;
}
.analise__varredura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vinho);
  transform: scaleX(0);
  transform-origin: left center;
  animation: varrer var(--duracao, 1330ms) linear forwards;
}
@keyframes varrer { to { transform: scaleX(1); } }

/* As marcas são carimbadas, uma a uma, pelo script. */
.registro--analise .registro__rot { color: var(--tinta-fraca); }
.registro--analise .registro__linha[data-estado='registrado'] .registro__rot { color: var(--tinta); }

/* ---------------------------------------------------------------------------
   10. PARECER
   ------------------------------------------------------------------------ */
.parecer {
  padding: var(--sp-7) 0 var(--sp-9);
  max-width: 40rem;
}
.parecer__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--fio) solid var(--filete-forte);
}
/* Manchete do diagnóstico. Autoridade vem do texto e da composição —
   não existe nota, medidor, selo, semáforo nem escala de risco. */
.parecer__h2 {
  margin-top: var(--sp-7);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-manchete);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 24ch;
  color: var(--tinta);
}

.parecer__corpo {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--fio) solid var(--filete);
}

/* A ponte para a ação: separada do corpo do diagnóstico por espaço e pelo
   único marcador de acento desta etapa. */
.parecer__ponte {
  margin-top: var(--sp-7);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--vinho);
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--tinta);
  max-width: 46ch;
  text-wrap: pretty;
}

.parecer__texto { margin-top: var(--sp-5); }
.parecer__texto p {
  font-family: var(--serif);
  font-size: var(--fs-leitura);
  line-height: 1.72;
  color: var(--tinta);
  max-width: 62ch;
}
.parecer__texto p + p { margin-top: var(--sp-5); }

/* Fora do desktop o registro é apêndice de fechamento, não interrupção:
   ele desce para depois da ação, para nada se meter entre a ponte e o CTA.
   No desktop ele já vive na margem e a grade manda. */
.parecer { display: flex; flex-direction: column; }
.parecer__acao     { order: 1; }
.registro--fechado { order: 2; }
.parecer__rodape   { order: 3; }

.registro--fechado { margin-top: var(--sp-8); }
.registro--fechado .registro__rot { white-space: normal; }

.parecer__acao { margin-top: var(--sp-7); }
.parecer__nota {
  margin-top: var(--sp-4);
  font-size: var(--fs-peq);
  color: var(--tinta-fraca);
  max-width: 46ch;
}
.parecer__rodape { margin-top: var(--sp-7); }

/* ---------------------------------------------------------------------------
   11. TABLET — 48em / 768px
   ------------------------------------------------------------------------ */
@media (min-width: 48em) {
  .abertura { padding: var(--sp-10) 0 var(--sp-11); gap: var(--sp-10); }
  .item     { padding: var(--sp-9) 0 var(--sp-11); gap: var(--sp-9); }
  .analise  { padding: var(--sp-9) 0 var(--sp-11); }
  .parecer  { padding: var(--sp-9) 0 var(--sp-11); }

  .opcao { padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4); }
  /* O índice conserva medida de documento em vez de esticar pela tela. */
  .escopo, .registro-lateral { max-width: 34rem; }
  .registro--escopo .registro__linha { padding: 0.625rem 0; }
  .registro-lateral { display: block; }
}

/* ---------------------------------------------------------------------------
   12. DESKTOP — 64em / 1024px : composição assimétrica em 12 colunas
   ------------------------------------------------------------------------ */
@media (min-width: 64em) {
  .abertura {
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: 0 var(--sp-8);
    padding: var(--sp-10) 0 var(--sp-10);
    min-height: min(37rem, calc(100svh - var(--cabeca-h) - 11rem));
  }
  .abertura__texto {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
  }
  .abertura__acao { margin-top: auto; padding-top: var(--sp-9); }
  .abertura__h1 { max-width: 19ch; }
  .escopo {
    grid-column: 9 / span 4;
    border-top: 0;
    padding-top: var(--sp-3);   /* alinha pela caixa alta da manchete */
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Filete de coluna: separa sem caixa. */
  .escopo::before {
    content: '';
    position: absolute;
    left: calc(var(--sp-8) * -0.5);
    top: 0; bottom: 0;
    width: var(--fio);
    background: var(--filete);
  }

  .item {
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: 0 var(--sp-8);
  }
  .item__corpo { grid-column: 1 / span 8; }
  .registro-lateral {
    display: flex;
    grid-column: 10 / span 3;
    border-top: 0;
    padding-top: 0;             /* mesmo topo do rótulo do item */
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .registro-lateral::before {
    content: '';
    position: absolute;
    left: calc(var(--sp-8) * -0.5);
    top: 0; bottom: 0;
    width: var(--fio);
    background: var(--filete);
  }
  .registro-lateral .registro__rot { white-space: normal; }

  .item__pergunta { max-width: 26ch; }
  .opcao__texto { font-size: var(--fs-lead); }
  .botao--largo { width: auto; min-width: 22rem; }

  .parecer {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--sp-8);
    align-content: start;
  }
  :root { --fs-leitura: 1.1875rem; }   /* 19px — o diagnóstico ganha um passo */

  .parecer__cabeca  { grid-column: 1 / -1;      grid-row: 1; }
  .parecer__h2      { grid-column: 1 / span 7;  grid-row: 2; }
  .parecer__corpo   { grid-column: 1 / span 7;  grid-row: 3; }
  .parecer__acao    { grid-column: 1 / span 7;  grid-row: 4; }
  .parecer__rodape  { grid-column: 1 / span 7;  grid-row: 5; }
  .registro--fechado {
    grid-column: 9 / span 4;
    grid-row: 2 / span 3;
    align-self: stretch;
    margin-top: var(--sp-7);
    position: relative;
  }
  .registro--fechado::before {
    content: '';
    position: absolute;
    left: calc(var(--sp-8) * -0.5);
    top: 0; bottom: 0;
    width: var(--fio);
    background: var(--filete);
  }
  /* O texto do parecer é o que carrega peso ao final. */
  .parecer__texto p { line-height: 1.68; }
}

@media (min-width: 90em) {
  .abertura__texto { grid-column: 1 / span 6; }
  .escopo { grid-column: 8 / span 4; }
}

/* ---------------------------------------------------------------------------
   13. MOVIMENTO REDUZIDO
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}