/* ─────────────────────────────────────────────────────────────
   base.css

   Cinza, sem cor de marca, sem animação. A régua aqui é só o
   layout: uma ideia por tela, rótulo entre parênteses, manchete
   grande, apoio curto, e a informação caindo em lista de linhas
   (quando é sequência) ou em cartas de altura igual (quando é
   comparação).

   O vocabulário de classe é o mesmo do site final (envelope,
   rotulo, display, carta, fita). Trocar cinza por cor depois é
   mexer nos tokens deste topo, não no HTML.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta na régua do marcados.me: base off-white, preto puro no
     texto, rampa de cinza para hierarquia, azul como bloco e amarelo
     como acento. O amarelo é caro de propósito: ele só aparece onde a
     tela quer ser apontada. */

  /* superfícies */
  --papel: #f2f2f2;
  --papel-fundo: #e6e6e6;
  --caixa: #dbdbdb;
  --linha: #d2d2d2;

  /* marca */
  --marca: #1f1be4;
  --marca-funda: #14119c;
  --ponto: #3b37e9;
  --destaque: #fae047;

  /* tinta */
  --tinta: #000000;
  --tinta-60: #636363;
  --tinta-35: #919191;

  /* escala tipográfica: grande, que é o gosto da referência */
  --d1: clamp(2.7rem, 7.4vw, 6.6rem);
  --d2: clamp(2rem, 4.8vw, 3.9rem);
  --d3: clamp(1.45rem, 2.4vw, 2.05rem);
  --d4: clamp(1.15rem, 1.5vw, 1.35rem);
  --corpo-g: clamp(1.02rem, 1.35vw, 1.28rem);
  --corpo: clamp(0.94rem, 1.05vw, 1.02rem);
  --mini: 0.75rem;

  /* Um raio só para o site inteiro. Antes convivia pílula de 999px em
     botão e canto vivo em card, que são duas linguagens diferentes de
     forma na mesma tela. Círculo de verdade (ponto, avatar, bolinha do
     carrossel) continua círculo: ali o raio não é decoração, é a
     própria forma. */
  --raio: 5px;

  /* A inscrição em cima do título é o acento do site. No claro ela vai
     na tinta cheia, porque amarelo sobre off-white dá 1,3:1 e some. */
  --rotulo: var(--tinta);

  /* ritmo */
  --envelope: 1360px;
  --recuo: clamp(20px, 4vw, 56px);
  --respiro: clamp(72px, 9vh, 132px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Quando o Lenis assume, ele carimba estas classes na raiz. O
   scroll-behavior nativo precisa sair de cena, senão as duas curvas
   brigam na mesma âncora. Sem JS, o smooth do CSS continua valendo. */
html.lenis,
html.lenis body {
  height: auto;
}

/* a classe de smooth só aparece em parte das versões do Lenis, então a
   régua é a classe base: se o Lenis assumiu, o nativo sai */
html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Host Grotesk", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
}

/* display: flex ganha de [hidden] na cascata, e os estados do checkout
   ficavam todos visíveis ao mesmo tempo. */
[hidden] {
  display: none !important;
}

/* ───────────────────────── estrutura ───────────────────────── */

.envelope {
  width: 100%;
  max-width: var(--envelope);
  margin-inline: auto;
  padding-inline: var(--recuo);
}

/* Cada seção é uma tela. min-height de dobra inteira porque o
   pedido é justamente ver a divisão da informação por tela. */
.tela {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--respiro);
  border-top: 1px solid var(--linha);
}

/* Seção com muita linha (as grades dos dois dias, o catálogo de
   entregáveis). Respiro menor para a informação inteira caber numa
   dobra de notebook, que é onde este site vai ser visto. */
.tela--densa {
  --respiro: clamp(48px, 6vh, 84px);
}

/* As grades dos dois dias têm 13 linhas. Com o respiro padrão elas
   estouravam a dobra em 104px, e o dia terminava depois do fim da
   tela. O aperto vive aqui e não no .linha geral, senão a lista da
   trajetória e a do FAQ perdiam ar sem precisar. */
.tela--densa .linha {
  padding-block: clamp(9px, 0.95vw, 13px);
}

/* A grade do dia é o caso mais apertado do site: são até 11 blocos mais
   três faixas dentro de uma dobra. Estes dois valores são o que mantém
   a lista dentro do respiro da seção, em vez de encostar nas bordas. */
.dia .linha {
  padding-block: clamp(6px, 0.6vw, 8px);
}

.dia .linha--bloco {
  padding-block: clamp(9px, 0.95vw, 13px);
}

/* corpo um passo menor: com 11 blocos, cada pixel de linha conta */
.dia .linha__texto {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
}

/* ───────────────────────── tipografia ───────────────────────── */

/* Rótulo curto entre colchetes, em caixa alta e peso alto: ele é
   etiqueta, não frase. A régua de tamanho é a que estava só nos dois
   dias, agora valendo para o site inteiro. */
.rotulo {
  display: inline-block;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rotulo);
}

.rotulo::before {
  content: "[ ";
}

.rotulo::after {
  content: " ]";
}

