/* Videre · Home, modificadores reversíveis da P5 (W19, 28/09/2026). Ligado só em index.html,
   depois de futuro.css. Tiago decidiu às ~15h20 de 28/09 seguir o conceito do visual 2.5 nos
   três itens ("sim, pode seguir o 2.5 nos três"). Por boa prática, cada um vive num bloco
   próprio, escopado por uma classe do <body> da Home:
     p5-planeta          → MOD-1, horizonte do planeta embaixo do título (W19w);
     p5-botao-gradiente  → MOD-2, botão principal em gradiente azul → ciano;
     p5-prosa-esquerda   → MOD-3, prosa alinhada à esquerda onde o 2.5 alinha.
   Para desligar um, basta apagar a classe no <body> de index.html: o estado base (sem planeta,
   botão azul sólido, prosa justificada) continua em home-heroi.css. Só o planeta se move, com a
   rolagem (MOD-1). */

/* MOD-1 planeta (W19w, 07/10/2026: sai a "lua" da W19r, entra o horizonte de um planeta) */
/* Tiago, 07/10, ao ver a arte do planeta do filme: "esta lindo demais a terra.. O que acha de colocarmos algo
   assim no site no lugar da lua?"; escolheu a posição 3 do rascunho (o horizonte embaixo do título, a
   curva acesa logo abaixo dos botões, como um nascer do sol no espaço, o corpo do planeta embaixo) e
   pediu que ele acompanhe a rolagem subindo. Arte dedicada ao horizonte (variante b, curva já quase
   horizontal, sem girar): planeta-horizonte-v1-*.avif/.webp (3:1, desktop) e -recorte-* (o miolo 1920×1280,
   celular e tablet), opacos, fundo preto puro.
   Posição: o elemento mora no fluxo do texto, entre os botões e o aviso dos quatro dossiês, e é
   absoluto sem top: o navegador o põe exatamente onde terminam os botões em qualquer largura (fora do
   fluxo, não muda a altura de nada). A curva acesa fica --pl-folga abaixo dos botões. O limbo da arte é
   um círculo (ajuste por mínimos quadrados, erro ≤ 4 px na mestre 3840): centro em (50%, --pl-cy × W),
   raio --pl-r × W, topo do arco a --pl-pico × W do alto da imagem.
   Luz: o herói isola a pilha (isolation), então mix-blend-mode não somaria às estrelas; quem faz o preto
   sumir é a máscara, um degradê radial no mesmo círculo do limbo: o halo vai a zero logo acima da curva
   (nada atrás do título, do parágrafo, da legenda nem do "Comparar os dossiês") e o corpo se apaga nas
   estrelas --pl-corpo abaixo dela (sem corte reto em nenhuma rolagem; o herói só recorta na horizontal).
   No desktop há uma segunda camada na máscara (W19w r3), um degradê vertical que conta a partir do topo
   do arco: cheio até --pl-cheio, transparente em --pl-fundo. Como o arco desce mais quanto mais larga a
   tela (a 2560 a curva chegava à faixa das normas já parada), a curva e o corpo agora se apagam sempre
   à mesma profundidade, como o lado escuro de um planeta, 65 a 95 px acima da faixa das normas de
   1051 a 2560 (130 px a 3840), medido de 20 em 20 px de largura nas faixas críticas. Numa coluna (até 1050 px) a faixa fica longe e basta a radial.
   z-index -1 dentro da coluna: atrás de todo texto, do aviso e do painel. Sem filter, backdrop-filter
   nem box-shadow. */
