/* =============================================================================
   GRUPO VLX · ÁGUIA BLACK PARTICIPAÇÕES
   Folha de estilo institucional — HTML5 / CSS3, sem dependências externas.

   Sumário
   01. Tokens                    07. Grandes números
   02. Base e tipografia         08. Planta dos lotes (elemento assinatura)
   03. Utilitários de seção      09. Distribuição e tabelas
   04. Cabeçalho e navegação     10. VGV e gráficos
   05. Hero, ondas e cadeia     11. Fluxo, simulador, participantes
   06. Estrutura da permuta      12. Aviso legal, rodapé, responsivo
   ========================================================================== */

/* 01. TOKENS ============================================================== */

:root {
  /* Cores extraídas do logotipo oficial */
  --tinta:      #0A2438;   /* fundo institucional profundo */
  --navy:       #0D2D44;   /* azul-marinho do logotipo */
  --navy-2:     #143C50;   /* azul-marinho claro do logotipo */
  --ciano:      #008ECE;   /* ciano do logotipo — Grupo VLX */
  --ciano-cl:   #4FBBEC;
  --ouro:       #FEBD08;   /* amarelo do logotipo — investidores */
  --ouro-esc:   #FDC900;
  --grafite:    #5A6B7F;   /* Águia Black Participações */
  --grafite-cl: #8899AA;

  /* Superfícies */
  --papel:      #EDF1F3;
  --papel-2:    #F7F9FA;
  --branco:     #FFFFFF;

  /* Traços e textos */
  --traco:      rgba(13, 45, 68, .17);
  --traco-fino: rgba(13, 45, 68, .10);
  --texto:      #0D2D44;
  --texto-md:   #4A6376;
  --texto-cl:   rgba(237, 241, 243, .74);

  /* Tipografia */
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --corpo:   'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dado:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Métrica */
  --largura:   1240px;
  --gutter:    clamp(20px, 5vw, 64px);
  --altura-nav: 74px;
  --raio:      3px;

  --transicao: 420ms cubic-bezier(.22, .61, .36, 1);
}

/* 02. BASE E TIPOGRAFIA =================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-nav) + 12px); }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 4.15rem); font-variation-settings: 'wdth' 92; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.012em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Rótulo técnico — usado como etiqueta de seção e de dado */
.rotulo {
  font-family: var(--dado);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--texto-md);
  display: inline-flex;
  align-items: center;
  gap: .62em;
}
.rotulo::before {
  content: '';
  width: 15px; height: 1px;
  background: var(--ciano);
  flex: none;
}
.escuro .rotulo { color: var(--ciano-cl); }
.escuro .rotulo::before { background: var(--ouro); }

.dado { font-family: var(--dado); font-variant-numeric: tabular-nums; }

.led {
  font-family: var(--display);
  font-variation-settings: 'wdth' 78;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: .92;
}

/* 03. UTILITÁRIOS DE SEÇÃO =============================================== */

.envolve { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }

.secao { padding-block: clamp(64px, 8.5vw, 118px); position: relative; }
.secao + .secao { border-top: 1px solid var(--traco-fino); }

.escuro {
  background: var(--tinta);
  color: var(--papel);
  border-top: none !important;
}
.escuro h1, .escuro h2, .escuro h3 { color: var(--branco); }
.escuro p { color: var(--texto-cl); }

.cabeca-secao { max-width: 62ch; margin-bottom: clamp(34px, 4.6vw, 58px); }
.cabeca-secao h2 { margin-block: .5em .42em; }
.cabeca-secao p { font-size: 1.06rem; color: var(--texto-md); }
.escuro .cabeca-secao p { color: var(--texto-cl); }

.nota {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--texto-md);
  border-left: 2px solid var(--ouro);
  padding-left: 14px;
  margin-top: 26px;
  max-width: 74ch;
}
.escuro .nota { color: var(--texto-cl); border-left-color: var(--ouro); }

/* Revelação na rolagem */
.revela { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
.revela.visivel { opacity: 1; transform: none; }

/* 04. CABEÇALHO E NAVEGAÇÃO ============================================== */

.topo {
  position: sticky;
  top: 0;
  height: var(--altura-nav);
  z-index: 90;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-bottom: 1px solid var(--traco);
  transition: background var(--transicao), border-color var(--transicao);
}
.topo.compacto {
  background: rgba(10, 36, 56, .96);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .10);
}

