/* Seções da landing, na ordem da página. */

main { display: block; }
.section-head { display: grid; gap: var(--s-24); margin-bottom: var(--s-64); }
.section-head__title { max-width: 14ch; }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- 01 · Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: var(--header-h) 0 auto 0;
  height: 64svh;
  z-index: -2;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 20%;
  animation: hero-photo 1s var(--ease-hero) both;
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(13 13 13 / 0) 40%, var(--black) 98%);
}
/* Grão fino sobre a foto (SVG de ruído, estático) */
.hero::after,
.cta-final__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--s-24);
}
.hero__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
  color: var(--white);
}
.hero__body {
  align-self: end;
  display: grid;
  gap: var(--s-24);
  padding-top: 30svh;
}
@media (max-width: 479px) {
  .hero__top > :last-child { display: none; }
  .hero__mark { width: min(64%, calc(var(--fs-mega) * 3)); }
}
.hero__mark {
  width: min(100%, calc(var(--fs-mega) * 3));
  overflow: hidden;
}
.hero__mark svg {
  width: 100%;
  height: auto;
  color: var(--white);
  animation: mark-up 900ms var(--ease-spring) 100ms both;
}
.hero__title {
  max-width: 22ch;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  margin-top: var(--s-32);
  padding-top: var(--s-16);
  border-top: var(--border) solid var(--gray-800);
  color: var(--gray-600);
}
.hero__scroll { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; color: var(--white); }
.hero__scroll .icon { width: 12px; height: 12px; transform: rotate(90deg); }
/* Sequência de entrada (tempos da ValFX): rótulos 0,4/0,6 s, título 0,7 s, CTAs 0,9 s, rodapé 1,1 s */
.hero__enter { --d: 700ms; --rise: 10px; animation: hero-rise 500ms var(--ease-text) var(--d) both; }
.hero__top > .hero__enter:first-child { --d: 400ms; animation-timing-function: var(--ease-ui); }
.hero__top > .hero__enter:last-child { --d: 600ms; animation-timing-function: var(--ease-ui); }
.hero .btn-row.hero__enter { --d: 900ms; --rise: 8px; }
.hero__bottom.hero__enter { --d: 1100ms; --rise: 6px; }

@media (min-width: 1024px) {
  .hero__photo {
    inset: var(--header-h) 0 0 38%;
    height: auto;
  }
  .hero__photo img { object-position: 50% 15%; }
  .hero__photo::after {
    inset: 0 0 0 -2px;
    background:
      linear-gradient(to right, var(--black) 0%, var(--black) 2%, rgb(13 13 13 / 0) 35%),
      linear-gradient(to bottom, rgb(13 13 13 / 0.6) 0%, rgb(13 13 13 / 0) 18%),
      linear-gradient(to top, var(--black) 0%, rgb(13 13 13 / 0) 30%);
  }
  .hero__body { padding-top: var(--s-96); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s-48); }
  .hero__mark { grid-column: 1 / -1; }
  .hero__title { font-size: var(--fs-h3); }
}

/* Opacidade inicial 0.001 (e não 0): a foto continua candidata a LCP, como faz a ValFX. */
@keyframes hero-photo { from { opacity: 0.001; transform: scale(1.2); } }
@keyframes mark-up { from { opacity: 0.001; transform: translateY(170px); } }
@keyframes hero-rise { from { opacity: 0.001; transform: translateY(var(--rise)); } }

/* Hero "cortina" (desktop): o hero fica preso no topo, sobe a 0,1× da rolagem (o bloco de baixo a 0,17×)
   e some, enquanto as seções seguintes sobem por cima com borda reta. O JS (setupScrollEffects) escreve as variáveis. */
@media (min-width: 1024px) {
  .js .hero {
    position: sticky;
    top: 0;
    z-index: 0;
    transform: translate3d(0, var(--hero-y, 0px), 0);
    opacity: var(--hero-o, 1);
  }
  .js .hero__body { transform: translate3d(0, var(--hero-y2, 0px), 0); }
  .js .hero.is-covered { visibility: hidden; }
  .js main > :not(.hero) { position: relative; z-index: 1; }
}

