/* Vida de Acionista — site institucional
 *
 * IDENTIDADE: brandkit REAL do VDA Pro, tema dark (default do produto).
 * Nenhum valor aqui foi inventado. Todos vêm de:
 *   K:\github\vda-pro  →  origin/main
 *     apps/web/app/globals.css       (tokens --color-vda-*, escala, radius)
 *     apps/web/app/globals-app.css   (superfícies --vda-*, .card-surface,
 *                                     .button-primary-elevated, .chip-base)
 *
 * Manrope é a fonte ÚNICA do produto desde a limpeza de identidade v1
 * (12/07/2026) — por isso não há face serifada aqui.
 *
 * A assinatura da casa é o VERBETE: a Vida de Acionista é um método que virou
 * vocabulário, então o site é estruturado como léxico.
 */

:root{
  /* --- cores: globals.css @theme --------------------------------------- */
  --vda-bg:#0b0b0c;
  --vda-elev-1:#0f0f10;
  --vda-elev-2:#131314;
  --vda-elev-3:#161617;
  --vda-border:#1a1b1d;
  --vda-border-strong:#26272a;

  --vda-text:#e8ecf2;
  --vda-text-muted:#b5bac1;
  --vda-text-subtle:#8a8f97;
  --vda-text-faint:#5c6068;

  --vda-gold:oklch(0.8 0.14 85);
  --vda-gold-bg:oklch(0.8 0.14 85 / 0.12);
  --vda-gold-border:oklch(0.8 0.14 85 / 0.34);

  /* --- superfícies: globals-app.css ------------------------------------ */
  --vda-card-surface-bg:linear-gradient(180deg,#1f2022 0%,#0f0f10 100%);
  --vda-card-surface-hover-bg:linear-gradient(180deg,#232527 0%,#131314 100%);
  --vda-card-inset-highlight:rgba(255,255,255,0.07);
  --vda-cta-gold:linear-gradient(180deg,oklch(0.85 0.14 85) 0%,oklch(0.8 0.14 85) 100%);

  /* --- raio ------------------------------------------------------------ */
  --radius-pill:3px;
  --radius-md:6px;
  --radius-lg:8px;

  /* --- escala tipográfica (px, como no produto) ------------------------ */
  --text-eyebrow-sm:10px;
  --text-eyebrow-md:10.5px;
  --text-meta-md:12px;
  --text-meta-lg:12.5px;
  --text-body-lg:14px;
  --text-body-xl:15px;
  --text-section-md:17px;
  --text-section-xl:18.5px;
  --text-display-sm:20px;
  --text-display-lg:24px;
  --text-display-2xl:30px;
  --text-display-4xl:44px;

  --tracking-eyebrow-widest:0.16em;
  --tracking-tight:-0.005em;
  --tracking-display:-0.018em;
  --tracking-display-tightest:-0.03em;
  --tracking-headline:-0.034em;

  --folha:56rem;
  --medida:38rem;
  --margem-col:11rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--vda-bg);
  color:var(--vda-text-muted);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  /* body-xl (15px) e o topo da escala do produto — o app usa 13.5px, curto
     demais para leitura corrida de pagina institucional. */
  font-size:var(--text-body-xl);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
}

a{color:var(--vda-gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--vda-gold);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}

.folha{max-width:var(--folha);margin:0 auto;padding:0 1.4rem}

/* ------------------------------------------------------------ cabeçalho */
.topo{
  background:var(--vda-elev-1);
  border-bottom:1px solid var(--vda-border);
  position:sticky;top:0;z-index:20;
}
.topo-barra{display:flex;align-items:center;gap:.75rem;padding:.8rem 0}
.topo-marca{width:28px;height:28px;border-radius:var(--radius-md)}
.topo-nome{
  font-size:var(--text-eyebrow-md);font-weight:800;
  letter-spacing:var(--tracking-eyebrow-widest);text-transform:uppercase;
  color:var(--vda-text);white-space:nowrap;
}
.topo-vao{flex:1}
/* chip-base do produto: 32px, radius-md, 10px/600 uppercase, borda 1.5px,
   mesma superfície gradient + inset highlight dos cards. */
.topo-acesso{
  display:inline-flex;align-items:center;height:32px;padding:0 10px;
  border-radius:var(--radius-md);border:1.5px solid var(--vda-gold-border);
  background:var(--vda-card-surface-bg);
  box-shadow:inset 0 1px 0 0 var(--vda-card-inset-highlight);
  font-size:var(--text-eyebrow-sm);font-weight:600;
  letter-spacing:var(--tracking-tight);text-transform:uppercase;
  color:var(--vda-gold);white-space:nowrap;
}
.topo-acesso:hover{background:var(--vda-card-surface-hover-bg);text-decoration:none}

.menu{display:flex;flex-wrap:wrap;gap:0 1.4rem;padding-bottom:.7rem}
.menu a{
  font-size:var(--text-meta-lg);font-weight:600;color:var(--vda-text-subtle);
  letter-spacing:var(--tracking-tight);padding:.15rem 0;
  border-bottom:1.5px solid transparent;
}
.menu a:hover{color:var(--vda-text);text-decoration:none}
.menu a[aria-current="page"]{color:var(--vda-text);border-bottom-color:var(--vda-gold)}

/* ------------------------------------------------------------ abertura */
.abertura{padding:3.4rem 0 2rem;max-width:44rem}
.selo{
  font-size:var(--text-eyebrow-md);font-weight:700;
  letter-spacing:var(--tracking-eyebrow-widest);text-transform:uppercase;
  color:var(--vda-text-faint);margin:0 0 1rem;
}
/* page-title-text do produto, esticado para display-4xl (44px) no desktop:
   pagina institucional pede titulo maior que tela de app. */
.abertura h1{
  font-size:var(--text-display-2xl);
  font-weight:700;line-height:1.13;
  letter-spacing:var(--tracking-display-tightest);
  color:var(--vda-text);margin:0 0 1.05rem;text-wrap:balance;
}
@media(min-width:46rem){
  .abertura h1{font-size:var(--text-display-4xl);letter-spacing:var(--tracking-headline)}
}
.abertura h1 em{font-style:normal;color:var(--vda-gold)}
.chamada{font-size:var(--text-body-xl);color:var(--vda-text-muted);margin:0;max-width:36rem}

/* ------------------------------------------------------------ bloco editorial */
.bloco{
  display:grid;gap:.5rem 2.4rem;grid-template-columns:1fr;
  padding:2.1rem 0;border-top:1px solid var(--vda-border);
}
@media(min-width:62rem){
  .bloco{grid-template-columns:var(--margem-col) minmax(0,var(--medida))}
}
/* entity-headline do produto: 14px/700/uppercase/-0.018em */
.bloco-margem{
  font-size:var(--text-meta-md);font-weight:700;
  letter-spacing:var(--tracking-eyebrow-widest);text-transform:uppercase;
  color:var(--vda-text-faint);padding-top:.4rem;line-height:1.5;
}
.bloco-corpo > :first-child{margin-top:0}
.bloco-corpo > :last-child{margin-bottom:0}

.bloco h2{
  font-size:var(--text-display-lg);font-weight:700;line-height:1.2;
  letter-spacing:var(--tracking-display-tightest);
  color:var(--vda-text);margin:0 0 .7rem;
}
.bloco h3{
  font-size:var(--text-section-md);font-weight:700;
  letter-spacing:var(--tracking-display);color:var(--vda-text);margin:0 0 .3rem;
}
.bloco p{margin:0 0 .95rem}
.bloco p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ verbete (assinatura) */
.lexico{margin:0;padding:0}
.verbete{padding:1.1rem 0;border-bottom:1px solid var(--vda-border)}
.verbete:first-child{padding-top:0}
.verbete:last-child{border-bottom:0;padding-bottom:0}
.verbete-nome{
  font-size:var(--text-section-xl);font-weight:700;line-height:1.25;
  letter-spacing:var(--tracking-display);color:var(--vda-text);margin:0 0 .35rem;
}
.verbete-def{margin:0;color:var(--vda-text-muted)}
/* Manrope nao tem italico: o browser sintetiza um oblique torto. Enfase vira
 * cor + peso, que e como o produto marca destaque. */
.verbete-def em,.bloco p em,.chamada em{font-style:normal;color:var(--vda-text);font-weight:600}

/* tira da home: card-surface real do produto */
.tira{
  display:grid;gap:1px;grid-template-columns:1fr;margin:2.2rem 0 0;
}
@media(min-width:46rem){.tira{grid-template-columns:repeat(3,1fr)}}
.tira-item{
  border-radius:var(--radius-md);
  border:1px solid var(--vda-border-strong);
  background:var(--vda-card-surface-bg);
  box-shadow:inset 0 1px 0 0 var(--vda-card-inset-highlight);
  padding:1.1rem 1.15rem 1.2rem;
}
.tira-nome{
  font-size:var(--text-body-lg);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--vda-gold);
  margin:0 0 .4rem;line-height:1.3;
}
.tira-def{margin:0;font-size:var(--text-meta-lg);color:var(--vda-text-muted);line-height:1.55}

