/* =========================
   FONTES
   Os arquivos ficam na pasta fonts/ e vão junto com o site,
   assim todo visitante vê a Helvetica Neue (não só quem tem instalada).
   Pesos usados no Figma: Roman (400) e Heavy (800).
   ========================= */
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* mostra o texto na hora e troca quando a fonte carrega */
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================
   VARIÁVEIS
   Funcionam como os estilos de cor do Figma:
   você define uma vez e reaproveita.
   ========================= */
:root {
  --vermelho: #f61e00;
  --preto: #000000;
  --branco: #ffffff;
  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Margem lateral: 120px no desktop (1440), encolhe até 20px no celular */
  --margem: clamp(20px, 8.333vw, 120px);

  /* Títulos grandes: 45px no desktop, nunca menores que 30px */
  --titulo: clamp(30px, 3.125vw, 45px);
}

/* =========================
   BASE
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box; /* padding conta dentro do tamanho, como no Figma */
}

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--preto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%; /* imagem nunca passa da largura da tela */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Negrito do site = Helvetica Neue Heavy */
strong {
  font-weight: 800;
}

/* Contorno de foco para quem navega pelo teclado */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* =========================
   TIPOGRAFIA (estilos de texto)
   ========================= */

/* Títulos de seção: 45px, negrito, caixa alta */
.titulo {
  font-size: var(--titulo);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.titulo--centro {
  text-align: center;
}

/* Trecho do título com peso regular, ex.: [FORA DO COMUM] */
.leve {
  font-weight: 400;
}

/* =========================
   LISTA COM ÍCONE (componente)
   O ícone ri:indeterminate-circle-line entra pelo CSS,
   assim o HTML fica só com o texto.
   ========================= */
.lista-traco li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.lista-traco li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("img/icones/traço-círculo.svg") center / contain no-repeat;
}

/* Versão pequena, usada no investimento */
.lista-traco--mini li {
  align-items: flex-start;
  gap: 6px;
  font-size: 10px;
  line-height: 1.2;
}

.lista-traco--mini li::before {
  width: 12px;
  height: 12px;
}

/* =========================
   TOPO
   ========================= */
.topo {
  background: var(--preto);
  padding: 20px 120px;
}

.topo__menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
}

.topo__menu a {
  color: var(--branco);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  padding: 6px 9px;
  border: 1px solid transparent; /* fica branca no hover */
  border-radius: 20px;
  transition: border-color 0.2s;
}

.topo__menu a:hover {
  border-color: var(--branco);
}

/* No celular */
@media (max-width: 768px) {
  .topo {
    padding: 12px 20px;
  }

  .topo__menu {
    gap: 8px;
    justify-content: space-between;
  }

  .topo__menu a {
    font-size: 11px;
    padding-inline: 5px;
  }
}

/* =========================
   BOTÃO (componente)
   No Figma: BOTÕES DESKTOP.
   Padrão vermelho; no hover vira contorno.
   ========================= */
