/* ==========================================================================
   Leiautar — chrome compartilhado do site (prefixo .lt-)
   Cabeçalho, rótulos, botões, links de texto, chips, carrossel, player de
   vídeo, CTA final e rodapé: tudo o que se repete de página em página.

   Cada página tem a própria cópia deste arquivo, ao lado do CSS dela — a
   duplicação é a regra do projeto (diretrizes.md, seção 3). Uma correção
   feita aqui só vale para esta página; replique de propósito nas outras.

   Escala: as medidas vêm de uma prancheta de 1440 e são escritas como
   `calc(N * var(--lt-u))`. A unidade vale 1 em 1440 e é amortecida nas pontas.
   As seções de largura travada (1216 px) recebem `--lt-u: 1px` acima de 981 —
   cada página lista as suas, junto com .lt-final e .lt-footer.
   ========================================================================== */

:root {
  --lt-ink: #0b0b0b;
  --lt-header-h: calc(64 * var(--lt-u));
  --lt-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Unidade de escala: 1024 → 0,896 · 1280 → 0,96 · 1440 → 1 · 1920+ → 1,12 */
  --lt-u: clamp(0.86px, calc(0.64px + 0.025vw), 1.12px);

  --lt-max: 1216px;
  --lt-max-wide: 1344px;

  /*
   * H1 das páginas: só dois tamanhos no site todo, em px pela largura da tela.
   * · abertura — títulos curtos de impacto (home, sobre, mentoria, caixa,
   *   produtos, blog, contato): 104 a partir de 1440, 92 em 1280, 74 em 1024,
   *   58 em 800, 48 no celular.
   * · leitura — títulos longos (artigo, política): 80 a partir de 1440, 72 em
   *   1280, 45 em 800, 40 no celular.
   * O curso de Fundamentos tem o dele (68 em 1440), fora deste par.
   */
  --lt-h1: clamp(48px, 7.2vw, 104px);
  --lt-h1-leitura: clamp(40px, 5.6vw, 80px);

  /* Margem lateral das seções travadas: 112 da prancheta ou o que centra a coluna. */
  --lt-gutter: max(calc(112 * var(--lt-u)), calc((100% - var(--lt-max)) / 2));

  /*
   * CAMADA DE COR. A marca tem três paletas (Figma, "Paleta de cores" 475:927):
   * institucional (vermelho, rosa, amarelo), caixa de ferramentas (roxo,
   * laranja, cinza) e curso de Fundamentos (azul, verde, cinza). O chrome
   * nunca escreve uma cor de paleta direto: lê os tokens abaixo, que valem a
   * camada institucional. Página ou seção de outra camada redefine os tokens
   * no próprio CSS — como são herdados, basta declará-los no contêiner.
   * Contraste: o vermelho dá 4,1:1 com branco e 5,1:1 com preto, então não
   * carrega texto pequeno branco; por isso os hovers institucionais vão ao amarelo.
   */
  --lt-accent: var(--yellow);           /* botão principal, tag, ícone de ajuda, destaques sobre preto */
  --lt-strong: var(--red);              /* cor forte da camada (o botão da área do aluno no menu é neutro) */
  --lt-current: var(--red);             /* filete do item de menu atual */
  --lt-focus: var(--red);               /* anel de foco sobre fundo claro */
  --lt-focus-on-dark: var(--yellow);    /* anel de foco sobre fundo escuro */
  --lt-link-hover: var(--black);        /* cor do link de texto no hover */
  --lt-link-hover-line: var(--red);     /* sublinhado do link de texto no hover */
  --lt-dark-hover-bg: var(--yellow);    /* botão preto no hover */
  --lt-dark-hover-ink: var(--black);
  --lt-dark-hover-icon: invert(1);      /* as setas do botão preto são brancas */
  --lt-skip-bg: var(--black);
}

:root:has(body.lt-page) {
  scroll-padding-top: calc(var(--lt-header-h) + 16px);
}

/* Títulos com quebra equilibrada; a largura de cada um é a da coluna, sem teto menor que ela (nada de 3ª linha com espaço sobrando). */
.lt-page main :is(h1, h2) {
  text-wrap: balance;
}

.lt-page {
  background: var(--white);
}

.lt-skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 80;
  padding: 12px 18px;
  color: var(--white);
  background: var(--lt-skip-bg);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.lt-skip:focus {
  top: 12px;
}

/* ==========================================================================
   Peças compartilhadas
   ========================================================================== */
/*
 * Rótulo em chip: quadrado colorido + texto.
 * Tamanho único em todas as seções: acima de 981 o rótulo usa a unidade das
 * seções travadas (1px) mesmo quando mora numa seção livre, cuja unidade
 * cresce até 1,12 e deixava o hero e o manifesto com rótulo maior.
 */
.lt-label {
  --lt-label-u: var(--lt-u);
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  background: var(--gray-100);
}

.lt-label img {
  width: calc(32 * var(--lt-label-u));
  height: calc(32 * var(--lt-label-u));
  flex: 0 0 auto;
}

