/* ==========================================================================
   GEHUS — base.css
   Reset, tokens e sistema de larguras.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--preto);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* ---- LARGURAS (regra do projeto) ----------------------------------------
     --container : largura da caixa, conforme a sua regra
     --conteudo  : largura útil do conteúdo medida no PDF (1260px)
     --gutter    : respiro lateral mínimo
     ------------------------------------------------------------------------ */
  --container: 1920px;
  --conteudo: 1260px;
  --gutter: 24px;

  /* ---- CORES (amostradas do PDF) ---- */
  --preto: #000000;
  --preto-2: #090909;
  --preto-3: #0A0701;
  --cinza-header: #1F1F1F;
  --branco: #FFFFFF;
  --texto-suave: #D6D6D6;
  --texto-fraco: #9A9A9A;

  --dourado: #E9BA09;
  --dourado-escuro: #A5800D;
  --btn-de: #E2A41D;
  --btn-ate: #FBCE6F;

  --linha: rgba(255, 255, 255, .10);
  --linha-dourada: rgba(233, 186, 9, .28);

  /* ---- TIPOGRAFIA ---- */
  --fonte-titulo: "Montserrat", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;

  --t-h1: 54px;
  --t-h2: 42px;
  --t-h3: 28px;
  --t-corpo: 17px;
  --t-pequeno: 15px;
  --t-mini: 12px;

  /* ---- ESPAÇAMENTO ---- */
  --secao-py: 110px;
  --raio: 12px;
  --raio-g: 24px;

  /* ---- BRILHO NEON ---- */
  --neon: rgba(233, 186, 9, .22);
  --neon-forte: rgba(233, 186, 9, .38);

  /* ---- CURVA DAS ANIMACOES ---- */
  --mola: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   3. CONTAINER

   O padding lateral é calculado, não fixo:
       max(--gutter, (100% - --conteudo) / 2)

   Assim o conteúdo trava em 1260px e fica centrado em qualquer tela grande
   (1440, 1600, 1920, ultrawide), sempre com um respiro mínimo nas bordas.
   Nos breakpoints menores --conteudo vira 100%, o cálculo se anula e a
   largura da sua regra passa a valer sozinha.
   -------------------------------------------------------------------------- */
.container {
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: max(var(--gutter), (100% - var(--conteudo)) / 2);
}

/* Bloco que precisa sangrar até a borda da tela (carrosséis, faixas). */
.container--flush { padding-inline: 0; }

/* --------------------------------------------------------------------------
   4. BREAKPOINTS
   Cada media query só reescreve variáveis. Nenhuma regra de layout é
   duplicada, então acertar uma largura acerta a página inteira.
   -------------------------------------------------------------------------- */

/* NOTEBOOK — breakpoint "Laptop" do Elementor */
@media (max-width: 1366px) {
  :root {
    --container: 975px;
    --conteudo: 100%;
    --gutter: 0px;
    --secao-py: 84px;
    --t-h1: 42px;
    --t-h2: 34px;
    --t-h3: 24px;
    --t-corpo: 16px;
  }
}

/* TABLET — breakpoint "Tablet" do Elementor */
@media (max-width: 1024px) {
  :root {
    --container: 95%;
    --secao-py: 68px;
    --t-h1: 36px;
    --t-h2: 30px;
    --t-h3: 22px;
  }
}

/* MOBILE — breakpoint "Mobile" do Elementor */
@media (max-width: 767px) {
  :root {
    --container: 90%;
    --secao-py: 52px;
    --t-h1: 28px;
    --t-h2: 24px;
    --t-h3: 19px;
    --t-corpo: 15px;
    --raio-g: 16px;
  }
}

/* --------------------------------------------------------------------------
   5. SEÇÃO
   -------------------------------------------------------------------------- */
.secao {
  position: relative;
  padding-block: var(--secao-py);
}

.secao__conteudo { position: relative; z-index: 2; }

/* Camada de fundo decorativa (grid, candles, textura). */
.secao__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

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

/* Os fundos decorativos são PNGs claros sobre transparência. Sem o "screen"
   as áreas escuras do arquivo viram blocos cinzas por cima do preto; com ele
   só o brilho dourado atravessa, como no layout. */
.secao__bg--candles,
.secao__bg--quadros { mix-blend-mode: screen; }

/* CANDLES (fundo do mapa)
   O arquivo é uma faixa larga e baixa. Com "cover" ele era ampliado 2x e só
   um pedaço aparecia, o que dava a impressão de padrão repetido e de troca
   de textura na altura do mapa. Com height/width 100% + object-fit:fill a
   imagem é esticada uma única vez e cobre a seção inteira, de ponta a ponta.
   A máscara agora só suaviza o começo e o fim, na vertical: nada muda no
   miolo, nem atrás do mapa. */
.secao__bg--candles {
  opacity: .85;
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
}

.secao__bg--candles img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* QUADROS (fundo dos depoimentos)
   A grade precisa sair no tamanho em que foi desenhada (célula de ~189px),
   senão os quadrados encolhem e viram outra textura. Por isso o arquivo é
   posicionado no tamanho natural e centrado, em vez de redimensionado. */
.secao__bg--quadros { opacity: 1; }

.secao__bg--quadros img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3024px;
  height: 2700px;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: none;
}

/* --------------------------------------------------------------------------
   6. ANIMAÇÕES DE ENTRADA

   Cada elemento com [data-anima] começa deslocado e transparente. O
   IntersectionObserver do main.js adiciona .visivel quando ele entra na
   tela, e a transição faz o resto. Quem pediu menos movimento no sistema
   já é atendido pelo bloco prefers-reduced-motion lá em cima, mas aqui
   garantimos que o conteúdo apareça mesmo assim.
   -------------------------------------------------------------------------- */
[data-anima] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--mola), transform .7s var(--mola);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, transform;
}

[data-anima="esquerda"] { transform: translateX(-34px); }
[data-anima="direita"]  { transform: translateX(34px); }
[data-anima="zoom"]     { transform: scale(.94); }

[data-anima].visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-anima] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. ÂNCORAS

   O cabeçalho é fixo, então um link para #servicos pararia com o título
   escondido atrás dele. O scroll-margin-top reserva essa altura no destino.
   -------------------------------------------------------------------------- */
main [id],
footer[id] { scroll-margin-top: 118px; }

@media (max-width: 1024px) {
  main [id],
  footer[id] { scroll-margin-top: 104px; }
}