.topo .envolve { display: flex; align-items: center; gap: 28px; }

.assinatura-topo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
  text-decoration: none;
  font-family: var(--dado);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.assinatura-topo b { font-weight: 600; color: var(--navy); transition: color var(--transicao); }
.assinatura-topo span {
  color: var(--texto-md);
  border-left: 1px solid var(--traco);
  padding-left: 10px;
  transition: color var(--transicao), border-color var(--transicao);
}
.topo.compacto .assinatura-topo b { color: #fff; }
.topo.compacto .assinatura-topo span { color: rgba(237, 241, 243, .6); border-left-color: rgba(255,255,255,.24); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: .855rem;
  font-weight: 500;
  color: var(--texto-md);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--raio);
  position: relative;
  transition: color 220ms ease, background 220ms ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--navy); background: rgba(13, 45, 68, .06); }
.nav a.ativo { color: var(--navy); }
.topo.compacto .nav a { color: rgba(237, 241, 243, .76); }
.topo.compacto .nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topo.compacto .nav a.ativo { color: #fff; }
.nav a.ativo::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: var(--ouro);
}

.abrir-menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  color: var(--navy);
  width: 42px; height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.abrir-menu i { display: block; width: 17px; height: 1.5px; background: var(--navy); transition: transform 260ms ease, opacity 200ms ease; }
.abrir-menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.topo.compacto .abrir-menu { border-color: rgba(255,255,255,.28); color: #fff; }
.topo.compacto .abrir-menu i { background: #fff; }

/* 05. HERO E CADEIA DA OPERAÇÃO ========================================== */

.hero {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 92px);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(0, 142, 206, .22), transparent 62%),
    radial-gradient(90% 70% at 100% 100%, rgba(254, 189, 8, .10), transparent 58%),
    var(--tinta);
  overflow: hidden;
}

/* Malha discreta de fundo — referência a planta de loteamento */
.hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(80% 70% at 50% 70%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 70%, #000 20%, transparent 100%);
  pointer-events: none;
}
.hero > .envolve { position: relative; z-index: 1; }

.hero h1 { max-width: 17ch; margin-block: .34em .5em; }
.hero .chamada { font-size: clamp(1rem, 1.45vw, 1.16rem); max-width: 60ch; }

/* Cadeia: 2.800 → 40% → 1.120 → três participantes */
.cadeia { margin-top: clamp(44px, 5.6vw, 68px); }

.cadeia-etapa { position: relative; padding-bottom: 26px; }
.cadeia-etapa:last-child { padding-bottom: 0; }

.cadeia-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}
.cadeia-top .rotulo::before { background: rgba(255,255,255,.3); }
.cadeia-valor {
  font-family: var(--dado);
  font-size: .82rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .01em;
}