.p5-planeta .abertura--institucional { overflow-x: clip; overflow-y: visible; }
.p5-planeta .heroi-planeta {
  --pl-w: 160vw;
  --pl-ar: 3;
  --pl-cy: 1.659;
  --pl-r: 1.527;
  --pl-pico: .1318;
  --pl-x: 21%;
  --pl-folga: 18px;
  --pl-corpo: 170px;
  --pl-cheio: 90px;
  --pl-fundo: 165px;
  --pl-raio: calc(var(--pl-r) * var(--pl-w));
  --pl-centro: 50% calc(var(--pl-cy) * var(--pl-w));
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--pl-w);
  height: calc(var(--pl-w) / var(--pl-ar));
  margin: calc(var(--pl-folga) - var(--pl-pico) * var(--pl-w)) 0 0 calc(var(--pl-x) - var(--pl-w) / 2);
  -webkit-mask-image: radial-gradient(circle at var(--pl-centro), transparent calc(var(--pl-raio) - var(--pl-corpo)), rgba(0, 0, 0, .5) calc(var(--pl-raio) - var(--pl-corpo) * .55), #000 calc(var(--pl-raio) - 22px), #000 calc(var(--pl-raio) + 8px), rgba(0, 0, 0, .35) calc(var(--pl-raio) + 30px), transparent calc(var(--pl-raio) + 72px)), linear-gradient(#000 calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio)), rgba(0, 0, 0, .55) calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio) + (var(--pl-fundo) - var(--pl-cheio)) * .4), rgba(0, 0, 0, .18) calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio) + (var(--pl-fundo) - var(--pl-cheio)) * .72), transparent calc(var(--pl-pico) * var(--pl-w) + var(--pl-fundo)));
  mask-image: radial-gradient(circle at var(--pl-centro), transparent calc(var(--pl-raio) - var(--pl-corpo)), rgba(0, 0, 0, .5) calc(var(--pl-raio) - var(--pl-corpo) * .55), #000 calc(var(--pl-raio) - 22px), #000 calc(var(--pl-raio) + 8px), rgba(0, 0, 0, .35) calc(var(--pl-raio) + 30px), transparent calc(var(--pl-raio) + 72px)), linear-gradient(#000 calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio)), rgba(0, 0, 0, .55) calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio) + (var(--pl-fundo) - var(--pl-cheio)) * .4), rgba(0, 0, 0, .18) calc(var(--pl-pico) * var(--pl-w) + var(--pl-cheio) + (var(--pl-fundo) - var(--pl-cheio)) * .72), transparent calc(var(--pl-pico) * var(--pl-w) + var(--pl-fundo)));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* A imagem (<picture> no HTML: AVIF com WebP de reserva, a versão pela largura e pela densidade da tela,
   fetchpriority alta porque o planeta é o maior elemento pintado na abertura) preenche a caixa. */
.p5-planeta .heroi-planeta img { display: block; width: 100%; height: 100%; }
/* A borda que acende na rolagem: um anel de luz parado no mesmo círculo; só a opacidade muda. */
.p5-planeta .heroi-planeta::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--pl-centro), rgba(56, 232, 255, 0) calc(var(--pl-raio) - 12px), rgba(56, 232, 255, .55) calc(var(--pl-raio) - 1px), rgba(91, 140, 255, .22) calc(var(--pl-raio) + 12px), rgba(91, 140, 255, 0) calc(var(--pl-raio) + 40px));
}
/* De 1051 a 1279 px a faixa das normas fica mais perto da curva (190 a 260 px abaixo do topo do arco, contra
   240 a 300 px nas telas maiores): o planeta acaba mais cedo. */
