/* =========================================================================
   GRUPO ALTEAR · PÁGINA DE PRÉ-LANÇAMENTO
   Uma sala escura com o símbolo iluminado. A fumaça é o "antes".
   Direção em landing/pre-lancamento/design.md
   ========================================================================= */

:root {
  /* O quase-preto do grupo. Não é #000: o teaser em movimento já definiu este
     tom — "preto puro é #000000; este quase-preto tem um resto de azul frio".
     Preto puro some em OLED e endurece a tipografia.                        */
  --breu:      #07090B;
  --luz-fria:  126, 166, 206;          /* azul aço como LUZ, nunca chapado */
  --texto:     rgba(240,244,247,.94);
  /* Opacidades calibradas contra o PIOR caso, que não é o breu puro: a fumaça
     usa mix-blend-mode screen e só clareia o fundo, então o contraste mínimo
     acontece na zona mais densa de névoa (~#1E242C). Nessas duas, 5,4:1 e
     4,9:1 — ambas passam no AA com folga.                                    */
  --texto-2:   rgba(185,192,189,.82);
  --texto-3:   rgba(185,192,189,.72);
  --acento:    #8AB4DC;
  --linha:     rgba(230,233,231,.12);
  --angulo:    24.8deg;                /* diagonal proprietária da marca */
  --e:         cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--breu);
  color: var(--texto);
  font-family: "Inter", "Inter Display", "Neue Haas Grotesk Display", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

/* ============================ FUMAÇA ============================
   Textura fBm ladrilhável de 256px, gerada uma vez, repetida em quatro
   camadas com escalas e sentidos diferentes. NADA além de transform anima —
   é composição pura, sem repaint e sem layout, o que mantém a página fria
   mesmo ficando horas aberta numa aba.                                     */
.fumaca {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
}

/* Halos de luz fria por baixo da fumaça: é o que dá volume ao breu */
.fumaca__luz {
  position: absolute; inset: -20%;
  background:
    radial-gradient(46% 38% at 26% 22%, rgba(var(--luz-fria), .16) 0%, transparent 68%),
    radial-gradient(52% 44% at 78% 68%, rgba(var(--luz-fria), .10) 0%, transparent 70%),
    radial-gradient(70% 56% at 50% 108%, rgba(var(--luz-fria), .07) 0%, transparent 72%);
}

.fumaca__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* screen sobre o breu: o preto do footage some, só a fumaça acende.
     A subida e o tom frio já vêm embutidos no arquivo. */
  mix-blend-mode: screen;
  opacity: .46;
}

/* Vinheta: adensa as bordas e abre o centro — a fumaça nunca disputa com o logo */
.fumaca__vinheta {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 52% at 50% 34%, transparent 0%, rgba(7,9,11,.55) 62%, var(--breu) 100%),
    linear-gradient(180deg, rgba(7,9,11,.7) 0%, transparent 22%, transparent 74%, var(--breu) 100%);
}

/* Assinatura: as diagonais a 24,8°, muito baixas, só na borda de baixo */
.fumaca__diagonais {
  position: absolute; inset: auto 0 0 0; height: 46vh;
  background: repeating-linear-gradient(
    calc(90deg - var(--angulo)),
    rgba(230,233,231,.038) 0 1px,
    transparent 1px 74px
  );
  mask-image: linear-gradient(180deg, transparent, #000 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 78%);
}

/* ============================ PALCO ============================ */
.palco {
  position: relative; z-index: 1;
  max-width: 1080px; margin-inline: auto;
  padding: clamp(40px, 6vh, 68px) 28px clamp(30px, 5vh, 52px);
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(28px, 4.2vh, 46px);
}

/* ---------- Marca ---------- */
.marca svg { width: clamp(196px, 27vw, 260px); height: auto; }
.marca .apex { fill: var(--acento); }
.marca .body { fill: rgba(230,233,231,.92); }
.lg-grupo  { font: 500 17px "Inter", sans-serif; letter-spacing: 9px; fill: rgba(185,192,189,.7); }
.lg-altear { font: 500 50px "Inter", sans-serif; letter-spacing: 8px; fill: #fff; }

/* ---------- Tipografia ---------- */
.eyebrow {
  margin: 0 0 15px;
  font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
}

.abertura { max-width: 62ch; }
h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.06;
  color: #fff;
  text-shadow: 0 2px 60px rgba(var(--luz-fria), .18);
}
.lead {
  margin: 22px auto 0; max-width: 54ch;
  font-size: 1.02rem; color: var(--texto-2);
}
.lead span { display: block; margin-top: 12px; color: var(--texto-3); }

/* ---------- Contagem regressiva ---------- */
.contagem__grade { display: flex; justify-content: center; gap: clamp(20px, 5vw, 48px); }
.unidade { min-width: 62px; }
.unidade__n {
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -.02em;
  line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.unidade__r {
  display: block; margin-top: 8px;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3);
}
/* O segundo vira com um pulso mínimo — a contagem é um fato, não uma pressão */
.unidade__n.pulsa { animation: pulso .5s var(--e); }
@keyframes pulso { 0% { opacity: .55; } 100% { opacity: 1; } }

.contagem__vivo { margin: 0; }
.contagem--fim .contagem__grade { display: none; }
.contagem--fim .contagem__vivo {
  margin-top: 4px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; color: #fff;
}
.contagem--fim .contagem__vivo a { border-bottom: 1px solid var(--acento); color: var(--acento); }

/* ---------- As onze forças ----------
   Onze não fecha retângulo: qualquer grade de N colunas sobra célula vazia.
   Por isso é uma FILA que se centra ao quebrar — linha centrada não tem buraco,
   tem respiro. A estrutura vem dos dois filetes que enquadram a faixa, não de
   uma moldura por item.                                                      */
.forcas { width: 100%; }
.forcas__fila {
  display: flex; flex-wrap: nowrap; justify-content: center;
  width: 100%; margin-inline: auto;
  padding-block: 16px;
  border-top: 1px solid rgba(230,233,231,.1);
  border-bottom: 1px solid rgba(230,233,231,.1);
}
/* flex: 1 1 0 + min-width: 0 → as onze dividem a largura em partes iguais e
   nunca quebram. Uma faixa contínua, sem sobra e sem órfão. */
.forcas__fila li {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 9px 4px;
  transition: opacity .35s var(--e);
}
/* Ao passar o mouse, as outras recuam — o sistema inteiro fica legível numa só
   leitura, e a que interessa sobe. */
.forcas__fila:hover li { opacity: .45; }
.forcas__fila li:hover { opacity: 1; }
.forcas__fila .sim { width: 18px; height: auto; }
.forcas__fila .apex { fill: var(--cor); }
.forcas__fila .body { fill: rgba(230,233,231,.58); }
.forcas__fila li:hover .body { fill: rgba(230,233,231,.95); }
.forcas__fila span {
  font-size: .62rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--texto-2); line-height: 1.15; text-align: center; white-space: nowrap;
}

