/* Videre · sistema de componentes compartilhado (W19, 26/09/2026).
   Linguagem extraída, com os mesmos valores, dos cartões aprovados de /produto/#modalidades
   (produto-cartoes.css), mais a variante clara. Carregado em todas as páginas depois dos CSS
   próprios de cada página e antes da camada viva (vivo*.css).
   Não editar por página: ajustes locais vão para site/assets/pag-<grupo>.css.
   Sem animação contínua aqui: o movimento pertence à camada viva, que reconhece estas classes. */

/* ---------------------------------------------------------------------------
   Tokens por contexto. Claro é o padrão; contextos escuros trocam os tokens,
   e a variante clara os devolve. Os valores escuros são os dos cartões aprovados.
   ------------------------------------------------------------------------- */
.site-clean {
  --v-titulo: var(--cor-tinta);
  --v-texto: #22324A;
  --v-suave: var(--cor-tinta-suave);
  --v-acento: var(--cor-marca);
  --v-rotulo-cor: var(--cor-marca);
  --v-campo: #53637B;
  --v-borda: #D6DFEC;
  --v-borda-forte: #B9C8DD;
  --v-pilula: #42526B;
  --v-barra: #DCE5F2;
  --v-barra-ativa: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-clara));
  --v-barra-brilho: 0 0 10px rgba(11, 92, 232, .25);
  --v-cta-cor: var(--cor-tinta);
  --v-cta-fundo-foco: var(--cor-papel-2);
  --v-cta-borda-foco: var(--cor-marca);
  --v-foco: var(--cor-marca);
  --v-realce: rgba(11, 92, 232, .55);
  --v-faixa-fundo: #F1F6FF;
  --v-estado-cor: var(--cor-marca-escura);
  --v-estado-fundo: #EEF4FF;
  --v-estado-borda: rgba(11, 92, 232, .32);
  --v-numero-fundo: #FFFFFF;
  --v-atalho-fundo: #FFFFFF;
  --v-atalho-celula: #F4F7FD;
}
.site-clean :where(.v-painel, .v-escuro, .v-card:not(.v-card--claro), .heroi, .chamada-final,
  .conexoes-pagina, .secao--editorial-escura, .secao--demo-produto, .modalidades-painel,
  .produto-filme, .sobre-filme, .rodape),
.site-clean:where(.pagina-fontes, .home-clean) main {
  --v-titulo: #FFFFFF;
  --v-texto: #E3EAF5;
  --v-suave: var(--cor-tinta-invertida-suave);
  --v-acento: var(--cor-acento-claro);
  --v-rotulo-cor: var(--cor-acento-claro);
  --v-campo: #93A7C2;
  --v-borda: #22385A;
  --v-borda-forte: #2C4A70;
  --v-pilula: #C9D6E8;
  --v-barra: #1C3150;
  --v-barra-ativa: linear-gradient(90deg, var(--cor-marca-clara), var(--cor-acento-claro));
  --v-barra-brilho: 0 0 12px rgba(56, 232, 255, .35);
  --v-cta-cor: #FFFFFF;
  --v-cta-fundo-foco: rgba(11, 92, 232, .28);
  --v-cta-borda-foco: var(--cor-marca-clara);
  --v-foco: var(--cor-acento-claro);
  --v-realce: rgba(56, 232, 255, .55);
  --v-faixa-fundo: rgba(56, 232, 255, .05);
  --v-estado-cor: #DDF8FF;
  /* Fundos opacos: a chuva de dados da camada viva passa por trás do selo e do atalho, não por dentro. */
  --v-estado-fundo: linear-gradient(rgba(56, 232, 255, .08), rgba(56, 232, 255, .08)), var(--cor-papel-escuro);
  --v-estado-borda: rgba(56, 232, 255, .38);
  --v-numero-fundo: var(--cor-papel-escuro);
  --v-atalho-fundo: linear-gradient(rgba(56, 232, 255, .04), rgba(56, 232, 255, .04)), var(--cor-papel-escuro);
  --v-atalho-celula: rgba(255, 255, 255, .035);
}
/* A variante clara vence o contexto escuro em que estiver. */
.site-clean .v-claro,
.site-clean .v-card.v-card--claro {
  --v-titulo: var(--cor-tinta);
  --v-texto: #22324A;
  --v-suave: var(--cor-tinta-suave);
  --v-acento: var(--cor-marca);
  --v-rotulo-cor: var(--cor-marca);
  --v-campo: #53637B;
  --v-borda: #D6DFEC;
  --v-borda-forte: #B9C8DD;
  --v-pilula: #42526B;
  --v-barra: #DCE5F2;
  --v-barra-ativa: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-clara));
  --v-barra-brilho: 0 0 10px rgba(11, 92, 232, .25);
  --v-cta-cor: var(--cor-tinta);
  --v-cta-fundo-foco: var(--cor-papel-2);
  --v-cta-borda-foco: var(--cor-marca);
  --v-foco: var(--cor-marca);
  --v-realce: rgba(11, 92, 232, .55);
  --v-faixa-fundo: #F1F6FF;
  --v-estado-cor: var(--cor-marca-escura);
  --v-estado-fundo: #EEF4FF;
  --v-estado-borda: rgba(11, 92, 232, .32);
  --v-numero-fundo: #FFFFFF;
  --v-atalho-fundo: #FFFFFF;
  --v-atalho-celula: #F4F7FD;
}

/* ---------------------------------------------------------------------------
   Painel escuro com os dois brilhos radiais.
   ------------------------------------------------------------------------- */
.site-clean .v-painel {
  position: relative;
  overflow: hidden;
  color: var(--cor-tinta-invertida);
  background:
    radial-gradient(60rem 30rem at 88% -12%, rgba(11, 92, 232, .16), transparent 62%),
    radial-gradient(42rem 26rem at -4% 112%, rgba(56, 232, 255, .05), transparent 60%),
    var(--cor-papel-escuro);
}
/* W19 (T2): o brilho de 30% saiu; todo painel usa o nível suave. A variante continua aceita. */
.site-clean .v-painel.v-painel--suave {
  background:
    radial-gradient(60rem 30rem at 88% -12%, rgba(11, 92, 232, .16), transparent 62%),
    radial-gradient(42rem 26rem at -4% 112%, rgba(56, 232, 255, .05), transparent 60%),
    var(--cor-papel-escuro);
}
.site-clean .v-painel > .env::before { display: none; }
/* :where() mantém estas regras abaixo das classes dos componentes (cartão, faixa, trilha). */
.site-clean .v-painel :where(h1, h2, h3, h4) { color: var(--v-titulo); }
.site-clean .v-painel :where(p, li, dd) { color: var(--v-suave); }
.site-clean .v-painel :where(.link-seta, a:not([class])) { color: var(--v-acento); }
.site-clean .v-painel :where(:focus-visible) { outline-color: var(--v-foco); }

