/* ==========================================================================
   Home do Leiautar — estilos das seções da página (prefixo .hm-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos, CTA
   final, rodapé) e de base.css (tokens de cor, motion, cursor).
   ========================================================================== */

/* --- CTA sazonal: data-seasonal="on" | "off" na tag <html> --------------- */
html[data-seasonal="off"] .hm-seasonal {
  display: none !important;
}

/* ==========================================================================
   Seções de largura travada — 1 unidade = 1 px acima de 981
   ========================================================================== */
@media (min-width: 981px) {
  .hm-thesis,
    .hm-signals,
    .hm-journey,
    .hm-tools,
    .hm-course,
    .hm-mentoring,
    .hm-testimonials,
    .hm-seasonal,
    .hm-articles,
    .lt-final,
    .lt-footer {
      --lt-u: 1px;
    }
}

/*
 * CAMADAS DE COR. A home é institucional: o chrome já vem com os tokens da
 * paleta institucional (site.css). As duas vitrines de produto trocam de
 * camada dentro da própria seção — ferramentas na paleta da caixa, curso na
 * paleta de Fundamentos — e a jornada pinta cada etapa com a cor da sua camada.
 */
:root {
  --hm-caixa: #a500ff;          /* roxo da caixa (Figma 475:927); o --purple de base.css é outro */
  --hm-caixa-accent: var(--orange);
}

.hm-tools {
  --lt-accent: var(--hm-caixa-accent);
  --lt-focus: var(--hm-caixa);
  --lt-link-hover: var(--hm-caixa);
  --lt-link-hover-line: currentColor;
  --lt-dark-hover-bg: var(--hm-caixa);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
}

.hm-course {
  --lt-accent: var(--green);
  --lt-focus: var(--blue);
  --lt-link-hover: var(--blue);
  --lt-link-hover-line: currentColor;
  --lt-dark-hover-bg: var(--blue);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
}

/*
 * Hover dos cartões — a mesma convenção da página do curso:
 * · sem foto → o filete vermelho engrossa para dentro;
 * · com foto → a foto cresce 4 % dentro da própria máscara.
 * A lista de `transition-property` repete as três propriedades da entrada
 * porque os cartões carregam `motion-reveal`, cuja regra dita a `transition`.
 */
.motion-enabled .hm-mentor {
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: var(--lt-entrada-card), var(--lt-entrada-card), var(--lt-entrada-card), 240ms;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}

.hm-mentor:hover {
  box-shadow: inset 0 calc(-5 * var(--lt-u)) 0 var(--red);
}

.hm-tool__media img,
.hm-article__media img,
.hm-course__photo > img,
.hm-manifesto-video__thumb img {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-tool:hover .hm-tool__media img,
.hm-article:hover .hm-article__media img,
.hm-manifesto-video__media:hover .hm-manifesto-video__thumb img {
  transform: scale(1.04);
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
/*
 * Trama de cruzes do hero: a mesma do CTA final (cruzes que viram "×" perto do
 * ponteiro, site.js), menor e mais leve para o fundo branco — cruz de 16 num
 * passo de 40, traço de 1, em cinza-200. O canvas só desenha acima do meio do
 * vídeo (data-cruzes-corte no HTML).
 */
.hm-hero {
  --lt-cruzes-passo: calc(40 * var(--lt-u));
  --lt-cruzes-braco: 0.2;
  --lt-cruzes-meia: 0.0125;
  --lt-cruzes-cor: var(--gray-200);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(64 * var(--lt-u));
  padding: calc(96 * var(--lt-u)) calc(48 * var(--lt-u)) calc(48 * var(--lt-u));
  overflow: hidden;
  background: var(--white);
}

.hm-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--lt-u));
  max-width: calc(1240 * var(--lt-u));
  text-align: center;
}

/* H1 de abertura do site (--lt-h1, site.css). */
.hm-hero h1 {
  /* Sempre em duas linhas (fica melhor que numa só): "TUDO O QUE TE / FALTAVA, EM DESIGN": a 2ª linha mede 7,24em, e o teto em em
     acompanha o corpo em qualquer tela. */
  max-width: 7.7em;
  font-size: var(--lt-h1);
  line-height: 0.88;
}

/* "EM DESIGN" nunca se parte: abaixo de 1440 a 1ª linha quebra em duas e a
   frase vermelha desce inteira para a última linha. */
.hm-hero h1 em {
  display: inline-block;
  color: var(--red);
  font-style: normal;
}

/* O corpo do texto corrido do site (17), não mais que isso: o título é quem fala alto. */
.hm-hero__lead {
  max-width: calc(640 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(17 * var(--lt-u));
  line-height: 1.5;
  text-wrap: pretty;
}

.hm-hero__lead i {
  font-style: italic;
}

.hm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--lt-u));
  margin-top: calc(8 * var(--lt-u));
}

/* Sobre a trama o botão de contorno não pode ser vazado: fundo branco (o hover segue preto). */
.hm-hero .lt-btn--outline:not(:hover) {
  background-color: var(--white);
}

/* --- Vídeo manifesto ------------------------------------------------------ */
.hm-manifesto-video {
  /* Metade da altura da mídia, em % da largura da figura (2:1 → 1/4). */
  --hm-meia-midia: calc(100% / 4);
  position: relative;
  width: min(100%, var(--lt-max-wide));
  margin: 0;
}

/*
 * Trama de cruzes da marca no fundo do hero, cortada na metade do vídeo: a
 * metade de cima do vídeo fica sobre a trama e a de baixo sobre o branco.
 * Mora num ::before da figura (que não anima, então a trama já está lá na
 * carga), esticado para as laterais e para cima — o overflow do hero corta —
 * e estendido para baixo por um padding em % da largura da figura até a
 * metade da mídia. `isolation` no hero põe a camada -1 acima do fundo branco
 * e abaixo do texto. É a trama parada (celular, sem JS); com mouse o canvas
 * das cruzes vivas assume e esta sai.
 */
.hm-manifesto-video::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -300vh;
  right: -100vw;
  left: -100vw;
  box-sizing: content-box;
  height: 300vh;
  padding-bottom: var(--hm-meia-midia);
  background: url("./assets/pattern-tile-cruzes-claro.svg?v=20260927-hero2") center bottom / var(--lt-cruzes-passo) var(--lt-cruzes-passo) repeat;
}

