/* Landing: cinco cenas. O herói Oxford (vídeo de abertura ou a cena dos elos sobre o campo
   de pontos) com a prévia viva do painel; o conto rolado num palco fixo, uma folha por passo;
   depois as três seções curtas e a chamada. Persuade, no mesmo mundo do relatório.
   Movimento: só `transform`, `opacity` e `stroke-dashoffset`, uma curva (--ease) e as durações
   dos tokens. `is-parado` (a preferência do Hub, que a media query do sistema não enxerga)
   zera as durações num lugar só. Três exceções declaradas, todas fora do caminho de composição:
   `visibility` nos passos do crossfade (é ela que tira o estado que sai da MEDIÇÃO de
   sobreposição, não só da tela) e `background-color` no ponto do trilho e na barra de navegação
   (dois elementos pequenos, sem refluxo). */
.ld { --fs-hero: clamp(3rem, 2.1rem + 3.2vw, 5.25rem); --ld-traco: 2.4s; --ld-flutua: 12s; --ld-espera: 800ms; --ld-nav-h: 64px;
  background: var(--paper); color: var(--ink); overflow-x: clip; }
.ld.is-parado { --t-state: 0ms; --t-folha: 0ms; --t-draw: 0ms; --ld-traco: 0ms; --ld-flutua: 0ms; --ld-espera: 0ms; }
.ld-gold { color: var(--gold); }

/* ---- Navegação da landing ---- */
.ld-nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-faixa); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--ld-nav-h); padding: 0 var(--gutter); color: var(--capa-ink); transition: background-color var(--t-folha) var(--ease), box-shadow var(--t-folha) var(--ease); }
.ld-nav.is-scrolled { background: var(--capa); box-shadow: 0 1px 0 var(--capa-edge); }
.ld-lockup { display: inline-flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; }
.ld-lockup__wordmark { font-size: var(--fs-15); white-space: nowrap; }
.ld-lockup__wordmark b { color: var(--gold); }
.ld-lockup__div { width: 1px; height: 18px; background: var(--capa-ink-soft); margin: 0 var(--s-1); }
.ld-lockup__mf8 { font-size: var(--fs-15); letter-spacing: 0.04em; }
.ld-lockup__mf8 b { color: var(--gold); }
.ld-nav__links { display: flex; gap: var(--s-5); }
.ld-nav__links a { color: var(--capa-ink-soft); text-decoration: none; font-size: var(--fs-15); }
.ld-nav__links a:hover { color: var(--capa-ink); }
.ld-btn-lg { min-height: 48px; padding-inline: var(--s-6); font-size: var(--fs-15); }

/* ---- Herói: a mesa Oxford, o vídeo (ou os elos) ao fundo ---- */
.ld-hero { position: relative; min-height: 100dvh; display: grid; align-content: center; padding: calc(var(--ld-nav-h) + var(--s-8)) var(--gutter) calc(var(--s-8) + 28px); background: var(--capa); color: var(--capa-ink); isolation: isolate; }
.ld-hero__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--capa); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%); }
/* o campo de pontos fica POR CIMA do vídeo: é ele que prende a imagem ao mundo da pasta */
.ld-hero__fundo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("../../assets/brand/grafismo-08.svg") center / 1200px auto repeat; opacity: 0.55; }
/* véu só quando há vídeo: sobre ele o texto do herói continua com o contraste do Oxford */
.ld-hero__fundo.is-video::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(21,47,77,0.94) 0%, rgba(21,47,77,0.78) 55%, rgba(21,47,77,0.6) 100%); }
.ld-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-video__pausa { position: absolute; right: var(--gutter); bottom: var(--s-5); z-index: 2; min-height: 36px; padding-inline: var(--s-3); }
/* Os dois elos do símbolo: desenham-se em 2,4 s e depois flutuam 8 px em 12 s (transform e
   stroke-dashoffset, nada mais). Ouro aqui é o símbolo, um dos lugares reservados. */
.ld-elos { position: absolute; z-index: 3; right: -4%; top: 50%; width: min(64%, 780px); height: auto; transform: translateY(-50%); color: var(--gold); }
.ld-elo { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.34; stroke-dasharray: var(--len, 2600); stroke-dashoffset: var(--len, 2600); animation: ld-traco var(--ld-traco) var(--ease) forwards, ld-flutua var(--ld-flutua) var(--ease) var(--ld-traco) infinite alternate; }
.ld-elo--b { animation-delay: 0.3s, calc(var(--ld-traco) + 3s); }
@keyframes ld-traco { to { stroke-dashoffset: 0; } }
@keyframes ld-flutua { from { transform: translate(0, 0); } to { transform: translate(-6px, 8px); } }

