/* ============================================================
   AMANDA SANTOS — Sessão 1 (hero)
   Recriação 1:1 do frame "AMD NEW" (1920 x 1080) — Figma 21:2
   Todas as medidas estão em `rem`, onde 1rem = 1px do artboard.
   ============================================================ */

@font-face {
  font-family: 'Athletics';
  src: url('fonts/Athletics-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Athletics';
  src: url('fonts/Athletics-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Athletics';
  src: url('fonts/Athletics-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Calle Austin';
  src: url('fonts/CalleAustin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('fonts/OpenSauceOne-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* fator de escala: o artboard de 1920px acompanha a largura da viewport */
  font-size: calc(var(--vw, 100vw) / 1920);
  background: #000;
}

body {
  margin: 0;
  background: #000;
  overflow-x: hidden;
  /* O suavizado padrão do macOS engorda o texto: medido contra os renders do
     Figma, a tinta do CTA ia a 2346px contra 2177 do original, e a da faixa a
     10898 contra 8107. Com `antialiased` cai para 2202 e 8526. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------- artboard ---------- */

.stage {
  position: relative;
  width: 1920rem;
  height: 1080rem;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

/* ---------- 21:11 · foto da loja ---------- */

.shot {
  position: absolute;
  left: 170rem;
  top: -779rem;
  width: 1796rem;
  height: 2396rem;
  opacity: .5;
  pointer-events: none;
}
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .3;
}
.shot__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 58.431%);
}

/* ---------- 21:5 · letra "A" ---------- */

.letter {
  position: absolute;
  left: 414rem;
  top: 98rem;
  width: 1911.179rem;
  height: 1657.886rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.letter span {
  flex: none;
  transform: rotate(-17.28deg);
  font-family: 'Calle Austin', serif;
  font-weight: 400;
  font-size: 1120.792rem;
  line-height: normal;
  white-space: nowrap;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  /* O desenho do "A" transborda a caixa de texto (1617.31 x 1233). O Figma
     estende as pontas do degradê nesse excedente; o `background-clip: text`
     não pinta nada fora da caixa de fundo. Daí o respiro de 500px em volta,
     com as paradas do degradê travadas na caixa original. */
  padding: 500rem;
  background-image: linear-gradient(
    to bottom,
    #e2a985 0,
    #e2a985 500rem,
    #824f3e 1733rem,
    #824f3e 100%
  );
}

/* ---------- 21:8 / 21:9 / 21:10 / 21:13 · brilhos ---------- */

.glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.glow--2 { left: 710rem;  top: -35rem; width: 1282rem; height: 1282rem; }
.glow--3 { left: 1255rem; top: 86rem;  width: 808rem;  height: 808rem;  }
.glow--4 { left: 664rem;  top: 169rem; width: 808rem;  height: 808rem;  }

/* Halo pulsante atrás da Amanda — mesmo degradê (#e2a985 → #824f3e) dos
   brilhos do Figma. Ficam antes do retrato no DOM, então só o que passa da
   silhueta aparece: o efeito é um contorno de luz respirando em volta dela. */
.glow--pulse {
  animation: halo 6s ease-in-out infinite;
  will-change: opacity, transform;
}
.glow--p1 { left: 590rem;  top: -320rem; width: 1600rem; height: 1600rem; --lo: .16; --hi: .38; animation-duration: 6.4s; }
.glow--p2 { left: 700rem;  top: 250rem;  width: 940rem;  height: 940rem;  --lo: .12; --hi: .34; animation-duration: 8.2s; animation-delay: -3.1s; }
.glow--p3 { left: 1480rem; top: 40rem;   width: 1000rem; height: 1000rem; --lo: .14; --hi: .40; animation-duration: 5.2s; animation-delay: -4.4s; }

@keyframes halo {
  0%, 100% { opacity: var(--lo, .2); transform: scale(.88); }
  50%      { opacity: var(--hi, .4); transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .glow--pulse { animation: none; opacity: var(--hi, .4); }
}

.glow5 {
  position: absolute;
  left: -571rem;
  top: 644rem;
  width: 1671.875rem;
  height: 940.533rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.glow5 i {
  flex: none;
  position: relative;
  width: 1603rem;
  height: 789rem;
  transform: rotate(5.56deg);
}
.glow5 img {
  position: absolute;
  left: -500rem;
  top: -500rem;
  width: 2603rem;
  height: 1789rem;
  max-width: none;
}

/* ---------- 21:3 · Amanda ---------- */

.portrait {
  position: absolute;
  left: 867rem;
  top: 28rem;
  width: 992rem;
  height: 2639rem;
  transform: scaleX(-1);
  pointer-events: none;
}
.portrait img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
}

/* ---------- 21:15 / 21:14 / 21:17 · conteúdo ---------- */

.title {
  position: absolute;
  left: 150rem;
  top: 291rem;
  width: 614rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 136.988rem;
  /* 150 no Figma — apertado a pedido, para "Amanda" e "santos" ficarem mais
     próximas. Tagline e CTA sobem os mesmos 20 para o respiro não crescer. */
  line-height: 130rem;
  color: #fff;
  word-break: break-word;
}

.tagline {
  position: absolute;
  left: 150rem;
  top: 572.5rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  font-size: 20.972rem;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}

/* visual do botão, compartilhado entre as sessões; a posição fica na classe
   de cada uma, senão as regras de retrato do hero vazam para as outras */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.426rem;
  border: 1.657rem solid #fff;
  border-radius: 10rem;
  background-image: linear-gradient(to bottom, #00ff04 0%, #84ff86 100%);
  font-family: 'Open Sauce One', sans-serif;
  font-weight: 600;
  font-size: 24.719rem;
  line-height: normal;
  color: #000;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}
.btn:hover {
  transform: translateY(-2rem);
  filter: brightness(1.06);
}

.cta {
  position: absolute;
  left: 150rem;
  top: 648rem;
  width: 390rem;
  height: 66rem;
}

/* ============================================================
   21:20 · LINHA ANIAMDA — faixa em loop (sessão 2)
   Frame de 1920 × 126 logo abaixo do hero. O fundo é degradê puro
   (medido: erro de 0.91/255 contra o PNG exportado) e o ponto é um
   círculo branco — nenhum dos dois precisa de asset.
   ============================================================ */

.ticker {
  position: relative;
  width: 100%;
  height: 126rem;
  overflow: hidden;
  background-image: linear-gradient(to right, #824f3e 0%, #e2a985 100%);
}

.ticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ticker 34s linear infinite;
  will-change: transform;
}

/* A margem entra na conta do grupo (476 + 52 = 528, o passo do Figma), então a
   pista mede exatamente 8 × 528 e andar -50% equivale a 4 passos cheios. Com
   `gap` no lugar da margem faltaria meio vão e a volta daria um salto. */
.ticker__group {
  display: flex;
  align-items: center;
  gap: 52rem;
  margin-right: 52rem;
  flex: none;
}

.ticker__group span {
  font-family: 'Open Sauce One', sans-serif;
  font-weight: 600;
  font-size: 29.65rem;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}

.ticker__group i {
  flex: none;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #fff;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ============================================================
   21:47 · AMD NEW 2 — sessão 3
   Frame de 1920 × 1080, fundo preto.
   ============================================================ */

.s3 {
  position: relative;
  width: 1920rem;
  height: 1080rem;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

/* 21:56 — mesmo desenho do brilho da sessão 1, deitado 90° e mais forte
   (opacity .8 no SVG contra .3 lá) */
.s3__glowA {
  position: absolute;
  left: -147rem;
  top: -372rem;
  width: 789rem;
  height: 1603rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.s3__glowA i {
  flex: none;
  position: relative;
  width: 1603rem;
  height: 789rem;
  transform: rotate(-90deg);
}
.s3__glowA img {
  position: absolute;
  left: -500rem;
  top: -500rem;
  width: 2603rem;
  height: 1789rem;
  max-width: none;
}

/* 21:61 */
.s3__glowB {
  position: absolute;
  left: 247rem;
  top: -55rem;
  width: 352.409rem;
  height: 484.321rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.s3__glowB i {
  flex: none;
  position: relative;
  width: 437rem;
  height: 215rem;
  transform: rotate(-69.84deg);
}
.s3__glowB img {
  position: absolute;
  left: -500rem;
  top: -500rem;
  width: 1437rem;
  height: 1215rem;
  max-width: none;
}

/* 21:64 / 21:59 — dois "A" do mesmo corpo: um borrado em #1b1b1b atrás,
   outro com o degradê da marca */
.s3__letter {
  position: absolute;
  width: 1911.179rem;
  height: 1657.886rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.s3__letter span {
  flex: none;
  transform: rotate(-17.28deg);
  font-family: 'Calle Austin', serif;
  font-weight: 400;
  font-size: 1120.792rem;
  line-height: normal;
  white-space: nowrap;
}

.s3__letter--blur { left: 423rem; top: 31rem; }
.s3__letter--blur span {
  color: #1b1b1b;
  filter: blur(25rem);
}

.s3__letter--grad { left: -819rem; top: 93rem; }
.s3__letter--grad span {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  /* mesmo respiro da sessão 1: o glifo transborda a caixa de texto e o
     `background-clip: text` não pinta fora dela */
  padding: 500rem;
  background-image: linear-gradient(
    to bottom,
    #e2a985 0,
    #e2a985 500rem,
    #824f3e 1733rem,
    #824f3e 100%
  );
}

/* 21:54 — a moldura corta; a foto entra 100% da largura e 113.12% da altura,
   puxada 13.12% para cima */
.s3__photo {
  position: absolute;
  left: 0;
  top: 31rem;
  width: 1394rem;
  height: 1848rem;
  overflow: hidden;
  pointer-events: none;
}
.s3__photo img {
  position: absolute;
  left: 0;
  top: -13.12%;
  width: 100%;
  height: 113.12%;
  max-width: none;
}

/* 21:63 / 21:62 */
.s3__title {
  position: absolute;
  left: 1062rem;
  top: 375rem;
  width: 663rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 71.444rem;
  line-height: normal;
  color: #fff;
  word-break: break-word;
}

.s3__text {
  position: absolute;
  left: 1062rem;
  top: 580.59rem;
  width: 663rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: 25rem;
  line-height: normal;
  color: rgba(255, 255, 255, .8);
  word-break: break-word;
}

/* ============================================================
   22:66 · AMD NEW 3 — sessão 4
   Frame de 1920 × 1296, fundo branco.
   ============================================================ */

.s4 {
  position: relative;
  width: 1920rem;
  height: 1296rem;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* 22:74 */
.s4__card {
  position: absolute;
  left: 150rem;
  top: 151rem;
  width: 1620rem;
  height: 778rem;
  border-radius: 20rem;
  background-image: linear-gradient(to bottom, #e2a985 0%, #824f3e 100%);
}

/* 22:76 — a moldura corta, mas ela começa acima do cartão e transborda */
.s4__photo {
  position: absolute;
  left: 960rem;
  top: 45rem;
  width: 738rem;
  height: 884rem;
  overflow: hidden;
  pointer-events: none;
}
.s4__photo img {
  position: absolute;
  left: -17.34%;
  top: -22.27%;
  width: 131.71%;
  height: 164.88%;
  max-width: none;
}

/* 22:78 — `line-height: 0` no bloco com `normal` nos trechos é como o Figma
   resolve o texto de duas cores; a altura da linha vem dos spans */
.s4__title {
  position: absolute;
  left: 287rem;
  top: 303rem;
  width: 488rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 71.444rem;
  line-height: 0;
  color: #fff;
  word-break: break-word;
}
/* os dois trechos precisam ser spans: um nó de texto solto herdaria o
   `line-height: 0` e as linhas empilhariam uma sobre a outra */
.s4__title span { line-height: normal; }
.s4__title-amd { color: #000; }

/* 22:79 */
.s4__text {
  position: absolute;
  left: 287rem;
  top: 501rem;
  width: 526rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  font-size: 23rem;
  line-height: normal;
  color: rgba(255, 255, 255, .8);
  word-break: break-word;
}

/* 22:80 */
.s4__cta {
  position: absolute;
  left: 287rem;
  top: 711rem;
  width: 390rem;
  height: 66rem;
}

/* 22:82 / 22:83 / 22:84 */
.s4__amd {
  position: absolute;
  left: 150rem;
  top: 978.5rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 211.584rem;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}
.s4__num,
.s4__label {
  position: absolute;
  left: 661.45rem;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}
.s4__num   { top: 1030.8rem; font-size: 81.144rem; }
.s4__label { top: 1112.2rem; font-size: 46.691rem; }

/* Link para a loja, abaixo do número (não vem do Figma). Sem asset de logo,
   a "marca" é o wordmark AMD no degradê da marca dentro de um chip. */
.s4__store {
  position: absolute;
  left: 661.45rem;
  top: 1190rem;
  display: flex;
  align-items: center;
  gap: 14rem;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: 24rem;
  line-height: normal;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.s4__store-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46rem;
  height: 46rem;
  border-radius: 10rem;
  background-image: linear-gradient(to bottom, #e2a985 0%, #824f3e 100%);
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: .02em;
  color: #fff;
}
.s4__store-text {
  border-bottom: 1.5rem solid rgba(0, 0, 0, .25);
  transition: border-color .2s ease;
}
.s4__store-arrow {
  transition: transform .25s ease;
}
.s4__store:hover .s4__store-text  { border-color: #000; }
.s4__store:hover .s4__store-arrow { transform: translateX(6rem); }

/* 22:86 */
.s4__shot {
  position: absolute;
  left: 970rem;
  top: 969rem;
  width: 800rem;
  height: 273rem;
  border-radius: 20rem;
  overflow: hidden;
  pointer-events: none;
}
.s4__shot img {
  position: absolute;
  left: 0;
  top: -107.79%;
  width: 100%;
  height: 439.41%;
  max-width: none;
}

/* ============================================================
   23:88 · AMD NEW 4 — sessão 5
   Frame de 1920 × 755, fundo branco. Três cartões iguais de
   527 × 607 em y=74, começando em x=150 com 19 de vão.
   ============================================================ */

.s5 {
  position: relative;
  width: 1920rem;
  height: 755rem;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* left 150 + (527 + 19) × n dá exatamente os x do Figma: 150 / 696 / 1242 */
.s5__row {
  position: absolute;
  left: 150rem;
  top: 74rem;
  display: flex;
  gap: 19rem;
}

/* Todo o interior do cartão sai de `--u`, a régua do próprio cartão:
   1u = 1px do cartão de 527 do Figma. No retrato só `--cw` muda e as dez
   medidas de dentro (incluindo os corpos de texto) acompanham na proporção. */
.s5__card {
  --cw: 527rem;
  --u: calc(var(--cw) / 527);
  --title-top: 354;
  --title-size: 45;
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(607 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #000;
  overflow: hidden;
}
.s5__card--mentoria { --title-top: 351.55; --title-size: 46.186; }
.s5__card--publis   { --title-top: 352.4;  --title-size: 44.832; }

.s5__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.s5__fade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180.055deg, rgba(0, 0, 0, 0) 14.033%, #000 99.958%);
  pointer-events: none;
}

/* 47:3 / 47:9 / 47:14 — os três têm corpo e topo ligeiramente diferentes
   (45 / 46.186 / 44.832), então cada um traz os seus dois números */
.s5__title {
  position: absolute;
  left: 0;
  top: calc(var(--title-top) * var(--u));
  width: 100%;
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: calc(var(--title-size) * var(--u));
  line-height: normal;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 47:4 / 47:10 / 47:15 */
.s5__text {
  position: absolute;
  left: calc(66 * var(--u));
  top: calc(420 * var(--u));
  width: calc(396 * var(--u));
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  font-size: calc(23 * var(--u));
  line-height: normal;
  color: rgba(255, 255, 255, .8);
  text-align: center;
}

/* 47:7 / 47:11 / 47:16 — verde chapado, sem borda e em Athletics: não é o
   `.btn` das outras sessões (degradê, borda branca, Open Sauce One).
   O recuo assimétrico (50 à esquerda, 57 à direita) é do Figma e é o que
   deixa o rótulo no eixo do cartão, 3.5 à esquerda do centro do botão. */
.s5__cta {
  position: absolute;
  left: calc(137 * var(--u));
  top: calc(504 * var(--u));
  width: calc(260 * var(--u));
  height: calc(53 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(13 * var(--u)) calc(57 * var(--u)) calc(12 * var(--u)) calc(50 * var(--u));
  border-radius: calc(50 * var(--u));
  background: #00ff04;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: calc(23 * var(--u));
  line-height: normal;
  color: #000;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}
.s5__cta:hover {
  transform: translateY(calc(-2 * var(--u)));
  filter: brightness(1.06);
}

/* ============================================================
   Live Seller — sessão 6, não existe no Figma, desenhada a pedido
   Fundo branco contínuo com a sessão 5, sem sombra nem linha
   divisória. Texto à esquerda e o vídeo da loja à direita numa
   moldura de 640 × 780 (o vídeo é 9:16). Em fluxo (grid), não
   absoluta: a altura acompanha a copy.
   ============================================================ */

.s6 {
  position: relative;
  width: 1920rem;
  margin: 0 auto;
  padding: 100rem 150rem 120rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640rem;
  column-gap: 130rem;
  align-items: center;
  background: #fff;
  overflow: hidden;
}

.s6__body { position: relative; }

.s6__title {
  margin: 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 71.444rem;
  line-height: normal;
  color: #000;
  word-break: break-word;
}

.s6__lead {
  margin: 28rem 0 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: 27rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .75);
}

.s6__list {
  display: flex;
  flex-direction: column;
  gap: 18rem;
  margin: 40rem 0 0;
  padding: 0;
  list-style: none;
}
.s6__list li {
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  font-size: 25rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .7);
}

/* frase de fecho no degradê da marca, do tom escuro para o claro */
.s6__punch {
  margin: 44rem 0 0;
  font-family: 'Athletics', sans-serif;
  font-weight: 700;
  font-size: 36rem;
  line-height: 1.25;
  color: transparent;
  background-image: linear-gradient(to right, #824f3e 0%, #e2a985 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.s6__cta {
  width: 390rem;
  height: 66rem;
  margin-top: 44rem;
}

/* link textual para as lives, abaixo do botão */
.s6__watch {
  display: flex;
  align-items: center;
  gap: 12rem;
  width: max-content;
  margin-top: 28rem;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: 24rem;
  line-height: normal;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.s6__watch-text  { border-bottom: 1.5rem solid rgba(0, 0, 0, .25); transition: border-color .2s ease; }
.s6__watch-arrow { transition: transform .25s ease; }
.s6__watch:hover .s6__watch-text  { border-color: #000; }
.s6__watch:hover .s6__watch-arrow { transform: translateX(6rem); }

/* a moldura inteira é um link para as lives */
.s6__photo {
  display: block;
  position: relative;
  width: 640rem;
  height: 780rem;
  border-radius: 20rem;
  background: #ece5df;
  overflow: hidden;
}
.s6__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 32%;
  transition: transform .4s ease;
}
.s6__photo:hover img { transform: scale(1.03); }

/* selo "ao vivo" no canto da foto */
.s6__badge {
  position: absolute;
  left: 28rem;
  top: 28rem;
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 10rem 18rem 10rem 14rem;
  border-radius: 50rem;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(8rem);
  backdrop-filter: blur(8rem);
  font-family: 'Open Sauce One', sans-serif;
  font-weight: 600;
  font-size: 16rem;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.s6__badge i {
  flex: none;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 0 0 rgba(255, 45, 45, .6);
  animation: live 1.6s ease-out infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 45, .6); }
  100% { box-shadow: 0 0 0 10rem rgba(255, 45, 45, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .s6__badge i { animation: none; }
}

/* ============================================================
   Rodapé — não existe no Figma, desenhado a pedido
   Sem marca: só navegação, direitos e links legais. Em fluxo
   normal (não absoluto), então a altura acompanha o conteúdo.
   ============================================================ */

.footer {
  width: 1920rem;
  margin: 0 auto;
  padding: 0 150rem 56rem;   /* 150 é a mesma margem lateral das sessões */
  background: #000;
}

/* mesmo degradê da faixa da sessão 2, sangrando o recuo lateral */
.footer::before {
  content: '';
  display: block;
  height: 3rem;
  margin: 0 -150rem 72rem;
  background-image: linear-gradient(to right, #824f3e 0%, #e2a985 100%);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20rem 48rem;
  font-family: 'Athletics', sans-serif;
  font-weight: 400;
  font-size: 21rem;
  line-height: normal;
}
.footer__nav a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16rem 48rem;
  margin-top: 44rem;
  padding-top: 32rem;
  border-top: 1rem solid rgba(255, 255, 255, .14);
  font-family: 'Athletics', sans-serif;
  font-weight: 300;
  font-size: 17rem;
  line-height: normal;
  color: rgba(255, 255, 255, .55);
}
.footer__legal { margin: 0; }

.footer__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__terms a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.footer__nav a:hover,
.footer__terms a:hover { color: #e2a985; }

/* ============================================================
   Retrato / telas estreitas — mesmo desenho, empilhado
   ============================================================ */

@media (max-aspect-ratio: 1/1) {
  html { font-size: calc(var(--vw, 100vw) / 430); }

  /* O palco acompanha a viewport. `--vis` é a altura visível da Amanda: cresce
     com a tela, mas nunca passa de `100svh - 362rem`, que é o espaço que o
     bloco de texto centralizado + o botão ocupam no topo. */
  .stage {
    width: 430rem;
    height: 100svh;
    --vis: clamp(280rem, min(56svh, calc(100svh - 352rem)), 500rem);
  }

  /* a loja cobre o topo e some no preto antes da Amanda entrar */
  .shot { left: -70rem; top: -30rem; width: 640rem; height: 854rem; }
  .shot__fade {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 55%, #000 90%),
      linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 75%);
  }

  /* O "A" desce para a metade de baixo e encolhe até a letra caber na tela —
     no tamanho do desktop só sobrava a perna direita, que lia como uma faixa
     diagonal solta. Em 300rem a caixa girada dá 512 × 444.
     (largura = 1.7053 × fonte, altura = 1.4792 × fonte, giro de -17.28°) */
  .letter {
    left: calc(50% - 256rem);
    /* nasce 20rem acima da cabeça da Amanda — como `--vis` e o CTA saem da
       mesma conta, o "A" nunca sobe para cima do header em tela curta */
    top: calc(100svh - var(--vis) - 20rem);
    bottom: auto;
    width: 512rem;
    height: 444rem;
  }
  .letter span {
    font-size: 300rem;
    padding: 140rem;
    background-image: linear-gradient(
      to bottom,
      #e2a985 0,
      #e2a985 140rem,
      #824f3e 470rem,
      #824f3e 100%
    );
  }

  /* Halo acompanha a Amanda: ancorado no rodapé, não no topo. Menor e mais
     fraco que no desktop — num canvas de 430 a mesma opacidade cobre uma
     fração muito maior da tela e lava o preto. */
  .glow--p1 { left: 50%; right: auto; top: auto; bottom: -130rem; width: 460rem; height: 460rem; margin-left: -230rem; --lo: .10; --hi: .26; }
  .glow--p2 { left: -60rem;  right: auto; top: auto; bottom: -70rem; width: 320rem; height: 320rem; --lo: .07; --hi: .19; }
  .glow--p3 { left: auto; right: -50rem;  top: auto; bottom: 130rem; width: 320rem; height: 320rem; --lo: .08; --hi: .22; }

  .glow--2 { left: -5rem;   top: 330rem; width: 440rem; height: 440rem; opacity: .5; }
  .glow--3 { left: 190rem;  top: 260rem; width: 420rem; height: 420rem; }
  .glow--4 { left: -110rem; top: 430rem; width: 420rem; height: 420rem; }
  .glow5   { left: -300rem; top: 560rem; width: 900rem; height: 506rem; }
  .glow5 i { width: 863rem; height: 425rem; }
  .glow5 img { left: -269rem; top: -269rem; width: 1401rem; height: 963rem; }

  /* Amanda centralizada e encostada no rodapé.
     A caixa inteira é a figura de corpo todo (razão 0.37569) e só os primeiros
     39.87% dela — o mesmo enquadramento do desktop, cabeça até o quadril —
     ficam dentro da tela; o resto sai pela borda de baixo. Daí os fatores:
     altura = vis / .3987   largura = vis × .9423   recuo = vis × 1.5082 */
  .portrait {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--vis) * -1.5082);
    width: calc(var(--vis) * .9423);
    height: calc(var(--vis) / .3987);
    transform: translateX(-50%) scaleX(-1);
  }

  /* header centralizado: título, parágrafo e botão em coluna, tudo no eixo */
  .title {
    left: 0;
    top: 56rem;
    width: 430rem;
    padding: 0 24rem;
    font-size: 74rem;
    line-height: 71rem;
    text-align: center;
  }
  .tagline {
    left: 0;
    top: 222rem;
    width: 430rem;
    padding: 0 46rem;
    font-size: 15rem;
    line-height: 21rem;
    white-space: normal;
    text-align: center;
  }
  .cta {
    /* centralizado sem `transform`, que já é usado pelo hover.
       O recuo é sempre metade da largura — mexeu num, mexe no outro. */
    left: calc(50% - 135rem);
    /* colado no bloco de texto; em tela curta sobe o quanto precisar para não
       encostar na cabeça dela (50 do botão + 24 de folga). O `max()` é o piso:
       nunca invade a segunda linha da tagline. */
    top: max(278rem, min(300rem, calc(100svh - var(--vis) - 74rem)));
    bottom: auto;
    /* 270 e não 250: o rótulo "Descubra mais sobre aqui" pede 246.9rem aqui, e
       como o `.btn` é `nowrap` os 3.1rem que sobravam em 250 não davam margem
       nenhuma. No desktop os 390rem do Figma já comportam os 333 do texto. */
    width: 270rem;
    height: 50rem;
    font-size: 18rem;
    border-width: 1.2rem;
    border-radius: 8rem;
    z-index: 2;
  }

  /* ---------- sessão 3 empilhada: foto em cima, texto embaixo ---------- */

  .s3 {
    width: 430rem;
    height: auto;
    padding: 40rem 0 64rem;
  }

  /* No retrato a foto vai num quadro branco de 390 × 390 (mesma margem de 20
     das outras sessões), com `object-fit: cover` puxado para o rosto, em vez
     do recorte percentual sangrado do desktop. */
  .s3__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 390rem;
    height: 390rem;
    margin: 0 auto;
    padding: 12rem;
    border-radius: 20rem;
    background: #fff;
  }
  .s3__photo img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: 10rem;
  }

  /* título e texto ficam acima dos "A" (que são absolutos e vêm antes no DOM) */
  .s3__title {
    position: relative;
    left: auto;   /* os `left/top` do desktop virariam deslocamento no relative */
    top: auto;
    z-index: 1;
    width: auto;
    margin: 48rem 28rem 0;
    font-size: 40rem;
    line-height: 46rem;
  }
  .s3__text {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: auto;
    margin: 20rem 28rem 0;
    font-size: 15rem;
    line-height: 23rem;
  }

  /* os enfeites só mudam de posição e escala — o `scale` entra no mesmo
     `transform` do giro, então nenhuma medida interna precisa ser refeita */
  .s3__glowA { left: -150rem; top: 300rem; width: 300rem; height: 610rem; }
  .s3__glowA i { transform: rotate(-90deg) scale(.38); }
  .s3__glowB { left: 230rem;  top: 330rem; width: 140rem; height: 190rem; }
  .s3__glowB i { transform: rotate(-69.84deg) scale(.4); }

  .s3__letter { width: 520rem; height: 450rem; }
  .s3__letter span { transform: rotate(-17.28deg) scale(.27); }
  /* o borrado é #1b1b1b sobre preto: fica atrás do texto sem atrapalhar */
  .s3__letter--blur { left: 120rem;  top: 480rem; }
  /* a cauda sai de baixo do quadro branco e passa atrás do bloco de texto */
  .s3__letter--grad { left: -120rem; top: 200rem; }

  /* ---------- sessão 4 empilhada ---------- */

  /* Tudo continua absoluto, com altura fixa em `rem`: como a régua do retrato
     é sempre 430rem de largura, o texto quebra exatamente nas mesmas linhas
     em qualquer celular — a altura não varia. */
  .s4 { width: 430rem; height: 1110rem; }

  .s4__card {
    left: 20rem;
    top: 43rem;
    width: 390rem;
    height: 681rem;
  }

  /* as medidas internas da foto são percentuais, então o recorte acompanha a
     caixa sozinho */
  .s4__photo {
    left: 65rem;
    top: 0;
    width: 300rem;
    height: 359rem;
  }
  /* A moldura corta a foto no meio do cartão. O degradê da base é a mesma cor
     do cartão nesse trecho (24% → 46% do degradê #e2a985 → #824f3e, já que o
     cartão começa em 43 e tem 681), indo de transparente a opaco. */
  .s4__photo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150rem;
    background-image: linear-gradient(
      to bottom,
      rgba(203, 147, 116, 0) 0%,
      rgba(190, 135, 106, .75) 55%,
      #b57f64 100%
    );
  }

  .s4__title { left: 44rem; top: 390rem; width: 342rem; font-size: 34rem; }
  .s4__text  { left: 44rem; top: 485rem; width: 342rem; font-size: 14rem; line-height: 21rem; }
  .s4__cta   { left: 44rem; top: 640rem; width: 300rem; height: 52rem; font-size: 17rem; border-width: 1.2rem; border-radius: 8rem; }

  .s4__amd   { left: 20rem;  top: 770rem;   font-size: 96rem; }
  .s4__num   { left: 264rem; top: 793.7rem; font-size: 37rem; }
  .s4__label { left: 264rem; top: 830.7rem; font-size: 21rem; }

  .s4__store { left: 264rem; top: 870rem; gap: 8rem; font-size: 14rem; }
  .s4__store-logo { width: 30rem; height: 30rem; border-radius: 7rem; font-size: 9.5rem; }
  .s4__store-text { border-bottom-width: 1rem; }
  .s4__store-arrow { display: none; }   /* com a seta o link passava da margem de 20 */

  .s4__shot  { left: 20rem; top: 937rem; width: 390rem; height: 133rem; }

  /* ---------- sessão 5 empilhada: um cartão embaixo do outro ---------- */

  /* Nada aqui precisa de medida nova: o cartão inteiro é uma redução de
     390/527 do desktop, e como tudo dentro dele sai de `--u`, trocar `--cw`
     já leva título, parágrafo e botão na mesma proporção. */
  .s5 { width: 430rem; height: auto; padding: 43rem 0; }
  .s5__row {
    position: static;
    left: auto;
    top: auto;
    flex-direction: column;
    align-items: center;
    gap: 24rem;
  }
  .s5__card { --cw: 390rem; }

  /* ---------- sessão 6 empilhada: foto em cima, texto embaixo ---------- */

  .s6 {
    width: 430rem;
    padding: 48rem 20rem 64rem;
    grid-template-columns: 1fr;
    row-gap: 36rem;
  }
  /* o vídeo é 9:16 — a moldura fica de pé (390 × 480) */
  .s6__photo { order: -1; width: 390rem; height: 480rem; }

  .s6__body { padding: 0 8rem; }
  .s6__title { font-size: 40rem; line-height: 46rem; }
  .s6__lead  { margin-top: 18rem; font-size: 16rem; line-height: 24rem; }
  .s6__list  { margin-top: 26rem; gap: 12rem; }
  .s6__list li { font-size: 15rem; line-height: 23rem; }
  .s6__punch { margin-top: 28rem; font-size: 24rem; }
  .s6__cta   { width: 300rem; height: 52rem; margin-top: 30rem; font-size: 17rem; border-width: 1.2rem; border-radius: 8rem; }
  .s6__watch { margin-top: 22rem; gap: 8rem; font-size: 15rem; }
  .s6__watch-text { border-bottom-width: 1rem; }

  .s6__badge { left: 16rem; top: 16rem; padding: 7rem 12rem 7rem 10rem; font-size: 11rem; }
  .s6__badge i { width: 7rem; height: 7rem; }

  /* ---------- rodapé empilhado ---------- */

  .footer { width: 430rem; padding: 0 24rem 40rem; }
  .footer::before { height: 2rem; margin: 0 -24rem 40rem; }
  .footer__nav { gap: 14rem 26rem; font-size: 15rem; }
  .footer__base {
    /* em coluna os direitos vêm primeiro e os links legais embaixo */
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30rem;
    padding-top: 22rem;
    font-size: 13rem;
  }
  .footer__terms { gap: 20rem; }

  /* a faixa encolhe junto: 126rem na régua de 430 seria 29% da largura */
  .ticker { height: 62rem; }
  .ticker__group { gap: 26rem; margin-right: 26rem; }
  .ticker__group span { font-size: 15rem; }
  .ticker__group i { width: 5rem; height: 5rem; }
  .ticker__track { animation-duration: 22s; }

  /* vinheta que assenta a Amanda no rodapé */
  .stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Telas curtas: o gatilho é a proporção, não a altura em px — a régua do
     layout é `rem`, que depende da largura.
     Atenção: `aspect-ratio` em media query é largura/altura, então tela curta
     é `min-aspect-ratio`, não `max-`. */
  @media (min-aspect-ratio: 9/14) {
    /* piso 246 = base da tagline (190 + 2 linhas de 20) + 16 de folga;
       teto de `--vis` = 246 + 50 do botão + 24 de folga */
    .stage { --vis: clamp(230rem, min(50svh, calc(100svh - 312rem)), 420rem); }
    .cta { top: max(238rem, min(260rem, calc(100svh - var(--vis) - 74rem))); }
    .title   { top: 40rem;  font-size: 62rem; line-height: 60rem; }
    .tagline { top: 182rem; font-size: 14rem; line-height: 20rem; }
    .glow--p1 { bottom: -110rem; width: 390rem; height: 390rem; margin-left: -195rem; }
    .glow--p2 { bottom: -60rem;  width: 270rem; height: 270rem; }
    .glow--p3 { bottom: 110rem;  width: 270rem; height: 270rem; }
  }

  /* Quase quadrada (janela estreita e baixa no desktop): último aperto para o
     botão continuar acima da cabeça dela. */
  @media (min-aspect-ratio: 4/5) {
    /* piso 192 = base da tagline (140 + 2 linhas de 18) + 16 de folga */
    .stage { --vis: clamp(170rem, min(42svh, calc(100svh - 255rem)), 320rem); }
    .cta {
      top: max(187rem, min(200rem, calc(100svh - var(--vis) - 68rem)));
      height: 44rem;
      font-size: 16rem;
    }
    .title   { top: 24rem;  font-size: 46rem; line-height: 47rem; }
    .tagline { top: 135rem; font-size: 13rem; line-height: 18rem; }
    .letter { left: calc(50% - 187rem); width: 375rem; height: 325rem; }
    .letter span {
      font-size: 220rem;
      padding: 110rem;
      background-image: linear-gradient(
        to bottom,
        #e2a985 0,
        #e2a985 110rem,
        #824f3e 352rem,
        #824f3e 100%
      );
    }
  }
}