/* ==========================================================================
   INÍCIO — composições da página inicial

   Segue a sequência da referência: carrossel de banners, hero, apresentação
   institucional, áreas de atuação, pessoas, chamadas e publicações recentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Carrossel de banners

   Todos os quadros ficam empilhados no mesmo lugar; só a opacidade muda.
   Assim a altura da faixa não oscila entre um quadro e outro, e a transição
   não depende de medir larguras — o que quebraria ao girar o aparelho.
   -------------------------------------------------------------------------- */

.carrossel {
  position: relative;
  background: var(--escuro);
  overflow: hidden;
}

/* Os quadros são empilhados por GRID, todos na mesma célula — e não por
   `position: absolute`. A diferença importa: em grid eles continuam
   ocupando altura, então o palco fica com a altura do quadro mais alto e o
   texto nunca é cortado, por mais baixa que seja a janela. Com posição
   absoluta, o palco tinha altura própria e o texto vazava para fora. */
.carrossel__palco {
  position: relative;
  display: grid;
  min-height: clamp(380px, 56vh, 600px);
}

.carrossel__quadro {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  align-items: end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--suave), visibility 0.8s;
}

.carrossel__quadro.ativo {
  opacity: 1;
  visibility: visible;
}

/* Sem JavaScript sobra o primeiro quadro, que já vem com `.ativo` no HTML —
   o conteúdo nunca some. Os demais continuam empilhados e invisíveis. */
html:not(.js) .carrossel__quadro.ativo {
  opacity: 1;
  visibility: visible;
}

html:not(.js) .carrossel__controles {
  display: none;
}

.carrossel__foto {
  position: absolute;
  inset: 0;
}

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

/* Véu escuro sob o texto.

   No CELULAR o texto ocupa a largura toda, então o véu é vertical: fechado
   embaixo, onde o texto fica, e leve em cima, para a fotografia aparecer.

   No DESKTOP o texto fica só na coluna da esquerda, e o véu acompanha isso:
   escurece a faixa esquerda e vai a zero antes da metade da tela. O lado
   direito fica com a foto limpa, sem filtro nenhum.

   As paradas foram calibradas medindo os pixels das cinco fotos de fábrica
   sob cada texto; ao trocar uma imagem, vale refazer a conferência. */
.carrossel__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 9, 9, 0.94) 0%,
    rgba(9, 9, 9, 0.86) 45%,
    rgba(9, 9, 9, 0.55) 74%,
    rgba(9, 9, 9, 0.4) 100%
  );
}

/* Entre 900 e 1200px o texto ainda ocupa quase metade da faixa, então a
   parte escura vai mais para a direita. Fechar o degradê cedo demais aqui
   deixava o texto de apoio sobre a foto clara, abaixo do mínimo legível. */
@media (min-width: 900px) {
  .carrossel__foto::after {
    background: linear-gradient(
      to right,
      rgba(9, 9, 9, 0.94) 0%,
      rgba(9, 9, 9, 0.92) 46%,
      rgba(9, 9, 9, 0.7) 60%,
      rgba(9, 9, 9, 0.3) 74%,
      rgba(9, 9, 9, 0) 88%
    );
  }
}

@media (min-width: 1200px) {
  .carrossel__foto::after {
    background: linear-gradient(
      to right,
      rgba(9, 9, 9, 0.94) 0%,
      rgba(9, 9, 9, 0.92) 26%,
      rgba(9, 9, 9, 0.72) 40%,
      rgba(9, 9, 9, 0.32) 55%,
      rgba(9, 9, 9, 0) 72%
    );
  }
}

.carrossel__texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--gap-bloco) var(--pad-x);
}

.carrossel__conteudo {
  max-width: 34ch;
}

/* Selo dourado cheio, com texto escuro. Em letra miúda sobre a fotografia,
   o dourado vazado não sustentava o contraste — ele varia com o que está
   embaixo. Preenchido, o fundo é o próprio selo e a leitura não depende
   mais da foto. */
.carrossel__rotulo {
  display: inline-block;
  margin-bottom: var(--gap-menor);
  padding: 6px 14px;
  background: var(--ouro);
  color: var(--tinta);
  font-size: var(--t-mini);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.carrossel__titulo {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: var(--peso-medio);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--branco);
}

.carrossel__titulo em {
  font-style: normal;
  color: var(--ouro-claro);
}

.carrossel__apoio {
  max-width: 46ch;
  margin-top: var(--gap-menor);
  font-size: var(--t-corpo-g);
  line-height: 1.7;
  color: #dcdad5;
}

.carrossel__acao {
  margin-top: var(--gap-item);
}

