/* ==========================================================================
   Seções — estilos específicos de cada bloco da página, na ordem do documento
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--superficie-pagina);
  border-bottom: var(--traco-fino) solid var(--borda-fina);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-7);
  padding-block: var(--espaco-4);
}

.cabecalho__marca {
  flex: none;
}

.cabecalho__assinatura {
  height: 52px;
  width: auto;
}

.navegacao-principal {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
}

.navegacao-principal__link {
  font-size: var(--texto-fino);
  letter-spacing: 0.02em;
  color: var(--texto-corpo);
  white-space: nowrap;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex: none;
}

/* Botão hambúrguer: três traços feitos com box-shadow --------------- */
.botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--borda-acento);
  border-radius: var(--raio-pilula);
  color: var(--nc-espresso);
  cursor: pointer;
}

.botao-menu__traco {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.navegacao-movel {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-3) var(--pad-secao-x) var(--espaco-6);
  background: var(--superficie-pagina);
  border-top: var(--traco-fino) solid var(--borda-fina);
}

.navegacao-movel[hidden] {
  display: none;
}

.navegacao-movel__link {
  padding-block: var(--espaco-3);
  font-size: var(--texto-lead);
  color: var(--texto-corpo);
}

.navegacao-movel__link--destaque {
  color: var(--nc-terracota);
}

/* Barra de ação fixa, exibida apenas em telas pequenas ------------- */
.barra-acao-movel {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--espaco-2) clamp(16px, 4vw, 24px);
  padding-bottom: calc(var(--espaco-2) + env(safe-area-inset-bottom));
  background: var(--superficie-pagina);
  border-top: var(--traco-fino) solid var(--borda-fina);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 72px);
}

.hero__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap-colunas);
  align-items: center;
}

.hero__chamada {
  margin-top: var(--espaco-7);
  max-width: 560px;
  font-size: var(--texto-chamada);
  line-height: var(--entrelinha-chamada);
}

.hero__apoio {
  margin-top: var(--espaco-4);
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  margin-top: var(--espaco-9);
}

.hero__observacao {
  margin-top: var(--espaco-7);
  max-width: 480px;
  font-size: var(--texto-legenda);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
}

.hero__retrato {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 5 / 6;
  margin: 0;
}

.hero__ornamento {
  position: absolute;
  left: -8%;
  top: 4%;
  width: 74%;
  opacity: 0.16;
}

.hero__selo {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 118px;
}

/* Retrato recortado na máscara orgânica da marca ------------------ */
.retrato-organico {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--raio-organico);
  background: var(--nc-marfim-fundo);
}

.retrato-organico__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Ornamentos botânicos
   -------------------------------------------------------------------------- */
.ornamento-divisor {
  width: 200px;
  margin-top: var(--espaco-8);
  opacity: 0.9;
}

.ornamento-ramo {
  width: 96px;
  margin-top: var(--espaco-6);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Método — etapas numeradas
   -------------------------------------------------------------------------- */
.etapa {
  border-top: var(--traco-fino) solid var(--borda-forte);
  padding-top: var(--espaco-6);
}

.etapa__numero {
  font-family: var(--fonte-display);
  font-size: 36px;
  line-height: 1;
  color: var(--nc-mostarda);
}

.etapa__titulo {
  margin: var(--espaco-2) 0 var(--espaco-3);
  font-size: 26px;
  font-style: italic;
  color: var(--texto-sobre-escuro);
}

.etapa__texto {
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-sobre-escuro-suave);
}

/* --------------------------------------------------------------------------
   Sobre — retrato e destaques da trajetória
   -------------------------------------------------------------------------- */
.retrato-sobre {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  margin: 0;
}

.retrato-sobre__ornamento {
  position: absolute;
  right: -6%;
  top: -5%;
  z-index: 1;
  width: 104px;
  opacity: 0.8;
}

.retrato-sobre__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--raio-sm);
  background: var(--nc-marfim-fundo);
}

.destaque-trajetoria {
  border-left: var(--traco-fino) solid var(--borda-forte);
  padding-left: var(--espaco-5);
}

