/* MV Advocacia · cartão digital
   O mesmo mundo do site ("A regra comentada"): papel, tinta e um único dourado,
   Spectral para o que se lê e Jost para o que se opera. Escrito do celular para
   cima: a base é a tela estreita, e cada min-width acrescenta colunas. */

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/spectral-300.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: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../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: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spectral-500.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;
}

/* Jost é variável: um arquivo cobre os pesos 400 e 500. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jost-variavel.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;
}

@property --revela {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 130%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;
  --papel: #ffffff;
  --tinta: #161513;
  --tinta-2: #4a4741;
  --apagado: #6e6961;
  --fio: #e8e5df;
  --fio-forte: #c9c4bb;
  --ouro: #d9a54c;
  --ouro-texto: #85560f;
  --ouro-acao: #a87418;
  --ouro-forte: #cf9a3f;
  --sobre-ouro: #161513;
  --selecao: rgba(217, 165, 76, 0.32);
  --retrato-fundo: #efede9;

  --serifa: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* O V do monograma é o sinal de marcado. */
  --sinal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='330 322 736 687'%3E%3Cpath d='M362.49 524.55 L395.14 491.9 L645.53 891.57 L980.74 354.04 L1033.77 354.04 L645.62 976.47 Z' stroke='%23161513' stroke-width='60' stroke-linejoin='miter'/%3E%3C/svg%3E");

  --margem: 16px;
  --vao: 0px;
  --coluna-ref: 150px;
  --coluna-nota: 240px;
  --largura: 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --papel: #141310;
    --tinta: #eee9e0;
    --tinta-2: #beb7ab;
    --apagado: #938c81;
    --fio: #2e2b27;
    --fio-forte: #4a463f;
    --ouro-texto: #e1b865;
    --ouro-acao: #d9a54c;
    --selecao: rgba(217, 165, 76, 0.3);
    --retrato-fundo: #25221e;
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #141310;
  --tinta: #eee9e0;
  --tinta-2: #beb7ab;
  --apagado: #938c81;
  --fio: #2e2b27;
  --fio-forte: #4a463f;
  --ouro-texto: #e1b865;
  --ouro-acao: #d9a54c;
  --selecao: rgba(217, 165, 76, 0.3);
  --retrato-fundo: #25221e;
}

/* ---------- Base ---------- */

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

[hidden],
.hidden {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 72px;
  background: var(--papel);
  scrollbar-color: var(--apagado) var(--papel);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--ouro-texto);
}

::selection {
  background: var(--selecao);
  color: var(--tinta);
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ouro-texto);
  outline-offset: 3px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Grade ---------- */

.folha,
.topo {
  padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2));
}

.folha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--vao);
  align-content: start;
}

/* ---------- Topo ---------- */

.topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px 10px;
}

/* A logo oficial, empilhada: ADVOCACIA embaixo do MV, desenhada em curvas.
   Abaixo de 88px de largura a palavra deixa de ser legível. */
.marca {
  display: block;
  color: var(--ouro);
}

.logo {
  display: block;
  width: 88px;
  height: auto;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tema {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-2);
  cursor: pointer;
}

.tema svg {
  width: 16px;
  height: 16px;
}

.compartilhar {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--tinta-2);
  cursor: pointer;
}

.compartilhar span {
  display: inline-block;
  padding: 5px 0 3px;
  line-height: 16px;
  border-bottom: 1px solid var(--fio-forte);
}

/* ---------- Referência (margem) ---------- */

.ref {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--apagado);
}

.ref span {
  display: block;
}

.ref .ref-artigo {
  color: var(--tinta-2);
}

/* ---------- Abertura: o cartão ---------- */

.abertura {
  grid-template-columns: minmax(0, 1fr) 104px;
  grid-template-areas:
    "cartao retrato"
    "ref retrato"
    "area area";
  column-gap: 16px;
  padding-top: 18px;
  padding-bottom: 36px;
}

.abertura .cartao {
  grid-area: cartao;
  align-self: start;
}

.abertura .ref {
  grid-area: ref;
  align-self: start;
  margin-top: 14px;
}

.abertura h1 {
  font-family: var(--serifa);
  font-weight: 300;
  font-size: 33px;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}

.cargo {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta-2);
}

.retrato {
  grid-area: retrato;
  align-self: start;
}

.retrato img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--retrato-fundo);
}

.area {
  grid-area: area;
  margin-top: 28px;
}

.area h2 {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--tinta);
}