.hm-hero.is-cruzes-vivas .hm-manifesto-video::before {
  background-image: none;
}

.hm-manifesto-video__media {
  position: relative;
  display: block;
  /* Entre o 21:9 de antes e o 16:9: um pouco mais alto, sem virar tela cheia. */
  aspect-ratio: 2 / 1;
  color: var(--white);
  background: var(--black);
}

.hm-manifesto-video__thumb {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--gray-700);
}

.hm-manifesto-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.hm-manifesto-video__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

.hm-manifesto-video__tag {
  position: absolute;
  top: calc(24 * var(--lt-u));
  left: calc(24 * var(--lt-u));
  display: inline-flex;
  align-items: center;
  background: var(--ink);
}

.hm-manifesto-video__tag img {
  width: calc(32 * var(--lt-u));
  height: calc(32 * var(--lt-u));
}

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

/*
 * Exceção pedida à regra de cantos retos (diretrizes, seção 9): o play é
 * redondo porque é o formato que o usuário reconhece como "tocar vídeo".
 */
.hm-manifesto-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: calc(88 * var(--lt-u));
  height: calc(88 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  border-radius: 50%;
  translate: -50% -50%;
  transition: background-color 160ms ease, color 160ms ease, scale 200ms ease;
}

.hm-manifesto-video__play svg {
  width: calc(28 * var(--lt-u));
  height: calc(28 * var(--lt-u));
  translate: calc(2 * var(--lt-u)) 0;
}

.hm-manifesto-video__media:hover .hm-manifesto-video__play,
.hm-manifesto-video__media:focus-visible .hm-manifesto-video__play {
  color: var(--black);
  background: var(--lt-accent);
  scale: 1.06;
}

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

.hm-manifesto-video__caption {
  position: absolute;
  right: calc(24 * var(--lt-u));
  bottom: calc(24 * var(--lt-u));
  left: calc(24 * var(--lt-u));
  color: var(--gray-100);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.hm-manifesto-video__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--lt-u));
  padding: calc(16 * var(--lt-u)) 0 0;
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1;
  border-top: 1px solid var(--gray-200);
  margin-top: calc(16 * var(--lt-u));
}

.hm-manifesto-video__bar b {
  color: var(--black);
  font-weight: 500;
}

/* ==========================================================================
   1.1 Faixa do ecossistema (marquee)
   ========================================================================== */
.hm-tags {
  height: calc(40 * var(--lt-u));
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--black);
}

/*
 * A faixa corre exatamente uma lista por volta (--hm-volta, medida pelo
 * home.js), e o home.js clona a lista quantas vezes for preciso para cobrir a
 * tela inteira mais uma volta — assim nunca sobra buraco no fim, em tela
 * nenhuma. Sem JS ficam as duas listas do HTML e a volta de 50 %.
 */
.hm-tags__track {
  flex: 0 0 auto;
  display: flex;
  width: max-content;
  animation: hm-marquee 60s linear infinite;
}

.hm-tags:hover .hm-tags__track {
  animation-play-state: paused;
}

.hm-tags__list {
  flex: 0 0 auto;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-tags__list li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* o vão entre os itens em `margin`, para o -50% do marquee fechar */
  margin-right: calc(18 * var(--lt-u));
  gap: calc(6 * var(--lt-u));
  color: var(--white);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-tags__list li::before {
  content: "+";
}

@keyframes hm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--hm-volta, 50%)), 0, 0); }
}

/* ==========================================================================
   2. Tese — peça tipográfica centrada: título, texto e a pilha dos pilares
   ========================================================================== */
.hm-thesis {
  background: var(--gray-100);
}

/* Sem respiro embaixo: a pilha assenta direto na borda da seção. */
.hm-thesis__inner {
  padding: calc(120 * var(--lt-u)) var(--lt-gutter) 0;
}

.hm-thesis__head {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--lt-u));
  text-align: center;
}

/* Fundo cinza: chip branco. */
.hm-thesis .lt-label {
  background: var(--white);
}

/* A 2ª linha mede 13,2 vezes o corpo: 7,4cqi é o teto para as duas linhas caberem na coluna. */
.hm-thesis h2 {
  max-width: none;
  font-size: min(calc(90 * var(--lt-u)), 7.4cqi);
  line-height: 0.9;
}

/* Tudo no eixo: texto e link sob o título, a pilha embaixo. */
.hm-thesis__body {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(88 * var(--lt-u));
  margin-top: calc(40 * var(--lt-u));
}

.hm-thesis__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--lt-u));
  max-width: calc(560 * var(--lt-u));
  text-align: center;
}

.hm-thesis__copy p {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: balance;
}

/*
 * A PILHA. Cada pilar é uma camada da sua cor, e as três assentam uma sobre a
 * outra na borda de baixo da seção. A lista vai da base para o topo; o
 * column-reverse só desenha de baixo para cima. Cada camada recua um degrau de
 * cada lado, e o degrau mede a altura da camada: os cantos formam degraus
 * quadrados. Tudo sai do degrau (96 na coluna cheia, 8,5cqi abaixo dela),
 * então a pirâmide só muda de escala.
 */