.lt-label span {
  padding: 0 calc(12 * var(--lt-label-u));
  color: var(--black);
  font-size: calc(14 * var(--lt-label-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 981px) {
  .lt-label { --lt-label-u: 1px; }
}

/* Celular: medida da prancheta mobile, igual à página do curso — ícone 24 e rótulo 10. */
@media (max-width: 620px) {
  .lt-label img {
    width: 24px;
    height: 24px;
  }

  .lt-label span {
    padding: 0 10px;
    font-size: 10px;
  }
}

.lt-label--dark {
  background: var(--ink);
}

.lt-label--dark span {
  color: var(--gray-100);
}

/* Botões: as medidas vêm da prancheta de 1440, em `u`. */
.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--lt-u));
  min-height: calc(56 * var(--lt-u));
  padding: calc(18 * var(--lt-u)) calc(18 * var(--lt-u)) calc(18 * var(--lt-u)) calc(26 * var(--lt-u));
  font-size: calc(16 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.lt-btn img {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex: 0 0 auto;
  transition: transform 200ms ease;
}

.lt-btn:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

.lt-btn--accent { color: var(--black); background: var(--lt-accent); }

.lt-btn--white { color: var(--black); background: var(--white); }

.lt-btn--black { color: var(--white); background: var(--black); }

.lt-btn--outline {
  color: var(--black);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--black);
}

.lt-btn--block {
  width: 100%;
}

/* <button> com .lt-btn: sem a borda padrão do navegador (cantos retos, sem contorno). */
button.lt-btn {
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

/*
 * A seta tem a cor do texto, também no hover: o próprio SVG vira máscara e a
 * caixa pinta `currentColor`. Assim o verde que inverte para preto não perde a
 * seta, e o texto e a seta mudam de cor juntos.
 */
.lt-btn img[src*="icon-arrow"],
.lt-textlink img[src*="icon-arrow"] {
  object-position: -9999px 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.lt-btn img[src$="/icon-arrow.svg"] {
  -webkit-mask-image: url("./assets/icon-arrow.svg");
  mask-image: url("./assets/icon-arrow.svg");
}

.lt-btn img[src$="/icon-arrow-upright.svg"],
.lt-textlink img[src$="/icon-arrow-upright.svg"] {
  -webkit-mask-image: url("./assets/icon-arrow-upright.svg");
  mask-image: url("./assets/icon-arrow-upright.svg");
}

.lt-btn img[src$="/icon-arrow-downright.svg"],
.lt-textlink img[src$="/icon-arrow-downright.svg"] {
  -webkit-mask-image: url("./assets/icon-arrow-downright.svg");
  mask-image: url("./assets/icon-arrow-downright.svg");
}

.lt-btn img[src$="/icon-arrow-downright-white.svg"],
.lt-textlink img[src$="/icon-arrow-downright-white.svg"] {
  -webkit-mask-image: url("./assets/icon-arrow-downright-white.svg");
  mask-image: url("./assets/icon-arrow-downright-white.svg");
}

.lt-btn img[src$="/icon-arrow-black.svg"] {
  -webkit-mask-image: url("./assets/icon-arrow-black.svg");
  mask-image: url("./assets/icon-arrow-black.svg");
}

/* A seta anda no próprio eixo: ↗ sobe à direita, ↘ desce à direita. */
.lt-btn:hover img[src$="icon-arrow-upright.svg"],
.lt-textlink:hover img[src$="icon-arrow-upright.svg"] {
  transform: translate(2px, -2px);
}

.lt-btn:hover img[src$="icon-arrow-downright.svg"],
.lt-btn:hover img[src$="icon-arrow-downright-white.svg"],
.lt-textlink:hover img[src$="icon-arrow-downright-white.svg"] {
  transform: translate(2px, 2px);
}

.lt-btn:hover img[src$="icon-arrow-black.svg"] {
  transform: scale(1.08);
}

/*
 * HOVER DEPENDE DA SUPERFÍCIE. Sobre fundo claro o botão inverte para preto
 * com o texto na cor da peça; sobre fundo escuro o preto sumiria, então o
 * caminho é o oposto. Cada par abaixo é definido pela seção onde o botão mora.
 */
.lt-btn--accent:hover { color: var(--lt-accent); background-color: var(--black); }

.lt-btn--outline:hover { color: var(--white); background-color: var(--black); }

.lt-btn--black:hover { color: var(--lt-dark-hover-ink); background-color: var(--lt-dark-hover-bg); }

.lt-btn--black:hover img { filter: var(--lt-dark-hover-icon); }

.lt-btn--white:hover { color: var(--white); background-color: var(--black); }

/* Sobre escuro (CTA final, rodapé, menu aberto): o destaque vira branco. */
.lt-final .lt-btn--accent:hover,
.lt-footer .lt-btn--accent:hover,
.lt-topbar__nav .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

/* Botões do painel do menu no celular: neutros como os do canto, com o mesmo
   hover amarelo (ver .lt-tag--accent). */
.lt-topbar__nav .lt-btn--white:hover,
.lt-topbar__nav .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--yellow);
}

.lt-topbar__nav .lt-btn--accent {
  color: var(--black);
  background: var(--gray-200);
}

/* Link de texto com seta e sublinhado. */
.lt-textlink {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--lt-u));
  width: fit-content;
  padding-bottom: calc(4 * var(--lt-u));
  border-bottom: 2px solid currentColor;
  color: var(--black);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  transition: gap 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lt-textlink img {
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  transition: transform 200ms ease;
}