.destaque-trajetoria__valor {
  font-family: var(--fonte-display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--nc-mostarda);
}

.destaque-trajetoria__rotulo {
  margin-top: var(--espaco-1);
  font-size: var(--texto-fino);
  line-height: var(--entrelinha-compacta);
}

/* --------------------------------------------------------------------------
   Limites de atuação
   -------------------------------------------------------------------------- */
.bloco-limites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: var(--espaco-11);
}

.bloco-limites__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* --------------------------------------------------------------------------
   Chamada intermediária
   -------------------------------------------------------------------------- */
.chamada-intermediaria__texto {
  max-width: var(--medida-leitura);
  font-family: var(--fonte-display);
  font-size: var(--texto-citacao);
  line-height: 1.35;
  color: var(--texto-titulo);
}

/* --------------------------------------------------------------------------
   Perguntas frequentes
   -------------------------------------------------------------------------- */
.acordeao {
  display: flex;
  flex-direction: column;
}

.acordeao__item {
  border-bottom: var(--traco-fino) solid var(--borda-fina);
}

.acordeao__cabecalho {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-6);
  width: 100%;
  padding-block: var(--espaco-6);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--fonte-display);
  font-size: 19px;
  line-height: 1.35;
  color: var(--texto-titulo);
}

.acordeao__sinal {
  flex: none;
  font-family: var(--fonte-sans);
  font-size: 20px;
  color: var(--nc-mostarda);
  transition: transform var(--duracao-base) var(--curva-suave);
}

.acordeao__gatilho[aria-expanded='true'] .acordeao__sinal {
  transform: rotate(45deg);
}

.acordeao__resposta[hidden] {
  display: none;
}

.acordeao__texto {
  padding: 0 var(--espaco-11) var(--espaco-7) 0;
  max-width: var(--medida-leitura);
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-corpo);
}

/* --------------------------------------------------------------------------
   Contato
   -------------------------------------------------------------------------- */
.contato__selo {
  width: 130px;
  margin-top: var(--espaco-11);
  opacity: 0.9;
}

.mensagem-sucesso[hidden] {
  display: none;
}

.mensagem-sucesso__titulo {
  font-size: 28px;
  line-height: var(--entrelinha-subtitulo);
  margin-bottom: var(--espaco-4);
}

.mensagem-sucesso__texto {
  margin-bottom: var(--espaco-7);
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-corpo);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--superficie-pagina);
  border-top: var(--traco-fino) solid var(--borda-fina);
}

.rodape__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-9);
  align-items: start;
  padding-block: clamp(40px, 5vw, 64px);
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.rodape__assinatura {
  height: 110px;
  width: auto;
}

.rodape__descricao {
  max-width: 280px;
  font-size: var(--texto-fino);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
}

.rodape__titulo-coluna {
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--nc-mostarda);
}

.rodape__link {
  font-size: var(--texto-legenda);
  color: var(--texto-corpo);
}

.rodape__assinatura-verbal {
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: 20px;
  color: var(--texto-titulo);
}

.rodape__ornamento {
  width: 72px;
  opacity: 0.75;
}

.rodape__linha-final {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  padding-bottom: var(--espaco-9);
}

.rodape__marca-texto {
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--texto-discreto);
}

.rodape__copyright {
  font-size: var(--texto-miudo);
  color: var(--texto-discreto);
}

.fio-dourado {
  flex: 1;
  height: 1px;
  background: var(--fio-dourado);
}

/* --------------------------------------------------------------------------
   Adaptações por largura de tela
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .navegacao-principal {
    display: none;
  }

  .botao-menu {
    display: inline-flex;
  }
}

@media (max-width: 620px) {
  .cabecalho__cta {
    display: none;
  }

  .barra-acao-movel {
    display: block;
  }

  /* Reserva o espaço da barra fixa para não cobrir o rodapé */
  body {
    padding-bottom: 76px;
  }

  .bloco-limites {
    padding: var(--espaco-8);
  }

  .cartao--papel {
    padding: var(--espaco-7);
  }
}