.ld-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; max-width: var(--painel-max); width: 100%; margin: 0 auto; }
.ld-h1 { font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.03em; color: var(--capa-ink); }
.ld-hero__sub { margin-top: var(--s-5); font-size: var(--fs-19); line-height: var(--lh-19); color: var(--capa-ink); max-width: 32ch; }
.ld-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ld-hero__byline { margin-top: var(--s-6); }
.ld-hero__dica { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s-2); color: var(--capa-ink-soft); font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.ld-hero__dica .fh-icon { animation: ld-dica 1.8s var(--ease) infinite; }
@keyframes ld-dica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---- A prévia viva: o produto no herói, com dados ilustrativos rotulados ----
   O palco da prévia é o único `will-change` da página: a rolagem o inclina até 6° e o sobe
   24 px, e no desktop o ponteiro inclina até 3° na direção contrária (folha sobre a mesa). */
.ld-previa { --par: 0; --rx: 0; --ry: 0; position: relative; width: 100%; max-width: 700px; justify-self: end;
  transform: perspective(1200px) rotateX(calc(var(--rx, 0) * 1deg + var(--par, 0) * -6deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateY(calc(var(--par, 0) * -24px));
  transition: transform var(--t-state) var(--ease); will-change: transform; }
.ld-previa__quadro { padding: var(--s-5); background: var(--paper); border-radius: var(--radius-etiqueta); box-shadow: var(--shadow-etiqueta); color: var(--ink); }
.ld-previa__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.ld-previa__nome { font-size: var(--fs-19); font-weight: var(--fw-bold); color: var(--ink-strong); }
.ld-previa__numero { display: grid; justify-items: end; text-align: right; }
.ld-previa__numero .fh-etiqueta__numero { font-size: var(--fs-32); line-height: var(--lh-32); color: var(--gold-text); white-space: nowrap; }
.ld-previa__pares { display: grid; margin-top: var(--s-4); }
.ld-previa__par { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); opacity: 0; transition: opacity var(--t-folha) var(--ease); }
.ld-previa__par.is-in { opacity: 1; }
.ld-previa__par[hidden] { display: none; }
.ld-previa__cartao { min-height: 0; padding: var(--s-4); box-shadow: none; }
.ld-previa__cartao .fh-cartao__titulo { font-size: var(--fs-15); line-height: 1.3; }
.ld-previa__cartao .fh-cartao__numero { font-size: var(--fs-19); line-height: var(--lh-19); }
.ld-previa__cartao .fh-cartao__grafico > svg { max-height: 96px; }
.ld-previa__cartao .fh-ranking__item { grid-template-columns: minmax(0, 1fr) 3.6rem auto; gap: var(--s-2); font-size: 11px; padding: 2px 0; }
.ld-previa__cartao .fh-ranking__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-previa__cartao .fh-ranking__pct { display: none; }
.ld-previa__cartao .fh-legenda-series { font-size: 11px; }
.ld-previa__nota { display: block; margin-top: var(--s-3); color: var(--capa-ink-soft); }

/* ---- O conto: palco fixo, uma folha por passo, cinco marcas de 100vh ---- */
.ld-conto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ground); }
.ld-conto__palco, .ld-conto__marcas { grid-area: 1 / 1; }
.ld-conto__palco { position: sticky; top: var(--ld-nav-h); z-index: 1; align-self: start; height: calc(100vh - var(--ld-nav-h)); display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--s-7); align-items: center; width: 100%; max-width: var(--painel-max); margin: 0 auto; padding: var(--s-6) var(--gutter); }
.ld-conto__palco:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; border-radius: var(--radius-etiqueta); }
.ld-conto__marcas { pointer-events: none; }
.ld-conto__marca { height: 100vh; }
.ld-conto__coluna { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.ld-conto__trilho { display: grid; gap: var(--s-3); }
.ld-conto__ponto { position: relative; width: 24px; height: 24px; padding: 0; background: none; border: 0; }
.ld-conto__ponto::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--neutral); transition: background-color var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.ld-conto__ponto:hover::before { background: var(--tan); }
.ld-conto__ponto.is-on::before { background: var(--gold); transform: scale(1.45); }
.ld-conto__ponto:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-radius: 50%; }
.ld-conto__texto { display: grid; gap: var(--s-3); }
.ld-conto__texto.is-entrando { animation: ld-entra var(--t-folha) var(--ease) both; }
.ld-conto__claim { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-strong); max-width: 18ch; }
.ld-conto__apoio { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink); max-width: 34ch; }
@keyframes ld-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ld-conto__folha { display: grid; justify-self: center; width: 100%; max-width: 46rem; min-height: min(60vh, 30rem); align-content: center; padding: var(--s-6); background: var(--paper); border-radius: var(--radius-etiqueta); box-shadow: var(--shadow-etiqueta); }
.ld-conto__cena { grid-area: 1 / 1; display: grid; gap: var(--s-4); align-content: center; }
.ld-conto__cena[hidden] { display: none; }
.ld-conto__folha.is-virando .ld-conto__cena:not([hidden]) { animation: ld-vira var(--t-folha) var(--ease) both; }
@keyframes ld-vira { from { opacity: 0; transform: perspective(1200px) rotateY(-12deg); } to { opacity: 1; transform: none; } }
.ld-cena__dizer { display: none; }
.ld-cena__figura > svg { width: 100%; height: auto; overflow: visible; }
.ld-cena__nota { display: block; }
/* a folha em perspectiva ganha a rotação atada à rolagem onde o navegador a tem, sem JS. Só no
   palco: empilhada (abaixo de 1024) a folha contém as cinco cenas, e girar uma árvore de várias
   telas de altura custa caro por 1% de efeito. */