/* ---------- Os sócios ---------- */
.socios { width: 100%; }
.socios__lista {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 4vw, 44px);
}
.socio { width: 128px; }
.socio img {
  width: 84px; height: 84px; margin: 0 auto 12px;
  border-radius: 50%; object-fit: cover; object-position: center 16%;
  filter: grayscale(1) brightness(.86) contrast(1.05);
  border: 1px solid var(--linha);
  transition: filter .5s var(--e), border-color .5s var(--e);
}
.socio:hover img {
  filter: grayscale(.15) brightness(1) contrast(1.02);
  border-color: color-mix(in srgb, var(--cor) 65%, transparent);
}
.socio__nome { display: block; font-size: .86rem; font-weight: 500; color: var(--texto); }
.socio__lane {
  display: block; margin-top: 5px;
  font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--texto-3);
}

/* ---------- Contato ---------- */
.contato { width: 100%; }
.contato__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.acao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 11px 20px;
  border: 1px solid var(--linha); border-radius: 2px;
  font-size: .86rem; color: var(--texto-2);
  background: rgba(230,233,231,.03);
  transition: border-color .35s var(--e), color .35s var(--e), background .35s var(--e);
}
.acao:hover { color: #fff; border-color: rgba(var(--luz-fria), .5); background: rgba(230,233,231,.07); }
.acao svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--acento); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.endereco { margin: 18px 0 0; font-size: .8rem; color: var(--texto-3); }

/* ---------- Rodapé ---------- */
.rodape { margin-top: auto; padding-top: 12px; }
.rodape__frase {
  margin: 0; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento); opacity: .75;
}
.rodape__legal { margin: 12px 0 0; font-size: .72rem; letter-spacing: .05em; color: var(--texto-3); }

/* ============================ ENTRADA ============================
   Uma cascata só, no carregamento. Não repete no scroll: a página é curta e
   repetir viraria tique.                                                    */
.anim .sobe {
  opacity: 0; transform: translateY(16px);
  animation: sobe .85s var(--e) forwards;
  animation-delay: calc(var(--d, 0) * 90ms + 120ms);
}
@keyframes sobe { to { opacity: 1; transform: none; } }

/* ============================ MOVIMENTO REDUZIDO ============================ */
@media (prefers-reduced-motion: reduce) {
  .anim .sobe { opacity: 1; transform: none; animation: none; }
  .unidade__n.pulsa { animation: none; }
  .forcas__lista li, .socio img, .acao { transition: none; }
}

/* ============================ RESPONSIVO ============================ */
@media (max-width: 980px) {
  /* "PATRIMONIAL" é o rótulo mais largo; abaixo disto a coluna fica menor que
     ele e a linha única deixaria de caber. Quebra centrada, sem célula vazia. */
  .forcas__fila { flex-wrap: wrap; max-width: 566px; }
  /* 566px cabe exatamente 6 colunas de 92px: a quebra vira 6 + 5, equilibrada.
     Sem esse teto, o flex encaixaria 9 na primeira linha e deixaria 2 órfãos. */
  .forcas__fila li { flex: 0 1 auto; min-width: 92px; }
}

@media (max-width: 720px) {
  .palco { gap: 34px; padding-inline: 22px; }
  /* 4 colunas de 80px = 320px → 4 + 4 + 3 */
  .forcas__fila { max-width: 336px; padding-block: 12px; }
  .forcas__fila li { min-width: 80px; padding: 8px 4px; gap: 6px; }
  .forcas__fila .sim { width: 16px; }
  .forcas__fila span { font-size: .55rem; letter-spacing: .07em; }
  /* Sem mouse não há hover: manter todas legíveis */
  .forcas__fila:hover li { opacity: 1; }
  .socios__lista { gap: 18px; }
  .socio { width: 100px; }
  .socio img { width: 74px; height: 74px; }
  .contato__acoes { flex-direction: column; align-items: stretch; }
  .acao { justify-content: center; }
}

@media (max-width: 400px) {
  .unidade { min-width: 52px; }
  .contagem__grade { gap: 16px; }
}