/* =========================================================================
   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 ---------- */
/* Assinatura vertical: o viewBox é 600×320, então as medidas de tipo são as do
   próprio arquivo da marca (22 e 62, tracking 11 e 9) — não as da horizontal. */
.marca svg { width: clamp(210px, 30vw, 300px); height: auto; }
.marca .apex { fill: var(--acento); }
.marca .body { fill: rgba(230,233,231,.92); }
.lg-grupo  { font: 500 22px "Inter", sans-serif; letter-spacing: 11px; fill: rgba(185,192,189,.72); }
.lg-altear { font: 500 62px "Inter", sans-serif; letter-spacing: 9px;  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); }

/* ---------- A mandala ----------
   Mesma linguagem do site: anel fino, hairline, cor só no arco do setor
   apontado. Sem ficha — a página é sucinta, e o nome vai no próprio miolo. */
.forcas { width: 100%; display: flex; justify-content: center; }
.mandala { position: relative; width: min(340px, 74vw); }
.mandala > svg { width: 100%; height: auto; display: block; overflow: visible; }
.mandala__guia { fill: none; stroke: rgba(230,233,231,.08); stroke-width: 1; }

.setor { cursor: pointer; }
.setor__area {
  fill: rgba(230,233,231,.03);
  stroke: rgba(230,233,231,.12); stroke-width: 1;
  transition: fill .45s var(--e), stroke .45s var(--e);
}
.setor__aro {
  fill: none; stroke: var(--cor); stroke-width: 2; opacity: .34;
  transition: opacity .45s var(--e), stroke-width .45s var(--e);
}
.setor__rotulo {
  /* 10.6px com tracking menor: "Patrimonial" ocupava 93 de 93 unidades do
     arco, sem folga — se a Inter não carregar e cair na Arial, transborda. */
  fill: var(--texto-2); font-size: 10.6px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-anchor: middle; pointer-events: none;
  transition: fill .45s var(--e);
}
.setor.is-on .setor__area {
  fill: color-mix(in srgb, var(--cor) 32%, transparent);
  stroke: color-mix(in srgb, var(--cor) 66%, transparent);
}
.setor.is-on .setor__aro { opacity: 1; stroke-width: 4; }
.setor.is-on .setor__rotulo { fill: #fff; }
.setor:focus { outline: none; }
.setor:focus-visible .setor__area { stroke: var(--mineral); stroke-width: 1.5; }

.mandala__miolo {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 11px;
  pointer-events: none; text-align: center; padding-inline: 24%;
}
.mandala__sim { width: 30px; height: auto; }
.mandala__sim .body { fill: var(--texto); }
.mandala__sim .apex { fill: var(--acento); transition: fill .45s var(--e); }
.mandala__ativa {
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  color: #fff;
}

/* ---------- quadro descritivo ----------
   Absoluto: não entra no fluxo, então a página não cresce um pixel. Abre para
   o lado do setor apontado — o olho não atravessa a mandala para ler. */
.mandala__painel { position: static; }
.ficha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 300px; text-align: left;
  padding: 20px 22px;
  background: rgba(9,14,22,.82);
  border: 1px solid var(--linha);
  border-radius: 3px;
  animation: fichaEntra .3s var(--e) both;
}
/* 170 = metade da roda; + 22 de respiro */
.ficha--dir { left: calc(50% + 192px); --vem:  10px; }
.ficha--esq { right: calc(50% + 192px); --vem: -10px; }
.ficha[hidden] { display: none; }

@keyframes fichaEntra {
  from { opacity: 0; transform: translateY(-50%) translateX(var(--vem, 10px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.ficha__nome {
  display: block; font-size: .62rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase; color: var(--cor);
  padding-bottom: 11px; border-bottom: 1px solid var(--linha);
}
.ficha__pergunta {
  margin: 15px 0 14px; font-size: 1.02rem; font-weight: 500;
  color: #fff; letter-spacing: -.018em; line-height: 1.26;
}
.ficha__lista li {
  font-size: .82rem; color: var(--texto-2); line-height: 1.5;
  padding-left: 15px; position: relative; margin-bottom: 6px;
}
.ficha__lista li::before {
  content: ""; position: absolute; left: 0; top: .64em;
  width: 6px; height: 1px; background: var(--cor);
}

/* Sem espaço lateral para o quadro, ele simplesmente não existe: no toque não
   há hover, e empilhar aqui contrariaria a página ser sucinta. O nome no miolo
   continua respondendo ao toque. */
@media (max-width: 1000px) {
  .ficha { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .setor__area, .setor__aro, .setor__rotulo, .mandala__sim .apex { transition: none; }
}

/* ---------- 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;
  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. */
}

@media (max-width: 720px) {
  .palco { gap: 34px; padding-inline: 22px; }
  .mandala { width: min(300px, 82vw); }
  .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; }
}