/* Videre · Home, herói (W19, P1 — decisão de Tiago em 27/09/2026 ~19h15, quarta rodada).
   Ligado só em site/index.html, depois de componentes.css. Trilha de evidências num painel de
   vidro, expressão-chave em gradiente cobalto→ciano, rótulos com nó luminoso, botão principal
   azul sólido com realce e a nota em caixa. Sem planeta, sem grade e nada atrás do texto.
   Nada aqui se move: normal, calma e pausa ficam iguais; cores forçadas e transparência
   reduzida têm reserva própria. O campo de estrelas (canvas de nav.js) não é tocado.
   MOV-01 (28/09): o painel não usa backdrop-filter. Sobre o canvas redesenhado a cada quadro,
   o desfoque era refeito a cada quadro e, na composição por software, a Home caía de 60 para
   14–34 qps (M42). O fundo ficou mais denso (.84) no lugar do desfoque. */

/* 1. Expressão-chave em gradiente (M35: as duas pontas ≥ 4,5:1 contra #03060D; reserva
   sólida #5B8CFF sem background-clip; CanvasText em cores forçadas; preta na impressão). */
.home-clean .texto-gradiente { color: #5B8CFF; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .home-clean .texto-gradiente {
    background-image: linear-gradient(90deg, #5B8CFF 0%, #38E8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .home-clean .texto-gradiente::selection { color: #03060D; -webkit-text-fill-color: #03060D; background: #38E8FF; }
}

/* 2. Título do herói: peso 600 (o nível h1 do site) e, no desktop, a expressão-chave na
   própria linha. O tamanho mantém "riscos de terceiros." numa linha de 1051 a 2560 px. */
.home-clean .abertura--institucional h1 { font-weight: 600; }
@media (min-width: 1051px) {
  .home-clean .abertura--institucional h1 { font-size: clamp(3rem, .3rem + 4.1vw, 5.5rem); line-height: 1.04; }
  .home-clean .abertura--institucional h1 > .texto-gradiente { display: block; width: fit-content; }
}

/* 3. Rótulos da Home: nó de 8 px com brilho e traço de 24 px antes do texto. Pseudo-elemento
   (sem filho novo), para a decodificação de vivo-sinais.js continuar valendo. */
.home-clean main .abertura__etiqueta { display: flex; align-items: center; gap: .75rem; }
.home-clean main .abertura__etiqueta::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1rem;
  background:
    radial-gradient(circle at .5rem 50%, #EAFDFF 0 1.5px, #38E8FF 2.5px 4px, rgba(56, 232, 255, .35) 5px, rgba(56, 232, 255, 0) 8px),
    linear-gradient(90deg, rgba(56, 232, 255, .75), rgba(56, 232, 255, .2)) 1rem 50% / 1.5rem 1px no-repeat;
}
.home-clean .abertura--institucional .abertura__etiqueta { font-family: var(--fonte-mono); font-weight: 500; letter-spacing: .12em; line-height: 1.4; }
/* Até 400 px, só o nó (sem o traço); abaixo de 360 px, sem o nó. Assim o rótulo mais longo
   ("Tecnologia orientada pelo método", 276 px em mono) continua numa linha até 320 px. */
@media (max-width: 400px) {
  .home-clean main .abertura__etiqueta { gap: .5rem; }
  .home-clean main .abertura__etiqueta::before { width: 1rem; }
}
@media (max-width: 359px) {
  .home-clean main .abertura__etiqueta::before { display: none; }
}

/* 4. Botão principal: continua azul sólido #0B5CE8 com texto branco (5,7:1); ganha filete
   claro de 1 px no topo e brilho externo. O anel de foco (ACS-01/02) é refeito aqui. */
.home-clean .abertura--institucional .botao--primario { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 24px rgba(47, 107, 239, .35); }
/* MOV-02 (28/09): o halo e o anel de foco trocam sem animar (box-shadow é pintura, fora do M44). */
.home-clean .abertura--institucional .botao--primario { transition-property: background-color, border-color, color, transform; }
.home-clean .abertura--institucional .botao--primario:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 28px rgba(47, 107, 239, .45); }
.home-clean .abertura--institucional .botao--primario:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 5px var(--cor-acento-claro); }
html:is(.vivo-quieto, .vivo-parado) .home-clean .abertura--institucional .botao--primario { transition: none; }
@media (max-width: 720px) {
  .home-clean .abertura--institucional .acoes > .botao--primario { width: 100%; min-height: 52px; }
}