/* ---------- 02 · Sobre ---------- */
.about__grid { row-gap: var(--s-48); }
.about__photo {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--black);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about__content { grid-column: 1 / -1; display: grid; gap: var(--s-32); align-content: start; }
.about__more .accordion__trigger { font-weight: 600; }
.about__more .accordion__panel p { padding-bottom: 0; color: var(--fg); }
.about__more .accordion__panel .prose { padding-bottom: var(--s-24); }
.about__quote { font-weight: 600; font-size: var(--fs-body-lg); line-height: 1.4; }
.about__facts { border-top: var(--border) solid var(--rule); }
.about__facts div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s-16);
  padding-block: var(--s-16);
  border-bottom: var(--border) solid var(--rule);
  font-size: var(--fs-small);
}
.about__facts dt { color: var(--fg-muted); }
.about__facts dd { font-weight: 500; }
@media (min-width: 768px) {
  .about__photo { grid-column: span 2; }
  .about__content { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .about__photo { grid-column: 1 / span 5; }
  .about__content { grid-column: 7 / span 6; padding-top: var(--s-32); }
}

/* ---------- 02b · Túnel 3D "VISUAL IMPACT" ----------
   Celular/tablet: título + mosaico estático das artes. Desktop: cena presa por ~2 telas; as artes vêm do fundo
   (z -1700 px) até passar pela câmera (z +500 px) conforme a rolagem. O JS (setupTunnel) escreve transform e opacity. */
.tunnel { position: relative; padding-block: var(--section-y); overflow: clip; }
.tunnel__sticky { position: relative; display: grid; justify-items: center; gap: var(--s-48); }
.tunnel__rings { display: none; }
.tunnel__title { text-align: center; display: grid; gap: var(--s-16); justify-items: center; }
.tunnel__kicker { color: var(--gray-600); }
.tunnel__h { font-size: calc(var(--fs-mega) * 0.62); }
.tunnel__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-12);
  width: min(100%, 520px);
}
.tunnel__card { border-radius: var(--radius-md); overflow: hidden; background: var(--gray-800); }
.tunnel__card:nth-child(odd) { transform: rotate(-3deg); }
.tunnel__card:nth-child(even) { transform: rotate(3deg); }
.tunnel__card img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.tunnel__prompt { display: none; }

@media (min-width: 1024px) {
  .tunnel { height: 300svh; padding-block: 0; }
  .tunnel__sticky {
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    display: block;
    overflow: hidden;
    perspective: 1200px;
    transform-style: preserve-3d;
  }
  .tunnel__rings { display: block; position: absolute; inset: 0; pointer-events: none; }
  .tunnel__rings span {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: var(--border) solid var(--gray-800);
    transform: translate(-50%, -50%);
  }
  .tunnel__rings span:first-child { width: 48vmin; height: 48vmin; }
  .tunnel__rings span:last-child { width: 76vmin; height: 76vmin; border-style: dashed; }
  .tunnel__title {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .tunnel__cards { position: absolute; inset: 0; width: auto; display: block; transform-style: preserve-3d; pointer-events: none; }
  .tunnel__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(160px, 15vw, 230px);
    opacity: 0;
    will-change: transform, opacity;
  }
  .tunnel__card:nth-child(n) { transform: translate3d(-50%, -50%, -1700px); }
  .tunnel__card img { transition: transform var(--dur-art-hover) var(--ease); }
  .tunnel__prompt {
    display: block;
    position: absolute;
    left: 50%;
    bottom: var(--s-32);
    transform: translateX(-50%);
    color: var(--gray-600);
  }
}