/* ------------------------------------------------------------ rotas */
.rotas{display:grid;gap:0;grid-template-columns:1fr;margin:0}
.rota{display:block;color:inherit;padding:1.1rem 0;border-bottom:1px solid var(--vda-border)}
.rota:first-child{padding-top:0}
.rota:last-child{border-bottom:0;padding-bottom:0}
.rota:hover{text-decoration:none}
.rota-titulo{
  font-size:var(--text-display-sm);font-weight:700;line-height:1.25;
  letter-spacing:var(--tracking-display-tightest);color:var(--vda-text);margin:0 0 .25rem;
}
.rota:hover .rota-titulo{color:var(--vda-gold)}
.rota-desc{margin:0;color:var(--vda-text-muted);font-size:var(--text-body-lg)}
.rota-seta{
  color:var(--vda-gold);font-weight:700;font-size:var(--text-meta-lg);
  display:inline-block;margin-top:.5rem;letter-spacing:var(--tracking-tight);
}

/* ------------------------------------------------------------ números */
.numeros{display:flex;flex-wrap:wrap;gap:1.4rem 2.8rem;margin:0;padding:0;list-style:none}
.numeros .valor{
  font-size:var(--text-display-2xl);font-weight:800;line-height:1;
  letter-spacing:var(--tracking-display-tightest);color:var(--vda-text);display:block;
}
.numeros .rotulo{
  font-size:var(--text-eyebrow-md);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow-widest);
  color:var(--vda-text-faint);font-weight:700;display:block;margin-top:.4rem;
}