.lt-textlink:hover {
  color: var(--lt-link-hover);
  border-bottom-color: var(--lt-link-hover-line);
}

.lt-textlink--light {
  color: var(--white);
}

.lt-textlink--light:hover {
  color: var(--lt-accent);
  border-bottom-color: currentColor;
}

.lt-textlink:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

/* Chips pequenos (tipo do material). */
.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-chips li {
  padding: calc(6 * var(--lt-u)) calc(8 * var(--lt-u));
  color: var(--gray-400);
  font-family: var(--lt-mono);
  font-size: calc(10 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--gray-400);
  border-radius: 600px;
}

/* Faixa de chevrons, a mesma peça da página do curso (393 x 56). */
.lt-chevrons {
  align-self: center;
  width: 100%;
  max-width: calc(393 * var(--lt-u));
  height: auto;
}

/* ==========================================================================
   Cartão de ferramenta — o cartão de bônus da página do curso
   Escuro, foto com a aba chanfrada (o tipo do material, ou "Gratuito" em
   verde), título, texto, chips e, no rodapé, o botão. Usado na Caixa de
   Ferramentas e nas páginas de produto ("outras ferramentas").
   ========================================================================== */
.lt-toolcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ink);
}

.lt-toolcard[hidden] {
  display: none;
}

.lt-toolcard__media {
  position: relative;
  /* 393 x 320 no bônus; a mesma proporção na coluna de 290 */
  aspect-ratio: 393 / 320;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.lt-toolcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* 1px a mais: a última linha reamostrada da foto fica fora do overflow. */
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lt-toolcard:hover .lt-toolcard__media img {
  transform: scale(1.04);
}

/* Aba com o canto chanfrado: uma forma só, cortada por `clip-path`. */
.lt-toolcard__tab {
  position: relative;
  margin: 0;
  padding: calc(10 * var(--lt-u)) calc(48 * var(--lt-u)) calc(10 * var(--lt-u)) calc(16 * var(--lt-u));
  color: var(--gray-200);
  font-family: var(--lt-mono);
  font-size: calc(12 * var(--lt-u));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 32 * var(--lt-u)) 0, 100% 100%, 0 100%);
}

/* Grátis ou pago, o cartão tem a mesma cor: aba preta, botão branco (pedido do usuário). */

/* O corpo sobe 2px sobre a foto: sem isso, em zoom fracionado abre um filete claro na emenda. */
.lt-toolcard__body {
  position: relative;
  margin-top: -2px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(20 * var(--lt-u));
  min-height: calc(220 * var(--lt-u));
  padding: calc(16 * var(--lt-u));
  background: var(--ink);
}

.lt-toolcard__copy {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--lt-u));
}

.lt-toolcard h3 {
  color: var(--white);
  font-family: var(--sans);
  font-size: calc(22 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.lt-toolcard__copy p {
  color: var(--gray-200);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

.lt-toolcard__foot {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--lt-u));
}

.lt-toolcard__cta {
  min-height: calc(44 * var(--lt-u));
  padding: calc(12 * var(--lt-u)) calc(12 * var(--lt-u)) calc(12 * var(--lt-u)) calc(18 * var(--lt-u));
  font-size: calc(13 * var(--lt-u));
}

.lt-toolcard__cta img {
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
}

/* Sobre o cartão escuro o preto some: branco vira destaque, destaque vira branco. */
.lt-toolcard .lt-btn--white:hover {
  color: var(--black);
  background-color: var(--lt-accent);
}

.lt-toolcard .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}


/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.lt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--lt-header-h);
  display: flex;
  align-items: stretch;
  background: var(--gray-100);
}