.display {
  font-size: var(--d1);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display-m {
  font-size: var(--d2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display-s {
  font-size: var(--d3);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.titulinho {
  font-size: var(--d4);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.apoio {
  max-width: 58ch;
  font-size: var(--corpo-g);
  line-height: 1.5;
  color: var(--tinta-60);
}

.apoio--curto {
  max-width: 44ch;
}

/* Continuação da manchete, não descrição dela. Fica grande o bastante
   para ser lida como segunda parte da frase, menor que a manchete e na
   mesma tinta, porque texto cinza e miúdo é o que faz parágrafo virar
   legenda. */
.continua {
  max-width: 46ch;
  font-size: clamp(1.3rem, 2.35vw, 2.05rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}

.miudo {
  font-size: var(--corpo);
  line-height: 1.55;
  color: var(--tinta-60);
}

.numeral {
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--tinta-35);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────── botões ────────────────────────── */

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid var(--tinta);
  border-radius: var(--raio);
  font-size: var(--corpo);
  font-weight: 500;
  line-height: 1;
}

.btn--forte {
  background: var(--tinta);
  color: var(--papel);
}

/* O background transparente não é decoração, é conserto: <button> nasce
   com o cinza padrão do navegador, e como esta variante só declarava
   borda e cor, os dois botões que são <button> de verdade (copiar o Pix
   e voltar) ficavam com texto branco sobre cinza claro. Os outros
   fantasmas da página são <a>, que já nasce transparente, e por isso o
   defeito só aparecia dentro do checkout. */
.btn--fantasma {
  border-color: var(--linha);
  background: transparent;
  color: var(--tinta-60);
}

/* ────────────────────────── grades ────────────────────────── */

/* Duas colunas: cabeçalho parado à esquerda, informação rolando à
   direita. É o que segura seção longa dentro de uma tela só, porque
   o título deixa de comer altura da lista. */
.duas {
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.duas--meio {
  align-items: center;
}

/* Bloco centralizado: usado na hero e na chamada final, as duas telas
   em que só existe uma coisa para ler. O texto é que centraliza, então
   os filhos com max-width precisam do margin-inline auto. */
.centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.centro > * {
  margin-inline: auto;
}

.centro .acoes {
  justify-content: center;
}

/* Centralizado, o parágrafo larga uma palavra sozinha na última linha.
   O balance distribui as linhas em vez de encher a primeira. */
.centro .apoio {
  text-wrap: balance;
}

.grade {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

.grade--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grade--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

/* Carta: só existe quando a informação é comparável lado a lado.
   Altura igual vem do próprio grid, não de altura fixa. */
.carta {
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--papel);
  border-radius: var(--raio);
}

.carta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
  padding-bottom: 40px;
}

/* Carta com o conteúdo colado no topo. Sem isso o margin-bottom auto
   do .carta__topo empurra cada título para uma altura diferente e as
   três cartas da mesma fileira desalinham. */
.carta--alinhada .carta__topo {
  margin-bottom: 0;
  padding-bottom: 30px;
}

.carta__corpo {
  margin-top: 14px;
  font-size: var(--corpo);
  line-height: 1.5;
  color: var(--tinta-60);
}

.carta__quem {
  font-size: var(--mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

/* Lista miúda dentro de uma carta. Cada item ganha filete em cima,
   então três itens empilhados continuam sendo lista e não viram um
   parágrafo com marcador. */
.mini-linhas {
  margin-top: 20px;
  border-top: 1px solid var(--linha);
}

.mini-linhas li {
  padding-block: 14px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--corpo);
  line-height: 1.45;
  color: var(--tinta-60);
}

.mini-linhas li:last-child {
  border-bottom: 0;
}

.mini-linhas strong {
  display: block;
  color: var(--tinta);
  font-weight: 500;
}


/* a etiqueta do preço é o único selo amarelo do site: ela marca a
   oferta e nada mais compete com ela */
.carta--pagamento .etiqueta {
  border-color: var(--destaque);
  background: var(--destaque);
  color: #000;
}

.etiqueta {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

/* ──────────────────── lista de linhas ────────────────────
   Para sequência (programação, credenciais, FAQ, inclusos).
   Linha de 1px, número à esquerda, texto no meio, meta à direita. */

.linhas {
  border-top: 1px solid var(--linha);
}

.linha {
  display: grid;
  align-items: baseline;
  padding-block: clamp(13px, 1.5vw, 20px);
  border-bottom: 1px solid var(--linha);
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
}

.linha__texto {
  font-size: var(--corpo-g);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.linha__meta {
  font-size: var(--mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-35);
  text-align: right;
}

.linha__resposta {
  max-width: 70ch;
  margin-top: 12px;
  grid-column: 2 / -1;
  font-size: var(--corpo);
  line-height: 1.6;
  color: var(--tinta-60);
}

/* rótulo de bloco dentro da lista (Manhã, Tarde, Encerramento) */
.linha--bloco {
  border-bottom-color: var(--tinta);
}

.linha--bloco .linha__texto {
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ────────────────── caixas de imagem ────────────────── */

.caixa {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px solid var(--linha);
  background: var(--caixa);
  background-image: linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      var(--linha) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom right,
      transparent calc(50% - 0.5px),
      var(--linha) 50%,
      transparent calc(50% + 0.5px)
    );
  border-radius: var(--raio);
}

.caixa__nome {
  padding: 6px 12px;
  background: var(--papel);
  font-size: var(--mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

/* Quando a proporção manda na caixa, o min-height vira largura mínima
   (180px de altura em 16:9 são 320px de largura) e o card deixa de
   encolher. Isso empurrava a página 201px para fora da janela e deixava
   uma faixa sem fundo na direita de todas as seções. */
.caixa--retrato,
.caixa--larga,
.caixa--marca {
  min-height: 0;
}

/* Com foto dentro, a caixa deixa de ser marcador e vira moldura: o
   overflow segura o corte no raio e o cover impede que a foto estique
   quando a coluna muda de largura. */
.caixa {
  overflow: hidden;
}

.caixa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caixa--retrato {
  aspect-ratio: 4 / 5;
}

.caixa--larga {
  aspect-ratio: 16 / 9;
}

.caixa--marca {
  min-height: 120px;
}

/* ───────────────────────── rodapé ───────────────────────── */

.rodape {
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--tinta);
}

.rodape__colunas {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

.rodape__titulo {
  margin-bottom: 18px;
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-35);
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--tinta-60);
}

/* A marca grande do rodapé é o logo de verdade, não a palavra
   escrita na fonte do site. Ele estica na largura do envelope, que é
   o mesmo lugar onde o texto terminava antes. */
.rodape__marcona {
  padding-top: clamp(48px, 6vw, 88px);
}

.rodape__marcona img {
  width: 100%;
  height: auto;
}

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid var(--linha);
  font-size: var(--mini);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-35);
}

/* ───────────────────────── celular ───────────────────────── */

@media (max-width: 900px) {
  .grade--3,
  .grade--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .duas {
    grid-template-columns: 1fr;
  }

  /* Retrato em 4:5 na largura toda do celular vira uma tela inteira de
     foto. Deitado, ele continua sendo âncora sem empurrar o texto. */
  .caixa--retrato {
    aspect-ratio: 3 / 2;
  }

  .rodape__colunas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grade--2,
  .grade--3,
  .grade--4 {
    grid-template-columns: 1fr;
  }

  .linha {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .linha__meta {
    grid-column: 2;
    text-align: left;
  }

  .tela {
    min-height: auto;
    padding-block: clamp(56px, 8vh, 88px);
  }
}

/* ──────────────────────── checkout ────────────────────────
   O formulário mora dentro da carta de investimento e usa a mesma
   régua do resto: filete de 1px, nada de sombra, nada de canto
   arredondado grande. Campo é linha, não caixa. */

.compra__form,
.compra__saida {
  display: flex;
  flex-direction: column;
}

.formas {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.forma {
  padding: 9px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta-60);
  font-family: inherit;
  font-size: var(--corpo);
  font-weight: 500;
  cursor: pointer;
}

.forma--on {
  border-color: var(--tinta);
  color: var(--tinta);
}

.campos {
  display: grid;
  gap: 0 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campo {
  display: flex;
  flex-direction: column;
  padding-block: 10px;
  border-bottom: 1px solid var(--linha);
}

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

.campo > span {
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-35);
}

.campo > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}

.campo input,
.campo select {
  padding: 6px 0 2px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--corpo-g);
}

.campo input:focus,
.campo select:focus {
  outline: 0;
}

/* o foco precisa aparecer em algum lugar, e a linha do campo é o lugar */
.campo:focus-within {
  border-bottom-color: var(--tinta);
}

.btn--largo {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
  cursor: pointer;
  font-family: inherit;
}

.aviso {
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 2px solid var(--tinta);
  background: var(--papel-fundo);
  font-size: var(--corpo);
  line-height: 1.45;
}

.qr {
  width: 190px;
  height: 190px;
  margin: 20px 0;
  border: 1px solid var(--linha);
  background: #fff;
}

@media (max-width: 640px) {
  .campos {
    grid-template-columns: 1fr;
  }
}

/* O bloco de compra fica colado embaixo enquanto o card está fechado.
   Vive aqui e não no style do elemento porque o modo compra precisa
   desfazer isso, e inline ganha de classe. */
.compra {
  margin-top: auto;
  padding-top: 28px;
}

/* Modo compra: assim que o formulário abre, a seção deixa de vender e
   passa a receber dado. A carta do que está incluso sai, e o card que
   sobra se parte em dois: preço à esquerda, campos à direita, filete no
   meio. */

.comprando .grade--2 {
  grid-template-columns: minmax(0, 1fr);
}

.comprando [data-inclusos] {
  display: none;
}

.comprando .display {
  font-size: var(--d2);
}

@media (min-width: 901px) {
  .comprando .carta--pagamento {
    display: grid;
    align-items: start;
    gap: clamp(32px, 3.4vw, 64px);
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .comprando .compra {
    height: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(32px, 3.4vw, 64px);
    border-left: 1px solid var(--linha);
  }
}

.compra__fim {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.compra__fim .btn {
  cursor: pointer;
  font-family: inherit;
}

@media (min-width: 901px) {
  .comprando .campos {
    gap: 0 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* campo largo deixa de ser a largura toda: um filete de 1200px vira
     uma linha que ninguém sabe onde começa */
  .comprando .campo--largo {
    grid-column: span 2;
  }

  /* o QR não precisa crescer junto: ele fica na coluna da esquerda */
  .comprando .compra__saida {
    max-width: 46ch;
  }
}

/* O retrato do Jhonata é recorte com fundo transparente, então ele pede
   um fundo próprio e apoio na base: solto no meio da caixa ele fica
   flutuando. */
.retrato {
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--linha);
  background: var(--caixa);
  border-radius: var(--raio);
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  /* desce dentro da moldura: o corte fica na base, que é onde o retrato
     tem menos informação, e sobra ar em cima da cabeça */
  transform: translateY(7%);
}

/* Nome em uma linha só. O tamanho acompanha a largura da tela em vez de
   um valor fixo, senão em tela estreita ele vaza para fora do card. */
.display--linha {
  white-space: nowrap;
  font-size: clamp(1.8rem, 4.9vw, 4.4rem);
}

/* Cabeçalho de seção. A manchete manda: ela ocupa a largura inteira e
   quebra onde quiser, e o texto de apoio desce para baixo em vez de
   espremer a manchete numa coluna de 16 caracteres. */
.cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cabeca .display-m,
.cabeca .display {
  max-width: none;
}

/* Manchete que estica. O balance distribui o texto em linhas de largura
   igual, o que numa faixa larga vira duas linhas pela metade. Aqui a
   regra é a contrária: encher a linha e quebrar só no fim dela. */
.espicha {
  max-width: none;
  text-wrap: normal;
  /* mesma escala da manchete da hero: no tamanho anterior a frase ocupava
     metade da faixa e sobrava um vazio do lado direito */
  font-size: clamp(1.8rem, 4.3vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

/* a manchete cresceu, então o bloco que vem depois dela cede espaço:
   sem isso as seções passam da dobra */
.espicha + .apoio,
.cabeca .apoio {
  margin-top: 0;
}

/* ─────────────────────────── hero azul ───────────────────────────
   A dobra inteira no azul da marca, com o campo de pontos atrás. O
   font-size do container é que define o tamanho do ponto e, por
   tabela, a densidade do campo: 16px dá ponto de 16 com vão de 32. */

.hero {
  position: relative;
  overflow: hidden;
  border-top: 0;
}

/* O campo nasceu na dobra e agora atende toda seção azul. A seção que
   recebe precisa de position e overflow próprios, e o conteúdo dela
   precisa subir uma camada, senão os pontos passam por cima do texto. */
.tem-pontos {
  position: relative;
  overflow: hidden;
}

/* As duas grades de dia grudam no topo. Sticky também serve de âncora
   para o campo, então o que a regra acima não pode fazer é rebaixá-las
   para relative: elas parariam de grudar. */
.tem-pontos.dia {
  position: sticky;
}

.tem-pontos > *:not(.campo-pontos) {
  position: relative;
  z-index: 1;
}

.campo-pontos {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* o ponto tem o tamanho da fonte do container e o vão vem do gap. O
     inset afasta o campo das bordas, então a moldura da dobra fica
     limpa em vez de cortar bolinha pela metade. */
  font-size: 7px;
  gap: 3.6em;
  inset: clamp(28px, 4vw, 64px);
  pointer-events: none;
}

.dot {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--ponto);
  transform: translate(0);
  will-change: transform, background-color;
}

.hero__conteudo {
  position: relative;
  z-index: 1;
}




/* ─────────────────────────── tese azul ───────────────────────────
   Segunda dobra no mesmo azul da hero, então as duas emendam sem
   filete no meio. A cor final da onda é a cor que está aqui: o
   script lê ela do CSS em vez de receber por atributo. */

.tese {
  border-top: 0;
}

.tese .continua {
  color: inherit;
}

/* ──────────────── cabeçalho de seção centralizado ────────────────
   Rótulo, manchete e apoio no eixo do meio, como na referência. Só
   vale para o cabeçalho que manda sozinho na seção: os das seções de
   duas colunas (dia 01, dia 02, trajetória, FAQ) continuam à esquerda,
   porque ali o título é a coluna que acompanha a lista do lado. */

.cabeca {
  align-items: center;
  text-align: center;
}

.cabeca .apoio {
  margin-inline: auto;
}

.envelope > .espicha,
.envelope > .espicha + .apoio,
.envelope > .espicha + .continua,
.envelope > .rotulo:has(+ .espicha) {
  margin-inline: auto;
  text-align: center;
}

/* o rótulo é inline-block: sem virar bloco ele não centraliza sozinho */
.envelope > .rotulo:has(+ .espicha) {
  display: block;
}

/* A etiqueta que fecha cada dia é irmã da inscrição do topo: mesmo
   papel de acento, então mesma cor. Borda inclusive, senão fica texto
   amarelo dentro de um contorno cinza. */
.dia .etiqueta {
  border-color: var(--destaque);
  color: var(--destaque);
}

/* ──────────────── os dois dias, presos e empilhados ────────────────
   Cada dia mora num trilho mais alto que a tela. A seção fica presa no
   topo enquanto o trilho passa, e é nesse tempo parado que os blocos da
   grade acendem. Quando o trilho acaba, o dia seguinte sobe por cima.

   O fundo opaco no .dia não é enfeite: sem ele o dia 02 subiria
   transparente e os dois textos apareceriam sobrepostos. */

.trilho {
  height: 220svh;
}

.dia {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: var(--papel);
}

/* a lista abre espaço à esquerda para a barra de progresso */
.dia .linhas {
  position: relative;
  padding-left: 30px;
  border-top: 0;
}

/* Sem trilha: existe só o marcador, que salta para a linha da vez. */
.barra-passos {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  background: transparent;
}

.barra-passos__enche {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--tinta);
}

/* Três estados, como na referência. Os dois apagados subiram: com a
   linha da vez já mudando de cor, de peso e de tamanho, o apagado não
   precisa sumir para ela se destacar. A 0,25 a grade virava um borrão
   que ninguém conseguia ler enquanto rolava. */
.dia [data-passo] {
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.dia [data-passo][data-estado='aceso'] {
  opacity: 0.8;
}

.dia [data-passo][data-agora] {
  opacity: 1;
}

.dia [data-passo][data-agora] .numeral {
  color: var(--tinta);
}

/* A linha da vez cresce. É scale e não font-size de propósito: mudar o
   tamanho da fonte reflui a lista inteira, e aí as posições que a barra
   de progresso mediu no início deixam de valer. */
.dia [data-passo] .linha__texto {
  display: inline-block;
  /* o texto para antes da coluna da direita: como o destaque cresce por
     transform, ele avançaria por cima da etiqueta sem essa folga */
  max-width: 84%;
  font-weight: 400;
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), font-weight 0.35s ease;
}

.dia [data-passo][data-agora] .linha__texto {
  font-weight: 700;
  color: var(--destaque);
  transform: scale(1.22);
}

/* Manhã, Tarde e Encerramento deixam de ser linha e viram um retângulo
   cheio embaixo do rótulo: a divisão da grade fica clara mesmo com todo
   o resto apagado. */
/* Manhã, tarde e encerramento viram faixa cheia, como divisor de
   editoria de jornal: fundo preenchido de ponta a ponta da lista. */
.dia .linha--bloco {
  position: relative;
  margin-left: -30px;
  padding-inline: 30px;
  border-bottom: 0;
  /* a faixa acompanha a seção: branca no azul, amarela no preto. Nos
     dois casos o texto vai na cor do fundo da seção. */
  background: var(--tinta);
}

.dia .linha--bloco .linha__texto,
.dia .linha--bloco .linha__meta,
.dia .linha--bloco .numeral {
  color: var(--papel);
  opacity: 1;
}

/* a faixa é o divisor da grade: ela pede corpo e peso, senão vira um
   filete amarelo com letra miúda em cima */
.dia .linha--bloco {
  padding-block: clamp(14px, 1.5vw, 20px);
  border-radius: var(--raio);
}

/* No dia azul a faixa branca gritava mais que a própria grade: contra o
   fundo da seção ela dava 9:1, mais contraste que a manchete. O azul
   fundo separa a faixa do fundo sem roubar a leitura, e o texto dentro
   dela volta a ser claro. */
.dia.secao--azul .linha--bloco {
  background: var(--marca-funda);
}

.dia.secao--azul .linha--bloco .linha__texto,
.dia.secao--azul .linha--bloco .linha__meta,
.dia.secao--azul .linha--bloco .numeral {
  color: var(--tinta);
}

.dia .linha--bloco .linha__texto {
  max-width: none;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dia .linha--bloco .linha__meta,
.dia .linha--bloco .numeral {
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 600;
}

@media (max-width: 900px) {
  .trilho {
    height: auto;
  }

  .dia {
    position: static;
    height: auto;
    min-height: 100svh;
  }

  /* no celular a grade inteira fica legível de uma vez */
  .dia [data-passo],
  .dia [data-passo][data-estado='aceso'] {
    opacity: 1;
  }
}

/* ──────────────── parede de logos que cicla ────────────────
   Oito lugares na tela para treze marcas. Quem decide quantas
   aparecem é o CSS: o script lê o display none e trabalha com o que
   sobra, então mudar a quantidade por tamanho de tela é uma linha
   daqui e nada de JavaScript. */

.parede {
  display: flex;
  width: 100%;
  justify-content: center;
}

.parede__lista {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
}

.parede__item {
  position: relative;
  width: 25%;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

/* do nono item em diante ninguém aparece: eles são o acervo de onde
   as trocas saem */
.parede__lista > .parede__item:nth-child(n + 9) {
  display: none;
}

.parede__moldura {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

/* mantém a proporção da célula sem altura fixa */
.parede__proporcao {
  padding-top: 56%;
}

.parede__alvo {
  display: flex;
  position: absolute;
  width: 62%;
  height: 42%;
  align-items: center;
  justify-content: center;
}

.parede__img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  /* as logos vêm em preto e em cores diferentes: o cinza uniformiza
     sem precisar de arquivo novo */
  filter: grayscale(1);
  opacity: 0.75;
}

.escala-88 {
  transform: scale(0.88);
}

.escala-90 {
  transform: scale(0.9);
}

@media (max-width: 900px) {
  .parede__item {
    width: 33.333%;
  }

  .parede__lista > .parede__item:nth-child(n + 7) {
    display: none;
  }
}

/* ──────────────── blocos de cor por seção ────────────────
   O ritmo do site é este: azul como cor principal, preto em dois
   momentos de peso, e off-white como respiro entre eles.

   A troca não é feita componente por componente. A seção redefine os
   tokens de superfície e de tinta, e tudo que está dentro dela (carta,
   filete, botão, rótulo) inverte sozinho, porque tudo já lê desses
   mesmos tokens. */

.secao--azul,
.carta--azul {
  --papel: #1f1be4;
  --papel-fundo: #1a17cc;
  --caixa: rgba(255, 255, 255, 0.14);
  --linha: rgba(255, 255, 255, 0.28);
  --tinta: #ffffff;
  --tinta-60: rgba(255, 255, 255, 0.78);
  --tinta-35: rgba(255, 255, 255, 0.55);
  --rotulo: var(--destaque);

  background: var(--marca);
  color: var(--tinta);
}

.secao--preto,
.carta--preta {
  --papel: #000000;
  --papel-fundo: #1c1c1c;
  --caixa: rgba(255, 255, 255, 0.12);
  --linha: rgba(255, 255, 255, 0.24);
  --tinta: #f2f2f2;
  --tinta-60: rgba(242, 242, 242, 0.72);
  --rotulo: var(--destaque);
  --tinta-35: rgba(242, 242, 242, 0.5);

  background: #000000;
  color: var(--tinta);
}

/* O rodapé é irmão do <main>, não da última seção, então a regra de
   vizinhança abaixo não alcança ele. Como bloco de cor ele já se
   separa sozinho, e o filete só aparecia como risco claro. */
.rodape.secao--preto,
.rodape.secao--azul {
  border-top: 0;
}

/* seções coloridas seguidas emendam sem filete no meio */
.secao--azul + .secao--azul,
.secao--preto + .secao--preto,
.secao--azul + .secao--preto,
.secao--preto + .secao--azul {
  border-top: 0;
}

/* ─────────────── assinatura do depoimento ───────────────
   Foto redonda ao lado do nome. Enquanto a foto não chega, o mesmo
   círculo mostra as iniciais, então o layout já está no lugar e
   trocar é só apontar para o arquivo. */

.assina {
  display: flex;
  align-items: center;
  margin-top: 26px;
  gap: 14px;
}

.assina__foto {
  display: grid;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--caixa);
  color: var(--tinta-60);
  font-size: var(--mini);
  font-weight: 500;
  letter-spacing: 0.06em;
  place-items: center;
}

.assina__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assina__quem {
  font-size: var(--corpo);
  line-height: 1.45;
  color: var(--tinta-60);
}

.assina__quem strong {
  display: block;
  color: var(--tinta);
  font-weight: 500;
}

/* ───────────────────── perguntas frequentes ─────────────────────
   Bloco preto, selo amarelo, manchete à esquerda e as dúvidas em
   linhas de ponta a ponta. Usa <details> nativo: abre e fecha sem
   uma linha de JavaScript, e continua acessível pelo teclado. */

.duvidas {
  margin-top: clamp(36px, 5vh, 64px);
  border-top: 1px solid var(--linha);
}

.duvida {
  border-bottom: 1px solid var(--linha);
}

.duvida__topo {
  display: grid;
  align-items: center;
  padding-block: clamp(18px, 2.2vh, 28px);
  cursor: pointer;
  gap: 24px;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  list-style: none;
}

/* o triângulo padrão do details some nos dois motores */
.duvida__topo::-webkit-details-marker {
  display: none;
}

.duvida__num {
  font-size: var(--corpo);
  color: var(--tinta-35);
  font-variant-numeric: tabular-nums;
}

.duvida__pergunta {
  font-size: var(--corpo-g);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* o sinal é desenhado com dois traços: fechado vira +, aberto vira × */
.duvida__sinal {
  position: relative;
  width: 18px;
  height: 18px;
  justify-self: end;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.duvida__sinal::before,
.duvida__sinal::after {
  position: absolute;
  background: currentColor;
  content: '';
  inset: 50% 0 auto;
  height: 1.5px;
}

.duvida__sinal::after {
  transform: rotate(90deg);
}

.duvida[open] .duvida__sinal {
  transform: rotate(45deg);
}

.duvida__resposta {
  max-width: 76ch;
  padding-bottom: clamp(18px, 2.4vh, 30px);
  padding-left: 88px;
  font-size: var(--corpo);
  line-height: 1.6;
  color: var(--tinta-60);
}

@media (max-width: 640px) {
  .duvida__topo {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    gap: 14px;
  }

  .duvida__resposta {
    padding-left: 52px;
  }
}

/* Os dois cards do índice da imersão pedem corpo maior. */
.carta--indice .titulinho {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.14;
}

.carta--indice .carta__corpo {
  max-width: 40ch;
  margin-top: 18px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.45;
}

.carta--indice .miudo {
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
}

/* ─────────────────────────── vitrine ───────────────────────────
   Seção presa em 50/50: texto de um lado, imagem do outro, e só o
   conteúdo troca enquanto o trilho rola por baixo. Modelo do
   terminal-industries. */

.vitrine {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-top: 0;
}

.vitrine__grade {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vitrine__texto {
  /* O slot é a dobra inteira. Assim o corte do texto que entra e do que
     sai acontece na borda da seção, e não numa linha invisível no meio
     dela: o bloco some para fora da tela em vez de ser decepado. */
  --slot: 100svh;

  position: relative;
  display: grid;
  align-content: center;
  padding-block: 0;
  padding-inline: clamp(32px, 5vw, 88px);
  padding-left: clamp(72px, 9vw, 148px);
}

/* Espelhada: foto à esquerda, texto à direita. Duas seções seguidas com
   a mesma máquina e o mesmo lado ficariam com cara de repetição; virar
   a segunda quebra isso sem mudar nada do comportamento.

   O recuo grande e o odômetro trocam de lado junto. Se ficassem onde
   estavam, o número cairia colado na foto, no meio da tela, em vez de
   ficar na margem. */
.vitrine--espelhada .vitrine__texto {
  order: 2;
  padding-right: clamp(72px, 9vw, 148px);
  padding-left: clamp(32px, 5vw, 88px);
}

.vitrine--espelhada .vitrine__midia {
  order: 1;
}

.vitrine--espelhada .vitrine__conta {
  right: clamp(28px, 3.4vw, 56px);
  left: auto;
}

/* o odômetro: uma janela de um dígito e a fita de 0 a 9 correndo dentro */
.vitrine__conta {
  position: absolute;
  top: 50%;
  left: clamp(28px, 3.4vw, 56px);
  display: flex;
  transform: translateY(-50%);
  font-size: var(--mini);
  letter-spacing: 0.08em;
  color: var(--tinta-35);
  font-variant-numeric: tabular-nums;
}

.conta__coluna {
  display: block;
  overflow: hidden;
  height: 1.2em;
}

.conta__fita {
  display: block;
}

.conta__fita span {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
}

/* A janela tem a altura de um bloco. A pilha sobe dentro dela, então o
   que se vê é o texto rolando, não um trocando de lugar com o outro. */
/* A janela tem a altura de um bloco inteiro, e o bloco tem a altura da
   janela. Como a rolagem anda exatamente uma janela por passo, quando o
   scroll para num bloco ele fica enquadrado, sem sobra do vizinho. A
   folga vem de dentro: o conteúdo é centralizado no slot, então o que
   sobra vira distância entre um bloco e o outro. */
.vitrine__janela {
  position: relative;
  overflow: hidden;
  height: var(--slot);
}

.vitrine__item {
  display: flex;
  height: var(--slot);
  flex-direction: column;
  justify-content: center;
}

/* mesma escala da manchete e da continuação da tese */
.vitrine__titulo {
  margin-top: 18px;
  font-size: clamp(1.8rem, 4.3vw, 3.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.vitrine__corpo {
  max-width: 40ch;
  margin-top: 24px;
  font-size: clamp(1.3rem, 2.35vw, 2.05rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--tinta-60);
}

/* barrinha de percurso, colada na base da coluna de imagem */
.vitrine__barra {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.vitrine__barra span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  background: var(--destaque);
}

.vitrine__midia {
  position: relative;
  overflow: hidden;
}

/* A foto trocava por clip-path abrindo do meio. Agora quem faz a
   transição é a grade de pixels, e a foto só precisa estar acesa ou
   apagada: durante a dissolução quem aparece é o ladrilho, e no fim a
   foto de verdade assume no mesmo quadro em que ele some. */
.vitrine__foto {
  position: absolute;
  border: 0;
  opacity: 0;
  inset: 0;
}

/* a barra de progresso é o primeiro filho da coluna, então a primeira
   foto é o segundo: é ela que fica no ar se o JS não rodar */
.vitrine__foto:nth-child(2) {
  opacity: 1;
}

/* Grade da transição pixelada. O pixel é de cor sólida, no azul da
   própria seção, e não um pedaço de foto: ele tapa a coluna, a imagem
   troca por baixo e ele some de novo. */
.vitrine__pixels {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}

.vitrine__pixels div {
  position: absolute;
  background: var(--marca);
  backface-visibility: hidden;
  will-change: opacity;
}

/* A foto preenche o slot inteiro por corte, nunca por deformação: a
   coluna muda de proporção com a janela e esticar a imagem apareceria
   na hora no rosto de quem está na cena. */
.vitrine__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .trilho--vitrine {
    height: auto;
  }

  .vitrine {
    position: static;
    height: auto;
  }

  .vitrine__grade {
    grid-template-columns: 1fr;
  }

  .vitrine__texto {
    padding: clamp(28px, 6vw, 48px);
    padding-left: clamp(60px, 14vw, 88px);
  }

  /* no celular os blocos voltam a ser uma lista comum, sem rolagem */
  .vitrine__janela {
    height: auto;
    overflow: visible;
  }

  .vitrine__pilha {
    transform: none !important;
  }

  .vitrine__item {
    height: auto;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vitrine__item .char {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vitrine__item + .vitrine__item {
    margin-top: 44px;
  }

  .vitrine__conta,
  .vitrine__barra {
    display: none;
  }

  .vitrine__midia {
    aspect-ratio: 4 / 3;
  }

  .vitrine__foto {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vitrine__foto + .vitrine__foto {
    display: none;
  }

  .vitrine__pixels {
    display: none;
  }
}

/* Empilhamento: cada seção precisa de fundo opaco e de contexto de
   posição, senão a de baixo aparece através dela enquanto desce. O
   :where deixa a especificidade em zero, então os blocos de cor
   continuam mandando na própria cor. */
:where([data-empilha]) {
  position: relative;
  background: var(--papel);
}

/* ─────────────────────── carrossel de depoimentos ───────────────────────
   Slide do meio em foco, vizinhos apagados nas bordas. O corte é no
   .carrossel__pista, então os slides que saem da tela somem sem
   empurrar a largura da página. */

.carrossel {
  margin-top: clamp(32px, 4.5vh, 56px);
}

.carrossel__pista {
  display: flex;
  overflow: clip;
  width: 100%;
  padding-block: 12px;
  position: relative;
}

.carrossel__lista {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
}

.carrossel__slide {
  flex: none;
  padding: 10px;
  cursor: pointer;
  transition: opacity 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}

/* enquanto existe um slide em foco, os outros recuam */
.carrossel__pista:has(.carrossel__slide.esta) .carrossel__slide:not(.esta) {
  opacity: 0.4;
}

/* Três depoimentos só: o card precisa ser largo o bastante para os
   três cobrirem a tela, senão a fita gira e deixa um vazio na direita. */
.carrossel__cartao {
  display: flex;
  width: clamp(300px, 38vw, 540px);
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.2vw, 34px);
  border: 1px solid var(--linha);
  background: var(--caixa);
  gap: 28px;
  border-radius: var(--raio);
}

.carrossel__fala {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* a bolinha é a foto de quem fala; o anel abre quando ela é a da vez */
.carrossel__bolinhas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.carrossel__bolinha {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carrossel__bolinha::after {
  position: absolute;
  border: 1px solid var(--destaque);
  border-radius: 999px;
  content: '';
  inset: 2px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}

.carrossel__bolinha:hover::after,
.carrossel__bolinha.esta::after {
  inset: -5px;
  opacity: 1;
}

.carrossel__botoes {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vh, 40px);
  gap: 12px;
}

.carrossel__botao {
  display: grid;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  place-items: center;
  transition: background-color 0.2s, border-color 0.2s;
}

.carrossel__botao:hover {
  border-color: var(--tinta-60);
  background: var(--caixa);
}

.carrossel__botao svg {
  width: 20px;
}

.carrossel__botao--antes {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .carrossel__cartao {
    width: 78vw;
  }
}

/* ─────────────────────── botão magnético ───────────────────────
   O deslocamento é feito pelo GSAP. O que mora aqui é o rolar do
   rótulo: duas cópias empilhadas, e no hover as duas sobem uma
   altura, então a de baixo toma o lugar da de cima. */

.btn__texto {
  position: relative;
  display: block;
  overflow: hidden;
}

.btn__texto span {
  display: block;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.btn__texto span + span {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.btn:hover .btn__texto span {
  transform: translateY(-100%) rotate(0.001deg);
}

/* o magnético mexe em transform, então o botão precisa de camada
   própria para não borrar o texto durante o movimento */
[data-magnetico] {
  will-change: transform;
}

/* Os dois cards do índice ganham cor de bloco, e o título dentro deles
   vai de amarelo: é o único lugar do site em que o acento carrega um
   título inteiro, e funciona porque o fundo é cheio. */
.carta--azul {
  background: var(--marca);
  color: var(--tinta);
}

.carta--preta {
  background: #000;
  color: var(--tinta);
}


/* Gancho no fim da tese: a frase que antes era uma seção inteira agora
   fecha esta e abre a vitrine. Fica menor que a continuação, porque é
   ponte e não argumento. */
.tese__gancho {
  /* mesma fonte e mesmo tamanho da manchete: o gancho deixa de ser
     legenda e vira a segunda frase da tela. A cor é que mantém a
     hierarquia, não a escala. */
  max-width: 22ch;
  margin: clamp(26px, 3.6vh, 44px) auto 0;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}

/* a seta desce devagar e volta: é convite para rolar, não enfeite */
.tese__seta {
  display: block;
  width: 22px;
  margin: clamp(18px, 2.4vh, 30px) auto 0;
  color: var(--tinta-35);
  animation: seta-desce 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.tese__seta svg { width: 100%; height: auto; }

@keyframes seta-desce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(10px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tese__seta { animation: none; }
}

/* A coluna do título do dia centraliza contra a lista, em vez de ficar
   pendurada no topo com um vazio embaixo. E o rótulo do dia sobe de
   tamanho: ele é a informação que situa a tela inteira. */
.dia .duas {
  align-items: center;
}



/* Só o gancho assenta no azul da marca. A manchete e a continuação
   voltam para a tinta normal: o azul aqui marca a frase que leva para a
   próxima seção, e não a tese inteira. */
.tese__gancho {
  color: var(--marca);
}

/* no dia preto a faixa vira amarela: branco em cima de preto ficaria
   igual ao resto do texto e perderia a função de divisor */
.dia.secao--preto .linha--bloco {
  background: var(--destaque);
}

/* Só o card preto do índice leva o título em amarelo. No azul o amarelo
   competiria com o próprio fundo; no preto ele é o único ponto de cor. */
.carta--preta .titulinho {
  color: var(--destaque);
}

/* ─────────────────── esqueleto do card do checkout ───────────────────
   Barras que cobrem o texto enquanto ele "carrega". As duas cores saem
   da paleta da seção: o card mora no azul, então base e pulso são
   véus de branco, e não um cinza estranho colado por cima. */

[data-esqueleto] {
  --esqueleto-base: rgba(255, 255, 255, 0.16);
  --esqueleto-pulso: rgba(255, 255, 255, 0.34);
}

/* a classe só existe enquanto o JS está no comando: sem ela o texto
   nunca fica escondido, e a página sem script continua legível */
.esqueleto-carregando .linha-unica {
  visibility: hidden;
}

.linha-unica-caixa {
  position: relative;
}

.esqueleto-barra {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 100%;
  height: 76%;
  border-radius: var(--raio);
  background: var(--esqueleto-base);
  transform: translateY(-50%);
}

/* ────────────────────── rastro do cursor nos dias ──────────────────────
   A linha mora atrás do conteúdo. Um traço grosso e com brilho por cima
   de uma grade de onze linhas mataria a leitura; atrás, ele preenche a
   metade vazia da seção sem competir com nada. O anel é a única peça
   na frente, e ele é um contorno de 1px. */

.dia[data-rastro] > *:not(.rastro__linha):not(.rastro__ponto) {
  position: relative;
  z-index: 1;
}

.rastro__linha {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

.rastro__ponto {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  border: 1px solid var(--linha);
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 991px) {
  .rastro__linha,
  .rastro__ponto {
    display: none;
  }
}