/* ==========================================================================
   Dunamis Farm Trail Run — landing única (mobile + desktop)

   Cascata mobile primeiro:
     base .............. layout mobile — vale para qualquer largura
     @container pg ..... a partir de 1280px de largura de .page, o desktop soma

   O corte é por container query (largura de .page), não por janela: assim o
   layout também acerta dentro de preview/canvas estreito do editor.

   Sumário
     1. Base / reset
     2. Peças compartilhadas (.mask, .btn, .center-row)
     3. Nav + menu mobile
     4. Hero
     5. Dobra 2 — Sobre
     6. Dobra 3 — Marquee
     7. Dobra 4 — Por que correr
     7b. Dobra do ingresso
     8. Dobra 5 — Escolha seu kit
     9. Dobra 6 — Hospedagem
    10. Dobra 7 — FAQ
    11. Bloco desktop
    12. Bloco widescreen
   ========================================================================== */


/* ==========================================================================
   1. BASE / RESET
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: #dbdbdb;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: #dbdbdb;
  text-decoration: none;
}

a:hover {
  color: #aaf890;
}

img {
  display: block;
}

@keyframes menuDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* .page é o container de referência do layout. */
.page {
  /* a abertura mobile desconta esta altura da tela; mudar o nav aqui mantém as
     duas medidas em sincronia */
  --nav-h: 78px;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
  container-name: pg;
  background: #000;
  font-family: 'archivo-narrow-variable', 'Archivo Narrow', sans-serif;
}

/* A trava da coluna sai por viewport, não por container: um container não pode
   ser dimensionado pela própria consulta. É a única regra fora do @container. */
@media (min-width: 1280px) {
  .page {
    max-width: none;
    margin: 0;
  }
}


/* ==========================================================================
   2. PEÇAS COMPARTILHADAS
   ========================================================================== */

.mask {
  overflow: hidden;
}

.center-row {
  display: flex;
  justify-content: center;
}

.btn {
  background: #fd5d36;
  padding: 1cqw 5cqw;
  transform: skewX(-9deg);
  display: block;
}

.btn:hover {
  background: #ff6047;
}

.btn > span {
  display: block;
  transform: skewX(9deg);
  color: #dbdbdb;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 700;
}


/* ==========================================================================
   3. NAV + MENU MOBILE
   ========================================================================== */

/* sticky (e não fixed): o fixed se ancora na janela e escaparia do quadro do
   componente quando ele é renderizado dentro do editor. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: #232323;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 20px;
  animation: menuDown 0.9s cubic-bezier(.16, 1, .3, 1) both;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 30px;
  width: auto;
}

.nav-burger {
  display: flex;
  background: none;
  border: 0;
  padding: 8px 4px;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  cursor: pointer;
}

/* Os traços esticam e encolhem em laço, um atrasado em relação ao outro.
   scaleX e não width: escala não remede a caixa a cada quadro. A âncora à
   direita mantém as pontas alinhadas com a borda do ícone. */
@keyframes burgerStretch {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.5); }
}

.nav-burger span {
  display: block;
  width: 40px;
  height: 7px;
  background: #aaf890;
  transform-origin: right center;
  animation: burgerStretch 1.5s ease-in-out infinite;
}

.nav-burger span:nth-child(2) { animation-delay: 0.15s; }
.nav-burger span:nth-child(3) { animation-delay: 0.3s; }

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