/* Cabeçalho de seção (rótulo, título e introdução). Usar um wrapper evita a grade de
   duas colunas que style.css aplica no desktop quando o h2 é filho direto de .secao > .env. */
.site-clean .v-cabeca { max-width: 76ch; margin-bottom: var(--esp-6); }
.site-clean .v-cabeca h2 { max-width: 30ch; margin-bottom: var(--esp-4); font-size: var(--t-h2); font-weight: 600; line-height: 1.18; text-wrap: balance; }
.site-clean .v-cabeca > p { max-width: 66ch; color: var(--v-suave); }
.site-clean .v-cabeca > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Grade de cartões. Padrão: 1 coluna. --2 empilha abaixo de 720 px; --4 usa 2 colunas
   entre 720 e 1279 px e empilha abaixo de 720 px; --3 usa 2 colunas entre 720 e
   1023 px (o último cartão ímpar ocupa a fileira) e empilha abaixo de 720 px.
   Uma sequência numerada com número ímpar de etapas (ol.v-grade--3, às vezes com
   conectores) empilha até 1023 px, na largura do contêiner: 2 + 1 quebraria a ordem.
   ------------------------------------------------------------------------- */
.site-clean .v-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: none;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
}
.site-clean .v-grade > * { min-width: 0; margin: 0; }
@media (min-width: 720px) {
  .site-clean :is(.v-grade--2, .v-grade--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .site-clean .v-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean .v-grade--3:not(ol) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .site-clean ol.v-grade--3:has(> li:last-child:nth-child(odd)) { grid-template-columns: minmax(0, 1fr); }
  /* Cartão na largura da fileira: o texto conserva uma medida de leitura. */
  .site-clean .v-grade > .v-card > .v-card__texto { max-width: 72ch; }
}
@media (min-width: 1024px) {
  .site-clean .v-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .site-clean .v-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Cartão escuro (padrão) e cartão claro (.v-card--claro): mesma anatomia.
   ------------------------------------------------------------------------- */
.site-clean .v-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
  max-width: none;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid #22385A;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--cor-fundo-escuro-cartao) 0%, var(--cor-fundo-escuro-elevado) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .35);
  color: var(--v-texto);
  text-align: start;
  transition: border-color .2s ease, transform .2s ease;
}
/* Filete de 3 px, cobalto → ciano. Estático aqui; a camada viva pode animar background-position. */
.site-clean .v-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--cor-marca) 0%, var(--cor-acento-claro) 25%, var(--cor-marca-clara) 50%, var(--cor-acento-claro) 75%, var(--cor-marca) 100%);
  background-size: 200% 100%;
  content: "";
  pointer-events: none;
}
.site-clean .v-card:has(a[href]):hover,
.site-clean .v-card:focus-within { border-color: var(--v-realce); }
/* M36: o cartão só sobe com ponteiro fino que paira (no toque, o cartão não fica levantado). */
@media (hover: hover) and (pointer: fine) {
  .site-clean .v-card:has(a[href]):hover,
  .site-clean .v-card:focus-within { transform: translateY(-2px); }
}
.site-clean .v-card.v-card--claro {
  border-color: #D6DFEC;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(7, 17, 31, .08);
}
.site-clean .v-card > :is(p, ul, ol, dl, h2, h3, h4, .v-rotulo) { margin: 0; }
.site-clean .v-card :is(p, li, dd) { text-align: start; text-align-last: start; hyphens: none; }
.site-clean .v-card :focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }

/* A pílula não quebra por dentro enquanto couber: quando não cabe ao lado do número,
   desce inteira (a quebra da linha flex usa a largura de uma linha só). Só o rótulo
   que não cabe nem sozinho na largura do cartão (a 320 px, "Consultora de Integridade
   e Due Diligence") quebra por dentro, em vez de vazar da pílula e rolar a página. */
