/* Videre · ajustes locais do grupo institucional A (W19, 26/09/2026):
   /relatorio/ (Dossiê Videre), /limites/ (Limites) e /sobre/ (Sobre).
   Carregado só nessas três páginas, depois de componentes.css e antes da camada viva.
   Usa os componentes compartilhados; aqui ficam apenas encaixe e peças próprias
   (faixa de assinatura e cartão de conexão de Sobre). O alinhamento vem de style.css e
   dos componentes; a única exceção local é o complemento curto de .pag-frase-atalho. */

/* ---------------------------------------------------------------------------
   Herói: selo, atalho de profundidade e ações sem folgas somadas.
   ------------------------------------------------------------------------- */
.site-clean .heroi--pagina .lead + .v-atalho { margin-top: 0; }
.site-clean .heroi--pagina .v-atalho + .acoes { margin-top: var(--esp-6); }
/* Herói sem ações (Limites): o lead fecha o herói sem folga extra. */
.site-clean .heroi--pagina > .env > .lead:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Frase + atalho (Limites "Ritmo e responsabilidade"; Sobre "Por que existimos").
   ------------------------------------------------------------------------- */
.site-clean .pag-frase-atalho { display: grid; gap: var(--esp-5); min-width: 0; }
.site-clean .pag-frase-atalho > p { max-width: 62ch; margin: 0; }
.site-clean .pag-frase-atalho > p:not(.lead) { color: var(--cor-tinta-suave); }
/* Complemento curto (2 a 4 linhas) ao lado do atalho: alinhado como o lead, sem
   justificação (decisão 3; a 1024 px a coluna fica abaixo de ~55 caracteres). */
.site-clean .pag-frase-atalho > p { text-align: start; hyphens: manual; }
.site-clean .pag-frase-atalho > .v-atalho { margin: var(--esp-2) 0 0; }

/* ---------------------------------------------------------------------------
   Grades de cartões curtos (verbetes numerados): o número abre o cartão,
   o título fica próximo do texto.
   ------------------------------------------------------------------------- */
.site-clean .pag-grade-curta > .v-card { gap: .85rem; }
.site-clean .pag-grade-curta .v-card__numero { margin-bottom: .6rem; }
.site-clean .pag-grade-curta .v-card__texto { color: var(--v-suave); }
/* Faixa logo depois da grade: uma folga só, não duas. */
.site-clean :is(.v-grade, .v-comparador) + .v-faixa { margin-top: 0; }
/* Chamada que fecha o painel escuro, abaixo da grade. */
.site-clean .v-painel .v-grade + .v-cta { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Sobre: faixa de assinatura "Da evidência à clareza." abrindo a seção do filme.
   A frase é flex para que cada metade quebre inteira, sem justificação.
   ------------------------------------------------------------------------- */
.site-clean .sobre-assinatura {
  position: relative;
  margin: 0 0 clamp(3rem, 6vw, 5.5rem);
  padding: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid rgba(56, 232, 255, .14);
}
.site-clean .sobre-assinatura::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: min(16rem, 40%);
  height: 2px;
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-acento-claro));
  content: "";
}
.site-clean .sobre-assinatura__frase {
  display: flex;
  flex-wrap: wrap;
  column-gap: .2em;
  max-width: none;
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 7.25rem);
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1;
}
.site-clean .sobre-assinatura__frase > span {
  background: linear-gradient(90deg, var(--cor-marca-clara) 0%, var(--cor-acento-claro) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .site-clean .sobre-assinatura__frase > span { background: none; color: CanvasText; }
}

/* ---------------------------------------------------------------------------
   Sobre: cartão de conexão para Método (texto e chamada | compromissos).
   ------------------------------------------------------------------------- */
.site-clean .sobre-conexao { gap: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3.2vw, 3.25rem); }
.site-clean .sobre-conexao__texto { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.site-clean .sobre-conexao__texto > * { margin: 0; }
.site-clean .sobre-conexao__texto > .v-card__texto { max-width: 52ch; }
.site-clean .sobre-conexao__texto > .v-cta { margin-top: .5rem; }
.site-clean .sobre-conexao__lista {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--v-borda);
  list-style: none;
  counter-reset: compromisso;
}
.site-clean .sobre-conexao__lista > li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--v-borda);
  color: var(--v-titulo);
  font-size: var(--t-corpo);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  counter-increment: compromisso;
}
.site-clean .sobre-conexao__lista > li::before {
  flex: none;
  color: var(--v-acento);
  content: counter(compromisso, decimal-leading-zero);
  font: 500 var(--t-mini)/1 var(--fonte-mono);
  letter-spacing: .12em;
}
@media (min-width: 900px) {
  .site-clean .v-card.sobre-conexao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
}

/* ---------------------------------------------------------------------------
   Faixa final (.chamada-final): a anatomia do .v-painel (dois brilhos radiais, mesmos
   valores) no lugar da diagonal e da quadrícula; chamadas .v-cta no lugar do botão
   branco e do link sublinhado. Seletor genérico, pronto para subir a componentes.css
   se Método adotar a mesma faixa.
   ------------------------------------------------------------------------- */
.site-clean .chamada-final {
  overflow: hidden;
  border-top: 0;
  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 .chamada-final h2 { max-width: 26ch; text-wrap: balance; }
.site-clean .chamada-final .lead { max-width: 58ch; }
@media (min-width: 1024px) {
  /* Texto à esquerda; chamadas empilhadas à direita, alinhadas ao fim do texto. */
  .site-clean .chamada-final > .env {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: end;
  }
  .site-clean .chamada-final > .env > :not(.acoes) { grid-column: 1; }
  .site-clean .chamada-final > .env > .lead { margin-bottom: 0; }
  .site-clean .chamada-final > .env > .acoes {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-3);
    min-width: 18rem;
  }
}
/* W19, D07: respiro entre a tabela comparativa e o parágrafo seguinte. */
.site-clean .relatorio-comparativo + p { margin-top: var(--esp-5); }