.area p {
  max-width: 60ch;
  margin-top: 6px;
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* ---------- Blocos ---------- */

.bloco {
  padding-bottom: 48px;
}

.bloco::before,
.rodape::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin-bottom: 22px;
  background: var(--fio);
}

.bloco > .ref {
  margin-bottom: 8px;
}

.texto {
  min-width: 0;
}

.texto h2 {
  margin-bottom: 10px;
  font-family: var(--serifa);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--tinta);
  text-wrap: balance;
}

.texto > p {
  max-width: 60ch;
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-2);
}

.texto b {
  font-weight: 500;
  color: var(--tinta);
}

/* ---------- Botão: dourado chapado, a ação ---------- */

.botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  border: 0;
  background: var(--ouro);
  color: var(--sobre-ouro);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
}

.botao svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.botao:hover {
  background: var(--ouro-forte);
}

/* ---------- Diagnóstico: as perguntas ---------- */

.perguntas > p {
  margin-bottom: 10px;
}

/* No celular e no tablet o resultado vem depois das nove perguntas: esta cópia
   da linha fica presa no topo da tela enquanto elas passam, e some quando o
   painel do resultado aparece. */
.linha-presa {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--fio-forte);
  background: var(--papel);
}

.linha-presa .linha {
  margin-block: 2px;
}

.linha-presa.oculta {
  visibility: hidden;
  opacity: 0;
}

.opcao {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--fio);
  cursor: pointer;
}

/* A caixa de marcar é desenhada a tinta; marcada, leva o V do monograma. */
.opcao input {
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1.5px solid var(--tinta-2);
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.opcao input::before {
  content: "";
  width: 14px;
  height: 13px;
  background: var(--papel);
  -webkit-mask: var(--sinal) center / contain no-repeat;
  mask: var(--sinal) center / contain no-repeat;
  transform: scale(0);
}

.opcao input:checked {
  border-color: var(--tinta);
  background: var(--tinta);
}

.opcao input:checked::before {
  transform: scale(1);
}

.pergunta {
  display: block;
  font-family: var(--serifa);
  font-size: 18px;
  line-height: 1.35;
  color: var(--tinta);
}

.dica {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--apagado);
}

/* Duas opções: um par de retângulos de fio, o escolhido cheio de tinta. */
.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--fio);
}

/* A última pergunta não fecha com fio: logo abaixo vem o fio do resultado. */
.par:last-child {
  border-bottom: 0;
}

.par-botoes {
  display: flex;
}

.par-botoes button {
  min-width: 76px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--fio-forte);
  border-radius: 0;
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.par-botoes button + button {
  margin-left: -1px;
}

.par-botoes button[aria-pressed="true"] {
  position: relative;
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel);
}

/* ---------- Diagnóstico: o resultado e a linha do avião ---------- */

.resultado {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
}

.resultado-titulo {
  font-family: var(--serifa);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
}

/* O avião corre numa pista com metade da largura dele de cada lado, para caber
   inteiro no começo; a largura da barra (definida pelo script) leva o avião. */
.linha {
  position: relative;
  height: 44px;
  margin: 8px 22px 4px;
  contain: layout;
}

.linha::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--fio-forte);
}

.barra {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 0;
  height: 3px;
  background: var(--apagado);
}

.aviao {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 3px 5px;
  background: var(--papel);
  color: var(--apagado);
  transform: translate(50%, -50%);
}

.aviao svg {
  display: block;
  width: 40px;
  height: auto;
}

/* Dourado só quando o atendimento é liberado. */
[data-nivel="alta"] .barra,
[data-nivel="media_analise"] .barra {
  background: var(--ouro-acao);
}

[data-nivel="alta"] .aviao,
[data-nivel="media_analise"] .aviao {
  color: var(--ouro-acao);
}

/* O veredito muda a cada resposta: é o que mais pesa no painel depois do título. */
.resultado-status {
  font-family: var(--serifa);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
}

.resultado[data-nivel="nenhum"] .resultado-status {
  font-weight: 400;
  color: var(--apagado);
}

.resultado-texto {
  margin-top: 8px;
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* ---------- Diagnóstico: o formulário liberado ---------- */

.lead {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fio);
}

.lead h3 {
  font-family: var(--serifa);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
}

.lead-texto {
  margin-top: 4px;
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta-2);
}

.formulario {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.campo label {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
}

.obrigatorio {
  color: var(--ouro-texto);
}

.campo input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--tinta-2);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
}

.campo input::placeholder {
  color: var(--apagado);
  opacity: 1;
}