@media (min-width: 1024px) {
  @supports (animation-timeline: view()) {
    .ld-conto__folha { animation: ld-gira linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes ld-gira { from { transform: perspective(1200px) rotateY(-4deg); } to { transform: perspective(1200px) rotateY(4deg); } }
  }
}

/* Cena "prova": os dois estados no mesmo lugar. O cartão fica 800 ms e a folha entra em 240 ms;
   quem sai fica `visibility: hidden` (some da tela E da medição), quem entra fica. */
.ld-vira { display: grid; }
.ld-vira__estado { grid-area: 1 / 1; }
.ld-vira__estado--cartao { justify-self: center; width: min(100%, 22rem); animation: ld-sai var(--t-folha) var(--ease) var(--ld-espera) both; }
.ld-vira__estado--folha { display: grid; gap: var(--s-4); animation: ld-surge var(--t-folha) var(--ease) var(--ld-espera) both; }
.ld-vira__estado--cartao .fh-cartao__grafico > svg { max-height: 110px; }
@keyframes ld-sai { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes ld-surge { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* Cena "forma": o mesmo saldo em três vistas, com o "ver como" de verdade (o segmentado e,
   fora do padrão, o botão "padrão" ao lado: os dois são irmãos numa linha). */
.ld-forma { display: grid; gap: var(--s-4); }
.ld-forma__controle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ld-forma__vistas { display: grid; }
.ld-forma__vista { grid-area: 1 / 1; }
.ld-forma__vista[hidden] { display: none; }
.ld-forma__vista > svg { width: 100%; height: auto; overflow: visible; }
/* o Copiar da tabela é da folha de verdade: aqui não há área de transferência ligada */
.ld-conto .fh-copiar { display: none; }

/* Cena "decisão": o número e, ao lado, o que se decide com ele. Rótulo ABAIXO do número. */
.ld-decisoes { display: grid; }
.ld-decisao { display: grid; grid-template-columns: minmax(0, 13rem) auto minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.ld-decisao:first-child { border-top: 0; padding-top: 0; }
.ld-decisao__num { display: grid; gap: 2px; }
/* o número não quebra entre o valor e a unidade: "R$ 68,0" numa linha e "mil" na outra é outro número */
.ld-decisao__num .num { font-size: var(--fs-32); line-height: var(--lh-32); font-weight: var(--fw-bold); letter-spacing: var(--track-display); color: var(--ink-strong); white-space: nowrap; }
.ld-decisao .fh-icon { color: var(--ink-soft); }
.ld-decisao__cauda { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink); }

/* ---- As três seções curtas ---- */
.ld-folhas { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }
.ld-secao { padding: var(--s-9) 0; scroll-margin-top: 80px; }
.ld-secao--manifesto { max-width: 68rem; margin: 0 auto; padding: var(--s-9) var(--gutter); }
.ld-h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.ld-h2--capa { color: var(--capa-ink); }
.ld-lead { margin-top: var(--s-5); font-size: var(--fs-19); line-height: var(--lh-19); max-width: 56ch; }

.ld-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.ld-passo { padding-left: var(--s-5); border-left: 1px solid var(--tan); display: grid; gap: var(--s-2); align-content: start; }
.ld-passo__icone { color: var(--ink-soft); }
.ld-passo__h { font-size: var(--fs-19); }
.ld-passo__p { color: var(--ink); }

.ld-selos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.ld-selos li { padding: 6px 12px; border: 1px solid var(--tan); border-radius: var(--radius-pill); font-size: var(--fs-12); letter-spacing: 0.04em; color: var(--ink-strong); }

/* ---- Chamada final em campo Oxford com o símbolo cortado ---- */
.ld-cta { position: relative; overflow: hidden; padding: var(--s-9) var(--gutter); background: var(--capa); color: var(--capa-ink); text-align: center; isolation: isolate; }
.ld-cta__marca { position: absolute; left: -12%; top: -30%; width: 46%; height: 160%; color: var(--capa-ink-faint); z-index: -1; }
.ld-cta__inner { display: grid; justify-items: center; gap: var(--s-4); max-width: 40rem; margin: 0 auto; }
.ld-cta .ld-h2 { max-width: none; }
.ld-cta__sub { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--capa-ink); }
/* Duas portas no fim: a do cliente e a de quem ainda não é. Empilham no celular, na mesma ordem. */
.ld-cta__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.ld-cta__btn { margin-top: 0; }

.ld-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--gutter); background: var(--capa); color: var(--capa-ink-soft); font-size: var(--fs-12); box-shadow: inset 0 1px 0 var(--capa-edge); }
.ld-lockup--rodape { gap: var(--s-2); color: var(--capa-ink); }
.ld-rodape__por { color: var(--capa-ink-soft); }