.site-clean .v-card__topo { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.site-clean .v-card__numero { color: var(--v-acento); font: 500 var(--t-mini)/1 var(--fonte-mono); letter-spacing: .12em; }
.site-clean .v-card__tipo {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  padding: .35rem .7rem;
  border: 1px solid var(--v-borda-forte);
  border-radius: 999px;
  color: var(--v-pilula);
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-clean .v-card__nome {
  margin: .2rem 0 0;
  color: var(--v-titulo);
  font-size: clamp(1.75rem, 1.1rem + 1.1vw, 2.2rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.05;
}
/* Nome em forma de frase: mesma cor e peso visual, corpo menor. */
.site-clean .v-card__nome.v-card__nome--frase { font-size: clamp(1.25rem, 1rem + .6vw, 1.65rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.site-clean .v-card__sub { margin: -.35rem 0 0; color: var(--v-acento); font-weight: 600; text-align: start; }
.site-clean .v-card__texto { margin: 0; color: var(--v-texto); line-height: 1.6; text-align: start; text-align-last: start; hyphens: none; }

.site-clean .v-card__profundidade { display: grid; gap: .5rem; }
.site-clean .v-card__rotulo,
.site-clean .v-card__linhas dt {
  color: var(--v-campo);
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean .v-card__linhas { display: grid; max-width: none; margin: 0; border-top: 1px solid var(--v-borda); }
.site-clean .v-card__linhas > div { padding: .95rem 0; border-bottom: 1px solid var(--v-borda); }
.site-clean .v-card__linhas dt { margin: 0 0 .4rem; }
.site-clean .v-card__linhas dd {
  margin: 0;
  color: var(--v-suave);
  font-size: var(--t-menor);
  line-height: 1.6;
  text-align: start;
  text-align-last: start;
  hyphens: none;
}
.site-clean .v-card__linhas dd > p { max-width: none; margin: 0; color: inherit; font: inherit; }
.site-clean .v-card__linhas dd > p + p { margin-top: .5rem; }
/* Quando o dl fecha o cartão, a última linha não deixa divisória solta nem folga dupla. */
.site-clean .v-card > .v-card__linhas:last-child > :last-child { padding-bottom: 0; border-bottom: 0; }

/* Medidor de profundidade: quatro barras (aceita três); as ativas levam gradiente e brilho.
   Uma coluna por barra, sem número fixo de colunas.
   Marcação: span.v-medidor[aria-hidden="true"] + texto .sr-apenas "profundidade N de 4". */
.site-clean .v-medidor { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.site-clean .v-medidor > span { position: relative; overflow: hidden; height: 6px; border-radius: 999px; background: var(--v-barra); }
.site-clean .v-medidor > .is-ativo { background: var(--v-barra-ativa); box-shadow: var(--v-barra-brilho); }
.site-clean .v-medidor.v-medidor--mini { display: inline-grid; flex: none; width: 3rem; gap: 3px; }
.site-clean .v-medidor--mini > span { height: 4px; }

/* Chamada com borda, 48 px, seta em ciano. */
.site-clean .v-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  padding: .8rem 1rem;
  border: 1px solid var(--v-borda-forte);
  border-radius: 12px;
  background: transparent;
  color: var(--v-cta-cor);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  text-wrap: balance;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-clean .v-cta:hover { background: var(--v-cta-fundo-foco); border-color: var(--v-cta-borda-foco); }
.site-clean .v-cta:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }
.site-clean .v-cta > span[aria-hidden="true"],
.site-clean .v-cta .v-cta__seta { flex: none; color: var(--v-acento); }
.site-clean .v-card .v-cta { margin-top: auto; }
/* Seta à esquerda ("← Voltar às modalidades"): texto junto da seta. */
.site-clean .v-cta.v-cta--voltar { justify-content: flex-start; }
.site-clean .v-cta.v-cta--primaria { border-color: var(--cor-marca); background: var(--cor-marca); color: #FFFFFF; }
.site-clean .v-cta.v-cta--primaria:hover { border-color: var(--cor-marca-escura); background: var(--cor-marca-escura); }
.site-clean .v-cta--primaria > span[aria-hidden="true"],
.site-clean .v-cta--primaria .v-cta__seta { color: #FFFFFF; }
/* Fora de cartões e da navegação entre modalidades, a chamada tem a largura do texto. */
.site-clean :not(.v-card, .v-navmod) > .v-cta { display: inline-flex; min-width: min(100%, 16rem); }

/* A partir de 720 px (quando a grade já tem colunas): as mesmas linhas de cartões
   vizinhos ficam alinhadas (subgrid).
   --v-linhas = número de filhos diretos de cada cartão (padrão 7, como os aprovados);
   .v-linhas-3 … .v-linhas-8 ajustam sem estilo inline. Todos os cartões da grade
   precisam ter a mesma sequência de filhos. */
.site-clean .v-grade--alinhada { --v-linhas: 7; }
.site-clean .v-grade--alinhada.v-linhas-3 { --v-linhas: 3; }
.site-clean .v-grade--alinhada.v-linhas-4 { --v-linhas: 4; }
.site-clean .v-grade--alinhada.v-linhas-5 { --v-linhas: 5; }
.site-clean .v-grade--alinhada.v-linhas-6 { --v-linhas: 6; }
.site-clean .v-grade--alinhada.v-linhas-7 { --v-linhas: 7; }
.site-clean .v-grade--alinhada.v-linhas-8 { --v-linhas: 8; }
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .v-grade--alinhada { grid-template-rows: repeat(var(--v-linhas), auto); row-gap: 0; }
    .site-clean .v-grade--alinhada > .v-card { display: grid; grid-row: span var(--v-linhas); grid-template-rows: subgrid; row-gap: 1.15rem; align-content: start; }
    /* Chamadas vizinhas com a mesma altura, mesmo quando uma delas quebra em duas linhas. */
    .site-clean .v-grade--alinhada > .v-card > .v-cta { align-self: stretch; margin-top: 0; }
  }
}
/* Entre 720 e 1023 px as grades alinhadas têm mais de uma fileira de cartões. O row-gap da
   grade separa as fileiras; dentro de cada cartão vale o row-gap próprio do subgrid.
   (Acima de 1024 px o respiro entre fileiras continua nos CSS das páginas.) */
@media (min-width: 720px) and (max-width: 1023px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .v-grade--alinhada { row-gap: clamp(1rem, 2vw, 1.75rem); }
  }
}

/* ---------------------------------------------------------------------------
   Rótulo único: IBM Plex Mono 12 px, .12em, caixa alta; ciano no escuro, cobalto no claro.
   ------------------------------------------------------------------------- */
.site-clean .v-rotulo {
  display: block;
  margin: 0 0 var(--esp-3);
  color: var(--v-rotulo-cor);
  font: 500 var(--t-mini)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Rótulo usado como título (h2/h3/h4.v-rotulo): o peso de título de seção não se aplica. */
.site-clean main .v-rotulo:is(h2, h3, h4) { font-weight: 500; }

/* Selo único de estado: pílula mono com ponto ciano; leva a /produto/#estado-atual. */
.site-clean .v-estado {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: .65rem;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 0 0 var(--esp-4);
  padding: .55rem 1rem;
  border: 1px solid var(--v-estado-borda);
  border-radius: 999px;
  background: var(--v-estado-fundo);
  color: var(--v-estado-cor);
  font: 500 var(--t-mini)/1.35 var(--fonte-mono);
  letter-spacing: .12em;
  text-align: start;
  text-decoration: none;
  text-transform: uppercase;
  text-wrap: balance;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-clean .v-estado::before {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--cor-acento-claro);
  box-shadow: 0 0 0 3px var(--v-estado-borda), 0 0 10px rgba(56, 232, 255, .55);
  content: "";
}
.site-clean a.v-estado:hover { border-color: var(--v-acento); }
.site-clean .v-estado:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }
.site-clean .v-estado__seta { color: var(--v-acento); }
@media (max-width: 480px) {
  .site-clean .v-estado { gap: .55rem; padding-inline: .85rem; letter-spacing: .08em; }
}
@media (max-width: 360px) {
  .site-clean .v-estado { letter-spacing: .06em; }
}

/* Faixa de destaque: barra à esquerda (ciano → cobalto) e rótulo mono.
   Substitui alertas âmbar e notas soltas. */
.site-clean .v-faixa {
  position: relative;
  display: grid;
  gap: .5rem;
  max-width: 76ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem) clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--v-borda);
  border-radius: 14px;
  background: var(--v-faixa-fundo);
  color: var(--v-texto);
  text-align: start;
}
.site-clean .v-faixa::before {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--cor-acento-claro), var(--cor-marca));
  content: "";
}
.site-clean .v-faixa :is(.v-rotulo, .v-faixa__rotulo) { margin: 0; color: var(--v-rotulo-cor); font: 500 var(--t-mini)/1.4 var(--fonte-mono); letter-spacing: .12em; text-transform: uppercase; }
.site-clean .v-faixa .v-faixa__titulo { max-width: none; margin: 0; color: var(--v-titulo); font-size: var(--t-corpo); font-weight: 650; letter-spacing: -.01em; line-height: 1.35; }
.site-clean .v-faixa p { max-width: none; margin: 0; color: var(--v-texto); text-align: start; text-align-last: start; hyphens: none; }
.site-clean .v-faixa a:not([class]) { color: var(--v-acento); text-underline-offset: .2em; }

/* Atalho compacto de nível → /produto/#modalidades. É um link só, desenhado como
   um controle único: contorno comum, rótulo visível "Comparar os quatro dossiês" e seta na
   mesma linha do rótulo; embaixo, os quatro dossiês com mini-medidor (nome sobre o
   medidor, em quatro colunas iguais; entre 481 e 719 px, 2 × 2; até 480 px, lista na
   largura total).
   Marcação: a.v-atalho > rótulo (.v-atalho__rotulo, ou o .sr-apenas inicial, que aqui fica
   visível) + 4 × .v-atalho__item + .v-atalho__seta[aria-hidden]. */
.site-clean .v-atalho {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: .4rem;
  width: 100%;
  max-width: 48rem;
  margin: var(--esp-5) 0 0;
  padding: .45rem;
  border: 1px solid var(--v-borda-forte);
  border-radius: 16px;
  background: var(--v-atalho-fundo);
  color: var(--v-titulo);
  list-style: none;
  text-decoration: none;
  transition: border-color .2s ease;
}
.site-clean .v-atalho > :is(.v-atalho__rotulo, .ib-atalho__rotulo, .sr-apenas:first-child) {
  position: static;
  grid-row: 1;
  grid-column: 1 / -1;
  width: auto;
  height: auto;
  margin: 0;
  padding: .3rem 2.25rem .1rem .55rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: var(--v-rotulo-cor);
  font: 500 var(--t-mini)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-clean .v-atalho__seta {
  grid-row: 1;
  grid-column: -2 / -1;
  align-self: center;
  justify-self: end;
  padding: .3rem .55rem .1rem;
  color: var(--v-acento);
  font-weight: 600;
  line-height: 1;
}
.site-clean .v-atalho__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Nome em cima, medidor embaixo: quando um nome quebra em duas linhas, os medidores
     vizinhos continuam na mesma altura. */
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: .65rem .8rem;
  border: 1px solid var(--v-borda);
  border-radius: 10px;
  background: var(--v-atalho-celula);
  color: var(--v-titulo);
  font-size: var(--t-menor);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
@media (min-width: 481px) and (max-width: 719px) {
  .site-clean .v-atalho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-clean .v-atalho { grid-template-columns: minmax(0, 1fr); }
  .site-clean .v-atalho__item { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
}
.site-clean a.v-atalho:hover { border-color: var(--v-cta-borda-foco); }
.site-clean a.v-atalho:hover .v-atalho__item,
.site-clean a.v-atalho__item:hover { border-color: var(--v-borda-forte); background: var(--v-cta-fundo-foco); }
.site-clean a.v-atalho:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }
.site-clean a.v-atalho__item:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }

/* Trilha: lista ordenada de etapas com números mono e linha vertical;
   .v-trilha--horizontal vira fileira a partir de 1024 px. Pôr role="list" no <ol>. */
.site-clean .v-trilha {
  display: grid;
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding: 0;
  list-style: none;
  counter-reset: v-trilha;
}
.site-clean .v-trilha > li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 clamp(1.5rem, 3vw, 2rem) 3.5rem;
  color: var(--v-suave);
  counter-increment: v-trilha;
  text-align: start;
}
.site-clean .v-trilha > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--v-borda-forte);
  border-radius: 999px;
  background: var(--v-numero-fundo);
  color: var(--v-acento);
  content: counter(v-trilha, decimal-leading-zero);
  font: 500 var(--t-mini)/1 var(--fonte-mono);
  letter-spacing: .06em;
}
.site-clean .v-trilha > li:not(:last-child)::after {
  position: absolute;
  top: 2.75rem;
  bottom: .25rem;
  left: calc(1.25rem - .5px);
  width: 1px;
  background: linear-gradient(180deg, var(--v-realce), var(--v-borda));
  content: "";
}
.site-clean .v-trilha .v-trilha__titulo { max-width: none; margin: .45rem 0 .5rem; color: var(--v-titulo); font-size: var(--t-corpo); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.site-clean .v-trilha p { max-width: 60ch; margin: 0; color: var(--v-suave); text-align: start; text-align-last: start; hyphens: none; }
/* Até 400 px: número menor e recuo menor, para a coluna de texto não cair abaixo de ~25
   caracteres por linha; o cartão que contém uma trilha também reduz a margem interna. */
@media (max-width: 400px) {
  .site-clean .v-trilha > li { padding-left: 2.75rem; }
  .site-clean .v-trilha > li::before { width: 2rem; height: 2rem; }
  .site-clean .v-trilha > li:not(:last-child)::after { top: 2.25rem; left: calc(1rem - .5px); }
  .site-clean .v-trilha .v-trilha__titulo { margin-top: .25rem; }
  .site-clean .v-card:has(.v-trilha) { padding-inline: 1rem; }
}
@media (min-width: 1024px) {
  .site-clean .v-trilha--horizontal { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(1rem, 2vw, 1.75rem); }
  .site-clean .v-trilha--horizontal > li { padding: 3.5rem 0 0; }
  .site-clean .v-trilha--horizontal > li:not(:last-child)::after {
    top: calc(1.25rem - .5px);
    right: calc(-1 * clamp(1rem, 2vw, 1.75rem));
    bottom: auto;
    left: 3.25rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--v-realce), var(--v-borda));
  }
}