/* ---------- 03 · Portfólio ---------- */
.portfolio__feature {
  display: grid;
  gap: var(--s-32);
  margin-bottom: var(--s-96);
}
.portfolio__feature-text { display: grid; gap: var(--s-16); align-content: end; }
.portfolio__feature-num { font-size: var(--fs-h1); color: var(--fg); }
/* No celular a legenda do card já mostra título e tipo: evita repetir o bloco de texto. */
@media (max-width: 767px) { .portfolio__feature-text { display: none; } }
@media (min-width: 768px) {
  .portfolio__feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}
@media (min-width: 1024px) {
  .portfolio__feature { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-48); }
}

.portfolio__group { margin-bottom: var(--s-96); }
.portfolio__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-16);
  margin-bottom: var(--s-32);
  padding-top: var(--s-16);
  border-top: var(--border) solid var(--rule);
}
.portfolio__row { grid-auto-columns: 72%; }
@media (min-width: 480px) { .portfolio__row { grid-auto-columns: 46%; } }
@media (min-width: 768px) {
  .portfolio__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    row-gap: var(--s-48);
  }
}
@media (min-width: 1024px) {
  .portfolio__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portfolio__row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .portfolio__row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.portfolio__cta { display: flex; justify-content: center; padding-top: var(--s-64); }

/* ---------- 03c · Galeria em arco 3D ----------
   Celular e tablet: carrossel plano com snap (design.md §11).
   Desktop: cilindro de artes em volta do observador. As centrais ficam mais longe (menores e de frente),
   as laterais mais perto (maiores e inclinadas). O JS (setupArena) atualiza as variáveis conforme o scroll. */
.arena { position: relative; padding-block: var(--section-y); overflow: clip; }
.arena .section-label { margin-bottom: var(--s-32); }
.arena__head {
  display: grid;
  justify-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-48);
  text-align: center;
}
.arena__title { max-width: 18ch; }
@media (min-width: 1024px) { .arena__title { max-width: none; } }
.arena__lead { max-width: 46ch; color: var(--fg-muted); }

.arena__ring {
  display: flex;
  gap: var(--s-16);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s-16) var(--gutter) var(--s-24);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.arena__card { flex: 0 0 auto; width: min(62vw, 260px); scroll-snap-align: center; }
.arena__card.art-card--4x3 { width: calc(min(62vw, 260px) * 4 / 3); }
@media (min-width: 768px) {
  .arena__card { width: 240px; }
  .arena__card.art-card--4x3 { width: 320px; }
}
/* Leve respiro de escala no carrossel, sem parallax */
@supports (animation-timeline: view()) {
  @media (max-width: 1023px) {
    .arena__card .art-card__media {
      animation: arena-breathe linear both;
      animation-timeline: view(inline);
    }
  }
}
@keyframes arena-breathe {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1); }
}

@media (min-width: 1024px) {
  .arena {
    /* Valores do arco em repouso (sem JS). */
    --card-w: clamp(160px, 14.5vw, 260px);
    --step: 12deg;
    --radius: calc(var(--card-w) * 5.4);
    --shift: calc(var(--card-w) * 2.9);
    --spin: 0deg;
    --tilt: 0deg;
    --roll: 0deg;
    --lift: 0px;
  }
  .arena__head { margin-bottom: 0; }
  .arena__stage {
    position: relative;
    height: calc(var(--card-w) * 2.6);
    margin-top: var(--s-24);
    perspective: calc(var(--card-w) * 4.5);
    perspective-origin: 50% 45%;
  }
  .arena__ring {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    transform-style: preserve-3d;
    transform: translateY(var(--lift)) translateZ(var(--shift)) rotateX(var(--tilt)) rotateZ(var(--roll)) rotateY(var(--spin));
  }
  .arena__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--card-w);
    margin: calc(var(--card-w) * -8 / 9) 0 0 calc(var(--card-w) / -2);
    /* Ângulo negativo: offset -5 fica à esquerda, mantendo a ordem de leitura 11 → 21. */
    transform: rotateY(calc(var(--o) * var(--step) * -1)) translateZ(calc(var(--radius) * -1));
    backface-visibility: hidden;
  }
  .arena__card.art-card--4x3 {
    width: calc(var(--card-w) * 4 / 3);
    margin-left: calc(var(--card-w) * -2 / 3);
  }
  .arena__card .art-card__caption { display: none; }
}

