/* ==========================================================================
   victoou.com — home.css   (escopo .page-home)
   Ordem vertical: hero · about · last-drops · my-services · clients ·
   faq · work-toghether · footer
   As alturas do Figma entram como min-height: o conteúdo define a altura real.
   ========================================================================== */

/* ==================================================== HERO (886px) ======= */
.page-home .hero {
  position: relative;
  /* acompanha a altura do monitor, com o valor do arquivo como referência
     mínima em telas muito baixas */
  min-height: min(886px, 100svh);
  height: 100svh;
  max-height: 1100px;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* o jpg exportado do Figma entra na frente; o SVG listrado é o fallback
     enquanto o arquivo não existe */
  overflow: hidden;
}
/* a imagem vive numa camada própria: entra com zoom in e opacidade 0 → 100 */
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/hero-home.webp');
  background-size: auto 88%;   /* ajusta pela altura: foto centralizada, laterais em preto */
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg);
  animation: hero-zoom 2.2s var(--ease) both;
}
/* gradiente escuro dissolvendo as bordas da foto no fundo preto */
.page-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(0, 0, 0, 0.55) 14%, rgba(0, 0, 0, 0) 32%,
                    rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.55) 86%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 22%,
                    rgba(0, 0, 0, 0) 72%, var(--bg) 100%);
}
@keyframes hero-zoom {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}
/* entrada suave do conteúdo, um pouco depois do fundo */
.page-home .hero__center,
.page-home .hero__bottom { animation: hero-rise 1.2s var(--ease) .25s both; }
/* VICTOOU sobe por 3s, revelado por uma máscara na base da linha */
.page-home .hero__wordmark { clip-path: inset(0 -6% 0 -6%); }
.page-home .hero__wordmark span {
  display: inline-block;
  padding-right: 0.12em;   /* devolve o avanço que o tracking negativo tira do último glifo */
  animation: wordmark-rise 3s var(--ease) .3s both;
}
@keyframes wordmark-rise {
  from { opacity: 0; transform: translateY(0.42em); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.page-home .hero__bg { display: none; }

.page-home .hero__center {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(96px, 22svh, 260px) 0 0;
  container-type: inline-size;
}

.page-home .hero__phrase {
  margin-bottom: 5px;
  font-weight: var(--w-bold);
  font-size: var(--fs-p-27);
  line-height: var(--lh-p);
  text-transform: uppercase;
  color: var(--accent);
}

/* o corpo do wordmark é derivado do espaço real, com 252px como teto */
.page-home .hero__wordmark span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: min(var(--fs-wordmark-hero), 19cqw);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-wordmark);
  padding-right: 0.12em;   /* devolve o espaço que o tracking negativo tira do U */
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* fica logo abaixo do wordmark, +5px de respiro */
.page-home .hero__bottom { position: relative; margin: 4px 0 auto; }
/* a linha usa a mesma régua do wordmark: --wordmark-w é medido em main.js,
   então começa e termina exatamente onde o V e o U começam e terminam */
.page-home .hero__bottom .container {
  width: min(var(--wordmark-w, 1056px), 100% - 64px);
  padding-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.page-home .hero__note {
  flex: 1;            /* laterais de igual largura mantêm o logotipo no centro exato */
  font-weight: var(--w-bold);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--accent);
}
.page-home .hero__note:last-of-type { text-align: right; }
.page-home .hero__logo {
  position: relative;
  width: var(--logo-hero);
  height: var(--logo-hero);
  overflow: hidden;
  flex: none;
}
.page-home .hero__logo .img-ph { height: 100%; }
.page-home .hero__logo .logo-mark { width: var(--logo-hero); height: var(--logo-hero); }
/* no hero ele é vermelho, como o wordmark; a versão branca aparece no header
   fixo quando rolamos para baixo */
.page-home .hero__logo .logo-mark { opacity: 0; }
.page-home .hero__logo .logo-mark--hover { opacity: 1; }

/* =================================================== ABOUT (900px) ======= */
.page-home .about {
  /* trilha alta em fluxo normal: o bloco interno é que fica preso.
     Nada de flex/centering aqui — era isso que empurrava o conteúdo para o
     meio da trilha em vez de prendê-lo no topo. */
  display: block;
  min-height: 150svh;
}
/* o eyebrow fica junto do texto, não no extremo do container */
.page-home .about__inner {
  position: sticky;
  isolation: isolate;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.page-home .about__eyebrow {
  position: absolute;
  right: calc(50% + 313.5px + 24px);   /* metade da largura do parágrafo + folga */
  color: var(--text-soft);
  flex: none;
  white-space: nowrap;
}
.page-home .about__phrase {
  width: 627px;
  max-width: 100%;
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-manifesto);
  color: var(--text-soft);
}
/* reveal por scroll: cada palavra acende para --text quando o JS marcar .is-lit */
.page-home .about__word {
  color: var(--text-dimmer);
  transition: color .6s var(--ease);
}
.page-home .about__word.is-lit { color: var(--text); }

/* ============================================== LAST-DROPS (1142px) ====== */
.page-home .last-drops {
  min-height: 1142px;
  padding: 49px 0 66px;
  /* a trilha de 882px é centralizada na janela; tudo se alinha a ela */
  --track-w: var(--card-carousel-w);
  --track-edge: max(0px, calc(50% - var(--track-w) / 2));
}
.page-home .last-drops > .container { position: relative; }

/* cabeçalho recuado 70px à direita da borda da trilha, com 742px de largura */
.page-home .last-drops__head {
  width: 742px;
  max-width: 100%;
  margin-inline: auto;   /* centralizado, como a trilha do carrossel */
}
.page-home .last-drops__title {
  display: flex;
  flex-direction: column;
  /* as linhas alinham à esquerda dentro de uma caixa do tamanho do conjunto,
     e é essa caixa que fica centralizada — assim o recuo de DROPS não desloca
     o centro ótico, e o parágrafo abaixo cai na mesma régua */
  align-items: flex-start;
  width: fit-content;
  margin-inline: auto;
  font-weight: var(--w-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}
/* cada linha é uma caixa do tamanho do texto, com o eyebrow ancorado ao lado
   da palavra — não na borda do bloco */
.page-home .last-drops__line {
  position: relative;
  display: block;
  width: fit-content;
}
.page-home .last-drops__line--indent { margin-left: 130px; }
.page-home .last-drops__eyebrow-right {
  position: absolute;
  left: calc(100% + 14px);
  top: 0.16em;
  color: var(--text-eyebrow);
  white-space: nowrap;
}
.page-home .last-drops__eyebrow {
  position: absolute;
  right: calc(100% + 18px);
  top: 0.42em;
  color: var(--text-eyebrow);
  white-space: nowrap;
}
.page-home .last-drops__copy {
  width: min(var(--drops-title-w, 480px), 100%);
  margin: 26px auto 0;
  font-size: var(--fs-ui-18);
  line-height: 1.28;
  text-align: justify;
  color: var(--text-soft);
}

/* carrossel de last-drops: o card do centro em foco, os vizinhos a 25% e
   desfocados, os demais fora de cena. Cada card é posicionado pela sua
   distância até o ativo, então a passagem é sempre da direita para a
   esquerda e o laço é infinito. */
.page-home .carousel { width: 100%; overflow: hidden; margin-top: 60px; }
.page-home .carousel__track {
  position: relative;
  height: var(--card-carousel-h);
}
.page-home .carousel__track > .project-card {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--card-carousel-w) / -2);
  /* --slot é a posição do card em relação ao ativo (-1, 0, 1, …) */
  transform: translateX(calc(var(--slot, 0) * (var(--card-carousel-w) + 22px)));
  opacity: 0;
  pointer-events: none;
  /* Só transform e opacity animam: são compostos na GPU. Antes o blur de
     11px também era animado em cards de 880px, e cada troca de card
     travava a página. O desfoque dos vizinhos continua, mas fixo. */
  transition: transform .9s var(--ease), opacity .9s var(--ease);
  will-change: transform, opacity;
}
/* vizinhos: visíveis, desfocados e sem clique */
.page-home .carousel__track > .project-card.is-side { opacity: 0.25; filter: blur(6px); }
/* o do centro é o único nítido e clicável */
.page-home .carousel__track > .project-card.is-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
/* a etiqueta "View project" só existe no card ativo */
.page-home .carousel__track > .project-card:not(.is-active) .project-card__cursor { display: none; }