/* Bloco do logo: o Leiautar e, nas páginas de produto, o logo do produto ao lado. */
.lt-topbar__inicio {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.lt-topbar__brand {
  display: grid;
  place-items: center;
  padding: calc(16 * var(--lt-u)) calc(28 * var(--lt-u));
  background: var(--red);
}

.lt-topbar__brand img {
  width: calc(121 * var(--lt-u));
  height: auto;
}

.lt-topbar__mark-tall,
.lt-footer__wordmark--tall {
  display: none;
}

/*
 * Logo do produto ao lado do logo do Leiautar (premissa de marca: todo produto
 * se identifica assim, como o "Fd" no menu do curso). Filete embaixo na cor do
 * produto, definida pela página em --lt-product-line.
 */
.lt-topbar__product {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 calc(14 * var(--lt-u));
  border-bottom: calc(3 * var(--lt-u)) solid var(--lt-product-line, var(--black));
}

.lt-topbar__product img {
  width: auto;
  height: calc(40 * var(--lt-u));
}

/*
 * Logo base de produto (Figma 826:651): símbolo do produto, o nome da linha
 * ("Caixa de Ferramentas", em SVG) e, embaixo, o nome do produto em texto, que
 * muda por página. Proporções do Figma sobre a altura do símbolo (--lt-produto-h):
 * vão 228/1580, coluna 3030/1580, vão interno 165/1580, corpo 280/1580.
 */
.lt-produto {
  /* 48 no menu de 64: com 40 o nome do produto ficava com 7px, ilegível. */
  --lt-produto-h: calc(48 * var(--lt-u));
  gap: calc(var(--lt-produto-h) * 0.1443);
  color: var(--black);
}

/*
 * O símbolo tem a altura do bloco de texto (nome + nome do produto), nunca
 * menos que a H: o site.js mede o bloco como ele de fato saiu nesta máquina
 * (fonte instalada, aparo do `text-box` ou não) e grava em
 * --lt-produto-simbolo. Sem o script, 1,1 H cobre o texto nos dois casos.
 */
/* Largura automática: o width="57" do HTML travaria o desenho e ele encolheria dentro da caixa. */
.lt-produto .lt-produto__simbolo {
  width: auto;
  height: max(var(--lt-produto-h), var(--lt-produto-simbolo, calc(var(--lt-produto-h) * 1.1)));
}

/*
 * Proporções do Figma 826:651 sobre a altura do símbolo (H = 1580): vão 228,
 * coluna 3031, nome 922 de altura, vão interno 165, nome do produto em corpo
 * 280 com entrelinha 1,1 e até 2790 de largura (quebra em duas linhas). O
 * texto do produto é aparado da altura das maiúsculas até a linha de base
 * (text-box, como no Figma): assim nome + vão + as duas linhas somam
 * a H. Para diminuir o logo, só muda a H.
 */
.lt-produto__texto {
  display: flex;
  flex-direction: column;
  gap: calc(var(--lt-produto-h) * 0.1045);
  width: calc(var(--lt-produto-h) * 1.9186);
}

.lt-produto .lt-produto__nome {
  width: 100%;
  height: auto;
}

.lt-produto__item {
  max-width: calc(var(--lt-produto-h) * 1.7663);
  font-family: var(--sans);
  font-size: calc(var(--lt-produto-h) * 0.1773);
  font-weight: 700;
  line-height: 1.1;
  text-box: trim-both cap alphabetic;
}

.lt-topbar__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(24 * var(--lt-u));
}

.lt-topbar__nav ul {
  display: flex;
  gap: calc(32 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-topbar__nav ul a {
  display: inline-block;
  padding: calc(6 * var(--lt-u)) 0;
  color: var(--black);
  font-size: calc(13 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 160ms ease, color 160ms ease;
}

.lt-topbar__nav ul a:hover,
.lt-topbar__nav ul a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--lt-current);
}

.lt-topbar__nav ul a:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

/* Botões de menu só existem no painel do celular. */
.lt-topbar__nav-foot {
  display: none;
}

/* O vão da direita leva a trama de pontos; a faixa preta com os botões fica por cima (acima de 981, ver abaixo). */
.lt-topbar__actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8 * var(--lt-u));
  padding: calc(16 * var(--lt-u)) calc(20 * var(--lt-u));
  overflow: hidden;
}

.lt-topbar__actions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./assets/texture-pontos-menu.svg");
  background-size: calc(7.17 * var(--lt-u)) calc(7.17 * var(--lt-u));
}

.lt-topbar__actions > * {
  position: relative;
}

.lt-topbar__cta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--lt-u));
}

/*
 * Acima de 981 os links ficam no centro exato da tela: grade de três colunas
 * com as laterais em 1fr, então o bloco do logo e o dos botões recebem o mesmo
 * espaço, qualquer que seja o tamanho de cada um. Os dois lados têm a trama de
 * pontos (120) encostada no seu bloco — logo | pontos … links … pontos |
 * botões —, e ela encolhe antes de algo chegar perto dos links. Só se logo +
 * logo do produto passarem da metade livre (páginas de produto perto de 981)
 * a coluna cresce e os links cedem o mínimo, em vez de sobrepor.
 */
@media (min-width: 981px) {
  .lt-topbar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }

  .lt-topbar__inicio::after,
    .lt-topbar__actions::before {
      content: "";
      position: static;
      flex: 0 1 calc(120 * var(--lt-u));
      min-width: 0;
      align-self: stretch;
      background-image: url("./assets/texture-pontos-menu.svg");
      background-size: calc(7.17 * var(--lt-u)) calc(7.17 * var(--lt-u));
    }

  .lt-topbar__actions {
      gap: 0;
      padding: 0;
    }

  .lt-topbar__cta {
      align-self: stretch;
      padding: 0 calc(20 * var(--lt-u));
      background: var(--black);
    }
}

/*
 * Trama de pontos do menu OCULTA a pedido (2026-09-27), nas duas laterais e no
 * celular. Os espaços ficam como estavam; para a trama voltar, basta apagar
 * esta regra.
 */
.lt-topbar__inicio::after,
.lt-topbar__actions::before {
  background-image: none;
}

.lt-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: calc(6 * var(--lt-u));
  padding: calc(10 * var(--lt-u)) calc(16 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}

/*
 * Os botões do canto do menu são NEUTROS em todas as páginas (institucionais,
 * Caixa, mentoria, curso): cinza e preto, nunca a cor da camada da página —
 * senão cada produto teria uma versão de menu. O CTA é cinza-claro com texto
 * preto; a área do aluno, quadrado cinza-escuro com ícone branco. O hover dos
 * dois é o amarelo da marca, igual em todas as páginas.
 */
.lt-tag--accent {
  color: var(--black);
  background: var(--gray-200);
}

.lt-tag--accent:hover {
  color: var(--black);
  background: var(--yellow);
}