/* Pinning leve: a cena fica presa por ~1 tela enquanto o arco reage ao scroll (sticky nativo, sem travar a rolagem). */
@media (min-width: 1024px) {
  .js .arena { height: 200svh; padding-block: 0; }
  .js .arena__sticky {
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    display: grid;
    grid-template-rows: auto 1fr;
    padding-top: var(--s-48);
    overflow: hidden;
  }
  .js .arena__stage { height: auto; min-height: 0; margin-top: 0; }
  .js .arena__ring { will-change: transform; }
}

/* Card do case Alfhy */
.case-card {
  display: grid;
  gap: var(--s-32);
  margin-top: var(--s-64);
  padding: var(--s-32) var(--s-24);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-card__logo { width: 120px; height: auto; }
.case-card__fan {
  position: relative;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.case-card__fan img {
  position: absolute;
  width: 150px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--dur-panel) var(--ease);
}
.case-card__fan img:nth-child(1) { transform: translateX(-70%) rotate(-10deg); }
.case-card__fan img:nth-child(2) { z-index: 1; }
.case-card__fan img:nth-child(3) { transform: translateX(70%) rotate(10deg); }
.case-card:hover .case-card__fan img:nth-child(1) { transform: translateX(-84%) rotate(-14deg); }
.case-card:hover .case-card__fan img:nth-child(3) { transform: translateX(84%) rotate(14deg); }
@media (min-width: 768px) {
  .case-card { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--s-48); }
  .case-card__fan { height: 380px; }
  .case-card__fan img { width: 180px; }
}