/* 5. Trilha de evidências num painel de vidro (a partir de 721 px; no celular, como antes).
   Quatro itens: o cabeçalho (h2 + parágrafo) e os três diferenciais. Cada item desenha o
   próprio nó (::before) e o trecho de linha até o nó seguinte (::after). */
@media (min-width: 721px) {
  .home-clean .abertura--institucional .abertura__contexto {
    --trilha-eixo: 2.75rem;
    --trilha-recuo: 5.5rem;
    --trilha-vao: 1.5rem;
    --trilha-no-y: calc(var(--t-h4) * .65);
    position: relative;
    padding: 2.5rem 2.5rem 2.5rem 0;
    border: 0;
    border-radius: 16px;
    background: rgba(12, 25, 43, .84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .35);
  }
  .home-clean .abertura--institucional .abertura__contexto::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(91, 140, 255, .35), rgba(56, 232, 255, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div) { position: relative; margin-left: var(--trilha-recuo); }
  .home-clean .abertura--institucional .abertura__contexto-cabeca { padding-bottom: var(--trilha-vao); }
  .home-clean .abertura--institucional .abertura__contexto-cabeca > h2 { margin: 0 0 .75rem; font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
  .home-clean .abertura--institucional .abertura__contexto-cabeca > p { margin: 0; }
  .home-clean .abertura--institucional .produto-diferenciais { gap: 0; margin: 0; }
  .home-clean .abertura--institucional .produto-diferenciais > div { padding: var(--trilha-vao) 0; border-top: 1px solid rgba(120, 160, 255, .16); }
  .home-clean .abertura--institucional .produto-diferenciais > div:last-child { padding-bottom: 0; }
  .home-clean .abertura--institucional .produto-diferenciais dt { line-height: 1.3; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > p, .produto-diferenciais dd) { font-size: var(--t-base); line-height: 1.65; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div)::before {
    content: "";
    position: absolute;
    top: calc(var(--trilha-no-y) - 6px);
    left: calc(var(--trilha-eixo) - var(--trilha-recuo) - 6px);
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 3px solid #0C192B;
    border-radius: 50%;
    background: #38E8FF;
    box-shadow: 0 0 0 1px #38E8FF, 0 0 12px rgba(56, 232, 255, .9);
  }
  .home-clean .abertura--institucional .produto-diferenciais > div::before { top: calc(var(--trilha-vao) + var(--trilha-no-y) - 6px); }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after {
    content: "";
    position: absolute;
    top: calc(var(--trilha-no-y) + 6px);
    bottom: calc(5px - var(--trilha-vao) - var(--trilha-no-y));
    left: calc(var(--trilha-eixo) - var(--trilha-recuo) - .5px);
    width: 0;
    border-left: 1px solid rgba(56, 232, 255, .4);
  }
  .home-clean .abertura--institucional .produto-diferenciais > div:not(:last-child)::after { top: calc(var(--trilha-vao) + var(--trilha-no-y) + 6px); }

  /* 6. Nota do estado em caixa, com o ícone de documento (SVG no HTML, aria-hidden). */
  .home-clean .abertura--institucional .abertura__estado {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: fit-content;
    max-width: min(100%, 35rem);
    margin-top: 1.5rem;
    padding: .75rem 1.125rem .75rem .875rem;
    border: 1px solid #22385A;
    border-radius: 10px;
    background: rgba(12, 25, 43, .55);
  }
  .home-clean .abertura__estado-icone { flex: none; width: 1.375rem; height: 1.375rem; color: #8FB0FF; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .home-clean .abertura--institucional .abertura__contexto { max-width: 46rem; }
}
@media (min-width: 1051px) and (max-width: 1200px) {
  .home-clean .abertura--institucional .abertura__contexto { margin-top: -1.25rem; }
}
@media (min-width: 1201px) {
  .home-clean .abertura--institucional .abertura__contexto { margin-top: -2rem; }
}
@media (max-width: 720px) {
  .home-clean .abertura__estado-icone { display: none; }
}
/* DS-07 (28/09): os três diferenciais da trilha seguem a prosa justificada do parágrafo do
   cabeçalho (decisão de Tiago), com a mesma hifenização; até 480 px, alinhados à esquerda. */
@media (min-width: 481px) {
  .home-clean .abertura--institucional .produto-diferenciais dd { text-align: justify; text-align-last: start; hyphens: auto; hyphenate-limit-chars: 6 3 3; }
}

/* 7. Reservas: transparência reduzida, contraste reforçado (M33/M34),
   cores forçadas (M32/M35) e impressão. O fundo e a borda do painel só valem a partir de
   721 px, onde o painel tem padding: no celular o bloco continua como antes (só o filete
   do topo), sem caixa colada ao texto. */
@media (min-width: 721px) and (prefers-reduced-transparency: reduce) {
  .home-clean .abertura--institucional .abertura__contexto { background: #0C192B; }
}
@media (min-width: 721px) and (prefers-contrast: more) {
  .home-clean .abertura--institucional .abertura__contexto { background: #0C192B; }
  .home-clean .abertura--institucional .abertura__contexto::before { background: #5B8CFF; }
}
@media (forced-colors: active) {
  .home-clean .texto-gradiente { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .home-clean main .abertura__etiqueta::before { display: none; }
  .home-clean .abertura--institucional .abertura__contexto::before { display: none; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div)::before { forced-color-adjust: none; background: CanvasText; border-color: Canvas; box-shadow: none; }
}
@media (min-width: 721px) and (forced-colors: active) {
  .home-clean .abertura--institucional .abertura__contexto { border: 1px solid CanvasText; }
}
@media print {
  .home-clean .texto-gradiente { background: none; color: #000; -webkit-text-fill-color: #000; }
  .home-clean .abertura--institucional .abertura__contexto { background: none; box-shadow: none; }
  .home-clean .abertura--institucional .abertura__contexto::before { display: none; }
}
@media print and (min-width: 721px) {
  .home-clean .abertura--institucional .abertura__contexto { border: 1px solid #000; }
}

/* ============================================================================
   W19 · P5 · dobra 1 (28/09/2026). Fidelidade ao conceito do visual 2.5 pedida por Tiago
   (spec-P5-futurista.md §2.1 e §2.4). Tokens em futuro.css §A (reserva literal onde convém).
   Camadas: céu (::before da seção, atrás do espaço), cena (.heroi-planeta, antes do .env) e
   moldura (pseudo-elementos do painel e da trilha). O espaço com as estrelas em movimento é o
   fundo da página inteira (.fundo-espaco, nav.js; raia FUNDO, 29/09): o piso em grade (E1-01/
   E1-02) e a constelação com linhas (E1-04) saíram por ordem de Tiago ("REMOVE TUDO, QUERO
   ESTRELAS"). Só transform e opacity animam
   (M8/M44); nenhum laço entre 4 e 6 s (M23); só sob html.js e com o herói à vista
   (.is-visivel, nav.js). Sem backdrop-filter (MOV-01). Nenhum texto novo.
   ========================================================================== */

/* Estado base dos modificadores (MOD-1 desligado: sem planeta). */
.home-clean .heroi-planeta { display: none; }
/* Obrigatório com o MOD-1: a esfera do celular não cria rolagem horizontal. clip, não hidden:
   não vira contêiner de rolagem. */
.home-clean .abertura--institucional { overflow: clip; }

/* E1-03 / CEL-02 · Céu: luz ambiente cobalto, por baixo das estrelas (mais fraca desde a raia
   FUNDO, 29/09: o céu mais escuro deixa as estrelas à frente). */
.home-clean .abertura--institucional::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(24rem 22rem at 100% 2rem, rgba(11, 92, 232, .08) 0%, rgba(11, 92, 232, .035) 45%, rgba(11, 92, 232, 0) 72%),
    radial-gradient(20rem 16rem at 0% 34rem, rgba(56, 232, 255, .035) 0%, rgba(56, 232, 255, 0) 70%);
}
@media (min-width: 721px) {
  .home-clean .abertura--institucional::before {
    background:
      radial-gradient(42% 48% at 24% 34%, rgba(11, 92, 232, .08), rgba(11, 92, 232, 0) 70%),
      radial-gradient(36% 40% at 72% 52%, rgba(56, 232, 255, .035), rgba(56, 232, 255, 0) 70%),
      radial-gradient(70% 30% at 50% 100%, rgba(11, 92, 232, .07), rgba(11, 92, 232, 0) 75%);
  }
}
@media (max-width: 720px) {
  /* A faixa à direita da cápsula do cabeçalho recebe a mesma luz do canto do herói. */
  body.home-clean { background: radial-gradient(24rem 22rem at 100% 2rem, rgba(11, 92, 232, .08) 0%, rgba(11, 92, 232, .035) 45%, rgba(11, 92, 232, 0) 72%) no-repeat, var(--cor-fundo-escuro); }
}
/* Reconferência da P5 (MOV-03): a luz ambiente do herói fica parada, a 1 (o mesmo quadro do
   pausado; a antiga respiração ia de .8 a 1). Era a maior camada animada da primeira dobra: a cada quadro, o herói
   inteiro recomposto por software, por uma variação que quase não se via. */
html.js .home-clean .abertura--institucional::before { animation: none; }
@media (max-width: 720px) {
  /* No celular a luz ambiente não respira. */
  html.js .home-clean .abertura--institucional::before { animation: none; }
}

/* E1-13 · Menu mais leve (Home, a partir de 1201 px). */
@media (min-width: 1201px) {
  .home-clean .nav ul a { font-weight: 400; color: #C9D4EA; }
}

/* E1-14 · Rótulo: nó maior, com anel e traço que some à direita (as quatro dobras). */
.home-clean main .abertura__etiqueta::before {
  width: 3rem;
  height: 1.25rem;
  background:
    radial-gradient(circle at .625rem 50%, #FFFFFF 0 1.5px, var(--fx-ciano, #38E8FF) 3px, rgba(56, 232, 255, .45) 4.5px, rgba(56, 232, 255, 0) 7px),
    radial-gradient(circle at .625rem 50%, transparent 0 6.5px, rgba(91, 140, 255, .8) 7px 7.8px, transparent 8.3px),
    linear-gradient(90deg, rgba(56, 232, 255, .8), rgba(56, 232, 255, 0)) 1.375rem 50% / 1.625rem 1px no-repeat;
}
.home-clean .abertura--institucional .abertura__etiqueta { color: #D6E0F5; letter-spacing: .16em; }
/* As reduções de 400 e 359 px continuam: só o nó, e abaixo de 360 px nada. */
@media (max-width: 400px) {
  .home-clean main .abertura__etiqueta::before { width: 1.25rem; }
}

/* E1-15 · Público em mono com as duas barras desenhadas antes (só a partir de 721 px: no
   conceito 390 ele fica em Public Sans, sem barras). */
@media (min-width: 721px) {
  .home-clean .abertura--institucional .abertura__publico { font-family: var(--fonte-mono); font-weight: 400; font-size: clamp(.875rem, .55rem + .3vw, 1.125rem); letter-spacing: .01em; color: #B8C6E0; }
  .home-clean .abertura--institucional .abertura__publico::before {
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: .6em;
    vertical-align: -.1em;
    background:
      linear-gradient(115deg, transparent 0 44%, rgba(143, 176, 255, .9) 44% 52%, transparent 52%) 0 0 / .45em 100% no-repeat,
      linear-gradient(115deg, transparent 0 44%, rgba(143, 176, 255, .9) 44% 52%, transparent 52%) .45em 0 / .45em 100% no-repeat;
  }
}

/* E1-16 · Título mais pesado e expressão-chave em gradiente mais vivo. Pontas: #6F7CFF
   ≈ 5,3:1 sobre o pico da luz (4,18,44); o ciano passa de 11:1. */
.home-clean .abertura--institucional h1 { font-weight: 700; color: #F4F7FF; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .home-clean .abertura--institucional .texto-gradiente {
    background-image: linear-gradient(90deg, #6F7CFF 0%, #5B8CFF 22%, #6FA8FF 50%, var(--fx-ciano, #38E8FF) 100%);
    filter: drop-shadow(0 0 18px rgba(56, 232, 255, .22));
  }
}

/* A11Y-02 (revisão da P5): o parágrafo de abertura passa sobre estrelas do campo animado na
   altura do limbo do planeta; um tom mais claro (#C4D0E0, 13:1 sobre #03060D) folga o p95
   do M35 nessas amostras. O texto não muda. */
.home-clean .abertura--institucional .lead { color: #C4D0E0; }

/* E1-17 · Botão principal com luz (estado base, sem o MOD-2). */
.home-clean main .abertura--institucional .acoes > .botao--primario {
  min-height: 3.5rem;
  padding-inline: 1.75rem;
  border-radius: 10px;
  border: 1px solid rgba(143, 190, 255, .55);
  background: #0B5CE8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 18px rgba(1, 3, 9, .14), 0 0 28px rgba(11, 92, 232, .55), 0 0 64px rgba(56, 232, 255, .14);
}
@media (hover: hover) and (pointer: fine) {
  .home-clean main .abertura--institucional .acoes > .botao--primario:hover { transform: translateY(-1px); }
}

/* E1-18 · Link com sublinhado de luz (a mesma seta, com mais espaço; sem texto novo). */
.home-clean .abertura--institucional .link-seta {
  text-decoration: none;
  color: #BFD4FF;              /* FID-09: azul-claro do conceito, 13,6:1 sobre #03060D */
  font-weight: 600;
  background: linear-gradient(90deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) 0 100% / calc(100% - 1.4em) 2px no-repeat;
  padding-bottom: .3em;
}
.home-clean .abertura--institucional .link-seta:hover { color: #FFFFFF; }
.home-clean .abertura--institucional .link-seta::after { content: "\00a0\00a0\2192"; }

/* E1-19 · Cápsula de aviso com ícone em ladrilho (a partir de 721 px: no conceito 390 a nota fica sem caixa). */
@media (min-width: 721px) {
  .home-clean .abertura--institucional .abertura__estado {
    border-color: rgba(91, 140, 255, .34);
    background: linear-gradient(180deg, rgba(12, 28, 56, .85), rgba(7, 16, 32, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 22px rgba(11, 92, 232, .12);
    color: #C9D4EA;
  }
  .home-clean .abertura--institucional .abertura__estado-icone {
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: .5rem;
    border: 1px solid rgba(91, 140, 255, .45);
    border-radius: 8px;
    background: rgba(11, 92, 232, .18);
    color: #8FC4FF;
  }
}

/* DS-06-R (revisão da P5): em janelas baixas de desktop (1280 × 720) o botão principal saía
   11 px da primeira dobra. Menos respiro no topo, sob o h1 e em volta da nota; o texto, o
   tamanho do h1 e as alturas ≥ 761 px não mudam. A nota continua abaixo da dobra (DS-06). */
@media (min-width: 1051px) and (max-height: 760px) {
  .home-clean .abertura--institucional { padding-top: 2.5rem; }
  .home-clean .abertura--institucional h1 { margin-bottom: 1rem; }
  .home-clean .abertura--institucional .abertura__publico { margin-block: 1rem; }
}

/* MOV-01 (revisão da P5, M42): a 1920 × 1080 o palco da constelação (dobra 2) aparecia 54 px
   na primeira dobra e o renderer rodava já no topo. O título da dobra 2 ficou 57 px mais baixo
   que em b006b22; o vão volta no pé do herói (só com o console montado, ≥ 1280 px), e o palco
   começa abaixo da janela, como antes. O palco (M7) e o nav.js não mudam. */
@media (min-width: 1280px) {
  .home-clean.universe-ready .abertura--institucional { padding-bottom: calc(clamp(2.5rem, 5vw, 4.5rem) + 4rem); }
}

/* E1-05 a E1-11 · Painel de vidro translúcido e trilha acesa (a partir de 721 px). */
@media (min-width: 721px) {
  .home-clean .abertura--institucional .abertura__contexto {
    background:
      linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 26%),
      radial-gradient(80% 50% at 0% 0%, rgba(91, 140, 255, .18), rgba(91, 140, 255, 0) 70%),
      radial-gradient(70% 45% at 100% 100%, rgba(56, 232, 255, .07), rgba(56, 232, 255, 0) 70%),
      linear-gradient(180deg, rgba(14, 34, 70, .70) 0%, rgba(8, 20, 42, .74) 55%, rgba(5, 13, 28, .80) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 48px rgba(11, 92, 232, .14), 0 0 0 1px rgba(11, 92, 232, .18), 0 0 32px rgba(11, 92, 232, .30), 0 0 90px rgba(56, 232, 255, .07), 0 24px 60px rgba(0, 0, 0, .35);
    backdrop-filter: none;
  }
  /* E1-06 · Borda que brilha, mais branca no alto à esquerda. */
  .home-clean .abertura--institucional .abertura__contexto::before {
    background: linear-gradient(160deg, rgba(170, 205, 255, .95) 0%, rgba(56, 232, 255, .70) 14%, rgba(91, 140, 255, .40) 40%, rgba(91, 140, 255, .34) 70%, rgba(56, 232, 255, .70) 100%);
  }
  /* E1-08 · Nós da trilha: núcleo branco, corpo ciano, anel e halo largo (22 px). */
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div)::before {
    top: calc(var(--trilha-no-y) - 11px);
    left: calc(var(--trilha-eixo) - var(--trilha-recuo) - 11px);
    width: 22px;
    height: 22px;
    border: 0;
    background: var(--fx-no);
    box-shadow: 0 0 0 1.5px rgba(91, 140, 255, .80), 0 0 14px 2px rgba(56, 232, 255, .55), 0 0 34px rgba(11, 92, 232, .50);
  }
  .home-clean .abertura--institucional .produto-diferenciais > div::before { top: calc(var(--trilha-vao) + var(--trilha-no-y) - 11px); }
  /* E1-10 · Linha da trilha: 2 px, ciano → cobalto, com brilho; começa na borda do nó. */
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after {
    top: calc(var(--trilha-no-y) + 11px);
    bottom: calc(11px - var(--trilha-vao) - var(--trilha-no-y));
    left: calc(var(--trilha-eixo) - var(--trilha-recuo) - 1px);
    width: 2px;
    border: 0;
    background: linear-gradient(180deg, rgba(56, 232, 255, .85), rgba(91, 140, 255, .55));
    box-shadow: 0 0 8px rgba(56, 232, 255, .45);
  }
  .home-clean .abertura--institucional .produto-diferenciais > div:not(:last-child)::after { top: calc(var(--trilha-vao) + var(--trilha-no-y) + 11px); }
  /* E1-09 · Anel que pulsa quando a luz passa. Sem position no h2 nem no dt: o bloco de
     contenção é o item da trilha, com as coordenadas do nó (E1-08). */
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before {
    content: "";
    position: absolute;
    left: calc(var(--trilha-eixo) - var(--trilha-recuo) - 11px);
    top: calc(var(--trilha-no-y) - 11px);
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 1.5px solid rgba(56, 232, 255, .8);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  .home-clean .abertura--institucional .produto-diferenciais dt::before { top: calc(var(--trilha-vao) + var(--trilha-no-y) - 11px); }
  html.js .home-clean .abertura--institucional .abertura__contexto-cabeca > h2::before { animation: p5-pulso var(--fx-t-trilha, 9s) var(--fx-ease-sai, cubic-bezier(.2, .7, .3, 1)) 0s infinite; }
  html.js .home-clean .abertura--institucional .produto-diferenciais > div:nth-child(1) dt::before { animation: p5-pulso var(--fx-t-trilha, 9s) var(--fx-ease-sai, cubic-bezier(.2, .7, .3, 1)) 1.33s infinite; }
  html.js .home-clean .abertura--institucional .produto-diferenciais > div:nth-child(2) dt::before { animation: p5-pulso var(--fx-t-trilha, 9s) var(--fx-ease-sai, cubic-bezier(.2, .7, .3, 1)) 2.58s infinite; }
  html.js .home-clean .abertura--institucional .produto-diferenciais > div:nth-child(3) dt::before { animation: p5-pulso var(--fx-t-trilha, 9s) var(--fx-ease-sai, cubic-bezier(.2, .7, .3, 1)) 3.51s infinite; }
  /* E1-11 · Luz que desce pela trilha, de nó em nó (o movimento que Tiago pediu). */
  .home-clean .abertura--institucional .abertura__contexto::after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: calc(var(--trilha-eixo) - 1.5px);
    width: 3px;
    top: calc(2.5rem + var(--trilha-no-y));
    bottom: 2.5rem;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(56, 232, 255, 0) 0, rgba(56, 232, 255, 0) calc(100% - 110px), rgba(56, 232, 255, .55) calc(100% - 30px), var(--fx-branco-luz, #EAFDFF) calc(100% - 3px), rgba(234, 253, 255, 0) 100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  html.js .home-clean .abertura--institucional .abertura__contexto::after {
    will-change: transform;
    animation: p5-trilha var(--fx-t-trilha, 9s) linear infinite;
  }
}
@keyframes p5-pulso {
  0% { transform: scale(1); opacity: .7; }
  18% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes p5-trilha {
  0% { transform: translateY(-100%); opacity: 0; }
  8% { opacity: 1; }
  40% { opacity: 1; }
  45% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
/* E1-20 · A partir de 1600 px, o texto do painel ocupa o vidro. */
@media (min-width: 1600px) {
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > p, .produto-diferenciais dd) { max-width: none; }
}

/* CEL-03 a CEL-07 · Celular (até 720 px). */
@media (max-width: 720px) {
  /* CEL-03 · Título maior e expressão-chave na própria linha. */
  .home-clean .abertura--institucional h1 { font-size: clamp(2.25rem, 1.35rem + 4vw, 2.625rem); line-height: 1.05; }
  .home-clean .abertura--institucional h1 > .texto-gradiente { display: block; width: fit-content; }
  /* CEL-05 · Botão principal com mais luz (base sólida; com o MOD-2, gradiente). */
  .home-clean main .abertura--institucional .acoes > .botao--primario {
    border: 1px solid var(--fx-cobalto-claro, #5B8CFF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 1px rgba(91, 140, 255, .25), 0 8px 26px rgba(11, 92, 232, .5);
  }
  .home-clean .abertura--institucional .link-seta { padding: .65rem 0 .3em; }
  /* CEL-06 · Divisor com luz antes de "Informação conectada". */
  .home-clean .abertura--institucional .abertura__contexto { border-top: 0; position: relative; padding-left: 1.5rem; }
  .home-clean .abertura--institucional .abertura__contexto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(120, 160, 255, .12), rgba(91, 140, 255, .55) 40%, var(--fx-ciano, #38E8FF) 50%, rgba(91, 140, 255, .55) 60%, rgba(120, 160, 255, .12));
  }
  /* CEL-07 · Trilha: nó ciano na primeira linha de cada título e eixo pontilhado. */
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt) { position: relative; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before {
    content: "";
    position: absolute;
    top: calc(.65em - 5px);
    left: -1.5rem;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid #010309;
    border-radius: 50%;
    background: var(--fx-ciano, #38E8FF);
    box-shadow: 0 0 0 1px var(--fx-ciano, #38E8FF), 0 0 10px rgba(56, 232, 255, .85);
  }
  /* Eixo pontilhado em trechos, de um nó ao seguinte (medido de 320 a 720 px: o nó do
     cabeçalho fica 16 px abaixo do topo do item e o seguinte, 62 px abaixo do fim dele; nos
     diferenciais, 34 e 54 px). Assim o eixo não passa do último nó. */
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div) { position: relative; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: -62px;
    left: calc(4.5px - 1.5rem);
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(56, 232, 255, .45) 0 3px, rgba(56, 232, 255, 0) 3px 7px);
    pointer-events: none;
  }
  .home-clean .abertura--institucional .produto-diferenciais > div:not(:last-child)::after { top: 34px; bottom: -54px; }
}

/* Fora da tela e com a janela da conversa aberta: tudo parado (nav.js tira .is-visivel). */
.home-clean .abertura--institucional:not(.is-visivel)::before,
.home-clean .abertura--institucional:not(.is-visivel) .abertura__contexto::after,
.home-clean .abertura--institucional:not(.is-visivel) :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { animation-play-state: paused !important; }

/* Leve (nível automático 1): os anéis não pulsam; a trilha continua.
   !important: as regras de atraso por item (nth-child) têm especificidade maior. */
html.vivo-leve .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { animation: none !important; }

/* Calmo (html.vivo-calmo: movimento reduzido ou nível 2). Nada pisca nem pulsa (M21/M22);
   a luz da trilha segue a 0,45× (M19). !important contra o corte global de style.css
   (animation-duration .01ms sob movimento reduzido, M26). */
html.vivo-calmo .home-clean .abertura--institucional .abertura__contexto::after {
  animation-name: p5-trilha !important;
  animation-duration: var(--fx-t-trilha-calmo, 20s) !important;
  animation-timing-function: linear !important;
  animation-delay: 0s !important;
  animation-iteration-count: infinite !important;
}
html.vivo-calmo .home-clean .abertura--institucional::before,
html.vivo-calmo .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { animation: none !important; }
/* O mesmo calmo pela media, sem depender do vivo.js (A11Y-P6-02 / MOV-05): se o vivo.js falhar ou
   atrasar, o corte global de .01ms de style.css deixaria a trilha e os quatro anéis em laços
   infinitos de 0,01 ms (fase aleatória a cada quadro, risco de estroboscópio, WCAG 2.3.1).
   O prefixo html.js vence por especificidade as regras de atraso por item e o *::before global. */
@media (prefers-reduced-motion: reduce) {
  html.js .home-clean .abertura--institucional .abertura__contexto::after {
    animation-name: p5-trilha !important;
    animation-duration: var(--fx-t-trilha-calmo, 20s) !important;
    animation-timing-function: linear !important;
    animation-delay: 0s !important;
    animation-iteration-count: infinite !important;
  }
  html.js .home-clean .abertura--institucional::before,
  html.js .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { animation: none !important; }
}

/* Pausado e quieto: quadro final fixo e determinístico (M29/M31). Céu a 1, anéis e luz da
   trilha apagados (a trilha continua acesa pela linha). */
html:is(.vivo-quieto, .vivo-parado) .home-clean .abertura--institucional::before,
html:is(.vivo-quieto, .vivo-parado) .home-clean .abertura--institucional .abertura__contexto::after,
html:is(.vivo-quieto, .vivo-parado) .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { animation: none !important; transition: none !important; }
html:is(.vivo-quieto, .vivo-parado) .home-clean main .abertura--institucional .acoes > .botao--primario { transform: none; }

/* Contraste reforçado: halos e brilhos externos saem; bordas sólidas; fundo mais discreto. */
@media (prefers-contrast: more) {
  .home-clean .abertura--institucional::before { opacity: .5; }
  .home-clean main .abertura--institucional .acoes > .botao--primario { border-color: #5B8CFF; box-shadow: none; }
  .home-clean .abertura--institucional .abertura__estado { border-color: #6F8FB0; box-shadow: none; }
  .home-clean .abertura--institucional .texto-gradiente { filter: none; }
}
@media (min-width: 721px) and (prefers-contrast: more) {
  .home-clean .abertura--institucional .abertura__contexto { background: #0C192B; box-shadow: none; }
  .home-clean .abertura--institucional .abertura__contexto::before { background: #5B8CFF; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div)::before { box-shadow: 0 0 0 1.5px rgba(91, 140, 255, .80), 0 0 14px 2px rgba(56, 232, 255, .55); }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after { box-shadow: none; }
}
@media (min-width: 721px) and (prefers-reduced-transparency: reduce) {
  .home-clean .abertura--institucional .abertura__contexto { background: #0C192B; }
}

/* Cores forçadas: toda decoração some; texto de gradiente em CanvasText (regra do bloco 7);
   nós e linha da trilha e bordas dos componentes em CanvasText. */
@media (forced-colors: active) {
  .home-clean .abertura--institucional::before,
  .home-clean .abertura--institucional .abertura__contexto::after,
  .home-clean .abertura--institucional .abertura__publico::before,
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { display: none; }
  .home-clean .abertura--institucional .texto-gradiente { filter: none; }
  .home-clean .abertura--institucional .link-seta { background: none; text-decoration: underline; }
  .home-clean .abertura--institucional .abertura__estado { border-color: CanvasText; box-shadow: none; }
  .home-clean .abertura--institucional .abertura__estado-icone { border-color: CanvasText; background: none; color: CanvasText; }
  .home-clean main .abertura--institucional .acoes > .botao--primario { box-shadow: none; }
}
@media (min-width: 721px) and (forced-colors: active) {
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div)::before { forced-color-adjust: none; background: CanvasText; border: 5px solid Canvas; box-shadow: none; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}
@media (max-width: 720px) and (forced-colors: active) {
  .home-clean .abertura--institucional .abertura__contexto::before { forced-color-adjust: none; background: CanvasText; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca > h2, .produto-diferenciais dt)::before { display: block; forced-color-adjust: none; background: CanvasText; border-color: Canvas; box-shadow: none; }
  .home-clean .abertura--institucional :is(.abertura__contexto-cabeca, .produto-diferenciais > div:not(:last-child))::after { display: none; }
}
@media print {
  .home-clean .abertura--institucional::before,
  .home-clean .abertura--institucional .abertura__contexto::after { display: none; }
  .home-clean .abertura--institucional .texto-gradiente { filter: none; }
}