/* Botão quadrado da área do aluno: só o ícone, e o rótulo abre no hover. */
.lt-tag--square {
  gap: 0;
  padding: calc(8 * var(--lt-u));
  background: var(--gray-700);
  transition:
    background 160ms ease,
    color 160ms ease,
    gap 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lt-tag--square span {
  display: block;
  max-width: 0;
  overflow: hidden;
  transition: max-width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lt-tag img {
  width: calc(16 * var(--lt-u));
  height: calc(16 * var(--lt-u));
}

.lt-tag--square:hover {
  gap: calc(8 * var(--lt-u));
  color: var(--black);
  background: var(--yellow);
}

.lt-tag--square:hover span {
  max-width: calc(106 * var(--lt-u));
}

.lt-tag--square:hover img {
  filter: invert(1);
}

.lt-tag:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 3px;
}

/* Hambúrguer: só abaixo de 981. */
.lt-topbar__menu {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: var(--black);
  cursor: pointer;
}

/*
 * Ícone no desenho da prancheta mobile do curso (Figma 649:41997): três traços
 * curtos de 2 px com 2 px de vão, centrados no quadrado. O traço do meio é o
 * próprio span, centrado por 50%; os outros dois saem dele por translate — sem
 * `left` em px, que antes empurrava os traços de cima e de baixo para o lado.
 */
.lt-topbar__menu-icon,
.lt-topbar__menu-icon::before,
.lt-topbar__menu-icon::after {
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--white);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}

.lt-topbar__menu-icon {
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -7px;
}

.lt-topbar__menu-icon::before,
.lt-topbar__menu-icon::after {
  content: "";
  top: 0;
  left: 0;
}

.lt-topbar__menu-icon::before { transform: translateY(-5px); }

.lt-topbar__menu-icon::after { transform: translateY(5px); }

.lt-topbar__menu[aria-expanded="true"] .lt-topbar__menu-icon {
  background: transparent;
}

.lt-topbar__menu[aria-expanded="true"] .lt-topbar__menu-icon::before { transform: rotate(45deg); }

.lt-topbar__menu[aria-expanded="true"] .lt-topbar__menu-icon::after { transform: rotate(-45deg); }

.lt-topbar__menu:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 3px;
}

/* --- Carrossel genérico ---------------------------------------------------- */
.lt-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.lt-carousel::-webkit-scrollbar {
  display: none;
}

.lt-carousel:focus-visible {
  outline: 3px solid var(--lt-focus-on-dark);
  outline-offset: -3px;
}

.lt-carousel > * {
  scroll-snap-align: start;
}

.lt-carousel__nav {
  display: flex;
  gap: calc(8 * var(--lt-u));
  flex: 0 0 auto;
}

.lt-carousel__nav button {
  position: relative;
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  padding: 0;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lt-carousel__nav button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.lt-carousel__nav button[data-dir="prev"]::before { transform: translateX(2px) rotate(-135deg); }

.lt-carousel__nav button[data-dir="next"]::before { transform: translateX(-2px) rotate(45deg); }

.lt-carousel__nav button:hover {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

.lt-carousel__nav button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.lt-carousel__nav button[disabled]:hover {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
}

.lt-carousel__nav button:focus-visible {
  outline: 3px solid var(--lt-focus-on-dark);
  outline-offset: 3px;
}

/* --- Player de vídeo (`<dialog>`) ------------------------------------------ */
.lt-video-modal {
  width: min(calc(100vw - 32px), 1120px, calc((100dvh - 128px) * 16 / 9));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.lt-video-modal::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.lt-video-modal__frame {
  aspect-ratio: 16 / 9;
  background: var(--black);
}

.lt-video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lt-video-modal__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--white);
  transition: background-color 160ms ease;
}

.lt-video-modal__close span::before,
.lt-video-modal__close span::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 13px;
  width: 18px;
  height: 2px;
  background: var(--black);
  transition: background-color 160ms ease;
}

.lt-video-modal__close span::before { transform: rotate(45deg); }

.lt-video-modal__close span::after { transform: rotate(-45deg); }

.lt-video-modal__close:hover { background: var(--red); }

.lt-video-modal__close:hover span::before,
.lt-video-modal__close:hover span::after {
  background: var(--white);
}

.lt-video-modal__close:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* O dialog fica na camada do topo, acima do cursor da marca: sem isto não
   haveria cursor nenhum dentro do player. */
html.brand-cursor-active .lt-video-modal,
html.brand-cursor-active .lt-video-modal * {
  cursor: auto !important;
}

html.brand-cursor-active .lt-video-modal__close {
  cursor: pointer !important;
}

html.lt-video-aberto,
html.lt-menu-aberto {
  overflow: hidden;
}

/*
 * O body tem `overflow-x: hidden` (base.css). Com o html travado, ele deixa de
 * repassar a rolagem para a janela e vira uma caixa de rolagem própria — e o
 * cabeçalho `sticky` para de grudar no topo. Com a página rolada, o cabeçalho
 * sumia ao abrir o menu. Enquanto a página está travada, o body fica visível.
 */
html.lt-video-aberto body,
html.lt-menu-aberto body {
  overflow: visible;
}

/* ==========================================================================
   11. CTA final
   ========================================================================== */