.cadeia-barra {
  height: 34px;
  display: flex;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.cadeia-seg {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 11px;
  font-family: var(--dado);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  overflow: hidden;
  white-space: nowrap;
  transform-origin: left center;
  animation: cresce 1100ms cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cadeia-seg.vazio  { background: rgba(255,255,255,.055); color: rgba(255,255,255,.42); }
.cadeia-seg.total  { background: rgba(86, 185, 230, .28); }
.cadeia-seg.quota  { background: linear-gradient(90deg, var(--ciano), #24A9E4); }
.cadeia-seg.ouro   { background: var(--ouro); color: #2E2200; }
.cadeia-seg.ciano  { background: var(--ciano); }
.cadeia-seg.grafite{ background: var(--grafite-cl); color: #10293A; }

.cadeia-liga {
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%;
  height: 18px;
  pointer-events: none;
}

/* Números de destaque do hero */
.hero-numeros {
  margin-top: clamp(42px, 5vw, 62px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-numeros div {
  padding: 22px 20px 4px 0;
  border-right: 1px solid rgba(255, 255, 255, .10);
}
.hero-numeros div:last-child { border-right: none; }
.hero-numeros strong {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 80;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.026em;
  font-variant-numeric: tabular-nums;
}
.hero-numeros small {
  display: block;
  margin-top: 5px;
  font-family: var(--dado);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(237, 240, 242, .55);
  line-height: 1.5;
}
.hero-numeros div:nth-child(2) strong,
.hero-numeros div:nth-child(5) strong { color: var(--ouro); }


/* 05b. ONDAS — motivo marítimo da marca ================================== */

.onda { display: block; line-height: 0; position: relative; z-index: 2; }
.onda svg {
  display: block;
  width: 100%;
  height: clamp(46px, 5.4vw, 86px);
}

/* Cor de fundo do divisor = cor da seção de cima */
.onda-de-tinta { background: var(--tinta); }
.onda-de-papel  { background: var(--papel); }
.onda-de-branco { background: #FFFFFF; }

.onda-meio  { fill: var(--navy-2); }
.onda-faixa { fill: none; stroke: var(--ouro); stroke-width: 7; stroke-linecap: round; }
.onda-para-papel { fill: var(--papel); }
.onda-para-tinta { fill: var(--tinta); }

/* Timbre do topo — reprodução vetorial do cabeçalho oficial do Grupo VLX.
   A arte mantém a proporção original (800 x 241) até o teto de altura;
   acima disso o recorte é ancorado à direita, onde ficam o lobo claro e
   o logotipo, de modo que a marca nunca é cortada. */
.timbre {
  --vlx-navy:   #0D2D44;
  --vlx-navy-2: #143C50;
  --vlx-ouro:   #FEBD08;
  --vlx-lobo:   #F1F1F1;
  background: #FFFFFF;
  line-height: 0;
  position: relative;
  z-index: 1;
}
/* Altura = 30,125% da largura, que é exatamente a proporção da arte
   original (800 x 241). Assim o desenho aparece inteiro, sem corte e sem
   distorção. O recorte só entra em telas muito largas ou no celular, e é
   ancorado à direita, onde ficam o lobo claro e o logotipo. */
.timbre-arte {
  display: block;
  width: 100%;
  height: 30.125vw;
  max-height: 520px;
}
@media (max-width: 680px) {
  .timbre-arte { height: 168px; }
}

/* 06. ESTRUTURA DA PERMUTA =============================================== */

.permuta-fluxo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.origem { display: grid; gap: 14px; }

.cartao-origem {
  background: var(--branco);
  border: 1px solid var(--traco);
  border-left: 3px solid var(--navy);
  padding: 20px 22px;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-origem:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(13, 45, 68, .48); }
.cartao-origem h3 { font-size: 1.28rem; margin-bottom: 4px; }
.cartao-origem p { font-size: .9rem; color: var(--texto-md); margin: 0; }
.cartao-origem .rotulo { font-size: .625rem; margin-bottom: 10px; }

/* Separador entre as duas alternativas de permutante */
.ou {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 2px;
}
.ou::before, .ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--traco);
}
.ou span {
  font-family: var(--dado);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--ouro);
  padding: 4px 12px;
  border-radius: 2px;
}
.origem-nota {
  font-family: var(--dado);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-md);
  margin: 4px 0 0;
  line-height: 1.6;
}
.cadeia-seg em { font-style: normal; opacity: .65; padding-inline: 3px; }

.seta-permuta { display: grid; place-items: center; color: var(--ciano); }
.seta-permuta svg { width: clamp(40px, 6vw, 76px); height: auto; }

/* Cartão azul-marinho: o desenho padrão para destacar um número
   dentro das seções claras. Usado no destino da permuta e na
   derivação dos lotes logo abaixo. */
.destino, .cartao-passo {
  background: var(--navy);
  color: #fff;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid var(--navy);
  position: relative;
  overflow: hidden;
}
.destino::after, .cartao-passo::after {
  content: '';
  position: absolute;
  inset: auto -30px -40px auto;
  width: 170px; height: 170px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.destino .rotulo, .cartao-passo .rotulo { color: rgba(255,255,255,.62); }
.destino .rotulo::before, .cartao-passo .rotulo::before { background: var(--ouro); }
.destino .led, .cartao-passo .led { color: #fff; margin: 12px 0 6px; position: relative; }
.destino .led { font-size: clamp(2.6rem, 5.4vw, 3.7rem); }
.cartao-passo .led { font-size: clamp(2.4rem, 4.6vw, 3.2rem); }
.destino p, .cartao-passo p {
  color: rgba(255,255,255,.76);
  font-size: .92rem;
  margin: 0;
  position: relative;
}

.passos-cartoes {
  margin-top: clamp(38px, 4.6vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 18px;
}
.cartao-passo {
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-passo:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(13, 45, 68, .62);
}

/* O potencial que fica fora da operação aparece em tom mais discreto */
.cartao-passo.tenue { background: var(--navy-2); border-color: var(--navy-2); }
.cartao-passo.tenue .led { color: rgba(255,255,255,.62); }
.cartao-passo.tenue .rotulo::before { background: rgba(255,255,255,.4); }

/* 07. GRANDES NÚMEROS ==================================================== */

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px;
  background: var(--traco);
  border: 1px solid var(--traco);
}
.bloco-numero {
  background: var(--papel-2);
  padding: clamp(24px, 3vw, 32px);
  transition: background var(--transicao);
  position: relative;
}
.bloco-numero:hover { background: var(--branco); }
.bloco-numero .led {
  font-size: clamp(2.1rem, 3.9vw, 2.95rem);
  color: var(--navy);
  display: block;
  margin-bottom: 10px;
}
.bloco-numero p { font-size: .875rem; color: var(--texto-md); margin: 0; line-height: 1.5; }
.bloco-numero .marca-cor { position: absolute; top: 0; left: 0; width: 34px; height: 3px; }
.marca-cor.ouro { background: var(--ouro); }
.marca-cor.ciano { background: var(--ciano); }
.marca-cor.grafite { background: var(--grafite); }
.marca-cor.navy { background: var(--navy); }

/* 08. PLANTA DOS LOTES — ELEMENTO ASSINATURA ============================= */

.planta-envolve { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(26px, 3.4vw, 48px); align-items: start; }

.planta {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 1.6px;
  padding: clamp(14px, 1.8vw, 22px);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .13);
}
.lote {
  aspect-ratio: 1 / 1.35;
  background: rgba(255, 255, 255, .09);
  transition: background 260ms ease, opacity 260ms ease;
  border-radius: .5px;
}
.lote.investidores { background: var(--ouro); }
.lote.vlx          { background: var(--ciano); }
.lote.aguia        { background: var(--grafite-cl); }

.planta.focando .lote { opacity: .16; }
.planta.focando .lote.destaque { opacity: 1; }
.planta.foco-quota .lote { opacity: .12; }
.planta.foco-quota .lote:not(.fora) { opacity: 1; }

.legenda { display: grid; gap: 3px; align-content: start; }
.legenda-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 220ms ease, border-color 220ms ease;
}
.legenda-item:hover, .legenda-item:focus-visible { background: rgba(255, 255, 255, .10); border-color: rgba(255,255,255,.26); }
.legenda-item i { width: 12px; height: 12px; display: block; border-radius: 1px; }
.legenda-item b { font-weight: 600; font-size: .93rem; color: #fff; }
.legenda-item small { display: block; font-family: var(--dado); font-size: .68rem; letter-spacing: .1em; color: rgba(237,240,242,.55); text-transform: uppercase; margin-top: 2px; }
.legenda-item .qtd { font-family: var(--dado); font-size: 1.02rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

.legenda-cor-investidores { background: var(--ouro); }
.legenda-cor-vlx          { background: var(--ciano); }
.legenda-cor-aguia        { background: var(--grafite-cl); }
.legenda-cor-fora         { background: rgba(255,255,255,.16); }
.legenda-cor-quota {
  background: linear-gradient(180deg, var(--ouro) 0 34%, var(--ciano) 34% 60%, var(--grafite-cl) 60% 100%);
}

.planta-escala {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dado);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(237,240,242,.5);
}
.planta-escala span { width: 9px; height: 12px; background: rgba(255,255,255,.16); display: block; }

/* 09. DISTRIBUIÇÃO E TABELAS ============================================= */

.barra-participacao {
  display: flex;
  height: 62px;
  border: 1px solid var(--traco);
  margin-bottom: 4px;
  overflow: hidden;
}
.barra-participacao button {
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 16px;
  text-align: left;
  transition: filter 220ms ease;
  overflow: hidden;
}
.barra-participacao button:hover { filter: brightness(1.07); }
.barra-participacao button b { font-family: var(--dado); font-size: .92rem; font-weight: 600; }
.barra-participacao button small { font-size: .72rem; opacity: .8; white-space: nowrap; }
.seg-ouro    { background: var(--ouro);   color: #2E2200; }
.seg-ciano   { background: var(--ciano);  color: #fff; }
.seg-grafite { background: var(--grafite); color: #fff; }

.cartoes-dist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.cartao-dist {
  background: var(--branco);
  border: 1px solid var(--traco);
  border-top: 3px solid var(--navy);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-dist:hover { transform: translateY(-4px); box-shadow: 0 20px 42px -24px rgba(13,45,68,.5); }
.cartao-dist.ouro    { border-top-color: var(--ouro); }
.cartao-dist.ciano   { border-top-color: var(--ciano); }
.cartao-dist.grafite { border-top-color: var(--grafite); }
.cartao-dist h3 { margin-bottom: 6px; }
.cartao-dist .resumo { font-size: .88rem; color: var(--texto-md); margin-bottom: 20px; }
.cartao-dist .led { font-size: clamp(2.4rem, 4.2vw, 3.1rem); color: var(--navy); }
.cartao-dist .unid { font-family: var(--dado); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-md); margin-left: 8px; }
.linhas-dist { margin-top: 18px; border-top: 1px solid var(--traco-fino); }
.linhas-dist div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--traco-fino);
  font-size: .855rem;
}
.linhas-dist dt, .linhas-dist span:first-child { color: var(--texto-md); }
.linhas-dist span:last-child { font-family: var(--dado); font-weight: 500; font-variant-numeric: tabular-nums; }
.criterio { margin-top: 16px; font-size: .78rem; color: var(--texto-md); font-style: italic; }

/* Tabelas */
.tabela-envolve { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.quadro {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: .93rem;
}
table.quadro caption {
  text-align: left;
  padding-bottom: 14px;
  font-family: var(--dado);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-md);
}
table.quadro th, table.quadro td { padding: 15px 16px; text-align: right; }
table.quadro th:first-child, table.quadro td:first-child { text-align: left; padding-left: 0; }
table.quadro td:last-child, table.quadro th:last-child { padding-right: 0; }
table.quadro thead th {
  font-family: var(--dado);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-md);
  border-bottom: 1px solid var(--navy);
}
table.quadro tbody td { border-bottom: 1px solid var(--traco-fino); font-variant-numeric: tabular-nums; }
table.quadro tbody td:not(:first-child) { font-family: var(--dado); }
table.quadro tbody tr { transition: background 200ms ease; }
table.quadro tbody tr:hover { background: rgba(255,255,255,.6); }
table.quadro tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--navy);
  border-bottom: none;
  padding-top: 16px;
  font-variant-numeric: tabular-nums;
}
table.quadro tfoot td:not(:first-child) { font-family: var(--dado); }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 1px; margin-right: 9px; vertical-align: baseline; }
.escuro table.quadro tbody td { border-bottom-color: rgba(255,255,255,.12); color: var(--papel); }
.escuro table.quadro thead th { color: rgba(237,240,242,.6); border-bottom-color: rgba(255,255,255,.4); }
.escuro table.quadro tfoot td { border-top-color: var(--ouro); color: #fff; }
.escuro table.quadro tbody tr:hover { background: rgba(255,255,255,.05); }
.escuro table.quadro caption { color: rgba(237,240,242,.55); }

/* 10. VGV E GRÁFICOS ===================================================== */

.grafico-vgv { display: grid; gap: 2px; margin-bottom: 40px; }
.linha-grafico {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
}
.linha-grafico .nome { font-size: .94rem; font-weight: 500; display: flex; align-items: center; }
.linha-grafico .trilho { background: rgba(255,255,255,.07); height: 30px; position: relative; }
.escuro .linha-grafico .trilho { background: rgba(255,255,255,.07); }
.linha-grafico .preenche {
  height: 100%;
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  transform: scaleX(0);
  position: relative;
  cursor: default;
}
.linha-grafico.visivel .preenche { transform: scaleX(1); }
.preenche.ouro { background: var(--ouro); }
.preenche.ciano { background: var(--ciano); }
.preenche.grafite { background: var(--grafite-cl); }
.preenche.total { background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 6px, rgba(255,255,255,.14) 6px 12px); }
.linha-grafico .valor { font-family: var(--dado); font-size: .93rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Dica flutuante dos gráficos */
.dica {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--branco);
  color: var(--texto);
  border: 1px solid var(--navy);
  padding: 9px 13px;
  font-family: var(--dado);
  font-size: .76rem;
  line-height: 1.5;
  box-shadow: 0 16px 34px -14px rgba(10,36,56,.55);
  opacity: 0;
  transform: translate(-50%, -128%);
  transition: opacity 160ms ease;
  white-space: nowrap;
  max-width: 260px;
}
.dica.aberta { opacity: 1; }
.dica b { font-family: var(--corpo); font-weight: 600; display: block; margin-bottom: 2px; }

/* Comparativo dos investidores — blocos-unidade */
.comparativo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 58px); align-items: center; }

.blocos { display: grid; gap: 20px; }
.bloco-linha .rotulo { margin-bottom: 10px; }
.unidades { display: flex; gap: 5px; flex-wrap: wrap; }
.unidade {
  width: 30px; height: 46px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.06);
}
.unidade.cheia { background: var(--ouro); border-color: var(--ouro); }
.unidade.aporte { background: var(--ciano); border-color: var(--ciano); }
.unidade.parcial { background: linear-gradient(90deg, var(--ouro) 0 var(--fracao, 50%), rgba(255,255,255,.06) var(--fracao, 50%)); border-color: rgba(254,189,8,.6); }
.bloco-linha .valor-bloco { font-family: var(--dado); font-size: .86rem; color: rgba(237,240,242,.72); margin-top: 10px; }