.page-home .last-drops__controls {
  width: var(--track-w);
  max-width: 100%;
  margin-left: var(--track-edge);
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.page-home .carousel__arrows { display: flex; gap: 15px; }

/* ============================================= MY-SERVICES (1078px) ===== */
.page-home .my-services { padding: 80px 0 0; }
.page-home .my-services__head {
  display: flex;
  align-items: center;   /* apoio centralizado na altura do título */
  justify-content: center;
  gap: 28px;
}
.page-home .my-services__title {
  text-align: center;
  font-weight: var(--w-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}
/* cada linha sobe de baixo para cima, revelada por máscara */
.page-home .my-services__title span {
  display: block;
  overflow: hidden;
}
.page-home .my-services__title span::before { content: none; }
.page-home [data-reveal-head] .my-services__title span {
  opacity: 0;
  transform: translateY(0.34em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.page-home [data-reveal-head] .my-services__title span:nth-child(2) { transition-delay: .12s; }
.page-home [data-reveal-head].is-in .my-services__title span { opacity: 1; transform: none; }
/* textos de apoio entram só em fade */
.page-home .my-services__eyebrow {
  text-align: center;
  color: var(--text-eyebrow);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.1s var(--ease) .28s;
}
.page-home [data-reveal-head].is-in .my-services__eyebrow { opacity: 1; }

.page-home .my-services__rows { margin-top: 44px; margin-bottom: 0; }

/* fileiras full-bleed, bordas coladas sem dobrar o traço.
   No hover a fileira expande de 170 para 367px, ganha o gradiente radial e
   troca o conteúdo fechado pelo aberto — os textos entram de baixo para cima,
   com a mesma curva do resto do site. */
.page-home .service-row {
  position: relative;
  width: 100%;
  height: 170px;
  margin-top: -1px;
  border: 1px solid var(--stroke-row);
  display: grid;
  align-items: center;
  overflow: hidden;
  transition: height .8s var(--ease), border-color .6s var(--ease);
}
.page-home .service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1090px 400px at 50% 108%,
    var(--accent-grad-1) 0%, var(--accent-grad-2) 34%, var(--bg) 82%);
  opacity: 0;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.page-home .service-row__inner { grid-area: 1 / 1; position: relative; }
.page-home .service-row__expanded {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.page-home .service-row__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.page-home .service-row__title,
.page-home .service-row__link { display: flex; align-items: center; }
.page-home .service-row--reverse .service-row__inner { flex-direction: row-reverse; }

.page-home .service-row__title {
  font-weight: var(--w-medium);
  font-size: var(--fs-display-72);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-row);
  transition: color .6s var(--ease);
}
.page-home .service-row__link {
  font-family: var(--font-util);
  font-size: var(--fs-row-link);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-row-link);
  transition: color .6s var(--ease);
}

/* conteúdo aberto: presente no HTML, revelado no hover */
.page-home .service-row__expanded {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.page-home .service-row__expanded > * {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.page-home .service-row__expanded > *:nth-child(2) { transition-delay: .09s; }
.page-home .service-row__expanded > *:nth-child(3) { transition-delay: .17s; }

/* --- aberto: hover, foco por teclado ou data-expanded pelo dashboard --- */
.page-home .service-row:hover,
.page-home .service-row:focus-within,
.page-home .service-row[data-expanded="true"] {
  height: 367px;
  border-color: var(--stroke-row-open);
  z-index: 1;
}
.page-home .service-row:hover::before,
.page-home .service-row:focus-within::before,
.page-home .service-row[data-expanded="true"]::before { opacity: 1; }

.page-home .service-row:hover .service-row__inner,
.page-home .service-row:focus-within .service-row__inner,
.page-home .service-row[data-expanded="true"] .service-row__inner {
  opacity: 0;
  transform: translateY(-0.3em);
  pointer-events: none;
}
.page-home .service-row:hover .service-row__expanded,
.page-home .service-row:focus-within .service-row__expanded,
.page-home .service-row[data-expanded="true"] .service-row__expanded {
  opacity: 1;
  pointer-events: auto;
}
.page-home .service-row:hover .service-row__expanded > *,
.page-home .service-row:focus-within .service-row__expanded > *,
.page-home .service-row[data-expanded="true"] .service-row__expanded > * {
  opacity: 1;
  transform: none;
}

.page-home .service-row__expanded-title {
  font-weight: var(--w-bold);
  font-size: var(--fs-display-72);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text);
}
.page-home .service-row__expanded-copy {
  width: 428px;   /* 570 no arquivo, convertido para a referência de 1920 */
  max-width: 100%;
  font-weight: var(--w-regular);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-cta);   /* mesmo respiro dos parágrafos do site */
  color: var(--text);
}
.page-home .service-row__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin-top: 13px;   /* 41px do arquivo, descontado o gap da coluna */
  max-width: var(--container);
}
.page-home .subtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  background: var(--accent-deep-soft);
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--text);
}