/* Painel do case (dialog em tela cheia) */
.case-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.case-panel::backdrop { background: var(--black); }
.case-panel[open] { animation: panel-in var(--dur-panel) var(--ease); }
.case-panel__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-12);
  background: var(--black);
  border-bottom: var(--border) solid var(--gray-800);
}
.case-panel__brand { display: flex; align-items: center; gap: var(--s-16); }
.case-panel__brand img { width: 64px; height: auto; }
.case-panel__body { padding-block: var(--s-48) var(--s-96); }
.case-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16);
  margin-top: var(--s-48);
}
@media (min-width: 768px) { .case-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); } }
@media (min-width: 1024px) { .case-panel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-panel .art-card__media { cursor: default; }
@keyframes panel-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- 03d · Depoimentos (colunas em loop) ----------
   Cada coluna tem a lista duplicada e sobe -50% em loop linear, com velocidades diferentes (15/19/17 s).
   Topo e base esmaecem por máscara. Pausa no hover/foco. 1 coluna no celular, 2 no tablet, 3 no desktop. */
.testimonials__head {
  display: grid;
  justify-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-48);
  text-align: center;
}
.testimonials__title { max-width: 16ch; }
.testimonials__lead { color: var(--fg-muted); }
.testimonials__columns {
  display: flex;
  justify-content: center;
  gap: var(--s-24);
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.testimonials__col { flex: 0 1 320px; min-width: 0; }
.testimonials__col:nth-child(2),
.testimonials__col:nth-child(3) { display: none; }
@media (min-width: 768px) { .testimonials__col:nth-child(2) { display: block; } }
@media (min-width: 1024px) { .testimonials__col:nth-child(3) { display: block; } }
.testimonials__track {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding-bottom: var(--s-24);
  animation: testimonials-loop var(--dur, 15s) linear infinite;
}
.testimonials__columns:hover .testimonials__track,
.testimonials__columns:focus-within .testimonials__track { animation-play-state: paused; }
@keyframes testimonials-loop { to { transform: translateY(-50%); } }

/* Card de depoimento (design.md §7): fundo preto no bloco claro, texto branco 16 px, rodapé com avatar, nome e função. */
.t-card {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-32);
  border-radius: var(--radius-md);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.t-card blockquote { margin: 0; }
.t-card__foot {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-top: var(--s-16);
  border-top: var(--border) solid var(--gray-800);
}
.t-card__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--gray-800);
  font-size: var(--fs-small);
  font-weight: 600;
}
.t-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-card__name { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.t-card__role { color: var(--gray-600); font-size: var(--fs-small); line-height: 1.3; }

/* ---------- 03b · Motion ---------- */
.motion__grid { grid-auto-columns: 72%; }
.motion__grid:has(> :only-child) { grid-auto-columns: 100%; }
@media (min-width: 480px) { .motion__grid { grid-auto-columns: 46%; } }
@media (min-width: 768px) {
  .motion__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    justify-content: start;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
@media (min-width: 1024px) {
  .motion__grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/* Sem autorização da Alfhy fica só 1 vídeo: título e vídeo lado a lado. */
@media (min-width: 768px) {
  .motion__layout:has(.motion__grid > :only-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--s-48);
    align-items: end;
  }
  .motion__layout:has(.motion__grid > :only-child) .section-head { grid-template-columns: 1fr; margin-bottom: 0; }
  .motion__layout:has(.motion__grid > :only-child) .motion__grid { grid-template-columns: 1fr; }
}

/* ---------- Faixa marquee (entre Motion e Curso, ambos escuros) ---------- */
.band { padding-block: var(--s-16); }
#motion { padding-bottom: var(--s-64); }
.band + .section { padding-top: var(--s-64); }

/* ---------- 04 · Curso ---------- */
.course__intro { row-gap: var(--s-48); margin-bottom: var(--s-96); }
.course__photo {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.course__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.course__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(13 13 13 / 0.6), rgb(13 13 13 / 0) 45%);
}
.course__photo figcaption {
  position: absolute;
  inset: auto var(--s-16) var(--s-16);
  z-index: 1;
  font-size: var(--fs-small);
}
.course__text { grid-column: 1 / -1; display: grid; gap: var(--s-32); align-content: start; }
.course__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  justify-self: start;
  padding: var(--s-8) var(--s-12);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--border) var(--accent);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .course__photo { grid-column: span 2; }
  .course__text { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .course__photo { grid-column: 1 / span 5; }
  .course__text { grid-column: 7 / span 6; }
}

.check-list { display: grid; gap: var(--s-12); }
.check-list li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--s-12); align-items: start; }
.check-list .icon { width: 0.6rem; height: 1rem; margin-top: 0.3em; color: var(--fg-muted); }

.modules { border-top: var(--border) solid var(--rule); }
.module {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-16) var(--s-24);
  padding-block: var(--s-32);
  border-bottom: var(--border) solid var(--rule);
}
.module__num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--fg-muted);
}
.module__body { display: grid; gap: var(--s-8); }
.module__body p { color: var(--fg-muted); max-width: var(--measure); }
@media (min-width: 768px) {
  .module { grid-template-columns: 9rem 1fr; }
  .module__num { font-size: var(--fs-h1); }
}