/*
 * Modo escuro: o cinza-escuro da paleta (--ink) com a trama de cruzes "+" da
 * marca no fundo inteiro, no desenho do Figma 480:32754 — cruz fina de 22
 * (traço 1,5), num passo de 48 (a referência usa 35; mais arejado a pedido),
 * em --gray-700 (#444) chapado.
 */
.lt-final {
  --lt-final-passo: calc(48 * var(--lt-u));
  /* A mesma trama para o canvas das cruzes vivas (site.js): 22 de cruz em 48, traço 1,5. */
  --lt-cruzes-passo: var(--lt-final-passo);
  --lt-cruzes-braco: 0.2292;
  --lt-cruzes-meia: 0.015625;
  --lt-cruzes-cor: var(--gray-700);
  position: relative;
  isolation: isolate;
  padding: calc(140 * var(--lt-u)) var(--lt-gutter);
  overflow: hidden;
  color: var(--white);
  background: var(--ink) url("./assets/pattern-tile-cruzes.svg?v=20260925-6") center top / var(--lt-final-passo) var(--lt-final-passo) repeat;
}

/*
 * Com mouse, o site.js desenha a mesma trama num canvas e as cruzes perto do
 * ponteiro giram até virar "×". O fundo do CSS sai para não dobrar a trama.
 */
.lt-final.is-cruzes-vivas {
  background-image: none;
}

/* Canvas das cruzes vivas (site.js), atrás do conteúdo — a seção precisa de `isolation`. */
.lt-cruzes {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lt-final__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--lt-u));
  /* 1000, não 820: a faixa tem espaço e com 820 a pergunta quebrava em três linhas. */
  max-width: calc(1000 * var(--lt-u));
  margin-inline: auto;
  text-align: center;
}

.lt-final__seal {
  width: calc(96 * var(--lt-u));
  height: calc(96 * var(--lt-u));
  animation: lt-spin 14s linear infinite;
}

/* O `from` explícito é obrigatório: sem ele a matriz de rotate(360) é a identidade. */
@keyframes lt-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.lt-final h2 {
  color: var(--white);
  font-size: calc(112 * var(--lt-u));
  line-height: 0.88;
}

.lt-final__inner > p {
  max-width: calc(560 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(18 * var(--lt-u));
  line-height: 1.5;
}

/* A faixa de treliça do pé saiu: a trama de cruzes já cobre o fundo todo. */
.lt-final__band {
  display: none;
}

/* No grafite o rótulo escuro vira branco com texto preto: contraste alto. */
.lt-final .lt-label--dark {
  background: var(--white);
}

.lt-final .lt-label--dark span {
  color: var(--black);
}

/* ==========================================================================
   Rodapé — o mesmo da página do curso, com a faixa de suporte do wireframe
   ========================================================================== */
.lt-footer {
  padding: calc(60 * var(--lt-u)) calc(48 * var(--lt-u)) calc(32 * var(--lt-u));
  background: var(--black);
}

.lt-footer__inner {
  display: flex;
  flex-direction: column;
  gap: calc(38 * var(--lt-u));
  width: 100%;
  max-width: var(--lt-max-wide);
  margin-inline: auto;
}

.lt-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(28 * var(--lt-u));
  padding-bottom: calc(24 * var(--lt-u));
  border-bottom: 1px solid var(--gray-700);
}

.lt-footer__brand {
  width: calc(497 * var(--lt-u));
}

.lt-footer__logo {
  width: calc(140.644 * var(--lt-u));
  height: calc(25.971 * var(--lt-u));
}

.lt-footer__brand p {
  width: min(100%, calc(300 * var(--lt-u)));
  margin: calc(25 * var(--lt-u)) 0 0;
  color: var(--gray-200);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.6;
}

.lt-footer__nav {
  display: flex;
  gap: calc(28 * var(--lt-u));
}

/*
 * Colunas de links do rodapé, ocultas em 16/09/2026 a pedido: todos os nove
 * links ainda apontam para `#`, porque as páginas não existem. A regra é
 * necessária porque o `display: flex` acima venceria o `hidden` do HTML.
 * Para trazer de volta: tirar o `hidden` do `<nav>` nas páginas.
 */
.lt-footer__nav[hidden] {
  display: none;
}

.lt-footer__col {
  width: calc(156.5 * var(--lt-u));
}

.lt-footer__col h2,
.lt-footer__help h2 {
  margin: 0;
  color: var(--gray-100);
  font-family: var(--sans);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lt-footer__col ul {
  margin: calc(21 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

.lt-footer__col li + li {
  margin-top: calc(10 * var(--lt-u));
}

.lt-footer__col a {
  color: var(--gray-200);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.6;
  text-decoration: none;
  transition: color 160ms ease;
}

.lt-footer__col a:hover {
  color: var(--white);
}

/* Faixa "Precisa de ajuda?" */
.lt-footer__help {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--lt-u));
  padding: calc(20 * var(--lt-u)) calc(20 * var(--lt-u)) calc(20 * var(--lt-u)) calc(20 * var(--lt-u));
  background: var(--ink);
}

.lt-footer__help-icon {
  display: grid;
  place-items: center;
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  flex: 0 0 auto;
  background: var(--lt-accent);
}

.lt-footer__help-icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.lt-footer__help-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--lt-u));
  min-width: 0;
}