/* ------------------------------------------------------------ percurso */
.percurso{list-style:none;margin:0;padding:0}
.percurso-item{
  display:grid;gap:.15rem 2.2rem;grid-template-columns:1fr;
  padding:1.05rem 0;border-bottom:1px solid var(--vda-border);
}
.percurso-item:first-child{padding-top:0}
.percurso-item:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:46rem){.percurso-item{grid-template-columns:7.5rem minmax(0,1fr)}}
.percurso-quando{
  font-size:var(--text-eyebrow-md);font-weight:700;
  letter-spacing:var(--tracking-eyebrow-widest);text-transform:uppercase;
  color:var(--vda-gold);padding-top:.35rem;
}
.percurso-titulo{
  font-size:var(--text-section-md);font-weight:700;line-height:1.28;
  letter-spacing:var(--tracking-display);color:var(--vda-text);margin:0 0 .25rem;
}
.percurso-texto{margin:0;color:var(--vda-text-muted);font-size:var(--text-body-lg)}

/* ------------------------------------------------------------ painel */
.painel{
  background:var(--vda-elev-2);
  border:1px solid var(--vda-border-strong);
  border-radius:var(--radius-md);
  box-shadow:inset 0 1px 0 0 var(--vda-card-inset-highlight);
  padding:1.7rem 1.5rem;margin:2rem 0 0;
}
.painel h2{
  font-size:var(--text-display-sm);font-weight:700;margin:0 0 .6rem;
  letter-spacing:var(--tracking-display-tightest);color:var(--vda-text);line-height:1.25;
}
.painel p{color:var(--vda-text-muted);margin:0 0 .9rem;font-size:var(--text-body-lg)}
.painel p:last-of-type{margin-bottom:0}