.course__offer { display: grid; gap: var(--s-48); margin-top: var(--s-96); }
@media (min-width: 1024px) { .course__offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* Cards dos 3 cursos (design.md §7, card de preço repetido): fundo --gray-800, --radius-lg, compra no rodapé. */
.courses__grid { display: grid; gap: var(--s-24); }
@media (min-width: 1024px) { .courses__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.course-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
  border-radius: var(--radius-lg);
  background: var(--gray-800);
}
@media (min-width: 768px) { .course-card { padding: var(--s-32); } }
/* Capa do curso: sempre inteira, na proporção original (são peças de produto, sem corte nem filtro). */
.course-card__cover { width: 100%; height: auto; border-radius: var(--radius-md); background: var(--black); }
.course-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); color: var(--gray-600); }
.course-card__level {
  padding: var(--s-4) var(--s-8);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--border) var(--gray-600);
  color: var(--white);
}
.course-card__desc { color: var(--gray-600); }
.course-card .check-list { padding-top: var(--s-16); border-top: var(--border) solid var(--black); }
.course-card__buy { display: grid; gap: var(--s-16); margin-top: auto; padding-top: var(--s-16); }
.course-card__price {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.course-card__currency { font-size: 0.55em; vertical-align: 0.35em; letter-spacing: 0; }
.course-card .btn--primary { width: 100%; }
.courses__note { margin-top: var(--s-24); }

/* Detalhes em abas */
.course-details { display: grid; gap: var(--s-32); margin-top: var(--s-96); }
.course-details > * { min-width: 0; } /* a lista de abas rola sozinha em vez de alargar a página */
.tabs__list {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  border-bottom: var(--border) solid var(--rule);
  scrollbar-width: none;
}
.tabs__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-8);
  min-height: 48px;
  padding: var(--s-12) var(--s-16);
  color: var(--gray-600);
  font-weight: 500;
  transition: color var(--dur-hover) var(--ease);
}
.tabs__tab::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease);
}
.tabs__tab:hover,
.tabs__tab[aria-selected="true"] { color: var(--white); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel { display: grid; gap: var(--s-24); padding-top: var(--s-32); }
.tabs__panel .price-card__guarantee { justify-self: start; }
.course-info { display: grid; gap: var(--s-48); }
.course-info__text p { color: var(--fg-muted); }
.course-info__text .lead { color: var(--fg); }
.course-info__text strong, .course-info__text em { color: var(--fg); }
.course-info__text h4 { margin-top: var(--s-32); }
.course-info__lists { display: grid; gap: var(--s-32); align-content: start; }
@media (min-width: 1024px) { .course-info:has(.course-info__lists) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Faixa com os 3 cursos em loop (direita → esquerda), pausa no hover/foco. Montada pelo JS. */
.course-loop {
  margin: var(--s-32) calc(var(--gutter) * -1) var(--s-96);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.course-loop__track {
  display: flex;
  width: max-content;
  animation: course-loop 40s linear infinite;
}
.course-loop:hover .course-loop__track,
.course-loop:focus-within .course-loop__track { animation-play-state: paused; }
@keyframes course-loop { to { transform: translateX(-50%); } }
.course-loop__item {
  flex: none;
  display: grid;
  gap: var(--s-12);
  width: 200px;
  margin-right: var(--s-24);
  color: var(--white);
}
@media (min-width: 768px) { .course-loop__item { width: 240px; } }
/* Mesma altura para todas as capas, sem cortar a arte (contain sobre preto). */
.course-loop__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--black);
  border-radius: var(--radius-md);
  transition: transform var(--dur-art-hover) var(--ease);
}
.course-loop__item:hover img,
.course-loop__item:focus-visible img { transform: scale(1.03); }
.course-loop__name { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.course-loop__price { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: var(--fs-body-lg); line-height: 1; font-variant-numeric: tabular-nums; }
.course-loop__buy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  justify-self: start;
  min-height: 40px;
  padding: var(--s-8) var(--s-16);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--black);
  font-size: var(--fs-small);
  font-weight: 600;
}
.course-loop__buy .icon { width: 0.9em; height: 0.9em; transition: transform var(--dur-hover) var(--ease); }
.course-loop__item:hover .course-loop__buy .icon { transform: translateX(4px); }

.price-card__guarantee {
  display: flex;
  gap: var(--s-12);
  align-items: flex-start;
  padding: var(--s-16);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 var(--border) var(--gray-600);
  font-size: var(--fs-small);
}
.price-card__guarantee .icon { width: 0.75rem; height: 1.25rem; flex: none; color: var(--accent); }

.course__faq-title { margin-bottom: var(--s-24); }