.hm-thesis__pillars {
  --hm-degrau: min(calc(96 * var(--lt-u)), 8.5cqi);
  --hm-recuo: var(--hm-degrau);
  --hm-corpo: calc(var(--hm-degrau) * 2 / 3);
  --hm-folga: calc(var(--hm-degrau) / 4);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A camada de baixo fica por cima: é de trás dela que as outras sobem. */
.hm-pillar {
  --hm-nivel: 0;
  --hm-pillar-ink: var(--black);
  position: relative;
  z-index: calc(3 - var(--hm-nivel));
  display: flex;
  width: calc(100% - var(--hm-nivel) * 2 * var(--hm-recuo));
  min-height: var(--hm-degrau);
}

.hm-pillar:nth-child(2) {
  --hm-nivel: 1;
}

.hm-pillar:nth-child(3) {
  --hm-nivel: 2;
}

/*
 * Um padrão da marca por camada, no tom forte da própria cor, sempre chapado:
 * diagonais finas na base (rosa sobre rosa-claro, 2 px a cada 9), pontinhos
 * na ferramenta (o desenho da trama do menu, vermelho-claro sobre vermelho) e
 * zigue-zague na direção (o caminho) — amarelo sobre branco: amarelo sobre
 * amarelo-claro quase sumia (as duas cores têm a mesma luminância).
 */
.hm-pillar--pink {
  background: repeating-linear-gradient(-45deg, var(--pink-light) 0 7px, var(--pink) 7px 9px);
}

.hm-pillar--red {
  --hm-pillar-ink: var(--white);
  background: var(--red) url("./assets/pattern-tile-pontinhos-vermelho.svg?v=20260927-degraus") center / 8px 8px repeat;
}

.hm-pillar--yellow {
  background: var(--white) url("./assets/pattern-tile-zigue-amarelo.svg?v=20260927-pilha") center / calc(var(--hm-degrau) * 0.125) calc(var(--hm-degrau) * 0.4583) repeat;
}

/* O nome centra na camada; o respiro de cima compensa a caixa da fonte. */
.hm-pillar__name {
  align-self: center;
  margin-inline: auto;
  padding: 0.13em var(--hm-folga) 0;
  color: var(--hm-pillar-ink);
  font-family: var(--display);
  font-size: var(--hm-corpo);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/*
 * Entrada de baixo: as camadas começam abaixo da borda da seção (a lista corta
 * o que passa dela) e sobem em sequência, a base primeiro. As de cima sobem de
 * trás das de baixo, como um telescópio (.is-empilhado e o atraso vêm do
 * home.js). Sem motion-enabled a pilha já está montada.
 */
.motion-enabled .hm-thesis__pillars {
  overflow: hidden;
}

.motion-enabled .hm-pillar {
  transition: transform 750ms cubic-bezier(0.33, 1, 0.68, 1) var(--hm-pillar-delay, 0ms);
}

/* Descer para o ponto de partida não anima (ver "Esconder não anima" em site.css). */
.motion-enabled .hm-pillar:not(.is-empilhado) {
  transform: translateY(calc((var(--hm-nivel) + 1) * 100%));
  transition: none;
}

/*
 * Coluna estreita (celular): na escala do degrau o texto ficaria miúdo. O
 * degrau vira um recuo fixo, o corpo sobe e cada nome quebra em duas linhas,
 * para as três camadas terem a mesma altura. O corpo só desce quando nem
 * "Direção para" cabe na camada de cima (5,3 em; 120 = recuos + folgas).
 */
@container (max-width: 480px) {
  .hm-thesis__pillars {
    --hm-degrau: calc(var(--hm-corpo) * 2.625);
    --hm-recuo: 24px;
    --hm-corpo: min(32px, (100cqi - 120px) / 5.3);
    --hm-folga: 12px;
  }

  /* Em duas linhas a cedilha de "Direção" encostaria no "Viver" com 0,9. */
  .hm-pillar__name {
    max-width: calc(5.6em + 2 * var(--hm-folga));
    padding-top: 0.12em;
    line-height: 0.96;
  }
}

/* ==========================================================================
   3. Mapa da jornada — sobre o desenho de "Como o conteúdo é organizado"
   ========================================================================== */
.hm-journey {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.hm-journey__inner {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
}

.hm-journey__head {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

.hm-journey h2 {
  /* Duas linhas no máximo: sem teto de largura, o balance divide a pergunta ao meio. */
  max-width: calc(900 * var(--lt-u));
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
  text-wrap: balance;
}

/*
 * Cada etapa ocupa duas linhas do grid (faixa de padrão + cartão) e herda as
 * linhas por subgrid: os três cartões brancos ficam sempre com a altura do
 * mais alto, mesmo quando um texto quebra a mais.
 */
.hm-journey__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: calc(18 * var(--lt-u));
  margin-top: calc(60 * var(--lt-u));
}

.hm-step {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  overflow: hidden;
}

/*
 * O padrão cobre o cartão inteiro e a transparência vale para a camada toda:
 * o ladrilho é preto opaco. Com a opacidade em cada forma, onde os pedaços do
 * desenho se sobrepõem a tinta dobrava e aparecia uma emenda escura.
 */
.hm-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hm-step-pattern);
  background-size: var(--hm-step-tile);
  background-position: 0 0;
  opacity: var(--hm-step-pattern-opacity);
  transition: background-position 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* No hover o padrão desliza um pouco. */
.hm-step:hover::before {
  background-position: calc(24 * var(--lt-u)) calc(-24 * var(--lt-u));
}

/*
 * Cada etapa na cor da camada do produto que ela apresenta, com um padrão da
 * marca por cima (os mesmos desenhos dos palcos do Festival, em preto
 * translúcido): zigue-zague na caixa, pontos no curso, grega na mentoria.
 */
.hm-step--caixa {
  --hm-step-pattern: url("./assets/pattern-tile-zigue.svg?v=20260917-opaco");
  --hm-step-tile: calc(21.681 * var(--lt-u)) calc(79.497 * var(--lt-u));
  --hm-step-pattern-opacity: 0.14;
  background-color: var(--hm-caixa);
}

.hm-step--curso {
  --hm-step-pattern: url("./assets/pattern-tile-pontos.svg?v=20260917-opaco");
  --hm-step-tile: calc(11.583 * var(--lt-u)) calc(11.583 * var(--lt-u));
  --hm-step-pattern-opacity: 0.14;
  background-color: var(--blue);
}

.hm-step--mentoria {
  --hm-step-pattern: url("./assets/pattern-tile-grega.svg?v=20260917-opaco");
  --hm-step-tile: calc(574.411 * var(--lt-u)) calc(161.422 * var(--lt-u));
  --hm-step-pattern-opacity: 0.12;
  background-color: var(--red);
}

.hm-step__top {
  min-height: calc(180 * var(--lt-u));
}

.hm-step__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(24 * var(--lt-u));
  margin: calc(12 * var(--lt-u));
  padding: calc(20 * var(--lt-u));
  background: var(--white);
}

.hm-step__copy {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--lt-u));
}