/* Comparador: dois cartões lado a lado; o da página leva borda ciano (.v-card--atual). */
.site-clean .v-comparador {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: none;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .site-clean .v-comparador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-clean .v-card.v-card--atual { border-color: var(--v-realce); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px var(--v-realce), 0 24px 60px rgba(0, 0, 0, .35); }
.site-clean .v-card.v-card--claro.v-card--atual { box-shadow: 0 0 0 1px var(--v-realce), 0 18px 44px rgba(7, 17, 31, .08); }
/* O cartão da página não tem chamada: um marcador sem link ocupa o lugar dela, com a mesma
   altura, para os dois cartões terminarem juntos. O texto alternativo vazio evita repetir o
   aria-current="page" do cartão. */
.site-clean .v-comparador > .v-card--atual:not(:has(> .v-cta))::after {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  border: 1px dashed var(--v-realce);
  border-radius: 12px;
  color: var(--v-acento);
  content: "Esta página" / "";
  font: 500 var(--t-mini)/1.3 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Com o marcador depois do dl, a última linha mantém a divisória, como no cartão vizinho. */
.site-clean .v-comparador > .v-card--atual:not(:has(> .v-cta)) > .v-card__linhas:last-child > :last-child { padding-bottom: .95rem; border-bottom: 1px solid var(--v-borda); }

/* Navegação anterior/próxima entre os dossiês. */
.site-clean .v-navmod {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 56rem;
  margin: 0;
}
@media (min-width: 720px) {
  .site-clean .v-navmod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean .v-navmod > .v-cta:only-child { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   Tabela (.v-tabela), para Contratação e Dossiê Videre: contorno do cartão, cabeçalho
   mono em versalete, linhas finas; a primeira coluna é th[scope="row"].
   Abaixo de 720 px cada linha vira um cartão e cada célula mostra o rótulo da coluna
   (td[data-rotulo]::before, texto no atributo, compatível com a CSP). Sem rolagem lateral.
   Tokens do contexto: branca no claro; opaca e escura no escuro.
   ------------------------------------------------------------------------- */
.site-clean .v-tabela {
  width: 100%;
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border: 1px solid var(--v-borda-forte);
  border-collapse: separate;
  border-radius: 14px;
  border-spacing: 0;
  background: var(--v-atalho-fundo);
  box-shadow: 0 18px 44px rgba(7, 17, 31, .06);
  color: var(--v-texto);
  font-size: var(--t-menor);
  line-height: 1.5;
  text-align: start;
}
.site-clean .v-tabela caption {
  padding: 0 0 .85rem;
  caption-side: top;
  color: var(--v-rotulo-cor);
  font: normal 500 var(--t-mini)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-align: start;
  text-transform: uppercase;
}
.site-clean .v-tabela :is(th, td) {
  padding: clamp(.85rem, 1.4vw, 1.15rem) clamp(1rem, 2vw, 1.5rem);
  border: 0;
  border-top: 1px solid var(--v-borda);
  text-align: start;
  vertical-align: top;
  hyphens: none;
}
.site-clean .v-tabela thead th {
  border-top: 0;
  border-bottom: 1px solid var(--v-borda-forte);
  background: var(--v-atalho-celula);
  color: var(--v-campo);
  font: 500 var(--t-mini)/1.35 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean .v-tabela thead + tbody > tr:first-child > :is(th, td) { border-top: 0; }
/* Cantos arredondados nas células das pontas (sem overflow: hidden, que cortaria a legenda). */
.site-clean .v-tabela thead tr > :first-child { border-top-left-radius: 13px; }
.site-clean .v-tabela thead tr > :last-child { border-top-right-radius: 13px; }
.site-clean .v-tabela tbody tr:last-child > :first-child { border-bottom-left-radius: 13px; }
.site-clean .v-tabela tbody tr:last-child > :last-child { border-bottom-right-radius: 13px; }
.site-clean .v-tabela tbody th[scope="row"] {
  color: var(--v-titulo);
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.site-clean .v-tabela td { color: var(--v-texto); }
/* Célula única de aviso (colspan): texto secundário. */
.site-clean .v-tabela td[colspan] { color: var(--v-suave); }
/* Colunas fixas: tabelas vizinhas com o mesmo número de colunas alinham entre si. */
@media (min-width: 720px) {
  .site-clean .v-tabela { table-layout: fixed; }
  .site-clean .v-tabela thead th:first-child { width: 34%; }
}
@media (max-width: 719px) {
  .site-clean .v-tabela,
  .site-clean .v-tabela :is(tbody, tr, th, td) { display: block; width: auto; }
  .site-clean .v-tabela { border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
  .site-clean .v-tabela caption { display: block; }
  /* O cabeçalho sai da tela e fica para a tecnologia assistiva; cada célula traz o próprio rótulo. */
  .site-clean .v-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-clean .v-tabela tbody { display: grid; gap: .75rem; }
  .site-clean .v-tabela tr {
    padding: .35rem 1.1rem;
    border: 1px solid var(--v-borda-forte);
    border-radius: 14px;
    background: var(--v-atalho-fundo);
    box-shadow: 0 12px 30px rgba(7, 17, 31, .05);
  }
  .site-clean .v-tabela :is(th, td) { padding: .8rem 0; border-top: 1px solid var(--v-borda); border-radius: 0; }
  .site-clean .v-tabela tr > :first-child { border-top: 0; }
  /* O primeiro cartão também separa o título das células (a regra de desktop tira o filete da 1ª linha). */
  .site-clean .v-tabela thead + tbody > tr:first-child > :is(th, td):not(:first-child) { border-top: 1px solid var(--v-borda); }
  .site-clean .v-tabela td[data-rotulo]::before {
    display: block;
    margin: 0 0 .3rem;
    color: var(--v-campo);
    content: attr(data-rotulo);
    font: 500 var(--t-mini)/1.35 var(--fonte-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}
@media (forced-colors: active) {
  .site-clean .v-tabela,
  .site-clean .v-tabela tr { box-shadow: none; }
  .site-clean .v-tabela thead th { border-bottom-color: CanvasText; }
}

/* ---------------------------------------------------------------------------
   Compatibilidade com o tema de Fontes, que força a cor de títulos e dt.
   ------------------------------------------------------------------------- */
.site-clean.pagina-fontes .m24--fontes .v-card :is(h2, h3, h4) { color: var(--v-titulo); }
.site-clean.pagina-fontes .m24--fontes .v-card dt { color: var(--v-campo); }

/* ---------------------------------------------------------------------------
   Rótulo único aplicado às classes de rótulo já existentes no conteúdo principal
   (auditoria, item 9). As zonas preservadas ficam de fora.
   ------------------------------------------------------------------------- */
.site-clean main :is(.versalete, .m24-meta, .indice-estudo__rotulo):not(:where(
  .abertura *, .universo *, .universe-space *, [data-ambient-space] *, .caso-didatico *,
  .x-panel *, .x-ask *, .x-controls *, .x-immersive *, .explore-page *, .conexao-dialog *, .doc *
)),
.site-clean.home-clean main .home-bloco .abertura__etiqueta {
  color: var(--v-rotulo-cor);
  font: 500 var(--t-mini)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   "Continue a explorar" no fim das páginas: os cartões de conexão entram na família
   dos .v-card (raio, borda, gradiente e sombra). Só a seção da página: o diálogo de
   conexões e o botão que o abre ([data-conexao-open]) ficam como estão.
   ------------------------------------------------------------------------- */
.site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link {
  border-color: #22385A;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--cor-fundo-escuro-cartao) 0%, var(--cor-fundo-escuro-elevado) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .35);
  transition: border-color .2s ease, transform .2s ease;
}
.site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:hover,
.site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:focus-visible { border-color: rgba(56, 232, 255, .55); }
@media (hover: hover) and (pointer: fine) {
  .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:hover,
  .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:focus-visible { transform: translateY(-2px); }
}
.site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link > span:nth-child(2) { color: var(--cor-acento-claro); }

@media (prefers-reduced-motion: reduce) {
  .site-clean :is(.v-card, .v-cta, .v-estado, .v-atalho, .v-atalho__item) { transition: none; }
  .site-clean .v-card:has(a[href]):hover,
  .site-clean .v-card:focus-within { transform: none; }
  .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link { transition: none; }
  .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:hover,
  .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:focus-visible { transform: none; }
}

/* Modos da camada viva (vivo.js): na calma e no quadro parado os cartões não sobem; parado, sem transição. */
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .v-card:has(a[href]):hover,
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .v-card:focus-within,
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:hover,
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .conexoes-pagina .conexoes-pagina__links > .conexao-link:focus-visible { transform: none; }
html:is(.vivo-quieto, .vivo-parado) .site-clean :is(.v-card, .conexoes-pagina .conexoes-pagina__links > .conexao-link) { transition: none; }

/* ===========================================================================
   TEMAS POR PÁGINA (W19, decisão T3 de Tiago em 27/09/2026: plano A).
   Cada página tem um tema só, declarado no <body>: .tema-escuro (Home, Produto, os três
   dossiês, Na prática, Fontes, Conversa) ou .tema-claro (as demais). Cabeçalho e rodapé
   são a moldura escura do site e ficam fora destas regras (estão fora do <main>).
   Mecânica: dentro do <main>, os tokens de cor do tema oposto são remapeados; os
   componentes que usam tokens mudam sozinhos, e aqui ficam só as exceções com cor fixa.
   Nas claras, a demonstração, o filme e a maquete do Enterprise são quadros escuros de
   cantos arredondados, não faixas. A constelação e as zonas preservadas não mudam.
   ========================================================================= */

/* --- Tema escuro --------------------------------------------------------- */
.site-clean.tema-escuro { background: var(--cor-fundo-escuro); color-scheme: dark; }
.site-clean.tema-escuro main {
  --cor-papel: var(--cor-fundo-escuro);
  --cor-papel-2: var(--cor-fundo-escuro-elevado);
  --cor-papel-3: var(--cor-fundo-escuro-cartao);
  --cor-tinta: #ECF1F8;
  --cor-tinta-suave: #B2C0D4;
  --cor-tinta-tenue: #9DAFC6;
  --cor-filete: #22385A;
  --cor-filete-forte: #55708F;
  --cor-marca: #6E9BFF;
  --cor-acento: var(--cor-acento-claro);
  --cor-acento-escuro: var(--cor-acento-claro);
  --cor-acento-lavado: rgba(56, 232, 255, .10);
  --sombra: 0 20px 55px rgba(0, 0, 0, .35);
  color: var(--cor-tinta);
}
/* Tokens dos componentes: o contexto escuro vale na página toda, inclusive nas variantes claras. */
.site-clean.tema-escuro main,
.site-clean.tema-escuro main :is(.v-claro, .v-card.v-card--claro) {
  --v-titulo: #FFFFFF;
  --v-texto: #E3EAF5;
  --v-suave: var(--cor-tinta-invertida-suave);
  --v-acento: var(--cor-acento-claro);
  --v-rotulo-cor: var(--cor-acento-claro);
  --v-campo: #93A7C2;
  --v-borda: #22385A;
  --v-borda-forte: #2C4A70;
  --v-pilula: #C9D6E8;
  --v-barra: #1C3150;
  --v-barra-ativa: linear-gradient(90deg, var(--cor-marca-clara), var(--cor-acento-claro));
  --v-barra-brilho: 0 0 12px rgba(56, 232, 255, .35);
  --v-cta-cor: #FFFFFF;
  --v-cta-fundo-foco: rgba(11, 92, 232, .28);
  --v-cta-borda-foco: var(--cor-marca-clara);
  --v-foco: var(--cor-acento-claro);
  --v-realce: rgba(56, 232, 255, .55);
  --v-faixa-fundo: linear-gradient(rgba(56, 232, 255, .05), rgba(56, 232, 255, .05)), var(--cor-fundo-escuro-elevado);
  --v-estado-cor: #DDF8FF;
  --v-estado-fundo: linear-gradient(rgba(56, 232, 255, .08), rgba(56, 232, 255, .08)), var(--cor-fundo-escuro);
  --v-estado-borda: rgba(56, 232, 255, .38);
  --v-numero-fundo: var(--cor-fundo-escuro);
  --v-atalho-fundo: linear-gradient(rgba(56, 232, 255, .04), rgba(56, 232, 255, .04)), var(--cor-fundo-escuro-elevado);
  --v-atalho-celula: rgba(255, 255, 255, .035);
}
/* Faixas claras do meio: o mesmo fundo único, separadas pelo filete. */
.site-clean.tema-escuro main .secao--papel2 { background: transparent; }
/* Cartões brancos viram a versão escura. */
.site-clean.tema-escuro main .v-card.v-card--claro {
  border-color: #22385A;
  background: linear-gradient(180deg, var(--cor-fundo-escuro-cartao) 0%, var(--cor-fundo-escuro-elevado) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .35);
}
.site-clean.tema-escuro main .v-card.v-card--claro.v-card--atual { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px var(--v-realce), 0 24px 60px rgba(0, 0, 0, .35); }
/* Ação principal: o cobalto da marca continua sendo o fundo do botão, com texto branco. */
.site-clean.tema-escuro main :is(.botao--primario, .v-cta.v-cta--primaria, .ex-send:not(:disabled)):not(:where(.universo, .caso-didatico) *) {
  border-color: #0B5CE8;
  background: #0B5CE8;
  color: #FFFFFF;
}
.site-clean.tema-escuro main :is(.botao--primario, .v-cta.v-cta--primaria, .ex-send:not(:disabled)):not(:where(.universo, .caso-didatico) *):hover {
  border-color: var(--cor-marca-escura);
  background: var(--cor-marca-escura);
  color: #FFFFFF;
}
.site-clean.tema-escuro main .prosa a:visited { color: var(--cor-marca); }

/* --- Tema claro ---------------------------------------------------------- */
.site-clean.tema-claro main {
  --cor-tinta-invertida: var(--cor-tinta);
  --cor-tinta-invertida-suave: var(--cor-tinta-suave);
  --cor-filete-invertido: var(--cor-filete);
  --cor-acento-claro: var(--cor-marca);
  --cor-sinal: var(--cor-marca);
  --cor-papel-escuro: var(--cor-papel);
  --cor-papel-escuro-2: var(--cor-papel-2);
  --cor-fundo-escuro: var(--cor-papel);
  --cor-fundo-escuro-elevado: #F7F9FD;
  --cor-fundo-escuro-cartao: #FFFFFF;
}
.site-clean.tema-claro main :is(.v-painel, .v-escuro, .heroi, .chamada-final, .conexoes-pagina,
  .modalidades-painel, .v-card:not(:where(.secao--demo-produto, .sobre-filme, .blueprint-metodo) *)) {
  --v-titulo: var(--cor-tinta);
  --v-texto: #22324A;
  --v-suave: var(--cor-tinta-suave);
  --v-acento: var(--cor-marca);
  --v-rotulo-cor: var(--cor-marca);
  --v-campo: #53637B;
  --v-borda: #D6DFEC;
  --v-borda-forte: #B9C8DD;
  --v-pilula: #42526B;
  --v-barra: #DCE5F2;
  --v-barra-ativa: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-clara));
  --v-barra-brilho: 0 0 10px rgba(11, 92, 232, .25);
  --v-cta-cor: var(--cor-tinta);
  --v-cta-fundo-foco: var(--cor-papel-2);
  --v-cta-borda-foco: var(--cor-marca);
  --v-foco: var(--cor-marca);
  --v-realce: rgba(11, 92, 232, .55);
  --v-faixa-fundo: #F1F6FF;
  --v-estado-cor: var(--cor-marca-escura);
  --v-estado-fundo: #EEF4FF;
  --v-estado-borda: rgba(11, 92, 232, .32);
  --v-numero-fundo: #FFFFFF;
  --v-atalho-fundo: #FFFFFF;
  --v-atalho-celula: #F4F7FD;
}
/* Herói claro com halo azul-claro. */
.site-clean.tema-claro main .heroi {
  border-bottom: 1px solid var(--cor-filete);
  background:
    radial-gradient(56rem 30rem at 86% -10%, rgba(91, 140, 255, .18), transparent 64%),
    radial-gradient(40rem 24rem at -6% 115%, rgba(56, 232, 255, .10), transparent 60%),
    var(--cor-papel);
  color: var(--cor-tinta);
}
.site-clean.tema-claro main :is(.heroi, .chamada-final) :focus-visible { outline-color: var(--cor-papel); box-shadow: 0 0 0 5px var(--cor-marca-escura); }
/* Painéis e faixa final: a versão clara do painel, com o mesmo halo. */
.site-clean.tema-claro main :is(.v-painel, .chamada-final) {
  border-top: 0;
  background:
    radial-gradient(60rem 30rem at 88% -12%, rgba(91, 140, 255, .14), transparent 62%),
    radial-gradient(42rem 26rem at -4% 112%, rgba(56, 232, 255, .08), transparent 60%),
    var(--cor-papel-2);
  background-size: auto;
  color: var(--cor-tinta);
}
.site-clean.tema-claro main .chamada-final { border-bottom: 1px solid var(--cor-filete); }
.site-clean.tema-claro main .chamada-final .botao--primario { background: var(--cor-marca); color: #FFFFFF; }
.site-clean.tema-claro main .chamada-final .botao--primario:hover { background: var(--cor-marca-escura); color: #FFFFFF; }
/* Cartões escuros viram a versão clara. */
.site-clean.tema-claro main .v-card:not(.v-card--claro):not(:where(.secao--demo-produto, .sobre-filme, .blueprint-metodo) *) {
  border-color: #D6DFEC;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(7, 17, 31, .08);
}
.site-clean.tema-claro main .v-card.v-card--atual:not(.v-card--claro) { box-shadow: 0 0 0 1px var(--v-realce), 0 18px 44px rgba(7, 17, 31, .08); }
/* "Continue a explorar": faixa e cartões claros. */
.site-clean.tema-claro main .conexoes-pagina { border-top: 1px solid var(--cor-filete); background: var(--cor-papel-2); color: var(--cor-tinta); }
.site-clean.tema-claro main .conexoes-pagina h2 { color: var(--cor-tinta); }
.site-clean.tema-claro main .conexoes-pagina .versalete { color: var(--cor-marca); }
.site-clean.tema-claro main .conexoes-pagina__heading > button { border-color: #B9C8DD; background: #FFFFFF; color: var(--cor-marca-escura); }
.site-clean.tema-claro main .conexoes-pagina__heading > button:hover { border-color: var(--cor-marca); background: var(--cor-papel-2); }
.site-clean.tema-claro main .conexoes-pagina .conexoes-pagina__links > .conexao-link {
  border-color: #D6DFEC;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(7, 17, 31, .08);
  color: var(--cor-tinta);
}
.site-clean.tema-claro main .conexoes-pagina .conexoes-pagina__links > .conexao-link:hover,
.site-clean.tema-claro main .conexoes-pagina .conexoes-pagina__links > .conexao-link:focus-visible { border-color: rgba(11, 92, 232, .55); color: var(--cor-tinta); }
.site-clean.tema-claro main .conexoes-pagina .conexoes-pagina__links > .conexao-link small { color: var(--cor-tinta-suave); }
.site-clean.tema-claro main .conexoes-pagina .conexoes-pagina__links > .conexao-link > span:nth-child(2) { color: var(--cor-marca); }
.site-clean.tema-claro main .conexoes-pagina .conexao-link::before { background: var(--cor-marca); box-shadow: 0 0 10px rgba(11, 92, 232, .35); }

/* Quadros escuros nas páginas claras: demonstração e filme do Enterprise, filme de Sobre e a
   maquete do Enterprise. A faixa fica clara; o conteúdo vira um quadro de cantos arredondados
   e recupera os tokens escuros (valores literais, porque o <main> claro os remapeou). */
.site-clean.tema-claro main :is(.secao--demo-produto, .sobre-filme) { background: transparent; color: var(--cor-tinta); border-bottom: 0; }
.site-clean.tema-claro main :is(.secao--demo-produto, .sobre-filme) > .env,
.site-clean.tema-claro main .blueprint-metodo {
  --cor-tinta-invertida: #F6F8FC;
  --cor-tinta-invertida-suave: #B2C0D4;
  --cor-filete-invertido: #55708F;
  --cor-acento-claro: #38E8FF;
  --cor-sinal: #38E8FF;
  --cor-papel-escuro: #03060D;
  --cor-papel-escuro-2: #0C192B;
  --cor-fundo-escuro: #03060D;
  --cor-fundo-escuro-elevado: #07101D;
  --cor-fundo-escuro-cartao: #0C192B;
  --v-titulo: #FFFFFF;
  --v-texto: #E3EAF5;
  --v-suave: #B2C0D4;
  --v-acento: #38E8FF;
  --v-rotulo-cor: #38E8FF;
  --v-borda: #22385A;
  --v-borda-forte: #2C4A70;
  --v-foco: #38E8FF;
  color: #F6F8FC;
  color-scheme: dark;
}
.site-clean.tema-claro main :is(.secao--demo-produto, .sobre-filme) > .env {
  width: auto;
  max-width: none;
  margin-inline: var(--margem-pagina);
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid #22385A;
  border-radius: 24px;
  background:
    radial-gradient(60rem 30rem at 88% -12%, rgba(11, 92, 232, .16), transparent 62%),
    radial-gradient(42rem 26rem at -4% 112%, rgba(56, 232, 255, .05), transparent 60%),
    #03060D;
  box-shadow: 0 24px 60px rgba(7, 17, 31, .18);
}
.site-clean.tema-claro main :is(.secao--demo-produto, .sobre-filme) > .env :focus-visible { outline-color: #03060D; box-shadow: 0 0 0 5px #38E8FF; }
@media (max-width: 480px) {
  .site-clean.tema-claro main :is(.secao--demo-produto, .sobre-filme) > .env { margin-inline: .75rem; padding: 1.25rem 1rem; border-radius: 18px; }
}

/* Superfícies com branco fixo nas páginas escuras. */
.site-clean.tema-escuro .m24 .produto-regras { --v-faixa-fundo: linear-gradient(rgba(56, 232, 255, .05), rgba(56, 232, 255, .05)), var(--cor-fundo-escuro-elevado); }
.site-clean.tema-escuro.modalidade-detalhe main .modalidade-navmod__link { background: var(--cor-fundo-escuro-cartao); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.site-clean.tema-escuro.modalidade-detalhe main .modalidade-navmod__link--voltar { background: var(--cor-fundo-escuro-elevado); box-shadow: none; }
.site-clean.tema-escuro.modalidade-detalhe main .modalidade-navmod__link:hover { background: #10213A; }
.site-clean.tema-escuro main .ex-conversation { border-color: #22385A; border-top-color: var(--cor-marca); background: var(--cor-fundo-escuro-cartao); }
.site-clean.tema-escuro main .ex-send:disabled { border-color: #22385A; background: var(--cor-fundo-escuro-elevado); color: var(--cor-tinta-suave); }
/* Índice em pílulas do herói de Contratação (herói claro). */
.site-clean.tema-claro .m24 .m24-hero.produto-heroi .produto-indice a { border-color: #B9C8DD; background: #FFFFFF; color: var(--cor-tinta-suave); }
.site-clean.tema-claro .m24 .m24-hero.produto-heroi .produto-indice :is(.m24-index__numero, .m24-index__seta) { color: var(--cor-marca); }
.site-clean.tema-claro .m24 .m24-hero.produto-heroi .produto-indice a:is(:hover, :focus-visible) { border-color: var(--cor-marca); background: var(--cor-papel-2); color: var(--cor-tinta); }

/* Links de texto sem classe no conteúdo: cor de acento do sistema, sem vencer nenhuma regra do site (especificidade zero). */
:where(.site-clean.tema-claro main) a:where(:not([class])) { color: var(--cor-marca); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:where(.site-clean.tema-escuro main) a:where(:not([class])) { color: var(--cor-acento-claro); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }