/* ==========================================================================
   Página inicial
   Depende de tokens.css, base.css e layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* 84svh e não 92svh: com 92 o segundo botão encostava na borda de
     baixo em tela de notebook. Assim sobra respiro e ainda aparece uma
     fatia da próxima seção, convidando a rolar. */
  min-block-size: min(84svh, 46rem);
  padding-block: var(--e-9) var(--e-8);
  overflow: hidden;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-noite-900);
}

/* Cada foto ocupa a área toda; só a ativa fica visível.
   A troca é um esmaecimento lento, não um corte seco. */
.hero__slide {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  /* Sem escurecer a foto: o contraste do texto é todo responsabilidade
     do véu, que agora é forte só onde o texto está. */
  filter: none;
}

.hero__slide[data-ativo="true"] { opacity: 1; }

/* Véu em faixa lateral: escuro onde está o texto, quase limpo do outro
   lado, para a foto da obra continuar visível.

   O texto nunca passa de 58% da largura (medido: 33% a 1920px, 58% a
   1025px). Por isso o véu só precisa ser forte até ali — depois de 70%
   ele despenca, e a foto da obra aparece com 94% de visibilidade na
   borda direita.

   Contraste no pior caso — pixel branco da foto, no ponto da faixa de
   texto onde o véu é mais fraco. Verificado de 1025 a 1920px: o fundo
   sob o texto chega no máximo a #363735, o que dá 9.94:1 com o texto
   claro e 5.56:1 com o dourado. Abaixo de 1024px vale a regra vertical
   mais adiante.

   ⚠ ESTE VÉU ESTÁ PERTO DO PISO. O mínimo para o dourado passar em AA
   é 73%; as paradas de 82% e 78% deixam só essa folga. Clarear mais o
   lado esquerdo quebra a legibilidade do texto — para ir além seria
   preciso um véu local atrás do bloco de texto, e não um véu de faixa.
   A parada de 62% é o que segura a borda direita do texto a 1025px. */
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* As paradas são medidas em PIXELS, a partir do fim da coluna de
       texto — não em porcentagem da tela.

       A coluna tem largura fixa (34rem + recuo), então em porcentagem
       ela ocupa de 30% a 48% conforme a largura. Qualquer parada fixa
       em % acerta numa tela e erra nas outras: ou apaga o texto, ou
       deixa a foto escura à toa. Ancorando no fim do texto, o véu é
       forte exatamente onde precisa e abre logo depois, em qualquer
       tela e qualquer escala do sistema. */
    linear-gradient(to right,
      color-mix(in srgb, var(--c-noite-900) 86%, transparent) 0,
      color-mix(in srgb, var(--c-noite-900) 79%, transparent)
        calc(clamp(1.25rem, 5vw, 5.5rem) + 34rem),
      color-mix(in srgb, var(--c-noite-900) 14%, transparent)
        calc(clamp(1.25rem, 5vw, 5.5rem) + 41rem),
      color-mix(in srgb, var(--c-noite-900) 4%, transparent)
        calc(clamp(1.25rem, 5vw, 5.5rem) + 51rem),
      color-mix(in srgb, var(--c-noite-900) 3%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-noite-900) 68%, transparent) 0%,
      transparent 16%,
      transparent 76%,
      var(--c-noite-900) 100%);
}

/* Abaixo de 1024px não sobra espaço lateral: o texto ocuparia mais de
   metade da largura e sairia da faixa escura. Aí o véu passa a ser
   vertical, cobrindo a largura inteira.
   Ponto de corte definido pelo cálculo, não por estética: a 800px o véu
   lateral deixava o dourado em 3.22:1. */
@media (max-width: 64rem) {
  .hero__fundo::after {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--c-noite-900) 84%, transparent) 0%,
        color-mix(in srgb, var(--c-noite-900) 76%, transparent) 35%,
        color-mix(in srgb, var(--c-noite-900) 84%, transparent) 72%,
        var(--c-noite-900) 100%);
  }
}

/* Quem pediu menos movimento vê só a primeira foto, parada. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* --------------------------------------------------------------------------
   SETAS DO HERO
   -------------------------------------------------------------------------- */