.hm-step h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(26 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.hm-step__who {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

.hm-step__product {
  width: fit-content;
  padding: calc(8 * var(--lt-u)) calc(10 * var(--lt-u));
  color: var(--black);
  background: var(--gray-100);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hm-step__copy > p:last-child {
  color: var(--ink);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

/* ==========================================================================
   4. Reconhecimento de jornada — formato de "Troque insegurança por método"
   (Figma 594:34477), nas cores institucionais
   ========================================================================== */
/*
 * Seção de largura cheia, como no documento de 1440: título gigante em duas
 * linhas, parágrafo no vão da 2ª linha, faixa de cartões e trama no rodapé.
 */
/*
 * No desenho do "Como funciona" do Festival (475:29071). Na coluna cheia
 * (1216): painel preto de 673 com a trama de diagonais; a coluna dos sinais
 * (653) entra 120 por cima dele, então os cartões invadem a borda do painel e
 * o texto de cada sinal fica fora, sobre o cinza. Em porcentagem da coluna,
 * para a composição encolher inteira até 1280.
 */
.hm-signals {
  padding: calc(120 * var(--lt-u)) var(--lt-gutter);
  color: var(--white);
  background: var(--ink);
}

.hm-signals__inner {
  display: flex;
  align-items: stretch;
}

/* Trama do painel: "/" de 2 px a cada 9 px, em cinza-escuro chapado sobre o preto. */
.hm-signals__panel {
  position: relative;
  display: flex;
  flex: 0 0 55.35%;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--lt-u));
  margin-right: -9.87%;
  padding: calc(80 * var(--lt-u)) 21.38% calc(80 * var(--lt-u)) calc(48 * var(--lt-u));
  background: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 calc(1.41 * var(--lt-u)),
    var(--black) calc(1.41 * var(--lt-u)) calc(6.36 * var(--lt-u))
  );
}

.hm-signals h2 {
  max-width: none;
  color: var(--white);
  font-size: calc(48 * var(--lt-u));
  line-height: 1;
}

/*
 * "Pulou a base." ganha um grifo amarelo que corre da esquerda para a direita
 * quando o painel aparece (.is-visible vem do site.js), perto do fim da
 * subida. O fundo da linha pinta a caixa da fonte, que começa 0,94 em acima
 * da linha de base: 1,02 em deixa o grifo 0,08 em abaixo das letras. Sem
 * motion-enabled o grifo já está lá.
 */
.hm-signals__grifo {
  background: linear-gradient(var(--yellow), var(--yellow)) 0 1.02em / 100% 0.1em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.motion-enabled .hm-signals__grifo {
  transition: background-size 700ms cubic-bezier(0.65, 0, 0.35, 1) 850ms;
}

.motion-enabled .hm-signals__panel:not(.is-visible) .hm-signals__grifo {
  background-size: 0% 0.1em;
  transition: none;
}

.hm-signals__lead {
  margin: 0;
  color: var(--white);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
  text-wrap: pretty;
}

.hm-signals__list {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: calc(24 * var(--lt-u));
  min-width: 0;
  margin: 0;
  padding: calc(80 * var(--lt-u)) 0;
  list-style: none;
}

/*
 * Cada sinal: cartão na cor da vez + o resto da frase ao lado. O quadrado do
 * ícone é 80 % de preto sobre a cor do cartão, misturado em cor chapada; o
 * número fica num selo no canto, com a borda no tom do quadrado.
 */
.hm-sinal {
  --hm-sinal-cor: var(--yellow-light);
  --hm-sinal-num: var(--black);
  --hm-sinal-fundo: color-mix(in srgb, var(--black) 80%, var(--hm-sinal-cor));
  display: flex;
  align-items: center;
  gap: calc(32 * var(--lt-u));
}

.hm-sinal--rosa {
  --hm-sinal-cor: var(--pink-light);
}

.hm-sinal--vermelho {
  --hm-sinal-cor: var(--red-light);
}

.hm-sinal--azul {
  --hm-sinal-cor: var(--blue-light);
  --hm-sinal-num: var(--white);
}

.hm-sinal__card {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(20 * var(--lt-u));
  padding: calc(16 * var(--lt-u));
  background: var(--hm-sinal-cor);
}

.hm-sinal__icone {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(68 * var(--lt-u));
  height: calc(68 * var(--lt-u));
  background: var(--hm-sinal-fundo);
}

/* O check da lista, pintado na cor do cartão. */
.hm-sinal__icone::after {
  content: "";
  width: calc(24 * var(--lt-u));
  height: calc(22 * var(--lt-u));
  background: var(--hm-sinal-cor);
  -webkit-mask: url("./assets/check-list.svg?v=20260927-sinais2") center / contain no-repeat;
  mask: url("./assets/check-list.svg?v=20260927-sinais2") center / contain no-repeat;
}

.hm-sinal__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  border: 2px solid var(--hm-sinal-fundo);
  color: var(--hm-sinal-num);
  font-size: calc(12 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  background: var(--hm-sinal-cor);
}

.hm-sinal__titulo {
  width: calc(194 * var(--lt-u));
  color: var(--black);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

/*
 * Sempre em duas linhas: a frase mais curta mede 17 em e a mais longa 21, então
 * um teto de 13,5 em quebra todas uma vez só, e o balance divide por igual. A
 * maiúscula é só visual (::first-letter): para o leitor de tela a frase segue
 * a do cartão ("Você cria, mas…").
 */
.hm-sinal__texto {
  flex: 1 1 0;
  min-width: 0;
  max-width: 13.5em;
  color: var(--gray-200);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
  text-wrap: balance;
}

.hm-sinal__texto::first-letter {
  text-transform: uppercase;
}

/* ==========================================================================
   5. Caixa de ferramentas — sobre o desenho do Bônus do curso
   ========================================================================== */
.hm-tools {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

/* Seção cinza: o chip vai a branco — cinza sobre cinza sumia. */
.hm-tools .lt-label {
  background: var(--white);
}

.hm-tools__inner {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--lt-u));
}

.hm-tools__head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  align-items: end;
}

.hm-tools__title {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

.hm-tools h2 {
  /* Exceção pedida pelo usuário: aqui três linhas, para acompanhar a altura do bloco da direita. */
  max-width: calc(620 * var(--lt-u));
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.hm-tools h2 em,
.hm-course h2 em {
  color: var(--blue);
  font-style: normal;
}

.hm-tools h2 em { color: var(--hm-caixa); }

.hm-tools__aside {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 * var(--lt-u));
}

.hm-tools__aside p {
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.hm-tools__aside .lt-btn {
  align-self: stretch;
}

.hm-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
}

.hm-tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ink);
}