/* ---- Controles ----

   Ficam numa faixa própria, ABAIXO dos quadros, e não flutuando por cima.
   Sobrepostos, eles invadiam o texto sempre que a janela era baixa: a altura
   do palco encolhe com a viewport, mas a do texto não. Fora do palco, a
   sobreposição é impossível por construção, em qualquer altura de tela. */

.carrossel__controles {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--gap-menor);
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px var(--pad-x);
}

.carrossel__setas {
  display: flex;
  gap: 8px;
  order: 2;
  margin-left: auto;
}

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--branco);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--rapida), background-color var(--rapida), color var(--rapida);
}

.carrossel__seta:hover {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--tinta);
}

.carrossel__seta svg {
  width: 16px;
  height: 16px;
}

.carrossel__marcadores {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 1;
}

/* O marcador é uma barra fina que se enche enquanto o quadro está no ar,
   dando a noção de quanto falta para virar. */
.carrossel__marcador {
  position: relative;
  width: 34px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: width var(--media);
}

@media (min-width: 760px) {
  .carrossel__marcador {
    width: 46px;
  }
}

.carrossel__marcador::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left;
}

.carrossel__marcador.ativo::after {
  animation: carrossel-progresso var(--intervalo, 6s) linear forwards;
}

.carrossel.parado .carrossel__marcador.ativo::after {
  animation-play-state: paused;
}

@keyframes carrossel-progresso {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Quem prefere menos movimento continua vendo o carrossel girar — o que sai
   é o movimento: a troca passa a ser instantânea e a barra de progresso não
   é animada. Parar o giro por completo deixava o banner travado no primeiro
   quadro, sem que o visitante entendesse por quê. */
@media (prefers-reduced-motion: reduce) {
  .carrossel__quadro {
    transition: none;
  }
  .carrossel__marcador.ativo::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   1. Hero — texto à esquerda, fotografia à direita
   -------------------------------------------------------------------------- */

/* A primeira seção é escura, para casar com o logotipo, que é desenhado sobre
   preto. O cabeçalho da página inicial também fica escuro (ver `layout.css`),
   de modo que barra de contato, cabeçalho e hero formem um bloco contínuo. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(48px, 6vw, 80px);
  background: var(--escuro);
  color: var(--sobre-escuro);
}

/* Brilho dourado difuso atrás do texto — dá profundidade ao preto chapado
   sem competir com a leitura. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.16), transparent 70%);
  pointer-events: none;
}

/* Fio dourado fechando a seção. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ouro), rgba(201, 162, 39, 0.08));
}

.hero__interno {
  position: relative;
  display: grid;
  gap: var(--gap-bloco);
  max-width: var(--container);
  margin-inline: auto;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__interno {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
  }
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--gap-item);
}

.hero__titulo {
  max-width: 15ch;
  font-size: var(--t-hero);
  font-weight: var(--peso-medio);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* Sobre o preto, o dourado claro é o tom legível: o `--ouro-tinta`, feito
   para fundo branco, ficaria quase invisível aqui. */
.hero .rotulo {
  color: var(--ouro-claro);
}

.hero__titulo {
  color: var(--sobre-escuro);
}

.hero__titulo em {
  font-style: normal;
  color: var(--ouro-claro);
}

.hero__apoio {
  max-width: 46ch;
  font-size: var(--t-corpo-g);
  line-height: 1.7;
  color: var(--sobre-escuro-suave);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--gap-fino);
}

/* Selos de credibilidade abaixo das ações */
.hero__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--gap-menor);
  padding-top: var(--gap-item);
  border-top: 1px solid var(--ouro-borda);
}

.hero__selo {
  display: flex;
  flex-direction: column;
  padding-inline: var(--gap-item);
  border-left: 1px solid rgba(201, 162, 39, 0.28);
}

.hero__selo:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero__selo strong {
  font-size: 1.75rem;
  font-weight: var(--peso-medio);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ouro-claro);
}

.hero__selo span {
  font-size: var(--t-mini);
  color: var(--sobre-escuro-suave);
}

/* Mídia — moldura dourada fina separando a foto do fundo preto. */
.hero__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  overflow: hidden;
  background: var(--escuro-carta);
  outline: 1px solid var(--ouro-borda);
  outline-offset: -1px;
}

/* Cantos dourados destacando a fotografia. */
.hero__midia::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 1px;
  pointer-events: none;
}

@media (max-width: 999px) {
  .hero__midia {
    aspect-ratio: 16 / 11;
  }
}

.hero__midia picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* --------------------------------------------------------------------------
   2. Apresentação institucional
   -------------------------------------------------------------------------- */

.apresentacao {
  display: grid;
  gap: var(--gap-bloco);
}

@media (min-width: 1000px) {
  .apresentacao {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 100px);
  }
}