/* No celular ficam embaixo dos botões, no fluxo do texto. */
.hero__setas {
  display: flex;
  gap: 0.5rem;
  margin-block-start: var(--e-4);
}

/* No desktop, uma de cada lado da foto, centralizadas na vertical.

   A da esquerda é posicionada pelo FIM DA COLUNA DE TEXTO, e não por
   uma porcentagem da tela. A coluna tem largura máxima fixa (34rem),
   então em tela menor ela ocupa uma fração maior — uma porcentagem
   fixa voltaria a cair em cima do texto justamente nas telas médias. */
/* Ponto de corte em 60rem (960px), e não nos 48rem do resto do site:
   a coluna de texto tem largura fixa, então abaixo disso sobrariam só
   uns 100px entre uma seta e outra. Aí elas ficam melhor no fluxo. */
@media (min-width: 60rem) {
  .hero__setas {
    position: absolute;
    inset-block-start: 50%;

    /* 33% é onde a seta fica na referência — e cabe num monitor de
       1920px. Em tela menor a coluna de texto ocupa uma fração maior e
       33% cairia em cima dela; por isso o max() empurra a seta só o
       necessário para ficar logo depois do texto. */
    inset-inline-start: max(
      33%,
      calc(clamp(1.25rem, 5vw, 5.5rem) + 32rem + 1.5rem)
    );

    inset-inline-end: var(--gutter);
    z-index: 2;
    justify-content: space-between;
    margin: 0;
    translate: 0 -50%;
    pointer-events: none;      /* só os botões recebem clique */
  }

  .hero__seta { pointer-events: auto; }
}

.hero__seta {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  color: var(--c-texto-claro);
  background: color-mix(in srgb, var(--c-noite-900) 45%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--c-texto-claro) 40%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido), scale var(--t-rapido);
}

.hero__seta:hover {
  color: var(--c-noite-900);
  background: var(--c-ouro-500);
  border-color: var(--c-ouro-500);
}

.hero__seta:active { scale: 0.93; }

.hero__seta:focus-visible {
  outline: 2px solid var(--c-ouro-500);
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  .hero__setas { margin-block-start: var(--e-4); }
  .hero__seta { inline-size: 40px; block-size: 40px; }
}

/* O texto do hero NÃO usa .container: ele encosta no canto da tela, em vez
   de se alinhar à coluna central do resto da página. É proposital — joga a
   composição para o canto e deixa a foto respirar do outro lado. */
.hero__conteudo {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--e-4);
  max-inline-size: min(100%, 34rem);
  text-align: start;
  padding-inline: clamp(1.25rem, 5vw, 5.5rem);
}

/* Peso 500, não o 400 do resto do site.
   Motivo: a Cormorant é uma serifada de alto contraste — tem traço grosso
   e traço quase capilar na mesma letra. Sobre fundo sólido o 400 fica
   lindo; sobre a foto da obra os traços finos se dissolvem na textura da
   marcenaria. O cálculo de contraste NÃO enxerga isso: ele compara cor
   com cor, e dá o mesmo número para o 400 e para o 500.
   A sombra faz o mesmo trabalho por outro caminho — separa a letra da
   textura sem escurecer a foto. */
.hero__titulo {
  font-size: var(--fs-3xl);
  font-weight: 500;
  max-inline-size: 13ch;
  margin-block-start: var(--e-2);
  text-shadow: 0 2px 28px rgb(5 6 4 / 0.55);
}

/* O itálico precisa ser pedido em 500 explicitamente: a síntese de peso
   está desligada em base.css, então o navegador não "engorda" sozinho.
   O arquivo 1,500 é carregado no <link> das páginas. */
.hero__titulo .destaque { font-weight: 500; }

.hero__sub {
  font-size: var(--fs-md);
  color: var(--texto-sutil);
  max-inline-size: 46ch;
  margin-block-start: var(--e-2);
  text-shadow: 0 1px 16px rgb(5 6 4 / 0.5);
}

/* O olho dourado é pequeno e fica sobre a parte texturizada da foto. */
.hero .marca-rotulo { text-shadow: 0 1px 14px rgb(5 6 4 / 0.6); }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-block-start: var(--e-5);
}