.botao {
  display: inline-block;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 9px;
  border: 1px solid var(--vermelho);
  border-radius: 20px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.botao:hover {
  background: transparent;
  border-color: var(--branco);
  color: var(--branco);
}

/* Variante preta, usada no hero */
.botao--preto {
  background: var(--preto);
  border-color: var(--preto);
}

/* Variante maior, usada no hero (237 × 37) */
.botao--grande {
  padding: 11px 19px;
}

/* Variante menor, usada na seção "Uma identidade [fora do comum]" (146 × 22) */
.botao--pequeno {
  font-size: 8px;
  padding: 5px 7px;
}

/* Sobre fundo branco o contorno do hover precisa ser preto */
.botao--fundo-claro:hover {
  border-color: var(--preto);
  color: var(--preto);
}

/* =========================
   HERO
   ========================= */
.hero {
  display: flex;
  align-items: center;
  min-height: 600px;
  padding: 38px var(--margem);
  color: var(--branco);
  background: var(--preto) url("img/fotos/hero.png") center / cover no-repeat;
}

.hero__conteudo {
  padding: 60px 0;
}

.hero__titulo {
  display: flex;
  flex-direction: column;
  gap: 17px;
  font-size: var(--titulo);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.hero__subtitulo {
  margin: 30px 0 28px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* =========================
   IMAGEM 01
   ========================= */
.imagem-destaque {
  overflow: hidden;
  background: var(--preto);
}

/* A imagem cresce de 75% até 100% conforme a página desce.
   O JavaScript no fim do index.html calcula --progresso (de 0 a 1).
   Sem JavaScript, --progresso vale 1 e a imagem fica no tamanho normal. */
.imagem-destaque img {
  width: 100%;
  aspect-ratio: 1440 / 823; /* guarda o espaço mesmo antes da foto carregar */
  object-fit: contain; /* como o "Fit" do Figma: mostra a imagem inteira */
  transform: scale(calc(0.75 + 0.25 * var(--progresso, 1)));
}

/* =========================
   PARA QUEM
   ========================= */
/* Conteúdo numa faixa de até 1200px centralizada na página:
   título encostado na esquerda da faixa, tópicos na direita.
   max(...) usa a margem normal ou, em telas largas, a sobra dos lados. */
.para-quem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 50px max(var(--margem), (100% - 1200px) / 2);
  background: var(--preto);
  color: var(--branco);
}

/* Entrelinha de 45px (100%) nos dois títulos ao lado de texto */
.para-quem__titulo,
.direcao__titulo {
  line-height: 1;
}

.para-quem__topicos {
  display: flex;
  flex: 0 1 662px; /* coluna de 662px: a lista começa a 658px da borda */
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.para-quem__topicos .lista-traco {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* =========================
   ENTREGÁVEIS
   ========================= */
.entregaveis {
  padding: 52px var(--margem);
  background: var(--vermelho);
}

.entregaveis__quadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: var(--branco);
  border-radius: 24px;
}

/* Seis cards lado a lado dividindo a largura do quadro.
   Com 8px entre eles, cada card fica com ~180px (o padrão era 181). */
.entregaveis__lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

/* Card de entregável: ~180 × 230 */
.entregavel {
  min-height: 230px;
  padding: 24px;
  background: var(--preto);
  color: var(--branco);
  border-radius: 16px;
}

.entregavel__numero {
  margin-bottom: 4px;
  font-size: 8px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* Reserva sempre 2 linhas para o nome: assim a linha e a descrição
   ficam na mesma altura em todos os cards, com nome curto ou longo */
.entregavel__nome {
  min-height: 2em;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.entregavel__descricao {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--branco);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

/* =========================
   DIREÇÃO (BODY IMG 3)
   ========================= */
/* Título centralizado em cima; embaixo, o texto começa no meio
   da seção, em duas colunas, com o botão abaixo da primeira */
.direcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 72px max(var(--margem), (100% - 1200px) / 2);
  background: var(--preto);
  color: var(--branco);
}

.direcao__titulo {
  text-align: center;
}

.direcao__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  align-self: stretch;
  margin-left: 50%; /* começa no meio da seção */
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* Duas colunas alinhadas pela última linha (flex-end = base) */
.direcao__colunas {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

/* =========================
   TIMELINE E INVESTIMENTO
   ========================= */
.timeline {
  padding: 50px var(--margem);
  background: var(--branco);
}

.timeline__quadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 90px 54px;
  background: var(--preto);
  color: var(--branco);
  border-radius: 24px;
}

.timeline__quadro .titulo {
  margin-bottom: 30px;
}

/* Quatro cards de 220px com 40px entre eles */
.etapas {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  justify-content: center;
  gap: 40px;
}

.etapa {
  padding: 24px;
  background: var(--branco);
  color: var(--preto);
  border-radius: 20px;
}

.etapa__semanas {
  margin-bottom: 4px;
  color: var(--vermelho);
  font-size: 10px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.etapa__nome {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.etapa__itens li {
  padding: 9px 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Linha só entre um item e outro */
.etapa__itens li + li {
  border-top: 1px solid var(--preto);
}

.etapa__encontro {
  font-weight: 800;
}

/* Hover dos cards (entregáveis e timeline usam a mesma animação):
   o card sobe e ganha um contorno vermelho por dentro.
   (hover: hover) = só em aparelhos com mouse; no celular o efeito
   ficaria "preso" depois do toque. */
.entregavel,
.etapa {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .entregavel:hover,
  .etapa:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 0 0 3px var(--vermelho);
  }
}

/* Selos em pílula */
.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 50px;
}

.selos li {
  padding: 6px 16px;
  border: 1px solid var(--branco);
  border-radius: 20px;
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/* Hover: a pílula preenche de branco e sobe um pouco */
@media (hover: hover) {
  .selos li:hover {
    transform: translateY(-3px);
    background: var(--branco);
    color: var(--preto);
  }
}

/* Preço à esquerda, benefícios à direita */
.investimento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1020px;
  margin: 50px 0;
}

/* Grade de 2 colunas: valor | "à vista" e, embaixo, o parcelamento */
.investimento__preco {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  letter-spacing: -0.05em;
  transition: transform 0.3s ease;
}

/* Hover: o preço cresce 10% */
@media (hover: hover) {
  .investimento__preco:hover {
    transform: scale(1.1);
  }
}

.investimento__valor {
  font-size: clamp(40px, 4.9vw, 70px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap; /* "R$" nunca separa do número */
}

.investimento__condicao {
  font-size: 25px;
}

/* Ocupa as duas colunas e encosta à direita, embaixo do "à vista" */
.investimento__parcelas {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 8px;
}

.investimento__beneficios {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 9px 17px;
}

/* =========================
   RODAPÉ (CHAMADA FINAL)
   ========================= */
.rodape {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 40px;
  padding: 70px var(--margem);
  background: var(--branco);
}

.rodape__principal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.rodape__assinatura {
  display: flex;
  align-items: center;
  gap: 72px;
}

.rodape__direitos {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.rodape__redes {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rodape__redes a {
  display: block;
  transition: opacity 0.2s;
}

.rodape__redes a:hover {
  opacity: 0.6;
}

.rodape__links {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rodape__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--preto);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.rodape__links img {
  flex: none;
  transition: transform 0.2s;
}

.rodape__links a:hover img {
  transform: translateX(4px);
}

/* =========================
   TELAS MÉDIAS (tablet e notebook pequeno)
   ========================= */
@media (max-width: 1200px) {
  .entregaveis__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .timeline__quadro {
    padding: 50px 40px;
  }

  .etapas {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }

  .investimento {
    flex-direction: column;
  }

  /* Sem espaço para começar no meio: o texto centraliza embaixo do título */
  .direcao__texto {
    align-self: center;
    margin-left: 0;
  }
}

/* =========================
   CELULAR
   ========================= */
@media (max-width: 768px) {
  /* As quebras de linha do desktop atrapalham em tela estreita */
  .titulo br,
  .hero__titulo br,
  .hero__subtitulo br,
  .direcao__texto br {
    display: none;
  }

  .hero {
    min-height: 0;
  }

  .hero__conteudo {
    padding: 40px 0;
  }

  .hero__subtitulo {
    font-size: 17px;
  }

  .para-quem {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-block: 48px;
  }

  .para-quem__topicos {
    flex-basis: auto; /* em coluna, os 662px virariam altura */
  }

  .entregaveis {
    padding-block: 40px;
  }

  .entregaveis__quadro {
    padding: 32px 20px;
  }

  .entregaveis__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entregavel {
    min-height: 0;
  }

  .direcao {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-block: 48px;
  }

  .direcao__titulo {
    text-align: left;
  }

  .direcao__texto {
    align-self: flex-start;
    font-size: 17px;
  }

  .direcao__colunas {
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
  }

  /* No celular o botão pequeno volta ao tamanho normal, mais fácil de tocar */
  .botao--pequeno {
    font-size: 12px;
    padding: 6px 9px;
  }

  .timeline {
    padding: 40px 12px;
  }

  .timeline__quadro {
    padding: 40px 16px;
  }

  .etapas {
    grid-template-columns: minmax(0, 340px);
    gap: 16px;
  }

  .investimento__parcelas {
    justify-self: center;
  }

  .investimento__beneficios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  .rodape {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 48px;
  }

  /* Solta título e créditos no grid para os créditos irem para o fim */
  .rodape__principal {
    display: contents;
  }

  .rodape__links {
    order: 1;
  }

  .rodape__assinatura {
    order: 2;
    flex-wrap: wrap;
    gap: 24px;
  }

  .rodape__links a {
    font-size: 17px;
  }
}

/* Celular estreito: em 2 colunas os nomes dos entregáveis não cabem */
@media (max-width: 520px) {
  .entregaveis__lista {
    grid-template-columns: 1fr;
  }
}

/* =========================
   MENOS MOVIMENTO
   Quem ativa "reduzir movimento" no sistema vê as cores do hover,
   mas nada se mexe.
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .imagem-destaque img,
  .entregavel:hover,
  .etapa:hover,
  .selos li:hover,
  .investimento__preco:hover {
    transform: none;
  }
}