/* 11. FLUXO, SIMULADOR, PARTICIPANTES ==================================== */

.linha-tempo { position: relative; padding-left: 0; margin: 0; list-style: none; }
.linha-tempo::before {
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--ciano), var(--ouro));
  opacity: .5;
}
.etapa { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-block: 15px; position: relative; }
.etapa .n {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--traco);
  background: var(--branco);
  font-family: var(--dado);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  border-radius: 50%;
  z-index: 1;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.etapa:hover .n, .etapa.visivel .n { border-color: var(--navy); }
.etapa:hover .n { background: var(--navy); color: #fff; transform: scale(1.06); }
.etapa h3 { font-size: 1.06rem; margin-bottom: 3px; }
.etapa p { font-size: .9rem; color: var(--texto-md); margin: 0; }

/* Simulador */
.simulador { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: clamp(24px, 3.4vw, 46px); align-items: start; }
.controles { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.13); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 17px; }
.campo { display: grid; gap: 6px; }
.campo label { font-family: var(--dado); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,240,242,.62); }
.campo input {
  background: rgba(10,36,56,.6);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 11px 13px;
  font-family: var(--dado);
  font-size: .96rem;
  border-radius: var(--raio);
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.campo input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(254,189,8,.22); }
.restaurar {
  margin-top: 4px;
  background: none;
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(237,240,242,.82);
  font-family: var(--dado);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--raio);
  transition: background 200ms ease, color 200ms ease;
}
.restaurar:hover { background: rgba(255,255,255,.1); color: #fff; }

.resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
.resultado { background: var(--tinta); padding: 20px; }
.resultado span { display: block; font-family: var(--dado); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,240,242,.55); margin-bottom: 8px; line-height: 1.45; }
.resultado strong {
  font-family: var(--display);
  font-variation-settings: 'wdth' 80;
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.024em;
  font-variant-numeric: tabular-nums;
}
.resultado.destaque { background: rgba(254,189,8,.1); }
.resultado.destaque strong { color: var(--ouro); }