/* Abaixo de 1280 a prévia não teria 260 px por gráfico ao lado do texto: o herói vira uma coluna */
@media (max-width: 1279px) {
  .ld-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ld-previa { justify-self: start; }
  .ld-elos { width: 78%; opacity: 0.8; }
}
/* Celular e tablet: sem palco fixo; os cinco passos empilhados, cada um com o seu gráfico */
@media (max-width: 1023px) {
  .ld-conto { display: block; }
  .ld-conto__palco { position: static; height: auto; display: block; max-width: 46rem; padding: var(--s-8) var(--gutter); }
  .ld-conto__coluna, .ld-conto__marcas { display: none; }
  .ld-conto__folha { display: grid; gap: var(--s-6); max-width: none; min-height: 0; padding: 0; background: transparent; box-shadow: none; }
  .ld-conto__cena { grid-area: auto; padding: var(--s-5); background: var(--paper); border-radius: var(--radius-etiqueta); box-shadow: var(--shadow-etiqueta); }
  .ld-cena__dizer { display: grid; gap: var(--s-2); }
  .ld-cena__claim { font-size: var(--fs-19); font-weight: var(--fw-bold); color: var(--ink-strong); }
  .ld-cena__apoio { color: var(--ink); }
  .ld-passos { grid-template-columns: minmax(0, 1fr); }
  .ld-decisao { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .ld-decisao .fh-icon { display: none; }
}
@media (max-width: 599px) {
  .ld-nav__links { display: none; }
  .ld-hero { padding-top: calc(var(--ld-nav-h) + var(--s-6)); }
  .ld-hero__dica { display: none; }
  .ld-secao { padding: var(--s-8) 0; }
  .ld-previa__cabeca { display: grid; justify-items: start; gap: var(--s-2); }
  .ld-previa__numero { justify-items: start; text-align: left; }
  /* um cartão por vez, a mesma vira */
  .ld-previa__par { grid-template-columns: minmax(0, 1fr); }
  .ld-previa__par > .fh-cartao:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld { --ld-traco: 0ms; --ld-flutua: 0ms; --ld-espera: 0ms; }
  .ld-hero__dica .fh-icon { animation: none; }
  .ld-previa { transform: none; transition: none; will-change: auto; }
  .ld-conto__folha { animation: none; }
}
/* Movimento reduzido (do sistema ou do Hub): o estado FINAL de cada troca, sem transição */
.ld.is-parado .ld-previa { transform: none; will-change: auto; }
.ld.is-parado .ld-conto__folha { animation: none; }
.ld.is-parado .ld-hero__dica .fh-icon { animation: none; } /* a seta do rodapé do herói também para: a preferência do Hub zera tudo, como a do sistema */