/* --------------------------------------------------------------------------
   HERO NO CELULAR
   Um hero de 92svh toma a tela inteira e esconde que existe conteúdo
   abaixo. No celular ele encurta, para a dobra revelar o começo da
   próxima seção e convidar a rolar.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .hero {
    min-block-size: min(76svh, 34rem);
    padding-block: var(--e-8) var(--e-7);
  }

  .hero__conteudo { gap: var(--e-3); }
  .hero__titulo { max-inline-size: 100%; }
  .hero__sub { font-size: var(--fs-base); max-inline-size: 100%; }

  /* Botões em coluna e largura cheia: alvo generoso para o polegar. */
  .hero__acoes {
    inline-size: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-2);
    margin-block-start: var(--e-4);
  }

  .hero__acoes .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   CREDENCIAIS — tira logo abaixo do hero
   -------------------------------------------------------------------------- */
.credenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--e-5);
  padding-block: var(--e-7);
  border-block-start: 1px solid var(--c-noite-600);
}

.credencial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
}

.credencial svg { color: var(--c-ouro-500); }

.credencial strong {
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-texto-claro);
}

.credencial span {
  font-size: var(--fs-xs);
  color: var(--c-texto-claro-sutil);
  max-inline-size: 22ch;
}

/* No celular viram 2 por linha, em vez de 4 blocos empilhados. */
@media (max-width: 48rem) {
  .credenciais {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-5) var(--e-4);
    padding-block: var(--e-6);
  }
  .credencial strong { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   FAMÍLIAS DE MATERIAL
   -------------------------------------------------------------------------- */
.familias {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block-start: var(--e-7);
}

.familia {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--c-texto-claro);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--c-noite-700);

  /* Proporção levemente vertical, com teto de altura.
     Sem o teto, a grade estica os cards para preencher a linha e em
     monitor largo eles passavam de 500px de altura. */
  aspect-ratio: 4 / 5;
  max-block-size: 21rem;
}

.familia img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--t-lento);
}

.familia:hover img { scale: 1.06; }

.familia__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-noite-900) 92%, transparent) 0%,
    color-mix(in srgb, var(--c-noite-900) 55%, transparent) 42%,
    transparent 75%);
}

.familia__texto {
  position: absolute;
  inset-block-end: 0;
  inline-size: 100%;
  padding: var(--e-4);
  display: grid;
  gap: 0.1rem;
}

.familia__nome {
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  line-height: 1.1;
}

.familia__contagem {
  font-family: var(--fonte-marca);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ouro-500);
}

.familia__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-block-start: var(--e-2);
  font-size: var(--fs-sm);
  color: var(--c-texto-claro);
}

.familia:hover .familia__link { color: var(--c-ouro-300); }
.familia__link svg { transition: translate var(--t); }
.familia:hover .familia__link svg { translate: 4px 0; }

/* Passagem para o catálogo completo */
.familias__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  margin-block-start: var(--e-6);
}

.familias__rodape span {
  font-size: var(--fs-sm);
  color: var(--texto-sutil);
}

.familias__rodape .btn svg { transition: translate var(--t); }
.familias__rodape .btn:hover svg { translate: 3px 0; }

@media (max-width: 48rem) {
  .familias__rodape { margin-block-start: var(--e-5); }
  .familias__rodape .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   COMO FUNCIONA
   -------------------------------------------------------------------------- */
.passos {
  display: grid;
  gap: var(--e-6);
  margin-block-start: var(--e-8);
  counter-reset: passo;
}

@media (min-width: 48rem) {
  .passos { grid-template-columns: repeat(5, 1fr); gap: var(--e-4); }
}

.passo {
  position: relative;
  display: grid;
  gap: var(--e-2);
  padding-block-start: var(--e-6);
  counter-increment: passo;
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-display);
  font-size: var(--fs-xl);
  color: var(--acento);
  line-height: 1;
}

/* Fio que liga os passos no desktop */
.passo::after {
  content: "";
  position: absolute;
  inset-block-start: var(--e-6);
  inset-inline-start: 2.6rem;
  inline-size: calc(100% - 2.6rem);
  block-size: 1px;
  background: color-mix(in srgb, var(--acento) 30%, transparent);
}

.passo:last-child::after { display: none; }

