/* ═══════════════════════════════════════════
   COLLECTABLE™ — Site
   Grid: 4 cols × 535px | gap 50px | margin 63px
   Base canvas: 2410px → proporções em vw
   ═══════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ── Tokens ── */
:root {
  /* Grid */
  --margin:  2.62vw;   /* 63px @ 2410 */
  --gap:     2.07vw;   /* 50px @ 2410 */

  /* Spacing scale (proporcionais ao canvas original) */
  --sp-green:  3.32vw;   /*  80px */
  --sp-blue:   3.98vw;   /*  96px */
  --sp-purple: 4.98vw;   /* 120px */
  --sp-yellow: 6.64vw;   /* 160px */
  --sp-red:    9.96vw;   /* 240px */

  /* Typography — fluid, nunca menor que limites legíveis */
  --t-h1:       clamp(22px, 2.07vw, 50px);
  --t-body:     clamp(15px, 1.25vw, 30px);
  --t-bold-lg:  clamp(16px, 1.45vw, 35px);
  --t-semibold: clamp(16px, 1.45vw, 35px);
  --t-small:    clamp(13px, 1.04vw, 25px);
  --t-copy:     clamp(32px, 3.0vw,  72px);

  /* Line heights */
  --lh-tight:  0.95;
  --lh-body:   1.1;

  /* Tracking */
  --ls-h1:     0.01em;
  --ls-body:   0.01em;

  /* Colors */
  --black: #000000;
  --white: #ffffff;
}

/* ── Base ── */
html { background: var(--white); color: var(--black); }

body {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Grid ── */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--margin);
}

.col-1   { grid-column: 1; }
.col-2   { grid-column: 2; }
.col-3   { grid-column: 3; }
.col-4   { grid-column: 4; }
.col-1-2 { grid-column: 1 / 3; }
.col-2-3 { grid-column: 2 / 4; }
.col-3-4 { grid-column: 3 / 5; }

/* ── Spacing helpers ── */
.mt-green        { margin-top: var(--sp-green); }
.mt-half-purple  { margin-top: calc(var(--sp-purple) / 2); }
.mt-purple       { margin-top: var(--sp-purple); }
.mt-yellow    { margin-top: var(--sp-yellow); }
.mt-red       { margin-top: var(--sp-red); }
.mt-par       { margin-top: 1.1em; }         /* gap entre parágrafos */
.mt-sm        { margin-top: 0.4em; }
.mt-green-red { margin-top: calc(var(--sp-green) + var(--sp-red)); }
.mt-2red             { margin-top: calc(2 * var(--sp-red)); }
.mt-2red-lg          { margin-top: calc(var(--sp-red) * 2.4); }   /* mt-2red + 20% = 576px */
.mt-green-red-purple { margin-top: calc(var(--sp-green) + var(--sp-red) + var(--sp-purple)); }

/* ── Typography ── */

/* Headings */
.heading-xl {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}