.campo [aria-invalid="true"] {
  border-bottom: 2px solid var(--ouro-texto);
}

.erro {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ouro-texto);
}

.formulario .botao {
  margin-top: 4px;
}

.miudo {
  font-size: 14px;
  line-height: 1.55;
  color: var(--apagado);
}

/* ---------- Resolução 400: assistência por tempo de espera ---------- */

.direitos {
  margin-top: 20px;
  border-top: 1px solid var(--fio);
}

.direito {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--fio);
}

.direito-tempo {
  grid-row: 1;
  grid-column: 1;
  padding-top: 3px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.direito-nome {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--serifa);
  font-size: 19px;
  line-height: 1.35;
  color: var(--tinta);
}

.direito-detalhe {
  grid-row: 2;
  grid-column: 2;
  margin-top: 2px;
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta-2);
}

.direitos + p {
  margin-top: 20px;
}

/* ---------- Canais oficiais ---------- */

.canais {
  margin-top: 8px;
}

.canais li:first-child a {
  border-top: 1px solid var(--fio);
}

.canais a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  column-gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fio);
  text-decoration: none;
}

.canal-nome {
  display: block;
  font-family: var(--serifa);
  font-size: 20px;
  line-height: 1.3;
  color: var(--tinta);
}

.canal-detalhe {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--apagado);
}

.canais svg:not(.canal-marca),
.atalho svg {
  width: 18px;
  height: 18px;
  color: var(--apagado);
}

/* As marcas das redes, pedidas pelo responsável: monolinha, na cor do texto,
   centradas entre a linha do nome e a do detalhe. */
.canal-marca {
  width: 22px;
  height: 22px;
  color: var(--tinta-2);
}

/* ---------- Qual foi o seu problema? ---------- */

/* Quadrados de fio, dois por linha (decisão do responsável: no celular e para
   quem vem do Instagram, os quadrados leem melhor que as linhas). O fio entre
   eles é o vão de 1px sobre o fundo de fio. */
.atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 8px;
  border: 1px solid var(--fio);
  background: var(--fio);
}

.atalhos li {
  display: flex;
}

.atalho {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  width: 100%;
  min-height: 132px;
  padding: 16px 16px 14px;
  border: 0;
  border-radius: 0;
  background: var(--papel);
  text-align: left;
  cursor: pointer;
}

.atalho-nome {
  display: block;
  font-family: var(--serifa);
  font-size: 20px;
  line-height: 1.25;
  color: var(--tinta);
}

.atalho-detalhe {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--apagado);
}

.atalho svg {
  align-self: end;
  justify-self: end;
  margin-top: 12px;
}

.atalho:focus-visible {
  outline-offset: -5px;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--tinta-2);
}

.rodape-marca {
  align-self: start;
  margin-bottom: 20px;
  color: var(--ouro);
}

.rodape-marca .logo {
  width: 104px;
}

.rodape-nome {
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
}

.rodape-texto {
  display: grid;
  gap: 2px;
}

.aviso {
  max-width: 68ch;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--apagado);
}

/* ---------- Estados de quem passa o ponteiro ---------- */

@media (hover: hover) {
  .opcao:hover input:not(:checked),
  .par-botoes button:not([aria-pressed="true"]):hover {
    border-color: var(--tinta);
  }

  .par-botoes button:not([aria-pressed="true"]):hover {
    position: relative;
    color: var(--tinta);
  }

  .compartilhar:hover span {
    color: var(--tinta);
    border-bottom-color: var(--tinta-2);
  }

  .canais a:hover svg:not(.canal-marca),
  .atalho:hover svg {
    color: var(--ouro-acao);
  }
}

/* ---------- Movimento: só para quem não pediu menos movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Na máscara só conta o alfa: a tinta entra como cor opaca qualquer. */
  .js .abertura h1 {
    -webkit-mask-image: linear-gradient(to bottom, var(--tinta) var(--revela), transparent calc(var(--revela) + 30%));
    mask-image: linear-gradient(to bottom, var(--tinta) var(--revela), transparent calc(var(--revela) + 30%));
    animation: revela-titulo 1.4s var(--saida) 0.1s both;
  }

  .barra {
    transition: width 0.7s var(--saida), background-color 0.3s var(--saida);
  }

  .linha-presa {
    transition: opacity 0.25s var(--saida), visibility 0.25s;
  }

  .aviao {
    transition: color 0.3s var(--saida);
  }

  .opcao input::before {
    transition: transform 0.18s var(--saida);
  }

  .botao svg,
  .canais svg:not(.canal-marca),
  .atalho svg {
    transition: transform 0.3s var(--saida), color 0.2s var(--saida);
  }

  .botao:hover svg,
  .atalho:hover svg {
    transform: translateX(3px);
  }

  .canais a:hover svg:not(.canal-marca) {
    transform: translate(2px, -2px);
  }
}