.hm-tool__media {
  position: relative;
  /* A mesma altura do cartão de bônus do curso, para valer o mesmo enquadramento. */
  height: round(calc(320 * var(--lt-u)), 1px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hm-tool__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  /* Fotos verticais em cartão deitado: cada cartão diz onde ancorar o corte (HTML). */
  object-position: center var(--hm-tool-foco, 50%);
}

/* Aba com o canto chanfrado: uma forma só, cortada por `clip-path`. */
.hm-tool__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%);
}

.hm-tool__body {
  position: relative;
  margin-top: -2px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(16 * var(--lt-u));
  min-height: calc(180 * var(--lt-u));
  padding: calc(16 * var(--lt-u));
  background: var(--ink);
}

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

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

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

/* ==========================================================================
   6. Cursos e formações — Fundamentos do Design
   ========================================================================== */
.hm-course {
  position: relative;
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background-color: var(--blue);
  background-image: url("./assets/texture-plus-wide.svg");
  background-size: calc(25.4 * var(--lt-u)) calc(25.4 * var(--lt-u));
}

.hm-course__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
}

.hm-course__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
  min-width: 0;
  padding: calc(48 * var(--lt-u));
  background: var(--white);
}

.hm-course h2 {
  max-width: none;
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.hm-course__lead {
  max-width: calc(520 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.hm-proof {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  column-gap: calc(28 * var(--lt-u));
  row-gap: calc(16 * var(--lt-u));
  margin: calc(8 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

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

.hm-proof img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
  flex: 0 0 auto;
}

.hm-proof span {
  color: var(--gray-700);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1.2;
}

.hm-course__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--lt-u));
  margin-top: calc(8 * var(--lt-u));
}

.hm-course__soon {
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.5;
}

.hm-course__photo {
  position: relative;
  min-height: calc(480 * var(--lt-u));
  overflow: hidden;
  background: var(--gray-700);
}

.hm-course__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}

.hm-course__mark {
  position: absolute;
  top: calc(20 * var(--lt-u));
  left: calc(20 * var(--lt-u));
  width: calc(144 * var(--lt-u));
  height: calc(40 * var(--lt-u));
  padding: calc(8 * var(--lt-u)) calc(10 * var(--lt-u));
  box-sizing: content-box;
  background: var(--white);
}

/* ==========================================================================
   7. Mentoria — vitrine de produto, como o curso (espelhada)
   ========================================================================== */
/*
 * A mentoria é produto, como o curso e a caixa: ganha a vitrine do curso, com a
 * foto (e o logo da Mentoria) à esquerda e o painel à direita. Fundo branco (o
 * curso, logo antes, já é azul: dois fundos de cor seguidos pesavam) e, no pé,
 * uma faixa do xadrez de retângulos altos da marca (1:4, Figma 475:9137) em
 * vermelho e branco chapados. Só a mentoria individual por enquanto: o cartão
 * da mentoria em grupo fica oculto no HTML.
 */
.hm-mentoring {
  --lt-focus: var(--red);
  --lt-link-hover: var(--red);
  --lt-dark-hover-bg: var(--red);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
  --hm-casa: calc(12 * var(--lt-u));
  --hm-faixa: calc(72 * var(--lt-u));
  position: relative;
  padding: calc(88 * var(--lt-u)) var(--lt-gutter) calc(88 * var(--lt-u) + var(--hm-faixa));
  background: var(--white);
}

.hm-mentoring::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--hm-faixa);
  background: repeating-conic-gradient(var(--red) 0 25%, var(--white) 0 50%) 0 0 / calc(2 * var(--hm-casa)) calc(8 * var(--hm-casa));
}

.hm-mentoring__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

.hm-mentoring__photo {
  position: relative;
  min-height: calc(440 * var(--lt-u));
  overflow: hidden;
  background: var(--gray-700);
}

.hm-mentoring__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O rosto, no terço de cima da foto, fica no meio da coluna estreita. */
  object-position: 62% 40%;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-mentoring__photo:hover .hm-mentoring__img {
  transform: scale(1.04);
}

/* Logo da Mentoria num selo branco, como o do curso na foto da caixa. */
.hm-mentoring__mark {
  position: absolute;
  top: calc(20 * var(--lt-u));
  left: calc(20 * var(--lt-u));
  width: calc(151 * var(--lt-u));
  height: calc(40 * var(--lt-u));
  padding: calc(8 * var(--lt-u)) calc(10 * var(--lt-u));
  box-sizing: content-box;
  background: var(--white);
}

/* Painel cinza sobre o branco (a cor separa, sem contorno); o cartão dentro é branco. */
.hm-mentoring__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 * var(--lt-u));
  min-width: 0;
  padding: calc(48 * var(--lt-u));
  background: var(--gray-100);
}

.hm-mentoring .lt-label {
  background: var(--white);
}

.hm-mentoring h2 {
  max-width: none;
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.hm-mentoring__lead {
  max-width: calc(560 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.hm-mentoring__grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr; /* os dois cartões com a mesma altura */
  gap: calc(12 * var(--lt-u));
  align-self: stretch;
  margin-top: calc(8 * var(--lt-u));
}

/* Modalidade oculta (a mentoria em grupo, por enquanto). */
.hm-mentor[hidden] {
  display: none;
}

/* Cartão: ícone + nome, lista em duas colunas, botão na largura toda. */
.hm-mentor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "cabeca"
    "lista"
    "botao";
  align-content: start;
  row-gap: calc(18 * var(--lt-u));
  padding: calc(28 * var(--lt-u));
  background: var(--white);
}

.hm-mentor__cabeca {
  grid-area: cabeca;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--lt-u));
}

.hm-mentor ul {
  grid-area: lista;
}

.hm-mentor .lt-btn {
  grid-area: botao;
}

.hm-mentor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: calc(40 * var(--lt-u));
  height: calc(40 * var(--lt-u));
  background: var(--red);
}

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

.hm-mentor--group .hm-mentor__icon img {
  width: calc(15 * var(--lt-u));
  height: calc(15 * var(--lt-u));
}

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