/* Helvetica Now Display substitute */
.font-helvetica {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Body weights */
.body-regular  { font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.body-light    { font-size: var(--t-body); font-weight: 300; line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.body-bold     { font-weight: 700; }
.body-bold-lg  { font-size: var(--t-bold-lg); font-weight: 700; line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.body-semibold { font-size: var(--t-semibold); font-weight: 600; line-height: var(--lh-body); letter-spacing: var(--ls-body); }

/* Step labels inherit body-light sizing */
.step-text {
  font-size: var(--t-body);
  font-weight: 300;
  line-height: var(--lh-body);
}

/* Disclaimer */
.body-disclaimer {
  font-size: var(--t-small);
  font-weight: 300;
  line-height: var(--lh-body);
  opacity: 0.4;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

.site-header {
  padding-top: var(--sp-yellow);
}

/* Logo + Copyright */
.header-top {
  position: relative;
  padding: 0 var(--margin);
}

.logo-wrap {
  overflow: hidden;
}

.logo-img {
  width: 100%;
  height: auto;
  display: block;
}

.logo-letter {
  animation: logo-rise 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes logo-rise {
  from { transform: translateY(400px); }
  to   { transform: translateY(0); }
}

.copyright {
  position: absolute;
  top: 0;
  right: var(--margin);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--t-copy);
  font-weight: 700;
  line-height: var(--lh-tight);
  transform: translateY(-15%);
}

/* Header photos */
.header-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--margin);
  margin-top: var(--sp-blue);
}

.header-photos .photo-slot img {
  width: 100%;
  aspect-ratio: 535 / 481;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

/* Blend multiply para fotos do header (remove fundos brancos) */
.blend-multiply {
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════
   PHOTO ROWS (galerias)
   ═══════════════════════════════════════════ */

.photo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--margin);
}

.photo-row .photo-slot img,
.photo-slot img {
  width: 100%;
  aspect-ratio: 535 / 480;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════
   FILL IMAGE (imagem lateral proporcional)
   ═══════════════════════════════════════════ */

.fill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Título centrado — usado em section-intro e section-sua-obra */
.titulo-centrado {
  padding: 0 var(--margin);
  text-align: center;
}

/* ── Sticky image grid ── */
.sticky-grid {
  align-items: start;
}

.sticky-col {
  position: sticky;
  align-self: start;
  /* top calculado via JS com base na altura real da imagem */
}

/* ═══════════════════════════════════════════
   FULL WIDTH IMAGE
   ═══════════════════════════════════════════ */

.full-width-img {
  padding: 0 var(--margin);
}

/* Vídeo: espaço antes/depois via padding (não colapsa, fica
   garantidamente igual mesmo dentro do .anim-wrap injetado por JS).
   Espaço antes é 15% maior que o espaço depois. */
.full-width-img:has(.full-width-video) {
  margin-top: 0;
  padding-top: calc(var(--sp-red) * 1.15);
  padding-bottom: var(--sp-red);
}

.full-width-img img {
  width: 100%;
  height: auto;
  display: block;
}

.full-width-video {
  display: block;
  width: 100%;
  height: 70vh;
  object-fit: cover;
  object-position: center;
}

/* ═══════════════════════════════════════════
   CTA BUTTON
   ═══════════════════════════════════════════ */

.cta-btn {
  display: block;
  width: 100%;
  background: var(--black);
  color: var(--white);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: var(--t-bold-lg);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  text-align: center;
  padding: 0.75em 1em;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cta-btn:hover {
  opacity: 0.85;
}

.cta-wrap {
  /* container dentro de col-3-4 — ocupa só a metade esquerda (1 coluna) */
  width: calc(50% - var(--gap) / 2);
}

/* align-items:start garante que cada item usa só a sua altura,
   fazendo translateY(100%) ocultar completamente o will-animate */
.section-sua-obra .grid-4[data-cascade] {
  align-items: start;
}

/* CTA no grid-4: col-3 fica sozinha */
.section-sua-obra .col-3 {
  grid-column: 3;
}

/* ═══════════════════════════════════════════
   DIAGRAMA
   ═══════════════════════════════════════════ */

.diagram-wrap {
  padding: 0 var(--margin);
}

.diagram-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════
   SEÇÃO MERCADO — lista estruturada (Group 2189)
   ═══════════════════════════════════════════ */

.market-list {
  display: flex;
  flex-direction: column;
  gap: 1.54vw;   /* 37px @ 2410 — entre itens */
}

.market-item {
  display: flex;
  flex-direction: column;
}

.market-item-header {
  display: flex;
  align-items: center;
  gap: 3.82vw;   /* 92px @ 2410 */
  margin-bottom: 1.1em;
}

.market-num {
  flex: 0 0 8.90vw;   /* 214px @ 2410 */
  font-size: var(--t-small);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-align: right;
}

.market-title {
  flex: 1;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.market-outro {
  margin-top: calc(var(--sp-purple) - 1.54vw);
}

/* ── Como funciona 1: texto bottom-alinhado com col-2 ── */
.section-como .col-1 .will-animate {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.como-intro-text {
  margin-top: auto;
}

/* ═══════════════════════════════════════════
   SEÇÃO BIO — alinhamento vertical topo
   ═══════════════════════════════════════════ */

.section-bio .grid-4 {
  align-items: start;
}

/* Espaço antes de "Quem conduz a imersão": mt-green-red + 20% */
.section-bio .mt-green-red {
  margin-top: calc((var(--sp-green) + var(--sp-red)) * 1.2);
}

/* ═══════════════════════════════════════════
   CRITÉRIOS — heading acima de 2 colunas
   ═══════════════════════════════════════════ */

.section-criteria .heading-xl {
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   FOOTER IMAGE
   ═══════════════════════════════════════════ */

.full-width-img:last-child {
  margin-bottom: var(--sp-yellow);
}

/* ═══════════════════════════════════════════
   FAQ — grade única de 2 colunas (sem carrossel)
   Mesma estrutura para mobile e desktop; o
   bloco @media (max-width: 768px) só ajusta
   colunas e os valores de espaçamento.
   ═══════════════════════════════════════════ */

.faq-wrap {
  position: relative;
  background: #A4A4A4;
  margin: 0;
  padding: var(--sp-yellow) var(--margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  row-gap: var(--sp-green);
}

.faq-header {
  grid-column: 1 / -1;
}

.faq-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  opacity: 0.3;
  color: var(--black);
}

.faq-heading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  color: var(--white);
  margin-top: 1.74vh;
}

.faq-col {
  display: flex;
  flex-direction: column;
}

.faq-q {
  font-size: var(--t-small);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--white);
}

.faq-a {
  font-size: var(--t-small);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--white);
}

.faq-q + .faq-a {
  margin-top: 1.1em;
}

/* Espaçamento regular entre todo par pergunta/resposta, em qualquer coluna */
.faq-qa + .faq-qa {
  margin-top: var(--sp-green);
}

.faq-qa + .faq-cta-block {
  margin-top: var(--sp-green);
}

.faq-a + .faq-list {
  margin-top: 33px;
}

.faq-list {
  list-style: decimal;
  padding-left: 1.5em;
  color: var(--white);
  font-size: var(--t-small);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.faq-list li + li {
  margin-top: 1.1em;
}

.faq-cta-block .faq-a {
  margin-top: 1.1em;
}

.faq-cta-block .faq-a:first-child {
  margin-top: 0;
}

.faq-cta-block a {
  font-weight: 700;
  color: var(--white);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   SCROLL ANIMATIONS — translateY only
   ═══════════════════════════════════════════ */

.anim-wrap {
  overflow: hidden;
}

.will-animate {
  transform: translateY(100%);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.will-animate.animated {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   FOOTER
   Logo: 2290×400px → width=95vw, left=var(--margin)
   Rodapé bar: 20px · opacity 40% · gap logo→bar=1.4vw
   ═══════════════════════════════════════════ */

.section-footer {
  margin-top: 1.9vw;
  padding-bottom: 1.32vw;
}

.footer-logo-wrap {
  padding: 0 var(--margin);
}

.footer-logo {
  display: block;
  width: 100%;
  opacity: 0.15;
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--margin);
  margin-top: 1.4vw;
}

.footer-meta {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(10px, 0.83vw, 20px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.2px;
  color: var(--black);
  opacity: 0.2;
}

/* ══════════════════════════════════════════════
   HEADER MOBILE — oculto no desktop
   ══════════════════════════════════════════════ */
.header-m { display: none; }

/* ══════════════════════════════════════════════
   RESPONSIVE — mobile ≤ 768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Tokens ── */
  :root {
    --margin:    3.59vw;
    --gap:       4.1vw;
    --sp-green:  6.67vw;
    --sp-blue:   8.21vw;
    --sp-purple: 10.26vw;
    --sp-yellow: 13.33vw;
    --sp-red:    20.51vw;
    --t-body:    clamp(17.1px, 4.38vw, 19.8px);
    --t-bold-lg: clamp(22px, 5.64vw, 26px);
    --t-semibold: clamp(22px, 5.64vw, 26px);
  }

  /* ── Headers ── */
  .site-header { display: none; }

  .header-m {
    display: block;
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
  }

  /* ©26: vertical, lendo de baixo para cima */
  .header-m-copyright {
    position: absolute;
    left: 4.29%;
    top: 3.28%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 6vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  /* Logo: container-type:size para 100cqh = altura do container */
  .header-m-logo-wrap {
    container-type: size;
    position: absolute;
    left: 6.15%;
    top: 3.4%;
    right: 60.56%;
    bottom: 8.76%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Logo SVG: largura = altura do container → após rotate(-90deg) preenche exatamente */
  .header-m-logo {
    width: 100cqh;
    height: auto;
    rotate: -90deg;
    flex-shrink: 0;
  }

  /* 4 fotos empilhadas na coluna direita */
  .header-m-photos {
    position: absolute;
    left: 44.7%;
    top: 3.4%;
    right: 6.15%;
    bottom: 8.76%;
    display: flex;
    flex-direction: column;
    gap: 2.12%;
  }

  .header-m-photo {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .header-m-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ── Grid → coluna única + row-gap ── */
  .grid-4 {
    grid-template-columns: 1fr;
    row-gap: var(--sp-purple);   /* ~40px: espaço padrão entre colunas empilhadas */
  }

  .col-1, .col-2, .col-3, .col-4,
  .col-1-2, .col-2-3, .col-3-4,
  .section-sua-obra .col-3 {
    grid-column: 1;
  }

  /* ── Sticky: desativar + gap generoso imagem → texto ── */
  .sticky-col {
    position: static;
  }

  .sticky-col img {
    max-height: 80vw;
    object-fit: cover;
  }

  .sticky-grid {
    row-gap: var(--sp-red);      /* respiro generoso entre imagem e bloco de texto */
  }

  /* ── Photo rows: 2×2 ── */
  .photo-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap);         /* empilha igualando o column-gap */
  }

  /* ── Market list: gap maior entre itens ── */
  .market-list {
    gap: var(--sp-purple);       /* ~40px: de 6px para 40px */
  }

  .market-num {
    flex: 0 0 auto;
    min-width: 8vw;
  }

  /* ── Section como: steps com espaço extra ── */
  .section-como .col-1 .will-animate {
    height: auto;
  }

  /* margin-top: auto não tem efeito com height: auto — mesma distância
     usada depois dos títulos "Quem conduz" e "Critérios" (mt-purple) */
  .como-intro-text {
    margin-top: var(--sp-purple);
  }

  /* col-1 (título+intro) tem menos gap abaixo → steps têm mais autonomia */
  .section-como .grid-4 {
    row-gap: var(--sp-red);      /* espaço generoso entre título e steps, e entre steps */
  }

  /* ── FAQ: 2 colunas → 1 coluna ── */
  .faq-wrap {
    grid-template-columns: 1fr;
    row-gap: var(--sp-purple);
  }

  .faq-qa + .faq-qa {
    margin-top: var(--sp-purple);
  }

  .faq-qa + .faq-cta-block {
    margin-top: var(--sp-purple);
  }

  /* ── Fonte: unificar Helvetica → Archivo no mobile ── */
  .font-helvetica {
    font-family: 'Archivo', Helvetica, Arial, sans-serif;
  }

  /* ── Botões: full-width e centrados ── */
  .cta-wrap {
    width: 100%;
  }

  /* ── Footer ── */
  .section-footer {
    margin-top: 15vw;
    padding-bottom: var(--sp-blue);
  }

  .footer-meta {
    font-size: clamp(11px, 3vw, 14px);
  }
}