/* ================================================= CLIENTS (937px) ====== */
.page-home .clients { padding: 110px 0; }
.page-home .clients__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
}
.page-home .clients__intro { width: 415px; flex: none; }
/* o eyebrow fica acima da frase, como no arquivo */
.page-home .clients__eyebrow { color: var(--text-eyebrow); }
/* entrada por linhas: cada linha desce em fade, em cascata */
.page-home [data-reveal-lines] .l {
  display: inline;
  opacity: 0;
  transform: translateY(-0.45em);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.page-home [data-reveal-lines].is-in .l { opacity: 1; transform: none; }
.page-home [data-reveal-lines].is-in .clients__eyebrow .l:nth-child(3) { transition-delay: .08s; }
.page-home [data-reveal-lines].is-in .clients__phrase .l:nth-child(1) { transition-delay: .18s; }
.page-home [data-reveal-lines].is-in .clients__phrase .l:nth-child(2) { transition-delay: .28s; }
.page-home [data-reveal-lines].is-in .clients__phrase .l:nth-child(3) { transition-delay: .38s; }
.page-home [data-reveal-lines].is-in .clients__phrase .l:nth-child(4) { transition-delay: .48s; }
.page-home .clients__phrase {
  margin-top: 24px;
  font-weight: var(--w-bold);
  font-size: var(--fs-manifesto);
  line-height: 1.06;          /* 0,957 apertava demais em quatro linhas */
  letter-spacing: var(--ls-manifesto);
  text-wrap: pretty;          /* evita palavra órfã na última linha */
  color: var(--text-soft);
}

.page-home .clients__col { min-width: 0; }
.page-home .clients {
  /* medidas do cartão de cliente num lugar só: a caixa travada precisa caber
     o nome, que cresce com a tela */
  --client-photo-h: 552px;
  --client-text-h: 118px;
  --client-card-h: calc(var(--client-photo-h) + var(--client-text-h));
}
.page-home .clients__carousel {
  margin-top: 0;
  overflow: hidden;
  height: var(--client-card-h);   /* trava a caixa: nada abaixo se move no hover */
}
/* dois visíveis por vez; os demais saem de cena em fade */
.page-home .clients__carousel .carousel__track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  width: max-content;
  height: 100%;            /* acompanha a janela travada, não --card-carousel-h */
  margin-right: auto;      /* trilha sempre encostada na borda esquerda da janela */
}
.page-home .client-container {
  width: 370px;
  min-height: var(--client-card-h);
  flex: none;
  transition: opacity .8s var(--ease);
}
.page-home .client-container.is-out { opacity: 0; }
/* saída: desaparece enquanto a fila desliza */
.page-home .client-container.is-leaving { opacity: 0; transition: opacity .9s var(--ease); }
/* entrada: aparece mais rápido que a saída */
.page-home .client-container.is-entering {
  opacity: 1;
  animation: client-in .34s var(--ease) both;
}
@keyframes client-in { from { opacity: 0; } to { opacity: 1; } }
.page-home .client-container__photo {
  position: relative;
  height: var(--client-photo-h);
  overflow: hidden;
  transition: height .7s var(--ease);
}
/* no hover a foto ganha a altura que o nome e o canal ocupavam */
.page-home .client-container:hover .client-container__photo,
.page-home .client-container:focus-within .client-container__photo { height: var(--client-card-h); }
.page-home .client-container__photo .img-ph { height: 100%; }
/* verso: no hover as métricas dão lugar ao depoimento */
.page-home .client-container__quote {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  padding: 30px 26px 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.page-home .client-container:hover .client-container__quote,
.page-home .client-container:focus-within .client-container__quote { opacity: 1; }
.page-home .client-container:hover .client-container__name,
.page-home .client-container:hover .client-container__channel,
.page-home .client-container:focus-within .client-container__name,
.page-home .client-container:focus-within .client-container__channel { opacity: 0; }
.page-home .client-container:hover .client-container__chips,
.page-home .client-container:focus-within .client-container__chips { opacity: 0; }
.page-home .client-container__rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: var(--surface-chip-2);
  border: 1px solid var(--stroke-chip);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 10px;
  font-weight: var(--w-medium);
  line-height: var(--lh-1);
  color: var(--text);
}
.page-home .client-container__star {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
}
.page-home .client-container__rating b {
  font-weight: var(--w-bold);
  font-size: var(--fs-p-19);
}
.page-home .client-container__rating i {
  font-style: normal;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
.page-home .client-container__text {
  font-weight: var(--w-regular);
  font-size: var(--fs-p-19);
  line-height: 1.32;
  color: var(--text);
}
.page-home .client-container__chips {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1;
  display: flex;
  gap: 10px;
  transition: opacity .5s var(--ease);
}
.page-home .client-chip {
  min-width: 136px;
  min-height: 38px;
  background: var(--surface-chip-2);
  border: 1px solid var(--stroke-chip);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-weight: var(--w-medium);
  font-size: var(--fs-p-19);
  line-height: var(--lh-1);
  color: var(--text);
}
.page-home .client-container__name {
  margin-top: 24px;
  transition: opacity .45s var(--ease);
  text-align: center;
  font-weight: var(--w-bold);
  font-size: var(--fs-client-name);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text);
}
.page-home .client-container__channel {
  margin-top: 10px;
  transition: opacity .45s var(--ease);
  text-align: center;
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-home .clients__progress {
  position: relative;
  width: 776px;
  max-width: 100%;
  height: 4px;
  margin-top: 48px;
  background: var(--surface-track);
}
.page-home .clients__progress span {
  position: absolute;
  top: -2px; left: 0;
  width: 138px;
  height: 7px;
  background: var(--accent);
  transition: transform .8s var(--ease);
}

/* =================================================== F.A.Q (850px) ====== */
.page-home .faq { min-height: 850px; }

/* foto do cliente: imagem real, recortada em cover */
.page-home .client-container__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* LEARN MORE é um link para /about-me: mantém o tratamento da fileira */
.page-home a.service-row__link { color: var(--text-row-link); text-decoration: none; }
.page-home .service-row:hover a.service-row__link,
.page-home .service-row:focus-within a.service-row__link { color: var(--text); }

/* ==========================================================================
   LATEST INSIGHTS — os três artigos mais recentes.
   O primeiro ocupa a coluna larga e as duas linhas; os outros dois ficam
   empilhados à direita. O cartão é o mesmo de /blog (blog.css), então título,
   tag e hover se comportam igual nas duas páginas.
   ========================================================================== */
.page-home .insights { padding: clamp(72px, 10svh, 120px) 0; }

.page-home .insights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 44px;
}
.page-home .insights__eyebrow { color: var(--text-eyebrow); }
.page-home .insights__title {
  margin-top: 14px;
  font-weight: var(--w-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-bright);
}
.page-home .insights__more { flex: none; }