/* ---------- 05 · Mentoria ---------- */
.mentoring__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12);
  margin-block: var(--s-48);
}
@media (min-width: 1024px) { .mentoring__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
.mentoring__intro .lead strong { font-weight: 600; }
.mentoring__plans { display: grid; gap: var(--s-12); }
@media (min-width: 1024px) { .mentoring__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-32) var(--s-24);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
}
.plan__meta { display: flex; gap: var(--s-12); font-weight: 600; text-transform: uppercase; }
.plan__price {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan .btn { margin-top: auto; align-self: flex-start; }
.tile {
  display: grid;
  gap: var(--s-24);
  align-content: space-between;
  min-height: 9rem;
  padding: var(--s-24);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
}
.tile dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tile dd { font-size: var(--fs-body); font-weight: 500; }
.mentoring__foot { display: grid; gap: var(--s-32); }
@media (min-width: 1024px) { .mentoring__foot { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- 06 · Serviços ---------- */
.services__list { border-top: var(--border) solid var(--rule); }
.service {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-8) var(--s-16);
  padding-block: var(--s-32);
  border-bottom: var(--border) solid var(--rule);
}
.service__num { font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; padding-top: 0.4em; }
.service__body { display: grid; gap: var(--s-8); }
.service__body p { color: var(--fg-muted); max-width: var(--measure); }
@media (min-width: 768px) {
  .service { grid-template-columns: 8rem 1fr 1fr; align-items: baseline; }
  .service__body { display: contents; }
}
.services__process { display: grid; gap: var(--s-24); margin-top: var(--s-64); }
@media (min-width: 1024px) { .services__process { grid-template-columns: 1fr auto; align-items: end; } }
/* Desktop: título fixo à esquerda enquanto os serviços passam à direita (padrão da ValFX). */
@media (min-width: 1024px) {
  .services__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-64);
    align-items: start;
  }
  .services__aside { position: sticky; top: calc(var(--header-h) + var(--s-48)); }
  .services__aside .section-head { grid-template-columns: 1fr; margin-bottom: 0; }
  .services__main .services__process { grid-template-columns: 1fr; justify-items: start; }
}

/* ---------- 10 · CTA final + footer ---------- */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 80svh;
  display: grid;
  align-items: end;
}
.cta-final__photo { position: absolute; inset: 0; z-index: -2; }
/* Parallax da foto (desktop): a foto é 20% mais alta que a seção e desliza ±10% conforme a seção atravessa a tela. */
@media (min-width: 1024px) {
  .js .cta-final__photo { inset: -10% 0; transform: translate3d(0, var(--par, 0px), 0); }
}
.cta-final__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cta-final__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--black) 5%, rgb(13 13 13 / 0.6) 50%, rgb(13 13 13 / 0.35));
}
.cta-final__photo::after { z-index: 2; }
.cta-final__content { display: grid; gap: var(--s-32); padding-block: var(--s-96) var(--s-64); }
.cta-final__title { max-width: 16ch; }

.site-footer { padding-block: var(--s-64) var(--s-96); }
.site-footer__grid {
  display: grid;
  gap: var(--s-48);
  padding-bottom: var(--s-64);
  border-bottom: var(--border) solid var(--rule);
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.contact-list { display: grid; gap: var(--s-16); }
.contact-list dt { color: var(--fg-muted); font-size: var(--fs-small); }
.contact-list dd { font-size: var(--fs-body-lg); font-weight: 500; }
.contact-list a { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-nav li { border-bottom: var(--border) solid var(--rule); }
.footer-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  font-weight: 500;
}
.footer-nav a span { color: var(--fg-muted); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__mark { padding-block: var(--s-64) var(--s-32); }
.site-footer__mark svg { width: min(100%, calc(var(--fs-mega) * 3.4)); height: auto; color: var(--white); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-16);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .site-footer { padding-bottom: calc(var(--s-96) + var(--s-32)); } }