/* ==========================================================================
   hero.css — capa B (13/10/2026). design.md §8, §12, §13.

   O texto fica em cima, sobre grafite, e a foto dos três sócios vem embaixo,
   numa faixa de ponta a ponta e sem overlay. A foto não tem área livre para
   receber texto por cima: qualquer camada escura cairia sobre os rostos.
   O carrossel saiu junto com o slide 2 (rodada de outubro), e com ele saíram
   o hero.js, o overlay, os controles e o pin do GSAP.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--preto);
  color: var(--creme);
  /* Linhas de grade do hero com o dobro da opacidade das seções: aqui elas
     só vivem no trecho de texto, então não viram pauta. A foto, opaca e com
     z-index acima, cobre a parte de baixo delas. */
  --linha-grade-fundo: rgba(249, 246, 234, 0.04);
  padding-top: calc(var(--altura-header) + var(--sp-6));
  padding-bottom: var(--sp-7);
}

/* --- Ordem no celular: título → foto → apoio + botão ---
   No DOM, título e apoio moram juntos em .hero__texto, porque no desktop eles
   dividem a mesma linha do grid. Abaixo de 1024px o wrapper vira
   `display: contents`: os dois blocos passam a ser filhos diretos do flex do
   hero, e `order` encaixa a foto entre eles. É a exceção deliberada ao "imagem
   antes do texto" de design.md §13 — o título diz onde o visitante chegou, e a
   foto ainda entra na primeira tela. */
.hero__texto {
  display: contents;
}

.hero__titulo-bloco,
.hero__apoio {
  padding-inline: var(--gutter);
}

.hero__titulo-bloco {
  order: 1;
}

.hero__foto {
  order: 2;
  position: relative;
  z-index: 1;
  display: block;
  margin-block: var(--sp-6) 28px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero__apoio {
  order: 3;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Tipografia --- */
.hero__desde {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--terracota-clara);
}

.hero__titulo {
  margin-top: var(--sp-3);
  font-family: var(--fonte-display);
  font-weight: 700;
  /* 34px em 320, 38px a partir de 375 (o tamanho do Figma mobile). */
  font-size: clamp(2.125rem, 10.2vw, 2.375rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--creme);
}

.hero__lead {
  font-family: var(--fonte-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(249, 246, 234, 0.9);
}

.hero__apoio .btn {
  margin-top: 28px;
}

/* design.md §13: no celular o botão do hero vai a largura total */
@media (max-width: 767px) {
  .hero__apoio .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Desktop: duas colunas sobre a faixa de foto --- */
@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--altura-header) + clamp(var(--sp-8), 10.8vw, 156px));
    padding-bottom: 0;
  }

  /* Volta a ser uma caixa: título à esquerda, apoio + botão à direita, com
     a base dos dois alinhada (a última linha do H1 e a base do botão). */
  .hero__texto {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
  }

  .hero__titulo-bloco,
  .hero__apoio {
    padding-inline: 0;
  }

  .hero__titulo-bloco {
    flex: 0 1 700px;
    min-width: 0;
  }

  .hero__apoio {
    flex: 0 1 460px;
    min-width: 0;
  }

  .hero__titulo {
    margin-top: var(--sp-4);
    font-size: clamp(2.375rem, 3.9vw, 3.5rem);
  }

  .hero__lead {
    font-size: 1.125rem;
  }

  .hero__apoio .btn {
    margin-top: var(--sp-6);
  }

  /* Faixa 18:7 — 1440×560 na largura de referência. Em telas muito largas a
     proporção deixaria a foto alta demais; o teto segura em 760px e o
     `object-fit` recorta, ancorado um pouco acima do centro para não cortar
     as cabeças. */
  .hero__foto {
    margin-block: var(--sp-9) 0;
    aspect-ratio: 18 / 7;
    max-height: 760px;
  }

  .hero__foto img {
    object-position: center 30%;
  }
}

/* --- Rótulo lateral vertical: nome da marca na margem esquerda, terminando
   na base do bloco de texto. Só a partir de 1360px, que é onde sobra margem
   entre a borda da tela e a primeira linha de grade.
   `writing-mode` em vez de `transform: rotate()`: com rotate, a caixa
   continua com a largura do texto na horizontal (~240px) e só o desenho gira,
   então `left` posiciona a caixa larga e o rótulo acaba no meio da coluna. --- */
.hero__rotulo-lateral {
  display: none;
}

@media (min-width: 1360px) {
  .hero__rotulo-lateral {
    display: block;
    position: absolute;
    /* .hero__texto é o .container: `left: 0` é a borda dele, e o conteúdo
       começa `--gutter` para dentro. O rótulo fica 60px antes do conteúdo
       (40px antes da linha de grade), como no Figma. */
    left: calc(var(--gutter) - 60px);
    bottom: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-family: var(--fonte-sans);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(249, 246, 234, 0.4);
  }
}

/* Palavras do SplitText — estado inicial fica só quando o GSAP realmente
   for animar; sem JS/GSAP o título aparece inteiro, normalmente. */
.hero__titulo .palavra {
  display: inline-block;
  will-change: transform, opacity, filter;
}