/* Três cartões lado a lado, iguais no formato — como na referência. O mais
   recente vem primeiro; os dois anteriores seguem à direita. */
.page-home .insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.page-home .insights__grid .post-card__cover { aspect-ratio: 4 / 3; }
.page-home .insights__grid .post-card__title { font-size: 24px; }
.page-home .insights__grid .post-card__excerpt { -webkit-line-clamp: 3; }

@media (max-width: 1100px) {
  .page-home .insights__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 760px) {
  .page-home .insights__head { flex-direction: column; align-items: flex-start; gap: 24px; }
}
}

/* a seção de artigos não recorta os cartões: a etiqueta que segue o ponteiro
   pode passar da borda */
.page-home .insights__grid { overflow: visible; }
.page-home .insights__grid .post-card { overflow: visible; }

/* --------------------------------------------------------------------------
   LATEST INSIGHTS — o título desce de cima para baixo, em 3s, uma linha após
   a outra. A máscara por linha faz o texto surgir de dentro da própria caixa,
   como no wordmark do hero.
   -------------------------------------------------------------------------- */
/* Cada linha tem a sua própria máscara: o texto desce de dentro dela, sem
   fade — some atrás da borda em vez de esmaecer. */
.page-home .insights__title .l {
  display: block;
  overflow: hidden;
}
.page-home .insights__title .l > span {
  display: block;
  transform: translateY(-105%);
  transition: transform 2s var(--ease);
}
.page-home .insights__head.is-in .insights__title .l > span { transform: none; }
.page-home .insights__head.is-in .insights__title .l:nth-of-type(2) > span { transition-delay: .14s; }
/* o <br> entre as linhas deixa de ser necessário: cada .l já é um bloco */
.page-home .insights__title br { display: none; }