.hm-mentor ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(6 * var(--lt-u)) calc(24 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-mentor li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  color: var(--ink);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.hm-mentor li img {
  width: calc(13 * var(--lt-u));
  height: calc(12 * var(--lt-u));
  flex: 0 0 auto;
}

.hm-mentor .lt-btn {
  gap: calc(24 * var(--lt-u));
  justify-content: space-between;
}

/* Cartão estreito (celular): lista numa coluna e texto do botão pode quebrar. */
@container (max-width: 560px) {
  .hm-mentor ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-mentor .lt-btn {
    white-space: normal;
    text-align: left;
  }
}

/* ==========================================================================
   8. Depoimentos — a mesma seção da página do curso
   ========================================================================== */
.hm-testimonials {
  --hm-depo-margem: var(--lt-gutter);
  --hm-depo-card: calc(800 * var(--lt-u));
  display: grid;
  grid-template-columns: var(--hm-depo-margem) minmax(0, 1fr) auto var(--hm-depo-margem);
  grid-template-areas:
    ".     head  nav   ."
    "track track track track";
  row-gap: calc(56 * var(--lt-u));
  padding-block: calc(120 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(ellipse 55% 80% at 28% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
    var(--ink);
  background:
    radial-gradient(ellipse 55% 80% at 28% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
    color-mix(in srgb, var(--ink) 50%, var(--black));
}

.hm-testimonials__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
  padding-right: calc(32 * var(--lt-u));
}

.hm-testimonials .lt-label--dark {
  background: var(--black);
}

.hm-testimonials h2 {
  max-width: calc(900 * var(--lt-u));
  color: var(--white);
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.hm-testimonials__nav {
  grid-area: nav;
  align-self: end;
}

.hm-testimonials__track {
  grid-area: track;
  container-type: inline-size;
}

.hm-testimonials .lt-carousel {
  gap: calc(24 * var(--lt-u));
  padding-inline: var(--hm-depo-margem);
  scroll-padding-inline: var(--hm-depo-margem);
  padding-bottom: 0;
}

.hm-testimonial {
  flex: 0 0 var(--hm-depo-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(280 * var(--lt-u));
  column-gap: calc(48 * var(--lt-u));
  padding: calc(49 * var(--lt-u)) calc(41 * var(--lt-u));
  background: var(--black);
}

.hm-testimonial__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
  margin: 0;
  padding-top: calc(12 * var(--lt-u));
}

.hm-testimonial__quote {
  margin: 0;
}

.hm-testimonial__quote p {
  color: var(--white);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.hm-testimonial__person {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--lt-u));
}

.hm-testimonial__avatar {
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  flex: 0 0 auto;
  object-fit: cover;
}

.hm-testimonial__name,
.hm-testimonial__role {
  display: block;
  line-height: 1.5;
}

.hm-testimonial__name {
  color: var(--white);
  font-size: calc(16 * var(--lt-u));
  font-weight: 700;
}

.hm-testimonial__role {
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
}

.hm-testimonial__media {
  position: relative;
  display: block;
  height: calc(373 * var(--lt-u));
  color: var(--white);
}

.hm-testimonial__thumb {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--gray-700);
}

.hm-testimonial__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-testimonial__play {
  position: absolute;
  top: 50%;
  left: calc(-32 * var(--lt-u));
  display: grid;
  place-items: center;
  width: calc(64 * var(--lt-u));
  height: calc(64 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  border-radius: 50%;
  translate: 0 -50%;
  transition: background-color 160ms ease, color 160ms ease;
}

.hm-testimonial__play svg {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
  translate: calc(2 * var(--lt-u)) 0;
}

.hm-testimonial__media:hover .hm-testimonial__thumb img,
.hm-testimonial__media:focus-visible .hm-testimonial__thumb img {
  transform: scale(1.04);
}

.hm-testimonial__media:hover .hm-testimonial__play,
.hm-testimonial__media:focus-visible .hm-testimonial__play {
  background: var(--lt-accent);
}

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

/* ==========================================================================
   9. CTA sazonal — 1º Festival Leiautar
   ========================================================================== */
/*
 * Banner: a seção é branca e o desenho do Festival mora num cartão com a
 * largura da coluna (1216), mais baixo e com tudo em escala menor.
 */
/*
 * Fundo preto com as linhas diagonais finas da marca (composição 293:9390), numa
 * só direção — sem cruzamento, cor chapada —, em grafite um tom acima do preto.
 * O banner rosa e amarelo do Festival salta sobre ele.
 */
.hm-seasonal {
  padding: calc(120 * var(--lt-u)) var(--lt-gutter);
  /* Traço de 1px (fixo, não escala) a cada 8u: fino e bem junto. */
  background: repeating-linear-gradient(-45deg, var(--black) 0 calc(8 * var(--lt-u) - 1px), var(--ink) calc(8 * var(--lt-u) - 1px) calc(8 * var(--lt-u)));
}

.hm-seasonal__banner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(440 * var(--lt-u));
  padding: calc(24 * var(--lt-u)) calc(28 * var(--lt-u)) calc(36 * var(--lt-u));
  background-color: var(--pink-light);
  background-image: url("./assets/bg-header.svg");
  background-position: center center;
  background-size: calc(3600 * var(--lt-u)) auto;
  background-repeat: repeat-x;
}

/* Linha de cima, como o cabeçalho do Festival: fatos no meio, selo à direita. */
.hm-seasonal__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: calc(24 * var(--lt-u));
}

.hm-seasonal__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
  grid-column: 2;
}

.hm-seasonal__facts li {
  padding: calc(10 * var(--lt-u)) calc(14 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hm-seasonal__seal {
  grid-column: 3;
  justify-self: end;
  width: calc(60 * var(--lt-u));
  height: auto;
}

/* Centro: o logo do Festival no lugar do título escrito (o texto fica para leitores de tela). */
.hm-seasonal__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--lt-u));
  padding-block: calc(20 * var(--lt-u)) 0;
  text-align: center;
}

.hm-seasonal h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--lt-u));
}

.hm-seasonal__kicker {
  font-size: calc(28 * var(--lt-u));
  line-height: 0.9;
}

.hm-seasonal__logo {
  display: block;
  width: min(calc(420 * var(--lt-u)), 100%);
  height: auto;
}

.hm-seasonal__tagline {
  color: var(--black);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.2;
}

/* O botão fecha o bloco central, logo abaixo da frase. */
/* No banner rosa e amarelo o hover amarelo do botão preto sumiria: vira branco. */
.hm-seasonal__center .lt-btn {
  --lt-dark-hover-bg: var(--white);
  --lt-dark-hover-ink: var(--black);
  --lt-dark-hover-icon: none; /* a seta já segue a cor do texto (máscara): sem inverter */
  margin-top: calc(8 * var(--lt-u));
}

