/* O site de vendas (095): o bloco de recurso (um por tela, todos na mesma forma), "qual é o seu
   caso", os passos da troca, as perguntas, o fecho e o rodapé. As cores e as letras estão em
   estilo.css; os desenhos de cada bloco, nos quatro arquivos cenas-*.css. */

main > section,
.recurso,
.rodape {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--margem);
}

main h2 {
  max-width: 20ch;
  font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem);
}

main h3 {
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
}

.apoio-do-trecho {
  max-width: 52ch;
  margin-top: 1rem;
  color: var(--tinta-fraca);
  font-size: 1.1875rem;
}

.segue {
  margin-top: 2rem;
  font-weight: 700;
}

.segue a,
.segue-o-caso {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* ---------- O bloco de recurso: o que se diz de um lado, o desenho do conceito do outro. ---------- */

.recurso .miolo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* Os blocos se alternam: o fundo branco e o desenho do outro lado, de dois em dois. */
.recursos > .recurso:nth-of-type(even) {
  background: var(--rua);
}

.recursos > .recurso:nth-of-type(even) .cena {
  order: -1;
}

.recurso .dizer > p {
  max-width: 44ch;
  margin-top: 1.125rem;
  color: var(--tinta-fraca);
  font-size: 1.1875rem;
}

/* A linha de resultado fecha o texto: uma frase só, na tinta cheia, embaixo de um traço curto. */
.recurso .dizer > .resultado {
  margin-top: 1.5rem;
  color: var(--tinta);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.resultado::before {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 0.75rem;
  background: var(--tinta);
}

/* O desenho: uma peça de mapa, com a borda de tinta. Não é captura de tela (CA-004). */
.cena {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1.5px solid var(--tinta);
  border-radius: 1.25rem;
  background: var(--rua);
  box-shadow: 0 14px 30px rgb(27 27 24 / 14%);
  font-size: clamp(0.75rem, 0.55rem + 0.75vw, 1rem);
  line-height: 1.25;
}

.recursos > .recurso:nth-of-type(even) .cena:not(.mapinha) {
  background: var(--terra);
}

/* As peças dos desenhos são blocos; o ":where" não pesa, e cada desenho arruma as suas como quiser. */
:where(.cena) :where(span, b, i, em, small) {
  display: block;
  font-style: normal;
}

/* ---------- Qual é o seu caso: já uso um sistema, ou nunca usei. ---------- */

.momento {
  background: var(--policia);
  color: var(--rua);
}

.momento .apoio-do-trecho {
  color: var(--policia-clara);
}

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.abas .etiqueta {
  min-height: 52px;
  border-color: var(--rua);
  background: transparent;
  color: var(--rua);
  font-size: 1.0625rem;
  box-shadow: none;
}

/* A aba escolhida é a etiqueta escolhida: cheia, na cor clara. */
.abas .etiqueta[aria-selected='true'] {
  background: var(--rua);
  color: var(--policia);
}

.caso {
  max-width: 46rem;
  margin-top: 2.5rem;
}

.caso > p {
  margin-top: 1rem;
  color: var(--policia-clara);
  font-size: 1.1875rem;
}

.momento .vistos {
  grid-template-columns: minmax(0, 1fr);
}

.momento .vistos li::before {
  border-color: var(--rua);
}

.caso .principal {
  margin: 1.75rem 1.25rem 0 0;
  background: var(--rua);
  color: var(--policia);
}

.segue-o-caso {
  color: var(--rua);
}

.momento :focus-visible,
.rodape :focus-visible {
  outline-color: var(--rua);
}

/* ---------- Os passos da troca: a rota tracejada, como o trajeto num mapa. ---------- */

.passos {
  background: var(--rua);
}

.rota {
  position: relative;
  max-width: 48rem;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: parada;
}

.rota::before {
  content: '';
  position: absolute;
  left: 1.6875rem;
  top: 1.75rem;
  bottom: 1.75rem;
  border-left: 3px dashed var(--tinta);
}

.rota li {
  position: relative;
  padding: 0 0 2.25rem 5rem;
  counter-increment: parada;
}

.rota li:last-child {
  padding-bottom: 0;
}

.rota li::before {
  content: counter(parada);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--rua);
  font: 700 1.75rem/1 var(--placa);
}

.rota h3 {
  padding-top: 0.625rem;
}

.rota p {
  max-width: 52ch;
  margin-top: 0.5rem;
  color: var(--tinta-fraca);
  font-size: 1.125rem;
}

/* ---------- As perguntas: uma lista que abre, em linhas. ---------- */

.perguntas {
  background: var(--rua);
}

.lista-de-perguntas {
  max-width: 52rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1.5px solid var(--tinta);
}

.lista-de-perguntas details {
  border-bottom: 1.5px solid var(--tinta);
}

.lista-de-perguntas summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0.75rem 3rem 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.lista-de-perguntas summary::-webkit-details-marker {
  display: none;
}

/* O sinal de abrir é desenhado: dois traços, e o de pé se deita quando a resposta abre. */
.lista-de-perguntas summary::before,
.lista-de-perguntas summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  width: 1.125rem;
  height: 2.5px;
  background: var(--tinta);
  transition: transform 0.25s var(--saida);
}

.lista-de-perguntas summary::after {
  transform: rotate(90deg);
}

.lista-de-perguntas [open] summary::after {
  transform: none;
}

.lista-de-perguntas p {
  max-width: 62ch;
  padding-bottom: 1.5rem;
  color: var(--tinta-fraca);
  font-size: 1.125rem;
}

.lista-de-perguntas p a {
  color: var(--tinta);
  font-weight: 700;
}

/* ---------- O fecho: o trecho do laranja, com a chamada de sempre. ---------- */

.fecho {
  background: var(--mercado);
  color: var(--tinta);
}

.fecho h2 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
}

.fecho p {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: 1.375rem;
  font-weight: 500;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 2rem;
}

.fecho .etiqueta {
  min-height: 56px;
  font-size: 1.0625rem;
}

.fecho .garantia {
  margin-top: 1rem;
  color: var(--tinta);
  font-size: 1rem;
}

/* Sobre o laranja, o roxo do foco some: ali o foco é de tinta. */
.fecho :focus-visible {
  outline-color: var(--tinta);
}

/* ---------- O rodapé: os caminhos do site e quem está por trás. ---------- */

.rodape {
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  background: var(--tinta);
  color: var(--tinta-clara);
  font-size: 0.9375rem;
}

.colunas-do-rodape {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
}

.rodape h2 {
  margin-bottom: 0.25rem;
  color: var(--tinta-clara);
  font: 700 1.125rem/1.2 var(--placa);
  letter-spacing: 0.04em;
}

.rodape a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  color: var(--rua);
  font-size: 1rem;
  font-weight: 500;
}

.ressalva {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1.5px solid rgb(255 255 255 / 22%);
}

.assinatura {
  margin-top: 0.75rem;
}

/* A empresa que oferece o produto (164). */
.empresa {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

.rodape strong {
  color: var(--rua);
}

/* O link dentro do texto do bloco (o da IA leva à página dela, 108). */
.recurso .dizer > p a {
  color: var(--tinta);
  font-weight: 700;
}