/* links inline — só aparecem no desktop */
.nav-links {
  display: none;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.nav-links > a {
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #a0a0a0;
  text-transform: uppercase;
  white-space: nowrap;
  font-variation-settings: 'wght' 600;
  line-height: 1;
  transition: all .25s ease;
}

.nav-links > a:hover {
  transition: all .25s ease;
  color: #aaf890;
  letter-spacing: 0.1em;
  font-variation-settings: 'wght' 100;

}

/* seletor com a mesma força de `.nav-links > a`, senão o cinza vence o preto */
.nav-links > a.nav-cta {
  margin-left: 10px;
  background: #aaf890;
  color: #000;
  padding: 11px 30px;
  transform: skewX(-12deg);
  display: block;
    transition: all .25s ease;

}

.nav-links > a.nav-cta:hover {
  background: #fd5d36;
  transition: all .25s ease;
  color: rgb(224, 223, 223);
}

.nav-cta > span {
  display: block;
  transform: skewX(12deg);
  font-size: 1.5rem;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variation-settings: 'wght' 800;
    transition: all .25s ease;

}

.nav-cta > span:hover {
  display: block;
  transform: skewX(12deg);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
    transition: all .25s ease;

}

/* Overlay do menu — só aparece no mobile. As classes vêm do estado do
   componente: .is-open enquanto está aberto, .is-closing durante a saída.
   Ele fica sempre no fluxo (não é display: none) porque display não transita:
   quem esconde é o par transform + visibility, e o atraso na visibility segura
   o menu à vista até o deslize terminar.
   Os tempos abaixo são os da SAÍDA — a regra base é a que volta a valer quando
   o .is-open sai. A entrada tem os seus, no bloco .is-open. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 1.04s cubic-bezier(.22, 1, .36, 1),
    opacity 0.65s ease,
    background-color 0.59s ease,
    visibility 0s linear 1.04s;
}

.menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.8s cubic-bezier(.22, 1, .36, 1),
    opacity 0.45s ease,
    background-color 0.45s ease,
    visibility 0s;
}

/* Enquanto aberto, a paleta se inverte a cada 10s: o fundo vai para o preto e
   os textos para o verde, e volta. O ciclo tem 20s (10s em cada estado); os
   platôs nos keyframes é que dão a pausa antes de cada virada. */
@keyframes menuTint {
  0%, 35%   { background-color: #000; }
  50%, 85%  { background-color: #aaf890; }
  100%      { background-color: #000; }
}

@keyframes menuInk {
  0%, 35%   { color: #aaf890; }
  50%, 85%  { color: #000; }
  100%      { color: #aaf890; }
}

/* o logo é verde: preto sobre o fundo verde, verde sobre o preto */
@keyframes menuLogoInk {
  0%, 35%   { filter: brightness(1); }
  50%, 85%  { filter: brightness(0); }
  100%      { filter: brightness(1); }
}

@keyframes menuCtaInk {
  0%, 35%   { background-color: #aaf890; color: #000; }
  50%, 85%  { background-color: #000; color: #aaf890; }
  100%      { background-color: #aaf890; color: #000; }
}

.menu.is-open { animation: menuTint 20s ease-in-out infinite; }
.menu.is-open .menu-close,
.menu.is-open .menu-links > a { animation: menuInk 20s ease-in-out infinite; }
.menu.is-open .menu-top img { animation: menuLogoInk 20s ease-in-out infinite; }
.menu.is-open .menu-links > a.menu-cta { animation: menuCtaInk 20s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .menu.is-open,
  .menu.is-open .menu-close,
  .menu.is-open .menu-links > a,
  .menu.is-open .menu-top img,
  .menu.is-open .menu-links > a.menu-cta { animation: none; }
}

/* na saída o ciclo para e o fundo vai para o cinza enquanto o menu desce */
.menu.is-closing {
  background: #232323;
}

.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* no repouso o fundo é preto, então o logo fica na cor original (verde); é o
   ciclo que o escurece quando o fundo vira verde */
.menu-top img {
  height: 40px;
  width: auto;
}

.menu-close {
  background: none;
  border: 0;
  color: #aaf890;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  font-family: 'archivo-narrow-variable', sans-serif;
}

/* os links ocupam a sobra e ficam no centro da tela */
.menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 0;
}

.menu-links > a {
  font-size: 6.6cqw;
  color: #aaf890;
  text-align: center;
  text-transform: uppercase;
  font-variation-settings: 'wght' 600;
}

/* o botão inverte em relação ao fundo do momento */
.menu-links > a.menu-cta {
  margin-top: 14px;
  background: #aaf890;
  color: #000;
  padding: 12px 30px;
  transform: skewX(9deg);
  display: block;
  width: fit-content;
}

.menu-links > a.menu-cta:hover {
  background: #c2ffab;
  color: #000;
}

.menu-cta > span {
  display: block;
  transform: skewX(-9deg);
  font-size: 6.15cqw;
  text-transform: uppercase;
  font-variation-settings: 'wght' 700;
}

/* na saída o ciclo para e tudo volta ao repouso (verde sobre escuro), que já é
   o que combina com o cinza do fechamento */


/* ==========================================================================
   4. HERO
   ========================================================================== */

/* O invólucro da abertura. No mobile ele só empilha os dois blocos; no desktop
   é a referência de posição da sobreposição do "Run the race". */
.opening {
  position: relative;
}

.hero {
  position: relative;
  width: 100%;
  height: max(50vh, 105cqw);
  overflow: hidden;
}

/* A dobra-1 inteira em um bloco só. Ocupa exatamente a mesma caixa da .hero,
   então nada se desloca; ele existe para o mobile poder subir a dobra por
   baixo e empurrar o "Run the race" para fora em um movimento único. */
.hero-panel {
  position: absolute;
  inset: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url(assets/mobile/hero-bg.png) center/cover no-repeat;
}

/* o overlay fica a 90% da caixa (10% menor), centralizado */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url(assets/mobile/hero-overlay.png) center/85% 85% no-repeat;
}

/* --------- Abertura: "Run the race" ---------
   Base (mobile): dobra de tela cheia no fluxo, antes da hero. Ela nasce
   visível: sem JS a abertura continua de pé e rolável, em vez de virar um vão
   em branco. Desconta o nav para não sobrar nada cortado no pé. */
.hero-run {
  position: relative;
  z-index: 5;
  width: 100%;
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  pointer-events: none;
}

/* A camada que o scroll esmagará. O preto vive aqui, e não na seção, porque a
   seção é o elemento preso pelo ScrollTrigger — animar a transform dela seria
   disputar com o pin. Com o fundo junto, encolher esta camada revela a hero
   por cima e por baixo, em vez de deixar um vão preto. */
.hero-run-crush {
  position: absolute;
  inset: 0;
  background: #000;
}

/* A arte fica de pé. As medidas entram trocadas porque a caixa gira 90°: a
   largura dela vira a altura da tela e a altura vira a largura.
   Quem gira é esta div, não o <svg>: para elemento SVG o GSAP calcula o
   transformOrigin pelo getBBox(), em unidades do viewBox (0–1990), e aplica
   como pixels — a origem cairia longe do centro. Div comum tem geometria
   previsível. */
.hero-run-rot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100svh - var(--nav-h));
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
}

.hero-run-art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Duas camadas de transform por letra, para as duas animações não brigarem:
   o <g> carrega a entrada (sobe + cresce) e o <path> de dentro carrega a
   dobra da sanfona (achata na horizontal). Cada um tem a sua origem. */
.hero-run-letter {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform;
}

.hero-run-fold {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}

/* dobras alternadas: a letra par fecha para a esquerda, a ímpar para a direita */
.hero-run-letter:nth-child(even) .hero-run-fold {
  transform-origin: 100% 50%;
}

.hero-content {
  position: absolute;
  inset: auto 0 auto 0;
  top: 32%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 34px;
}

.hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 78%;
}

.hero-block .mask {
  width: 100%;
}

.hero-block .mask img {
  width: 100%;
  height: auto;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.hero-meta span {
  font-size: 3.33cqw;
  letter-spacing: 0.01em;
  color: #dbdbdb;
  text-transform: uppercase;
  font-variation-settings: 'wght' 600;
}

.btn--hero {
  padding: 1.15cqw 5.5cqw;
}

.btn--hero > span {
  font-size: 6.15cqw;
}


/* ==========================================================================
   5. DOBRA 2 — SOBRE
   ========================================================================== */

.d2 {
  position: relative;
  width: 100%;
  height: 70vh;
  background: #aaf890;
  overflow: hidden;
}

.d2-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url(assets/mobile/dobra2-overlay.png) center/cover no-repeat;
}

.gal {
  position: absolute;
  overflow: hidden;
}

/* as fotos ficam empilhadas; o componente marca .is-on na foto da vez */
.gal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.gal img.is-on {
  opacity: 1;
}

.gal--1 {
  left: 2%;
  top: 5%;
  width: 49.5%;
  height: 52%;
}

.gal--2 {
  left: 56%;
  top: 57%;
  width: 42%;
  height: 25%;
}

.gal--3 {
  left: 13%;
  top: 64%;
  width: 40%;
  height: 30%;
}

.d2-text {
  position: absolute;
  left: 56%;
  top: 4.5%;
  width: 41%;
  display: flex;
  flex-direction: column;
  gap: 4.6cqw;
  font-family: 'config-mono-vf', ui-monospace, monospace;
  color: #000;
  /* 12.6px = 14px menos 10%. A coluna do texto é proporcional (41%), mas o
     corpo é fixo: em telas estreitas como o iPhone SE sobra pouca largura e a
     quebra ficava ruim. O desktop tem regra própria (18px) e não é afetado. */
  font-size: 12.6px;
  line-height: 1.2;
}

.d2-text p {
  margin: 0;
  letter-spacing: -0.05em;
  font-variation-settings: 'wght' 600;
}

.d2-text .strong {
  font-variation-settings: 'wght' 800;
}


/* ==========================================================================
   6. DOBRA 3 — MARQUEE
   ========================================================================== */

.d3 {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #000;
}

.d3-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d3-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.d3-track {
  display: flex;
  align-items: center;
  gap: 30px;
  will-change: transform;
}

.d3-track img {
  height: 46px;
  width: auto;
  flex: none;
}


/* ==========================================================================
   7. DOBRA 4 — POR QUE CORRER
   ========================================================================== */

.d4 {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.d4-photo {
  position: absolute;
  inset: 0;
  background: url(assets/04/sobreposicao-imagem-04.png) top/cover no-repeat;
}

/* A tipografia é <img> e ocupa a coluna inteira, com a altura saindo da
   proporção da arte — ou seja, ela cresce junto com a largura da tela.
   Por isso todas as medidas dos cards abaixo estão em cqw (1% da largura de
   .page) e não em px: assim a composição inteira acompanha a arte em qualquer
   tela mobile, em vez de valer só na largura em que foi calibrada (430px).
   A arte do desktop entra por `content` no @container. */
.d4-type {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  pointer-events: none;
}

.d4-title {
  position: relative;
  margin-top: 6.98cqw;
  margin-left: 50%;
  width: 50%;
  overflow: hidden;
}

.d4-title h2 {
  margin: 0;
  font-size: 5.58cqw;
  line-height: 1;
  color: #dbdbdb;
  text-transform: uppercase;
  font-variation-settings: 'wght' 800;
}

.d4-card {
  position: relative;
  width: 50%;
  padding: 3cqw;
  display: flex;
  flex-direction: column;
}

.d4-card-head {
  display: flex;
  align-items: flex-start;
}

.d4-num {
  background: #aaf890;
  color: #000;
  font-size: 2.98cqw;
  padding: 0 1cqw;
  font-variation-settings: 'wght' 700;
  height: fit-content;
}

.d4-card h3 {
  margin: 0;
  font-size: 2.98cqw;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #dbdbdb;
  text-transform: uppercase;
  font-variation-settings: 'wght' 700;
}

.d4-card p {
  margin: 0;
  font-family: 'config-mono-vf', ui-monospace, monospace;
  font-size: 2.79cqw;
  line-height: 1.05;
  letter-spacing: -0.08em;
  color: #dbdbdb;
  font-variation-settings: 'wght' 500;
}

.d4-card--1 {
  margin: 23.26cqw 0 0 0;
  width: 40%;
}

.d4-card--2 {
  margin: -41.86cqw 0 11.63cqw 65%;
  width: 35%;
}

.d4-card--3 {
  margin: -0.33cqw 0 0 55%;
  width: 40%;
}

.d4-card--4 {
  margin: 10.33cqw 0 0 0;
  width: 40%;
}

.d4-cta {
  position: relative;
  margin: 11.63cqw 0;
}

.btn--d4 > span {
  font-size: 5.4cqw;
}


/* ==========================================================================
   7b. DOBRA DO INGRESSO
   ========================================================================== */

.di {
  position: relative;
  width: 100%;
  padding: 13cqw 6cqw 12cqw;
  background: #9d9dfb;
  overflow: hidden;
}

/* As marcações vêm prontas na arte. contain e não cover: ela é bem mais larga
   que alta (1808 x 551), e no cover as pontas ficariam fora do quadro. */
.di-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* a grade, emprestada da dobra do kit: preenche a dobra inteira (cover, porque
   é padrão repetido e o corte não incomoda) e fica a meio tom */
.di-overlay--grade {
  object-fit: cover;
  opacity: 0.5;
}

.di-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9cqw;
}

/* .mask + data-mask-up: o título sobe de dentro do corte quando a dobra entra */
.di-title {
  width: 88cqw;
}

.di-title img {
  width: 100%;
  height: auto;
}

/* o botão fica centrado sob o preço */
.di-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4cqw;
}

/* o preço é a arte de assets/pricing (570 x 439) */
.di-price {
  width: 62cqw;
  height: auto;
}

.btn--di > span {
  font-size: 5.4cqw;
}


/* ==========================================================================
   8. DOBRA 5 — ESCOLHA SEU KIT
   ========================================================================== */

.d5 {
  position: relative;
  width: 100%;
  padding: 40px 0 60px;
  background: #232323;
  overflow: hidden;
}

.d5-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.d5-title {
  position: relative;
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.d5-title img {
  width: 100%;
}

.d5-kit {
  position: relative;
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

.d5-kit img {
  width: 58%;
}

.d5-cta {
  position: relative;
  margin-top: 26px;
}

.btn--d5 > span {
  font-size: 5.4cqw;
}


/* ==========================================================================
   9. DOBRA 6 — HOSPEDAGEM
   ========================================================================== */

.d6 {
  position: relative;
  width: 100%;
  background: #0044ff;
  overflow: hidden;
}

/* O banner de topo é a imagem com o vídeo por cima: a imagem é quem dá a
   altura da caixa e quem fica à mostra até o vídeo poder tocar (ou para
   sempre, em conexão lenta / sem JS). */
.d6-top {
  position: relative;
  width: 100%;
}

.d6-top-poster {
  width: 100%;
  height: auto;
}

.d6-top-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.d6-top-video.is-ready {
  opacity: 1;
}

.d6-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 836 / 1354;
}

.d6-leaf {
  position: absolute;
  width: 15%;
}

.d6-leaf--a {
  right: -2%;
  top: 12%;
}

.d6-leaf--b {
  left: -7%;
  top: 62%;
}

.d6-photo {
  position: absolute;
  left: 13%;
  top: 24%;
  width: 80%;
}

.d6-text {
  margin: 0;
  font-family: 'config-mono-vf', ui-monospace, monospace;
  font-size: 3.33cqw;
  line-height: 1.2;
  color: #dbdbdb;
  font-variation-settings: 'wght' 400;
}

.d6-text--a {
  position: absolute;
  left: 56%;
  top: 11%;
  width: 30%;
}

.d6-box {
  position: absolute;
  left: 13%;
  top: 72%;
  width: 50%;
}

.d6-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
}

.btn--d6 {
  padding: 1cqw 4.5cqw;
}

.btn--d6 > span {
  font-size: 5.1cqw;
}


/* ==========================================================================
   10. DOBRA 7 — FAQ
   ========================================================================== */

.d7 {
  position: relative;
  width: 100%;
  padding: 0 0 70px;
  background: #9d9dfb;
  overflow: hidden;
}

.d7-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.d7-year {
  position: absolute;
  font-family: 'config-mono-vf', ui-monospace, monospace;
  font-size: 96px;
  color: #aaf890;
  letter-spacing: -1rem;
  font-variation-settings: 'wght' 400;
  pointer-events: none;
}

.d7-year--20 {
  left: 4%;
  top: 40px;
}

/* máscara de corte: corte vertical que come 20% da largura do 26 pela direita */
.d7-year--26 {
  right: 12%;
  bottom: 10px;
  clip-path: inset(0 20% 0 0);
}

.d7-title {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: -14px;
}

.d7-title img {
  width: 100%;
}

.faq {
  position: relative;
  width: 88%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faq-item {
  background: #0044ff;
}

.faq-btn {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  text-align: left;
  font-family: 'archivo-narrow-variable', sans-serif;
}

.faq-num,
.faq-q {
  color: #dbdbdb;
  font-size: 17px;
  font-variation-settings: 'wght' 600;
  pointer-events: none;
}

.faq-q {
  flex: 1;
}

.faq-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #dbdbdb;
  transition: transform .25s ease;
  pointer-events: none;
}

.faq-a {
  display: none;
  padding: 0 16px 18px 51px;
  font-family: 'config-mono-vf', ui-monospace, monospace;
  font-size: 3.33cqw;
  line-height: 1.55;
  color: #dbdbdb;
  font-variation-settings: 'wght' 300;
}

/* respostas com campos (Data:, Local:…): o espaçamento sai do `p + p`, e o
   rótulo pesa mais que o corpo em vez de mudar de cor */
.faq-a p {
  margin: 0;
}

.faq-a p + p {
  margin-top: 0.9em;
}

/* a lista das regras do evento segue o mesmo respiro dos parágrafos */
.faq-a ul {
  margin: 0;
  padding-left: 1.2em;
}

.faq-a li + li {
  margin-top: 0.5em;
}

/* e-mails de contato: sublinhados para não se perderem no meio do corpo */
.faq-a a {
  text-decoration: underline;
}

.faq-a strong {
  font-variation-settings: 'wght' 600;
}

/* .is-open vem do estado do componente e abre a resposta + gira a seta */
.faq-item.is-open .faq-a {
  display: block;
}

.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
}


/* ==========================================================================
   11. DESKTOP — a partir de 1280px de largura de .page
   ========================================================================== */

@container pg (min-width: 1280px) {

  /* ---------- 11.1 Peças compartilhadas ---------- */

  .btn {
    padding: 5px 20px;
  }

  /* ---------- 11.2 Nav: os links inline entram, o hambúrguer sai ---------- */

  .nav {
    height: 100px;
    gap: 24px;
    padding: 30px 150px;
  }

  .nav-logo img {
    height: 38px;
  }

  /* Os links da página ficam no centro da barra; o CTA volta para o canto.
     A faixa cobre a barra inteira (inset: 0) para o centro ser o da barra, e
     não o da sobra ao lado do logo — por isso ela não recebe clique, só os <a>. */
  .nav-links {
    display: flex;
    justify-content: center;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .nav-links > a {
    pointer-events: auto;
  }

  /* fora do fluxo, o CTA não desloca a centralização dos outros links;
     o recuo de 150px é o mesmo padding lateral do .nav */
  .nav-links > a.nav-cta {
    position: absolute;
    right: 150px;
    top: 50%;
    translate: 0 -50%;
    margin-left: 0;
  }

  .nav-burger {
    display: none;
  }

  /* ---------- 11.3 Hero ---------- */

  .hero {
    height: 100vh;
  }

  /* No desktop a abertura deixa de ser um bloco no fluxo e volta a ser
     sobreposição sobre a dobra, deitada, para a sanfona fechar sobre ela.
     Apagada no CSS e acesa pelo JS: sem GSAP a dobra aparece inteira em vez de
     ficar atrás de uma tela que nunca abre. */
  .hero-run {
    position: absolute;
    inset: 0;
    height: auto;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
  }

  /* no desktop a camada de esmagamento não pinta nem mede nada: some da árvore
     de caixas e a arte volta a ser item direto do flex */
  .hero-run-crush {
    display: contents;
  }

  .hero-run-rot {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1990 / 1095.8;
    max-height: 100%;
    transform: none;
  }

  .hero-bg {
    background-image: url(assets/01/background-dobra1.png);
  }

  .hero-overlay {
    background-image: url(assets/01/sobreposicao-hero.png);
  }

  .hero-content {
    inset: 0;
    justify-content: center;
    gap: 54px;
  }

  .hero-block {
    width: 729px;
    max-width: 52vw;
    gap: 4px;
  }

  .hero-meta span {
    font-size: 21px;
  }

  .btn--hero {
    padding: 5px 20px;
  }

  .btn--hero > span {
    font-size: 30px;
  }

  /* ---------- 11.4 Dobra 2 ---------- */

  .d2 {
    height: 100vh;   /* 1000px do design, com -20% */
  }

  .d2-overlay {
    background-image: url(assets/02/sobreposicao-dobra2.png);
    background-size: cover;
    background-position: top;
  }

  .gal--1 {
    left: 7.8%;
    top: 6%;
    width: 25.1%;
    height: 72.5%;
  }

  .gal--2 {
    left: 70.8%;
    top: 6%;
    width: 28%;
    height: 50.3%;
  }

  .gal--3 {
    left: 50.9%;
    top: 47.8%;
    width: 19.9%;
    height: 55.5%;
  }

  .d2-text {
    left: 41%;
    top: 15.5%;
    width: 26.5%;
    gap: 26px;
    font-size: 18px;
    line-height: 1.45;
  }

  /* ---------- 11.5 Dobra 3 ---------- */

  .d3 {
    height: 140px;
  }

  .d3-track {
    gap: 90px;
  }

  .d3-track img {
    height: 83px;
  }

  /* ---------- 11.6 Dobra 4 ----------
     as caixas saem do fluxo e viram posições fixas sobre a tipografia */

  .d4 {
    height: 1800px;
    padding: 0;
  }

  /* no desktop a arte volta a preencher a dobra inteira */
  .d4-type {
    content: url(assets/04/sobreposicao-dobra4.png);
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .d4-title {
    position: absolute;
    left: 58%;
    top: 5%;
    width: 40%;
    margin-left: 0;
    background: none;
    padding: 0;
  }

  .d4-title h2 {
    font-size: 60px;
  }

  .d4-card {
    position: absolute;
    gap: 14px;
    background: none;
    padding: 0;
  }

  .d4-card-head {
    gap: 10px;
  }

  .d4-num {
    font-size: 19px;
    padding: 1px 7px;
  }

  .d4-card h3 {
    font-size: 23px;
  }

  .d4-card p {
    margin-left: 30px;
    font-size: 1.5rem;
  }

  .d4-card--1 {
    left: 68px;
    top: 527px;
    width: 30%;
    margin: 0;
  }

  /* o translateX empurra o card para a direita em % da largura dele mesmo,
     mantendo o `left` do design como ponto de partida */
  .d4-card--2 {
    left: 909px;
    top: 545px;
    width: 25%;
    margin: 0;
    transform: translateX(60%);
  }

  .d4-card--3 {
    left: 780px;
    top: 895px;
    width: 30%;
    margin: 0;
    transform: translateX(30%);
  }

  .d4-card--4 {
    left: 104px;
    top: 1316px;
    width: 35%;
    margin: 0;
  }

  .d4-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    margin-top: 0;
  }

  .btn--d4 > span {
    font-size: 28px;
  }

  /* ---------- 11.6b Dobra do ingresso ---------- */

  .di {
    padding: 6% 5%;
  }

  /* Título e preço lado a lado, ocupando quase toda a linha: 56 + 34 + 5 de
     intervalo fecham 95% da caixa, e é isso que deixa o conteúdo blocado em vez
     de flutuando no meio. Em % e não em px para o bloco se manter fechado em
     qualquer largura. */
  .di-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5%;
  }

  .di-title {
    width: 56%;
  }

  .di-buy {
    width: 34%;
    gap: 22px;
  }

  .di-price {
    width: 100%;
  }

  .btn--di > span {
    font-size: 28px;
  }

  /* ---------- 11.7 Dobra 5 ---------- */

  .d5 {
    height: 1020px;
    padding: 0;
  }

  .d5-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    width: auto;
    margin: 0;
  }

  .d5-title img {
    width: 40%;
    min-width: 520px;
  }

  .d5-kit {
    position: absolute;
    left: 0;
    right: 0;
    top: 220px;
    margin-top: 0;
  }

  .d5-kit img {
    width: 623px;
    height: 670px;
    min-width: 380px;
  }

  .d5-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    margin-top: 0;
  }

  .btn--d5 > span {
    font-size: 28px;
  }

  /* ---------- 11.8 Dobra 6 ---------- */

  .d6-stage {
    height: 1000px;
    aspect-ratio: auto;
  }

  .d6-leaf {
    width: 13%;
    opacity: 0.95;
  }

  .d6-leaf--a {
    right: -1%;
    top: 20px;
  }

  .d6-leaf--b {
    left: -4%;
    top: 500px;
  }

  /* no desktop volta a arte larga; o src do <img> é a versão mobile */
  .d6-photo {
    content: url(assets/06/imagem-dobra-6-geral.png);
    left: 11%;
    top: 40px;
    width: 74%;
  }

  .d6-text {
    font-size: 25px;
    letter-spacing: -0.05em;
  }

  .d6-text--a {
    left: 54%;
    top: 100px;
    width: 29%;
  }

  .d6-box {
    top: 560px;
    width: 30%;
  }

  .d6-cta {
    bottom: 50px;
  }

  .btn--d6 {
    padding: 5px 20px;
  }

  .btn--d6 > span {
    font-size: 26px;
  }

  /* ---------- 11.9 Dobra 7 ---------- */

  .d7 {
    padding: 0 0 120px;
  }

  .d7-year {
    font-size: 230px;
  }

  /* espelho do 26: ancorado pela direita em 62%, o 20 encosta no início do
     acordeão e enfia a mesma sobra por baixo da coluna */
  .d7-year--20 {
    left: auto;
    right: 62%;
    top: 250px;
  }

  .d7-year--26 {
    left: 62%;
    right: auto;
    bottom: 30px;
  }

  .d7-title {
    margin-top: -50px;
  }

  .faq {
    width: 40%;
    min-width: 560px;
    gap: 10px;
  }

  .faq-btn {
    gap: 34px;
    padding: 22px 26px;
  }

  .faq-num,
  .faq-q {
    font-size: 22px;
  }

  .faq-arrow {
    border-left-width: 13px;
    border-right-width: 13px;
    border-top-width: 15px;
  }

  .faq-a {
    padding: 0 26px 24px 90px;
    font-size: 16px;
  }
}


/* ==========================================================================
   12. WIDESCREEN — a partir de 1920px de largura de .page

   O bloco desktop ancora as caixas e a tipografia em px, enquanto todas as
   artes são % / cover. Até 1920 os dois andam juntos; acima disso a arte
   cresce e o px fica para trás, e a composição desmancha.

   Aqui cada px do desktop vira o seu equivalente em cqw na régua de 1920
   (cqw = 1% da largura de .page). Em 1920 os valores batem exatamente com os
   do desktop — a quebra não dá solavanco — e acima disso a página inteira
   escala junto com as artes.
   ========================================================================== */

@container pg (min-width: 1920px) {

  /* ---------- 12.1 Peças compartilhadas ---------- */

  .btn {
    padding: 0.26cqw 1.04cqw;
  }

  /* ---------- 12.2 Nav ---------- */

  .nav {
    height: 5.21cqw;
    gap: 1.25cqw;
    padding: 1.56cqw 7.81cqw;
  }

  .nav-logo img {
    height: 1.98cqw;
  }

  .nav-links {
    gap: 1.35cqw;
  }

  .nav-links > a {
    font-size: 0.94cqw;
  }

  .nav-links > a.nav-cta {
    right: 7.81cqw;
    padding: 0.57cqw 1.56cqw;
  }

  .nav-cta > span {
    font-size: 1.25cqw;
  }

  /* ---------- 12.3 Hero ---------- */

  .hero-content {
    gap: 2.81cqw;
  }

  .hero-block {
    width: 37.97cqw;
    max-width: 52cqw;
    gap: 0.21cqw;
  }

  .hero-meta span {
    font-size: 1.09cqw;
  }

  .btn--hero {
    padding: 0.26cqw 1.04cqw;
  }

  .btn--hero > span {
    font-size: 1.56cqw;
  }

  /* ---------- 12.4 Dobra 2 ---------- */

  .d2-text {
    gap: 1.35cqw;
    font-size: 0.94cqw;
  }

  /* ---------- 12.5 Dobra 3 ---------- */

  .d3 {
    height: 7.29cqw;
  }

  .d3-track {
    gap: 4.69cqw;
  }

  .d3-track img {
    height: 4.32cqw;
  }

  /* ---------- 12.6 Dobra 4 ----------
     os `top` dos cards são relativos à .d4, que também passa a escalar:
     a proporção de cada caixa sobre a tipografia se mantém */

  .d4 {
    height: 100cqw;
  }

  .d4-title h2 {
    font-size: 3.12cqw;
  }

  .d4-card {
    gap: 0.73cqw;
  }

  .d4-card-head {
    gap: 0.52cqw;
  }

  .d4-num {
    font-size: 0.99cqw;
    padding: 0.05cqw 0.36cqw;
  }

  .d4-card h3 {
    font-size: 1.2cqw;
  }

  .d4-card p {
    margin-left: 1.56cqw;
    font-size: 1.25cqw;
  }

  .d4-card--1 {
    left: 3.54cqw;
    top: 27.45cqw;
  }

  .d4-card--2 {
    left: 47.34cqw;
    top: 28.39cqw;
  }

  .d4-card--3 {
    left: 40.62cqw;
    top: 46.61cqw;
  }

  .d4-card--4 {
    left: 5.42cqw;
    top: 68.54cqw;
  }

  .d4-cta {
    bottom: 3.12cqw;
  }

  .btn--d4 > span {
    font-size: 1.46cqw;
  }

  /* ---------- 12.6b Dobra do ingresso ---------- */
  /* larguras e recuos desta dobra são proporcionais desde o desktop, então
     escalam sozinhos; só o que ficou em px entra aqui */

  .di-buy {
    gap: 1.15cqw;
  }

  .btn--di > span {
    font-size: 1.46cqw;
  }

  /* ---------- 12.7 Dobra 5 ---------- */

  .d5 {
    height: 53.12cqw;
  }

  .d5-title {
    top: 3.12cqw;
  }

  .d5-title img {
    min-width: 27.08cqw;
  }

  .d5-kit {
    top: 11.46cqw;
  }

  .d5-kit img {
    width: 32.45cqw;
    height: 34.9cqw;
    min-width: 19.79cqw;
  }

  .d5-cta {
    bottom: 3.65cqw;
  }

  .btn--d5 > span {
    font-size: 1.46cqw;
  }

  /* ---------- 12.8 Dobra 6 ---------- */

  .d6-stage {
    height: 52.08cqw;
  }

  .d6-leaf--a {
    top: 1.04cqw;
  }

  .d6-leaf--b {
    top: 26.04cqw;
  }

  .d6-photo {
    top: 2.08cqw;
  }

  .d6-text {
    font-size: 1.3cqw;
  }

  .d6-text--a {
    top: 5.21cqw;
  }

  .d6-box {
    top: 29.17cqw;
    padding: 1.15cqw 1.25cqw 3.12cqw 1.25cqw;
  }

  .d6-cta {
    bottom: 2.6cqw;
  }

  .btn--d6 {
    padding: 0.26cqw 1.04cqw;
  }

  .btn--d6 > span {
    font-size: 1.35cqw;
  }

  /* ---------- 12.9 Dobra 7 ---------- */

  .d7 {
    padding: 0 0 6.25cqw;
  }

  .d7-year {
    font-size: 11.98cqw;
  }

  .d7-year--20 {
    top: 13.02cqw;
  }

  .d7-year--26 {
    bottom: 1.56cqw;
  }

  .d7-title {
    margin-top: -2.6cqw;
  }

  .faq {
    min-width: 29.17cqw;
    gap: 0.52cqw;
  }

  .faq-btn {
    gap: 1.77cqw;
    padding: 1.15cqw 1.35cqw;
  }

  .faq-num,
  .faq-q {
    font-size: 1.15cqw;
  }

  .faq-arrow {
    border-left-width: 0.68cqw;
    border-right-width: 0.68cqw;
    border-top-width: 0.78cqw;
  }

  .faq-a {
    padding: 0 1.35cqw 1.25cqw 4.69cqw;
    font-size: 0.83cqw;
  }
}