@keyframes revela-titulo {
  from {
    --revela: -30%;
  }

  to {
    --revela: 130%;
  }
}

/* ---------- Telas maiores ---------- */

@media (min-width: 361px) {
  :root {
    --margem: 20px;
  }

  .abertura {
    grid-template-columns: minmax(0, 1fr) 128px;
    column-gap: 20px;
  }

  .abertura h1 {
    font-size: 37px;
  }
}

@media (min-width: 560px) {
  .atalho {
    min-height: 120px;
  }

  .abertura {
    grid-template-columns: minmax(0, 1fr) 168px;
    column-gap: 28px;
  }

  .par {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
  }

  .par-botoes {
    margin-top: 1px;
  }

  .par-botoes button {
    min-width: 56px;
  }
}

/* Duas colunas: a referência vai para a margem esquerda. */
@media (min-width: 760px) {
  :root {
    --margem: 32px;
    --vao: 32px;
  }

  .folha {
    grid-template-columns: var(--coluna-ref) minmax(0, 1fr);
  }

  .topo {
    padding-block: 20px 12px;
  }

  .marca .logo {
    width: 104px;
  }

  .topo-acoes {
    gap: 28px;
  }

  .abertura {
    grid-template-columns: var(--coluna-ref) minmax(0, 1fr) 200px;
    grid-template-areas:
      "ref cartao retrato"
      ". area retrato";
    column-gap: var(--vao);
    padding-top: 7vh;
    padding-bottom: 64px;
  }

  .abertura .ref {
    margin-top: 0;
    padding-top: 14px;
  }

  .abertura h1 {
    font-size: clamp(37px, 4.6vw, 70px);
    line-height: 1.06;
  }

  .area {
    margin-top: 32px;
  }

  .area p,
  .texto > p {
    font-size: 19px;
  }

  .bloco {
    padding-bottom: 72px;
  }

  .bloco > .ref {
    grid-column: 1;
    margin-bottom: 0;
    padding-top: 9px;
  }

  .bloco > .texto,
  .bloco > .resultado {
    grid-column: 2;
  }

  .texto h2 {
    font-size: 30px;
    margin-bottom: 12px;
  }

  .rodape {
    grid-template-columns: var(--coluna-ref) minmax(0, 1fr);
  }

  .rodape-marca {
    grid-column: 1;
    margin-bottom: 0;
  }

  .rodape-texto {
    grid-column: 2;
  }
}

/* Três colunas: o resultado acompanha as perguntas na margem direita. */
@media (min-width: 980px) {
  :root {
    --vao: 36px;
  }

  .folha {
    grid-template-columns: var(--coluna-ref) minmax(0, 1fr) var(--coluna-nota);
  }

  .abertura {
    grid-template-columns: var(--coluna-ref) minmax(0, 1fr) var(--coluna-nota);
    grid-template-areas:
      "ref cartao retrato"
      "ref area retrato";
    grid-template-rows: auto 1fr;
  }

  .par:last-child {
    border-bottom: 1px solid var(--fio);
  }

  /* O resultado já acompanha as perguntas na margem: a cópia presa sai, e a
     lista volta a abrir com o próprio fio. */
  html {
    scroll-padding-top: 16px;
  }

  .linha-presa {
    display: none;
  }

  .perguntas > p {
    margin-bottom: 22px;
  }

  .opcoes {
    border-top: 1px solid var(--fio);
  }

  .bloco > .resultado {
    grid-column: 3;
    position: sticky;
    top: 24px;
    align-self: start;
    margin-top: 0;
  }

  .resultado .linha {
    margin-inline: 22px;
  }
}

@media (min-width: 1180px) {
  :root {
    --margem: 48px;
    --coluna-ref: 200px;
    --coluna-nota: 300px;
    --vao: 56px;
    --largura: calc(var(--coluna-ref) + 760px + var(--coluna-nota) + 2 * var(--vao));
  }

  .atalhos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .folha,
  .abertura {
    grid-template-columns: var(--coluna-ref) minmax(0, 760px) var(--coluna-nota);
  }
}