.apresentacao__declaracao {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.apresentacao__declaracao em {
  font-style: normal;
  color: var(--ouro-tinta);
}

.apresentacao__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
}

.apresentacao__corpo p {
  font-size: var(--t-corpo-g);
  line-height: 1.75;
  color: var(--tinta-suave);
}

/* Fotografia larga fechando a apresentação, com uma legenda em dourado
   ancorada no canto — a mesma linguagem da foto do hero. */
.apresentacao__foto {
  position: relative;
  grid-column: 1 / -1;
  margin-top: var(--gap-item);
  overflow: hidden;
  outline: 1px solid var(--ouro-borda);
  outline-offset: -1px;
}

.apresentacao__foto img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 380px);
  object-fit: cover;
}

.apresentacao__legenda {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 12px 20px;
  background: var(--ouro);
  color: var(--tinta);
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Áreas de atuação — grade de links
   -------------------------------------------------------------------------- */

/* A grade de áreas ganha uma fotografia ao lado a partir do desktop. No
   celular a foto sairia empurrando os links para muito longe do título, e
   por isso não aparece. */
.areas-bloco {
  display: grid;
  gap: var(--gap-bloco);
}

@media (min-width: 1100px) {
  .areas-bloco {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--gap-item);
    align-items: stretch;
  }
}

.areas-foto {
  display: none;
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--ouro-borda);
  outline-offset: -1px;
}

@media (min-width: 1100px) {
  .areas-foto {
    display: block;
  }
}

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

.areas-grade {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

@media (min-width: 640px) {
  .areas-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .areas-grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

.area-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--branco);
  transition: background-color var(--media);
}

.area-item:hover {
  background: var(--papel);
}

.area-item__indice {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--ouro-tinta);
}

.area-item__nome {
  font-size: var(--t-h3);
  font-weight: var(--peso-medio);
  transition: color var(--rapida);
}

.area-item:hover .area-item__nome {
  color: var(--ouro-tinta);
}

.area-item__texto {
  font-size: var(--t-rotulo);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.area-item__seta {
  margin-top: auto;
  padding-top: var(--gap-menor);
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  color: var(--ouro-tinta);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--media), transform var(--media);
}

.area-item:hover .area-item__seta {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .area-item__seta {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. Pessoas — bloco com foto e texto
   -------------------------------------------------------------------------- */

.pessoas {
  display: grid;
  gap: var(--gap-bloco);
  align-items: center;
}

@media (min-width: 1000px) {
  .pessoas {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
  }
  .pessoas--invertido .pessoas__midia {
    order: -1;
  }
}

/* A foto da sala de reunião é vertical; o 4:5 evita cortá-la em faixa. */
.pessoas__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  overflow: hidden;
  outline: 1px solid var(--ouro-borda);
  outline-offset: -1px;
}

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

.pessoas__texto {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
}

/* --------------------------------------------------------------------------
   5. Chamadas — cartões de destino
   -------------------------------------------------------------------------- */

.chamadas {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 700px) {
  .chamadas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .chamadas {
    grid-template-columns: repeat(3, 1fr);
  }
}

.chamada-carta {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  height: 100%;
  padding: clamp(24px, 3vw, 36px);
  background: var(--branco);
  border: 1px solid var(--linha);
  transition: border-color var(--media), box-shadow var(--media), transform var(--media);
}

.chamada-carta:hover {
  border-color: var(--ouro-borda);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.08);
  transform: translateY(-3px);
}

.chamada-carta__icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--papel);
  color: var(--ouro-tinta);
  transition: background-color var(--media), color var(--media);
}

.chamada-carta:hover .chamada-carta__icone {
  background: var(--ouro);
  color: var(--tinta);
}

.chamada-carta h3 {
  font-size: var(--t-h3);
}

.chamada-carta p {
  font-size: var(--t-rotulo);
  line-height: 1.65;
  color: var(--tinta-suave);
}

.chamada-carta__fim {
  margin-top: auto;
  padding-top: var(--gap-menor);
}

/* --------------------------------------------------------------------------
   6. Publicações recentes
   -------------------------------------------------------------------------- */

.previa-blog {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 700px) {
  .previa-blog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .previa-blog {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7. Faixa final de contato
   -------------------------------------------------------------------------- */

.faixa-contato {
  display: grid;
  gap: var(--gap-bloco);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .faixa-contato {
    grid-template-columns: 1fr auto;
  }
}

.faixa-contato__texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faixa-contato h2 {
  max-width: 20ch;
  font-size: var(--t-h2);
}

.faixa-contato p {
  max-width: 54ch;
  color: var(--sobre-escuro-suave);
}

.faixa-contato__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}