/* button-primary-elevated do produto */
.botao{
  display:inline-block;margin-top:1.05rem;
  background:var(--vda-cta-gold);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.25);
  color:#12100a;font-weight:700;font-size:var(--text-meta-lg);
  letter-spacing:var(--tracking-tight);
  padding:.55rem 1.05rem;border-radius:var(--radius-md);
}
.botao:hover{text-decoration:none;filter:brightness(1.05)}
.botao-vazado{
  display:inline-block;margin-top:1rem;
  border:1.5px solid var(--vda-gold-border);background:var(--vda-gold-bg);
  color:var(--vda-gold);font-weight:700;font-size:var(--text-meta-lg);
  letter-spacing:var(--tracking-tight);
  padding:.5rem 1rem;border-radius:var(--radius-md);
}
.botao-vazado:hover{background:var(--vda-card-surface-hover-bg);text-decoration:none}

/* ------------------------------------------------------------ vídeos */
.videos{display:grid;gap:1.3rem 1.1rem;grid-template-columns:1fr;margin:0}
@media(min-width:34rem){.videos{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.videos{grid-template-columns:repeat(3,1fr)}}
.video{display:block;color:inherit}
.video:hover{text-decoration:none}
.video-capa{
  aspect-ratio:16/9;overflow:hidden;background:var(--vda-elev-3);
  border:1px solid var(--vda-border-strong);border-radius:var(--radius-md);
}
.video-capa img{width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:no-preference){
  .video-capa img{transition:transform .4s ease}
  .video:hover .video-capa img{transform:scale(1.03)}
}
.video-titulo{
  font-size:var(--text-body-lg);font-weight:700;line-height:1.38;
  letter-spacing:var(--tracking-tight);color:var(--vda-text);margin:.6rem 0 .2rem;
}
.video:hover .video-titulo{color:var(--vda-gold)}
.video-data{
  font-size:var(--text-eyebrow-md);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow-widest);color:var(--vda-text-faint);font-weight:700;
}
.videos-aviso{color:var(--vda-text-subtle);font-size:var(--text-body-lg);margin:0}

/* ------------------------------------------------------------ utilitários */
.contatos{list-style:none;margin:0;padding:0}
.contatos li{margin:.28rem 0;color:var(--vda-text-muted);font-size:var(--text-body-lg)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:inherit}
.adiante{
  display:inline-block;margin-top:1.1rem;font-weight:700;
  font-size:var(--text-meta-lg);letter-spacing:var(--tracking-tight);
}

/* ------------------------------------------------------------ rodapé */
.rodape{
  margin-top:3rem;background:var(--vda-elev-1);
  border-top:1px solid var(--vda-border);
  color:var(--vda-text-subtle);
  padding:2.2rem 0 2.8rem;font-size:var(--text-meta-lg);line-height:1.62;
}
.rodape strong{color:var(--vda-text)}
.rodape a{color:var(--vda-gold)}
.rodape p{margin:0 0 .65rem}
.rodape .contatos li{color:var(--vda-text-subtle);font-size:var(--text-meta-lg)}
.rodape .mono{color:var(--vda-text-muted)}
.rodape-legal{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--vda-border)}
.rodape-links{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}