/* Participantes */
.grade-participantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.perfil {
  background: var(--branco);
  border: 1px solid var(--traco);
  padding: clamp(24px, 2.8vw, 34px);
  display: flex;
  flex-direction: column;
}
.perfil.principal { grid-column: span 2; background: var(--navy); color: #fff; border-color: var(--navy); }
.perfil.principal h3, .perfil.principal h2 { color: #fff; }
.perfil.principal p { color: rgba(255,255,255,.78); }
.perfil.principal .rotulo { color: rgba(255,255,255,.6); }
.perfil.principal .rotulo::before { background: var(--ouro); }
.perfil h3 { margin-block: 12px 8px; }
.perfil p { font-size: .93rem; color: var(--texto-md); }
.perfil .metricas { display: flex; gap: 26px; margin-top: auto; padding-top: 22px; flex-wrap: wrap; }
.perfil .metricas div span { display: block; font-family: var(--dado); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; opacity: .62; margin-bottom: 3px; }
.perfil .metricas div b { font-family: var(--dado); font-size: 1.15rem; font-weight: 600; }
.editavel {
  border: 1px dashed var(--traco);
  padding: 14px 16px;
  margin-top: 14px;
  font-size: .84rem;
  color: var(--texto-md);
  background: var(--papel-2);
}
.editavel b { display: block; font-family: var(--dado); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: 5px; }

/* 12. AVISO LEGAL, RODAPÉ, RESPONSIVO =================================== */

.avisos { display: grid; gap: 16px; max-width: 92ch; }
.aviso {
  border-left: 2px solid var(--ouro);
  padding: 4px 0 4px 20px;
  font-size: .93rem;
  line-height: 1.66;
  color: var(--texto-md);
}
.escuro .aviso { color: var(--texto-cl); }

.rodape { background: var(--tinta); color: var(--papel); padding-block: clamp(46px, 5vw, 66px) 30px; border-top: 1px solid rgba(255,255,255,.12); }
.rodape-topo { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.1); }
.rodape img { height: 50px; width: auto; }
.rodape-links { display: flex; gap: 26px; flex-wrap: wrap; }
.rodape-links a { font-size: .88rem; color: rgba(237,240,242,.7); text-decoration: none; transition: color 200ms ease; }
.rodape-links a:hover { color: var(--ouro); }
.rodape .miudo { padding-top: 26px; font-size: .78rem; color: rgba(237,240,242,.5); line-height: 1.7; max-width: 96ch; }
.rodape .assinatura { margin-top: 20px; font-family: var(--dado); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,240,242,.4); }