/* ==========================================================================
   10. Conteúdos
   ========================================================================== */
.hm-articles {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

/* Seção cinza: chip e cartões em branco. */
.hm-articles .lt-label {
  background: var(--white);
}

.hm-articles__inner {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--lt-u));
}

.hm-articles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
}

.hm-articles__head > div {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

.hm-articles h2 {
  max-width: calc(860 * var(--lt-u));
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.hm-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
}

/* Filete rosa da paleta, como nos cartões de artigo do blog. */
.hm-article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border-bottom: calc(5 * var(--lt-u)) solid var(--pink-light);
}

.hm-article__media {
  display: block;
  height: round(calc(240 * var(--lt-u)), 1px);
  overflow: hidden;
  background: var(--gray-400);
}

.hm-article__media img {
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
}

.hm-article__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  padding: calc(24 * var(--lt-u));
}

.hm-article__cat {
  color: var(--gray-600);
  font-family: var(--lt-mono);
  font-size: calc(11 * var(--lt-u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hm-article__title {
  color: var(--ink);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

/* Assinatura: foto, autora e, embaixo, data e tempo de leitura. */
.hm-article__byline {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  margin-top: auto;
  padding-top: calc(14 * var(--lt-u));
}

.hm-article__byline img {
  width: calc(36 * var(--lt-u));
  height: calc(36 * var(--lt-u));
  flex: 0 0 auto;
  object-fit: cover;
}

.hm-article__who {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--lt-u));
  min-width: 0;
}

.hm-article__author {
  color: var(--ink);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.hm-article__meta {
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.3;
}

/*
 * Rodapé da seção, no formato do rodapé dos bônus do curso: botão cheio na 1ª
 * coluna e a faixa de chevrons na 3ª. Na camada institucional o botão é
 * vermelho com texto branco; no hover vai ao preto.
 */
.hm-articles__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  align-items: stretch;
}

.hm-articles__cta {
  grid-column: 1;
  color: var(--white);
  background: var(--red);
}

.hm-articles__cta img {
  filter: brightness(0) invert(1);
}

.hm-articles__cta:hover {
  color: var(--white);
  background-color: var(--black);
}

.hm-articles__foot .lt-chevrons {
  grid-column: 3;
}

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

/* ==========================================================================
   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) {
  /*
   * Reconhecimento: abaixo de 1280 a coluna não comporta cartão + texto ao
   * lado do painel. O painel vai para cima (título e texto lado a lado) e os
   * sinais descem logo abaixo, sem invadir: aqui o texto de cada sinal fica ao
   * lado do cartão e seria cortado pela borda do painel.
   */
  .hm-signals__inner {
      flex-direction: column;
      gap: 24px;
    }

  .hm-signals__panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: end;
      flex-basis: auto;
      margin: 0;
      padding: 64px 48px;
    }

  .hm-signals__list {
      padding: 0;
    }

  .hm-tools__head {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .hm-tools__title {
      grid-column: 1;
    }

  .hm-tools__aside {
      grid-column: 2;
    }

  /* Notebook: foto mais estreita, painel mais largo — lado a lado, sem crescer em altura. */
  .hm-mentoring__inner {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

  .hm-mentoring__panel {
      padding: 40px;
    }

  /* Na coluna do notebook o título de 64 ia a três linhas: 52 fecha em duas. */
  .hm-mentoring h2 {
      font-size: 52px;
    }

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

  .hm-proof {
      grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 980px) {
  /* --- Hero --------------------------------------------------------- */
  .hm-hero {
      gap: 48px;
      padding: 64px 48px 40px;
    }

  .hm-hero__lead {
      font-size: 16px;
    }

  .hm-manifesto-video {
      --hm-meia-midia: calc(100% * 10 / 32);
    }

  .hm-manifesto-video__media {
      aspect-ratio: 16 / 10;
    }

  .hm-manifesto-video__play {
      width: 64px;
      height: 64px;
    }

  .hm-manifesto-video__caption {
      display: none;
    }

  /* --- Tese ---------------------------------------------------------- */
  .hm-thesis__inner {
      padding: 80px 48px 0;
    }

  .hm-thesis h2 {
      font-size: clamp(48px, 10.5vw, 90px);
    }

  .hm-thesis__body {
      gap: 64px;
      margin-top: 32px;
    }

  /* --- Jornada ------------------------------------------------------- */
  .hm-journey__inner,
    .hm-tools,
    .hm-articles,
    .hm-course {
      padding-block: 80px;
    }

  /* Mentoria: o padding de baixo inclui a faixa de xadrez do pé. */
  .hm-mentoring {
      --hm-faixa: 64px;
      padding-block: 80px calc(80px + var(--hm-faixa));
    }

  .hm-journey h2,
    .hm-tools h2,
    .hm-mentoring h2,
    .hm-articles h2,
    .hm-course h2,
    .hm-testimonials h2 {
      max-width: none;
      font-size: clamp(40px, 8.4vw, 64px);
    }

  .hm-journey__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

  .hm-step__top {
      min-height: 96px;
    }

  /* --- Reconhecimento ------------------------------------------------ */
  .hm-signals {
      padding: 96px 48px;
    }

  .hm-signals__panel {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

  /* --- Caixa de ferramentas ---------------------------------------- */
  .hm-tools__head {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

  .hm-tools__aside {
      grid-column: 1;
    }

  .hm-tools__aside .lt-btn {
      align-self: flex-start;
    }

  .hm-tools__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

  /* --- Curso ---------------------------------------------------------- */
  .hm-course__inner {
      grid-template-columns: minmax(0, 1fr);
    }

  .hm-course__panel {
      order: 2;
      padding: 40px;
    }

  .hm-course__photo {
      order: 1;
      min-height: 0;
      aspect-ratio: 16 / 9;
    }

  .hm-proof {
      grid-template-columns: repeat(2, auto);
      column-gap: 32px;
    }

  /* --- Mentoria: foto em cima (16:9), painel embaixo, como o curso ---- */
  .hm-mentoring__inner {
      grid-template-columns: minmax(0, 1fr);
    }

  .hm-mentoring__photo {
      min-height: 0;
      aspect-ratio: 16 / 9;
    }

  /* --- Depoimentos: cartão em px, miniatura de 240x320 --------------- */
  .hm-testimonials {
      --hm-depo-margem: 48px;
      --hm-depo-card: min(680px, calc(100cqw - 96px));
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      grid-template-areas:
        ".     head  ."
        "track track track"
        ".     nav   .";
      row-gap: 40px;
      padding-block: 80px;
    }

  .hm-testimonials__head {
      padding-right: 0;
    }

  .hm-testimonials__nav {
      align-self: start;
    }

  .hm-testimonial {
      grid-template-columns: minmax(0, 1fr) 240px;
      column-gap: 32px;
      padding: 32px;
    }

  .hm-testimonial__media {
      height: 320px;
    }

  /* --- Sazonal, conteúdos, final -------------------------------------- */
  /* Sazonal empilhado: fatos à esquerda, selo à direita. */
  .hm-seasonal {
      padding-block: 80px;
    }

  .hm-seasonal__banner {
      min-height: 0;
      padding: 20px 20px 32px;
    }

  .hm-seasonal__top {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
    }

  .hm-seasonal__facts {
      grid-column: 1;
      justify-content: flex-start;
    }

  .hm-seasonal__seal {
      grid-column: 2;
    }

  .hm-seasonal__center {
      padding-block: 32px 0;
    }

  .hm-articles__head {
      flex-direction: column;
      align-items: flex-start;
    }

  .hm-articles__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

  .hm-articles__foot {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

  .hm-articles__foot .lt-chevrons {
      grid-column: 1;
      justify-self: start;
    }

  .hm-article__media {
      height: 220px;
    }
}

/* --- Tablet estreito e celular: depoimento empilhado, foto em cima ----- */
@media (max-width: 699px) {
  .hm-testimonial {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 24px;
      padding: 24px;
    }

  .hm-testimonial__media {
      order: -1;
      height: auto;
      aspect-ratio: 4 / 3;
    }

  .hm-testimonial__play {
      top: auto;
      right: 16px;
      bottom: 16px;
      left: auto;
      translate: none;
    }

  .hm-testimonial__text {
      padding-top: 0;
    }
}

/* ==========================================================================
   Celular — 375 de largura, com as mesmas decisões da página do curso
   ========================================================================== */
@media (max-width: 620px) {
  .hm-tags {
      height: 36px;
    }

  .hm-tags__list li {
      margin-right: 12px;
      gap: 4px;
      font-size: 11px;
    }

  .hm-hero {
      gap: 32px;
      padding: 48px 24px 32px;
    }

  .hm-hero__lead {
      font-size: 15px;
    }

  .hm-hero__ctas {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

  .hm-hero__ctas .lt-btn {
      justify-content: space-between;
    }

  .hm-manifesto-video__tag img {
      width: 28px;
      height: 28px;
    }

  .hm-manifesto-video__tag span {
      font-size: 12px;
    }

  .hm-manifesto-video__play {
      width: 56px;
      height: 56px;
    }

  .hm-manifesto-video__bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
    }

  .hm-thesis__inner {
      padding: 64px 24px 0;
    }

  .hm-thesis h2 {
      font-size: clamp(44px, 14vw, 64px);
    }

  .hm-thesis__body {
      gap: 48px;
    }

  .hm-thesis__copy p {
      font-size: 16px;
    }

  .hm-journey__inner,
    .hm-tools,
    .hm-articles,
    .hm-course {
      padding-block: 64px;
    }

  /* Mentoria: o padding de baixo inclui a faixa de xadrez do pé. */
  .hm-mentoring {
      --hm-faixa: 48px;
      padding-block: 64px calc(64px + var(--hm-faixa));
    }

  .hm-journey h2,
    .hm-tools h2,
    .hm-mentoring h2,
    .hm-articles h2,
    .hm-course h2,
    .hm-testimonials h2 {
      font-size: clamp(36px, 11.5vw, 48px);
    }

  .hm-step__top {
      min-height: 72px;
    }

  .hm-step__card {
      margin: 8px;
      padding: 20px 16px;
    }

  /*
   * Celular: o painel sangra a tela e o texto de cada sinal desce para baixo
   * do cartão — aí os cartões voltam a invadir o painel (48 por cima da borda).
   */
  .hm-signals {
      padding: 72px 0;
    }

  .hm-signals__inner {
      gap: 0;
    }

  .hm-signals__panel {
      padding: 48px 24px 96px;
    }

  .hm-signals h2 {
      font-size: 40px;
    }

  .hm-signals__list {
      gap: 32px;
      margin-top: -48px;
      padding: 0 16px;
    }

  .hm-sinal {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

  .hm-sinal__card {
      gap: 16px;
      padding: 12px;
    }

  .hm-sinal__titulo {
      width: auto;
      font-size: 18px;
    }

  .hm-sinal__texto {
      padding-inline: 8px;
      font-size: 15px;
    }

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

  .hm-tool__media {
      height: 200px;
    }

  .hm-tools__aside .lt-btn {
      align-self: stretch;
    }

  .hm-course__panel {
      padding: 32px 24px;
    }

  .hm-course__ctas {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

  .hm-course__mark {
      width: 108px;
      height: 30px;
      padding: 6px 8px;
    }

  .hm-mentoring__panel {
      padding: 32px 24px;
    }

  .hm-mentoring__mark {
      width: 113px;
      height: 30px;
      padding: 6px 8px;
    }

  .hm-mentor {
      padding: 24px;
    }

  .hm-testimonials {
      --hm-depo-margem: 24px;
      --hm-depo-card: calc(100cqw - 48px);
      grid-template-columns: 24px minmax(0, 1fr) 24px;
      padding-block: 64px;
    }

  .hm-seasonal__tagline {
      font-size: 17px;
    }
}

/* Com preferência por menos movimento, nada gira nem corre. */
@media (prefers-reduced-motion: reduce) {
  .hm-tags__track,
    .lt-final__seal {
      animation: none;
    }

  .lt-btn img,
    .lt-textlink img,
    .hm-step::before,
    .hm-tool__media img,
    .hm-article__media img,
    .hm-manifesto-video__thumb img,
    .hm-testimonial__thumb img {
      transition: none;
    }
}