@media (min-width: 1051px) and (max-width: 1279px) {
  .p5-planeta .heroi-planeta { --pl-cheio: 60px; --pl-fundo: 125px; }
}
@media (max-width: 1050px) {
  /* Uma coluna: o miolo da arte (metade central, 3:2), centrado na tela; a curva quase reta. */
  .p5-planeta .heroi-planeta {
    --pl-w: 120vw;
    --pl-ar: 1.5;
    --pl-cy: 3.318;
    --pl-r: 3.054;
    --pl-pico: .2636;
    --pl-x: 50%;
    --pl-folga: 4px;
    --pl-corpo: 240px;
    /* O aviso dos quatro dossiês fica logo abaixo da curva: o brilho de dentro do limbo e o corpo descem
       a 30% e 20% (o texto do aviso mantém o AA medido sobre o fundo real). */
    -webkit-mask-image: radial-gradient(circle at var(--pl-centro), transparent calc(var(--pl-raio) - var(--pl-corpo)), rgba(0, 0, 0, .2) calc(var(--pl-raio) - var(--pl-corpo) * .55), rgba(0, 0, 0, .3) calc(var(--pl-raio) - 28px), #000 calc(var(--pl-raio) - 7px), #000 calc(var(--pl-raio) + 8px), rgba(0, 0, 0, .35) calc(var(--pl-raio) + 30px), transparent calc(var(--pl-raio) + 72px));
    mask-image: radial-gradient(circle at var(--pl-centro), transparent calc(var(--pl-raio) - var(--pl-corpo)), rgba(0, 0, 0, .2) calc(var(--pl-raio) - var(--pl-corpo) * .55), rgba(0, 0, 0, .3) calc(var(--pl-raio) - 28px), #000 calc(var(--pl-raio) - 7px), #000 calc(var(--pl-raio) + 8px), rgba(0, 0, 0, .35) calc(var(--pl-raio) + 30px), transparent calc(var(--pl-raio) + 72px));
  }
}
/* O aviso dos quatro dossiês fica logo abaixo da curva e o planeta passa por trás dele na rolagem: o vidro do
   aviso ganha um fundo escuro a mais por baixo (luz, fio e cantos iguais), e o texto mantém o AA sobre a
   curva acesa (medido no fundo real, p95). Só na tela comum: cores forçadas e impressão têm as regras delas. */
@media screen and (min-width: 721px) and (forced-colors: none) {
  .site-conectado.site-clean.tema-escuro.home-clean.p5-planeta .abertura--institucional .abertura__estado { background: var(--luz-fio), var(--luz-canto), var(--luz-vidro), linear-gradient(rgba(3, 8, 18, .62), rgba(3, 8, 18, .62)); }
}
@media screen and (max-width: 720px) and (forced-colors: none) {
  html body.site-conectado.site-clean.tema-escuro.home-clean.p5-planeta .abertura--institucional .abertura__estado::before { background: var(--luz-fundo), linear-gradient(rgba(3, 8, 18, .62), rgba(3, 8, 18, .62)); }
}
/* Na rolagem (só CSS, no compositor): o planeta sobe mais devagar que a página (fica 30% para trás nos
   primeiros 900 px), a borda acende nos primeiros 180 px e o conjunto se apaga antes da faixa das normas.
   Três animações separadas, cada uma com a sua faixa de rolagem; só transform e opacity; nenhum laço.
   Sem suporte a animation-timeline, fica a versão parada. */
@supports (animation-timeline: scroll()) {
  .p5-planeta .heroi-planeta {
    animation: pl-horizonte-sobe linear both, pl-horizonte-apaga linear both;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range: 0px 900px, 100px 340px;
  }
  .p5-planeta .heroi-planeta::after {
    animation: pl-horizonte-borda linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 180px;
  }
  /* Quando o apaga: depende de onde a faixa das normas está. No desktop (acima de 1050 px) o fim da
     máscara vertical fica 65 a 85 px acima dela, e o planeta desce 30% da rolagem em relação a ela; então
     ele se apaga de 100 a 340 px (de 80 a 300 px entre 1051 e 1279, onde a faixa é mais próxima), e a
     luz que ainda chega à linha das normas fica abaixo de 3% (medido de 1051 a 3840, de 20 em 20 px de
     rolagem). Numa coluna (até 1050 px) a faixa fica 650 a 760 px abaixo e nunca o alcança: o planeta
     acompanha a rolagem por mais tempo e só se apaga de 550 a 850 px, quando a curva já subiu ao terço
     de cima da tela por trás do painel que vem depois da abertura (o texto do painel fica no AA, medido
     no fundo real), com a faixa das normas ainda fora da tela (medido a 320, 360, 390, 768 e 1024). */
  @media (min-width: 1051px) and (max-width: 1279px) {
    .p5-planeta .heroi-planeta { animation-range: 0px 900px, 80px 300px; }
  }
  @media (max-width: 1050px) {
    .p5-planeta .heroi-planeta { animation-range: 0px 900px, 550px 850px; }
  }
}
@keyframes pl-horizonte-sobe {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 270px, 0); }
}
@keyframes pl-horizonte-apaga {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes pl-horizonte-borda {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Calmo (movimento reduzido), pausado e quieto: o planeta parado no quadro inicial. */
@media (prefers-reduced-motion: reduce) {
  .p5-planeta .heroi-planeta, .p5-planeta .heroi-planeta::after { animation: none; }
}
html:is(.vivo-calmo, .vivo-parado, .vivo-quieto) .p5-planeta .heroi-planeta,
html:is(.vivo-calmo, .vivo-parado, .vivo-quieto) .p5-planeta .heroi-planeta::after { animation: none; }
@media (forced-colors: active), (prefers-contrast: more), print {
  .p5-planeta .heroi-planeta { display: none; }
}

/* MOD-2 botão em gradiente */
/* Conceito: cobalto → ciano vivo com texto branco. Branco sobre o ciano do conceito dá 1,71:1;
   por decisão de Tiago, o fim ciano foi escurecido o mínimo para passar 4,5:1: #0A7F95 (4,68:1;
   o limite exato #0B8298 dá 4,51:1). Branco sobre #0746C8 dá 7,72:1 e sobre #0B5CE8, 5,66:1.
   O ciano vivo fica na borda e no halo. */
.home-clean.p5-botao-gradiente main .abertura--institucional .acoes > .botao--primario {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, #0746C8 0%, #0B5CE8 40%, #0A7F95 100%) padding-box,
    linear-gradient(100deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) border-box;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 26px rgba(11, 92, 232, .50), 18px 0 34px -14px rgba(56, 232, 255, .45);
}
.home-clean.p5-botao-gradiente main .abertura--institucional .acoes > .botao--primario:hover {
  background:
    linear-gradient(100deg, #0746C8 0%, #0B5CE8 40%, #0A7F95 100%) padding-box,
    linear-gradient(100deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) border-box;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 26px rgba(11, 92, 232, .50), 18px 0 34px -14px rgba(56, 232, 255, .45);
}
.home-clean.p5-botao-gradiente main .abertura--institucional .acoes > .botao--primario:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 5px var(--cor-acento-claro);
}
@media (forced-colors: active) {
  .home-clean.p5-botao-gradiente main .abertura--institucional .acoes > .botao--primario,
  .home-clean.p5-botao-gradiente main .abertura--institucional .acoes > .botao--primario:hover {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}
/* Dobra 3: "Examinar o método em um exemplo" (D3-06) recebe o mesmo gradiente do botão do herói.
   A seta é branca sobre a ponta #0A7F95 (4,68:1). Troca de fundo instantânea; foco pelo anel da P1. */
.home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta,
.home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta:hover {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, #0746C8 0%, #0B5CE8 40%, #0A7F95 100%) padding-box,
    linear-gradient(100deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) border-box;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 26px rgba(11, 92, 232, .50), 18px 0 34px -14px rgba(56, 232, 255, .45);
}
.home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 5px var(--cor-acento-claro, #38E8FF);
}
@media (prefers-contrast: more) {
  .home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta { border-color: #5B8CFF; box-shadow: none; }
}
@media (forced-colors: active) {
  .home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta,
  .home-clean.p5-botao-gradiente #metodologia .home-cabeca > .v-cta:hover {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}
/* Dobra 2: a pílula ativa do painel vai de cobalto a violeta, como no conceito. Branco sobre
   #0B5CE8 dá 5,66:1, sobre #3F3FD0 7,6:1 e sobre #512BC2 8,5:1; a borda #74ADF2 sobre #040F1C
   passa de 3:1. A troca de aba continua instantânea (sem transition). */
.p5-botao-gradiente .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, var(--fx-cobalto, #0B5CE8) 0%, var(--fx-indigo, #3F3FD0) 55%, var(--fx-violeta, #512BC2) 100%) padding-box,
    linear-gradient(100deg, #74ADF2, #A170F2) border-box;
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .16), 0 0 14px rgba(81, 43, 194, .45);
}
@media (forced-colors: active) {
  .p5-botao-gradiente .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] {
    forced-color-adjust: none;
    border: 1px solid Highlight;
    background: Highlight;
    color: HighlightText;
    box-shadow: none;
  }
}

/* MOD-3 prosa à esquerda */
/* Onde o 2.5 alinha à esquerda: parágrafo do herói, texto do painel da trilha, diferenciais,
   parágrafo do cabeçalho da dobra 4 e texto dos cartões dos dossiês. Nas dobras 2 e 3 o 2.5
   mostra justificado, e ali nada muda. */
.p5-prosa-esquerda :is(.abertura--institucional .abertura__texto > p, .abertura--institucional .abertura__contexto-cabeca > p, .abertura--institucional .produto-diferenciais dd, #modalidades .home-cabeca > p, #modalidades .v-card p) {
  text-align: start;
  text-align-last: auto;
  hyphens: manual;
}