@media (max-width: 47.99rem) {
  .passo::after { display: none; }
}

.passo h3 { font-size: var(--fs-md); }
.passo p { font-size: var(--fs-sm); color: var(--texto-sutil); }

/* --------------------------------------------------------------------------
   DIFERENCIAIS
   -------------------------------------------------------------------------- */
.diferenciais {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block-start: var(--e-8);
}

.diferencial {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.diferencial svg { color: var(--acento); }
.diferencial h3 { font-size: var(--fs-md); }
.diferencial p { font-size: var(--fs-sm); color: var(--texto-sutil); }

/* --------------------------------------------------------------------------
   OBRAS
   -------------------------------------------------------------------------- */
.obras {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-block-start: var(--e-8);
}

.obra {
  position: relative;
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--c-pedra-200);
  aspect-ratio: 3 / 4;
}

.obra img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--t-lento);
}

.obra:hover img { scale: 1.05; }

/* A primeira foto ocupa dois espaços, para o conjunto não ficar monótono */
@media (min-width: 45rem) {
  .obra--destaque { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

.obra figcaption {
  position: absolute;
  inset-block-end: 0;
  inline-size: 100%;
  padding: var(--e-5) var(--e-4) var(--e-3);
  font-size: var(--fs-xs);
  color: var(--c-texto-claro);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-noite-900) 85%, transparent),
    transparent);
}

/* No celular: 2 por linha, com a principal ocupando a largura toda.
   Uma coluna só obrigaria a rolar demais para ver as 7 fotos. */
@media (max-width: 48rem) {
  .obras {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-2);
    margin-block-start: var(--e-6);
  }

  .obra--destaque { grid-column: span 2; aspect-ratio: 4 / 3; }

  .obra figcaption { padding: var(--e-4) var(--e-3) var(--e-2); }
}

/* --------------------------------------------------------------------------
   OUTROS AJUSTES DE CELULAR
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  /* No celular ficam deitados: em pé, cada card tomaria quase a tela
     inteira e esconderia que existem outros. */
  .familia { aspect-ratio: 16 / 10; max-block-size: none; }
  .familia__nome { font-size: var(--fs-md); }

  /* Passos e diferenciais ganham respiro menor entre si. */
  .passos { gap: var(--e-5); margin-block-start: var(--e-6); }
  .diferenciais { gap: var(--e-3); margin-block-start: var(--e-6); }
  .diferencial { padding: var(--e-5); }

  .sobre { gap: var(--e-6); }
  .contato { gap: var(--e-6); margin-block-start: var(--e-6); }
  .mapa { min-block-size: 15rem; }
}

/* --------------------------------------------------------------------------
   SOBRE
   -------------------------------------------------------------------------- */
.sobre {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 52rem) {
  .sobre {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--e-9);
    /* A foto acompanha a altura do texto em vez de ter proporção fixa.
       Com 4/5 em meia tela ela passava de 700px e estourava a dobra,
       empurrando o terceiro parágrafo para fora da tela. */
    align-items: stretch;
  }

  .sobre__foto { aspect-ratio: auto; min-block-size: 22rem; }
}

.sobre__texto p + p { margin-block-start: var(--e-3); }

.sobre__texto p {
  color: var(--texto-sutil);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.sobre__foto {
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.sobre__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* A seção Sobre é a mais densa de texto — um respiro menor ajuda a
   caber numa tela só, sem apertar as outras seções. */
#sobre { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem); }

/* --------------------------------------------------------------------------
   CONTATO
   -------------------------------------------------------------------------- */
.contato {
  display: grid;
  gap: var(--e-8);
  margin-block-start: var(--e-8);
}

@media (min-width: 52rem) {
  .contato { grid-template-columns: 1fr 1fr; }
}

.contato__itens { display: grid; gap: var(--e-5); }

.contato__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}

.contato__item svg { color: var(--acento); margin-block-start: 0.2rem; }

.contato__item strong {
  display: block;
  font-family: var(--fonte-marca);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sutil);
  margin-block-end: 0.25rem;
}

.contato__item a { color: var(--texto); text-decoration: none; }
.contato__item a:hover { color: var(--acento); }

.mapa {
  min-block-size: 20rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo-elevado);
}

.mapa iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }