/* ==========================================================================
   FRONT-PAGE.CSS — Portal do grupo
   A única página sem cor própria: a marca-mãe é a soma das luzes.
   ========================================================================== */

/* ---------- Abertura: revelação da marca ----------
   A rolagem dirige o vídeo. A trilha é o que define quanto gesto a
   animação custa: a referência é 100 a 150 px de rolagem por segundo de
   vídeo. Abaixo disso cada rolada salta vários quadros e o movimento vira
   staccato — foi para evitar isso que o arquivo foi reencodado com
   keyframe a cada 0,2 s.

   ATENÇÃO ao calcular: o palco é sticky e ocupa 100vh, então a distância
   que realmente dirige o vídeo é (trilha − 100vh), não a trilha inteira.
   350vh de trilha = 250vh de scrub. Errar isso faz a animação correr no
   dobro da velocidade.

   São 9,75 s de vídeo, então 250vh de scrub cai dentro da faixa. Ajuste
   aqui, num lugar só, depois de testar com mouse de verdade.           */
.reveal { --reveal-trilha: 350vh; position: relative; }
@media (max-width: 900px) { .reveal { --reveal-trilha: 280vh; } }

.reveal__trilha { height: var(--reveal-trilha); }
.reveal__palco {
    position: sticky; top: 0;
    height: 100svh; overflow: hidden;
    display: grid; place-items: center;
    background: var(--void);
}

/* O poster segura a tela antes de o vídeo chegar. Sem ele, quem está em
   rede lenta rola sobre o vazio. */
.reveal__poster, .reveal__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.reveal__poster { z-index: 0; }
.reveal__video  { z-index: 1; opacity: 0; transition: opacity .55s var(--ease); }

/* Em tela estreita, cover corta as laterais e o hexágono fica pela metade.
   contain mostra o quadro inteiro; a sobra fica preta, que é o próprio
   fundo do vídeo. */
@media (max-width: 900px) {
    .reveal__poster, .reveal__video { object-fit: contain; }
}
.reveal__video.pronto { opacity: 1; }

/* O vídeo termina com a marca já formada, então não há nada sobreposto.
   O H1 da página existe em .oculto, para leitor de tela e buscador. */
.reveal__dica {
    position: absolute; z-index: 3;
    left: 50%; bottom: 26px; transform: translateX(-50%);
    font-family: var(--font-display); font-size: 9.5px;
    letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim);
    transition: opacity .4s var(--ease);
}
.reveal.avancou .reveal__dica { opacity: 0; }

/* Sem movimento: o poster já mostra a marca formada, e não faz sentido
   pedir três telas de rolagem para não mostrar animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    .reveal { --reveal-trilha: 100svh; }
    .reveal__video { display: none; }
}

/* ---------- As duas empresas, em sequência ----------
   Cada negócio ocupa a tela inteira. O wireframe é dirigido pela rolagem
   e o texto entra quando a construção termina.

   A trilha tem 260vh: 160vh de scrub (trilha − 100vh do palco sticky)
   mais o tempo de leitura depois que o texto aparece. São 8 s de vídeo,
   então 160vh ficam perto de 120 px por segundo — dentro da faixa que
   mantém o movimento fluido.                                          */
.porta-sec { --porta-trilha: 260vh; position: relative; }
@media (max-width: 900px) { .porta-sec { --porta-trilha: 220vh; } }

.porta-sec__trilha { height: var(--porta-trilha); }
.porta-sec__palco {
    position: sticky; top: 0;
    height: 100svh; overflow: hidden;
    display: grid; place-items: center;
    background: var(--void);
}

.porta-sec__poster, .porta-sec__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.porta-sec__poster { z-index: 0; }
.porta-sec__video  { z-index: 1; opacity: 0; transition: opacity .5s var(--ease); }
.porta-sec__video.pronto { opacity: 1; }

/* O véu escurece só o suficiente para o texto ficar legível sobre o
   wireframe, sem apagar o desenho. */
/* Duas camadas: o gradiente dá profundidade, o escurecimento uniforme
   garante contraste do texto sobre o wireframe aceso. Sem a segunda, o
   verde e o vermelho atravessam as letras. */
.porta-sec__veu {
    position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--void) 45%, transparent) 0%,
        color-mix(in srgb, var(--void) 15%, transparent) 28%,
        color-mix(in srgb, var(--void) 70%, transparent) 68%,
        var(--void) 100%),
      color-mix(in srgb, var(--void) 55%, transparent);
    opacity: 0; transition: opacity .6s var(--ease);
}
.porta-sec.revelou .porta-sec__veu { opacity: 1; }

/* ---------- Texto ----------
   Entra só quando a construção termina. Antes disso ele competiria com o
   desenho e a pessoa não olharia nem para um nem para outro. */
.porta-sec__conteudo {
    position: relative; z-index: 3;
    text-align: center;
    padding: 0 var(--pad-x);
    max-width: 760px;
    opacity: 0; transform: translateY(22px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
    pointer-events: none;
}
.porta-sec.revelou .porta-sec__conteudo {
    opacity: 1; transform: none; pointer-events: auto;
}

.porta-sec__tag {
    font-family: var(--font-display); font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
}
.porta-sec__titulo {
    font-size: clamp(30px, 4.4vw, 60px);
    margin-bottom: 16px;
}
.porta-sec__texto {
    color: rgba(255,255,255,.82);
    max-width: 46ch; margin: 0 auto 32px;
    font-weight: 300;
}

/* ---------- Mobile ----------
   Em tela estreita o vídeo 16:9 com object-fit:cover corta as laterais e
   o objeto fica pela metade. Aqui ele vira faixa no topo, inteiro, e o
   texto ganha espaço próprio embaixo em vez de disputar a mesma área. */
@media (max-width: 900px) {
    .porta-sec__palco {
        display: flex; flex-direction: column;
        justify-content: flex-start;
        padding-top: 78px;
    }
    .porta-sec__poster, .porta-sec__video {
        position: relative; inset: auto;
        width: 100%; height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    .porta-sec__video { margin-top: calc(-1 * (100vw * 10 / 16)); }
    .porta-sec__veu {
        inset: 0;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--void) 40%, transparent) 0%,
            color-mix(in srgb, var(--void) 10%, transparent) 30%,
            color-mix(in srgb, var(--void) 80%, transparent) 58%,
            var(--void) 72%);
    }
    .porta-sec__conteudo {
        margin-top: clamp(18px, 4vw, 34px);
        padding-bottom: 40px;
    }
    .porta-sec__titulo { font-size: clamp(26px, 7.6vw, 38px); }
}

/* Sem movimento: o poster mostra o objeto formado, o texto já aparece e a
   trilha encolhe — não faz sentido pedir rolagem para não animar nada. */
@media (prefers-reduced-motion: reduce) {
    .porta-sec { --porta-trilha: 100svh; }
    .porta-sec__video { display: none; }
    .porta-sec__veu, .porta-sec__conteudo { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- Quem é a Mauser ----------
   Diagramação editorial: cada bloco usa a largura inteira em vez de
   disputar a mesma coluna estreita.

   O limite do título está em EM, não em CH. Em unidade em ele acompanha
   o próprio font-size, então a frase quebra no mesmo ponto em qualquer
   tela. Com ch o resultado varia com a fonte e foi o que espremeu o
   título em cinco linhas.                                             */
.grupo__abre { margin-bottom: clamp(28px, 3.4vw, 52px); }

.grupo__titulo {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 62px);
    font-weight: 200; line-height: 1.08; letter-spacing: -.02em;
    max-width: 14em;
}
.grupo__titulo em { font-style: normal; color: var(--accent); font-weight: 400; }

/* Texto em duas colunas: quatro parágrafos numa coluna só viram uma
   tira estreita e comprida. break-inside impede que um parágrafo seja
   partido no meio entre as colunas. */
.grupo__texto {
    columns: 2; column-gap: clamp(34px, 4.5vw, 76px);
    max-width: 105ch;
}
.grupo__texto p {
    color: var(--text-muted); font-weight: 300;
    margin-bottom: 1.15em; break-inside: avoid;
}
.grupo__texto p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .grupo__texto { columns: 1; } }

.numeros {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    margin-top: clamp(32px, 4vw, 58px);
}
@media (max-width: 560px) { .numeros { grid-template-columns: 1fr; } }

.numero { background: var(--surface); padding: clamp(20px, 2.4vw, 32px); }
.numero b {
    display: block; font-family: var(--font-display);
    font-size: clamp(32px, 3.8vw, 52px); font-weight: 200; line-height: 1;
    color: var(--accent);
}
.numero span {
    display: block; margin-top: 9px;
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    color: var(--text-dim); line-height: 1.6;
}

/* O fecho é a ponte entre "quem somos" e as duas seções de empresa. */
.grupo__fecho {
    margin-top: clamp(34px, 4.2vw, 62px);
    padding-top: clamp(22px, 2.8vw, 36px);
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: clamp(17px, 2vw, 26px); font-weight: 200; line-height: 1.45;
    max-width: 26em;
}

/* ---------- Atuação ---------- */
.cidades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (max-width: 700px) { .cidades { grid-template-columns: 1fr; } }
.cidade { background: var(--surface); padding: clamp(22px, 2.6vw, 34px); }
.cidade h3 { margin-bottom: 6px; }
.cidade span {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
    display: block; margin-bottom: 6px;
}
.cidade p {
    color: var(--accent); font-size: 14px; font-weight: 400; margin-top: 8px;
    font-family: var(--font-display); letter-spacing: .02em;
}

/* ---------- Fale com a gente ----------
   No celular a seção herdava o respiro do desktop e o formulário ficava
   espremido embaixo de muito espaço vazio. */
@media (max-width: 640px) {
    .sec { padding-block: clamp(56px, 12vw, 90px); }
    .centro .titulo-sec { font-size: clamp(26px, 8vw, 36px); }
    .centro .lede { font-size: 14px; }
}