/* Acessibilidade */
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--ouro); color: #2E2200;
  padding: 12px 20px; z-index: 999; font-weight: 600;
}
.pular:focus { left: 0; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Responsivo */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav.aberto {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #FFFFFF;
    border-bottom: 1px solid var(--traco);
    padding: 12px var(--gutter) 22px;
    gap: 0;
    max-height: calc(100vh - var(--altura-nav));
    overflow-y: auto;
    box-shadow: 0 24px 40px -26px rgba(13, 45, 68, .5);
  }
  .nav.aberto a { padding: 13px 0; border-bottom: 1px solid var(--traco-fino); font-size: .98rem; }
  .topo.compacto .nav.aberto { background: rgba(10,36,56,.99); border-bottom-color: rgba(255,255,255,.12); }
  .topo.compacto .nav.aberto a { border-bottom-color: rgba(255,255,255,.08); }
  .nav.aberto a.ativo::after { display: none; }
  .abrir-menu { display: flex; }
  .planta-envolve { grid-template-columns: 1fr; }
  .simulador { grid-template-columns: 1fr; }
  .perfil.principal { grid-column: span 1; }
}

@media (max-width: 860px) {
  .permuta-fluxo { grid-template-columns: 1fr; }
  .seta-permuta { transform: rotate(90deg); padding-block: 4px; }
  .hero-numeros { grid-template-columns: repeat(2, 1fr); }
  .hero-numeros div { border-right: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); padding-bottom: 18px; }
  .hero-numeros div:nth-child(2n) { border-right: none; }
  .hero-numeros div:last-child { grid-column: span 2; border-bottom: none; }
  .comparativo { grid-template-columns: 1fr; }
  .linha-grafico { grid-template-columns: 1fr; gap: 7px; }
  .linha-grafico .valor { text-align: left; }
  .planta { grid-template-columns: repeat(28, 1fr); }
  .marca span { display: none; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .planta { grid-template-columns: repeat(20, 1fr); gap: 1px; }
  .barra-participacao { height: 54px; }
  .barra-participacao button { padding-left: 9px; }
  .barra-participacao button small { display: none; }
  .cadeia-seg.vazio { font-size: 0; }
  .etapa { grid-template-columns: 42px minmax(0,1fr); gap: 14px; }
  .etapa .n { width: 34px; height: 34px; font-size: .74rem; }
  .linha-tempo::before { left: 21px; }
  .unidade { width: 22px; height: 34px; }
}

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

@media print {
  .topo, .abrir-menu, .controles { display: none; }
  body { background: #fff; }
  .escuro { background: #fff !important; color: #000 !important; }
}