.lt-footer__help h2 {
  font-size: calc(16 * var(--lt-u));
  text-transform: none;
}

.lt-footer__help p {
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

.lt-footer__help .lt-btn {
  flex: 0 0 auto;
  min-height: calc(48 * var(--lt-u));
  padding: calc(14 * var(--lt-u)) calc(14 * var(--lt-u)) calc(14 * var(--lt-u)) calc(22 * var(--lt-u));
  font-size: calc(14 * var(--lt-u));
}

.lt-footer__wordmark {
  width: 100%;
  height: auto;
}

.lt-footer__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
  padding-top: calc(24 * var(--lt-u));
  border-top: 1px solid var(--gray-700);
}

.lt-footer__row p {
  color: var(--white);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

/*
 * No meio da linha de baixo ficava a frase "Escola de Design e Designer:
 * fundamentos…". Em 16/09/2026 ela deu lugar aos dois links de privacidade,
 * que antes vinham espremidos embaixo do © à esquerda.
 */
.lt-footer__policies {
  width: calc(367 * var(--lt-u));
  text-align: center;
}

.lt-footer__policies a,
.lt-footer__policies .lt-consent-open {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lt-footer__social {
  display: flex;
  justify-content: flex-end;
  gap: calc(8 * var(--lt-u));
  width: calc(180 * var(--lt-u));
}

.lt-footer__social a,
.lt-footer__social img {
  width: calc(40 * var(--lt-u));
  height: calc(40 * var(--lt-u));
  display: block;
}

.lt-footer__social a {
  transition: transform 160ms ease, filter 160ms ease;
}

.lt-footer__social a:hover {
  filter: brightness(1.6);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsivo
   --------------------------------------------------------------------------
   Acima de 980 a página é uma escala contínua. Abaixo disso o layout empilha,
   a unidade volta para perto de 1 px e os displays passam para vw.
   ========================================================================== */
/* Desktop estreito: cabeçalhos em três colunas viram duas. */
@media (max-width: 1279px) {
  .lt-topbar__nav ul {
      gap: calc(20 * var(--lt-u));
    }

  .lt-topbar__actions {
      padding-left: calc(48 * var(--lt-u));
    }
}

@media (max-width: 980px) {
  :root {
      --lt-u: 0.92px;
      --lt-gutter: 48px;
    }

  /* --- Cabeçalho: hambúrguer e painel preto ---------------------------- */
  .lt-topbar__menu {
      display: block;
    }

  .lt-topbar__cta .lt-tag--accent {
      display: none;
    }

  .lt-topbar__actions {
      flex: 1;
      padding: 12px 16px;
    }

  .lt-topbar__nav {
      position: fixed;
      top: var(--lt-header-h);
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 49;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      gap: 32px;
      padding: 40px 48px 48px;
      overflow: auto;
      background: var(--black);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms;
    }

  html.lt-menu-aberto .lt-topbar__nav {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

  .lt-topbar__nav ul {
      flex-direction: column;
      gap: 0;
    }

  .lt-topbar__nav li + li {
      border-top: 1px solid var(--gray-700);
    }

  /* Links compactos: seis linhas de 60 px cabem com folga num celular pequeno. */
  .lt-topbar__nav ul a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0;
      color: var(--white);
      font-family: var(--display);
      font-size: clamp(28px, 4.4vw, 36px);
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      box-shadow: none;
    }

  /* Seta para o canto superior direito, na ponta direita de cada link e na cor do texto. */
  .lt-topbar__nav ul a::after {
      content: "";
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      background-color: currentColor;
      -webkit-mask: url("./assets/icon-arrow-upright.svg") center / contain no-repeat;
      mask: url("./assets/icon-arrow-upright.svg") center / contain no-repeat;
      transition: transform 200ms ease;
    }

  .lt-topbar__nav ul a:hover,
  .lt-topbar__nav ul a[aria-current="page"] {
      color: var(--lt-accent);
      box-shadow: none;
    }

  .lt-topbar__nav ul a:hover::after {
      transform: translate(2px, -2px);
    }

  .lt-topbar__nav-foot {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

  .lt-final {
      padding: 96px 48px;
    }

  .lt-final h2 {
      font-size: clamp(56px, 13vw, 100px);
    }

  /* --- Rodapé ---------------------------------------------------------- */
  .lt-footer__top {
      flex-direction: column;
    }

  .lt-footer__brand {
      width: 100%;
    }

  .lt-footer__nav {
      flex-wrap: wrap;
      gap: 24px 28px;
    }

  .lt-footer__col {
      width: calc(50% - 14px);
    }

  .lt-footer__help {
      flex-wrap: wrap;
    }

  .lt-footer__help-copy {
      flex-basis: calc(100% - 64px);
    }

  .lt-footer__help .lt-btn {
      width: 100%;
    }

  .lt-footer__row {
      flex-wrap: wrap;
    }

  .lt-footer__policies {
      width: 100%;
      order: 3;
      text-align: left;
    }
}

/* ==========================================================================
   Celular — 375 de largura, com as mesmas decisões da página do curso
   ========================================================================== */
@media (max-width: 620px) {
  :root {
      --lt-u: 1px;
      --lt-header-h: 52px;
      --lt-gutter: 24px;
    }

  .lt-topbar {
      min-height: 52px;
    }

  .lt-topbar__brand {
      padding: 8px 21px;
    }

  .lt-topbar__brand .lt-topbar__mark-wide {
      display: none;
    }

  .lt-topbar__brand .lt-topbar__mark-tall {
      display: block;
      width: 30.5px;
      height: 24px;
    }

  .lt-topbar__product {
      padding: 0 10px;
    }

  .lt-topbar__product img {
      height: 30px;
    }

  .lt-produto {
      --lt-produto-h: 36px;
    }

  .lt-topbar__actions {
      padding: 10px 12px;
      gap: 8px;
    }

  .lt-tag--square {
      width: 32px;
      height: 32px;
      padding: 8px;
    }

  .lt-tag--square img {
      width: 14px;
      height: 14px;
    }

  .lt-topbar__menu {
      width: 32px;
      height: 32px;
    }

  /* No quadrado de 32: traços de 12 px, 2 px de espessura e 2 px de vão. */
  .lt-topbar__menu-icon,
    .lt-topbar__menu-icon::before,
    .lt-topbar__menu-icon::after {
      width: 12px;
    }

  .lt-topbar__menu-icon {
      margin-left: -6px;
    }

  .lt-topbar__menu-icon::before {
      transform: translateY(-4px);
    }

  .lt-topbar__menu-icon::after {
      transform: translateY(4px);
    }

  .lt-topbar__nav {
      padding: 24px 24px 32px;
    }

  .lt-final {
      padding: 72px 24px;
    }

  .lt-final h2 {
      font-size: clamp(48px, 16vw, 72px);
    }

  .lt-final__inner > p {
      font-size: 16px;
    }

  /* Pode quebrar em duas linhas; em uma só, 5 + 14 + 5 = os 24 do ícone. */
  .lt-final .lt-label span {
      padding-block: 5px;
      line-height: 1.4;
      white-space: normal;
    }

  .lt-footer {
      padding: 48px 24px 24px;
    }

  .lt-footer__col {
      width: calc(50% - 14px);
    }

  .lt-footer__wordmark--wide {
      display: none;
    }

  .lt-footer__wordmark--tall {
      display: block;
    }

  .lt-footer__help {
      padding: 16px;
    }

  .lt-footer__row {
      flex-direction: column;
      gap: 16px;
    }

  .lt-footer__social {
      justify-content: flex-start;
      width: auto;
    }
}

/* Acima de 981 o painel do menu nunca fica preso aberto após um redimensionamento. */
@media (min-width: 981px) {
  html.lt-menu-aberto {
      overflow: auto;
    }
}

/* Link da política de privacidade no rodapé. */
.lt-footer__legal a {
  color: var(--gray-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.lt-footer__legal a:hover {
  color: var(--lt-accent);
}

/* ==========================================================================
   ENTRADAS DAS SEÇÕES — mais presentes que as de base.css
   --------------------------------------------------------------------------
   As de base.css subiam 12 px em 500 ms numa curva que resolve quase tudo no
   primeiro terço: com o gatilho na borda de baixo da tela, a entrada acabava
   antes de o olho chegar. Aqui o gatilho sobe para 80 % da altura da tela
   (site.js), o percurso fica maior, a duração passa de um segundo e a curva é
   mais distribuída. As folhas das páginas usam os mesmos tokens quando
   reescrevem a transição de um cartão (entrada + hover).
   ========================================================================== */
:root {
  --lt-entrada-dur: 1000ms;
  --lt-entrada-card: 1100ms;
  --lt-entrada-hero: 1200ms;
  --lt-entrada-curva: cubic-bezier(0.33, 1, 0.68, 1);
}

.motion-enabled .motion-reveal {
  transform: translateY(40px);
  filter: blur(4px);
  transition-duration: var(--lt-entrada-dur);
  transition-timing-function: var(--lt-entrada-curva);
}

.motion-enabled .motion-reveal--card {
  transform: translateY(56px) scale(0.97);
  filter: blur(0);
  transition-duration: var(--lt-entrada-card);
}

.motion-enabled .motion-reveal--hero {
  transform: translateY(56px);
  filter: blur(8px);
  transition-duration: var(--lt-entrada-hero);
}

.motion-enabled .motion-reveal--scale {
  transform: scale(0.92);
  filter: blur(0);
  transition-duration: var(--lt-entrada-dur);
}

.motion-enabled .motion-reveal--soft {
  transform: scale(0.96);
  filter: blur(4px);
  transition-duration: var(--lt-entrada-dur);
}

.motion-enabled .motion-reveal--wipe {
  transform: none;
  filter: none;
  transition-duration: var(--lt-entrada-card);
}

.motion-enabled .motion-reveal--peca {
  transform: none;
  filter: none;
  transition: none;
}

/*
 * Esconder não anima; só revelar. Se algum script mede a página antes de as
 * entradas serem registradas (o cursor.js lê a largura da janela logo no
 * começo), os elementos já têm estilo calculado quando ganham `motion-reveal`
 * — com a transição valendo também no estado escondido, eles sumiam devagar
 * na carga e, rolando rápido, a pessoa via o elemento sumir e voltar.
 */
.motion-enabled .motion-reveal:not(.is-visible) {
  transition: none;
}