/* Videre · grupo Método (W19, 26/09/2026): /metodologia/ e /enterprise/.
   Ajustes locais sobre componentes.css. Todos os seletores ficam presos a
   .pagina-metodo ou .pagina-enterprise (classes do <body> destas duas páginas),
   com especificidade maior que a dos componentes, qualquer que seja a ordem de carga.
   Sem text-align manual: o alinhamento vem de style.css e dos componentes. */

/* ---------------------------------------------------------------------------
   Índice "Nesta página" (as duas páginas): caixa única, uma coluna por item.
   ------------------------------------------------------------------------- */
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--cor-filete);
  background: var(--cor-papel);
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo__grade { align-items: center; }
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo ul {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #D6DFEC;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(7, 17, 31, .05);
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo li + li { border-top: 1px solid #D6DFEC; }
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a {
  gap: .75rem;
  min-height: 56px;
  padding: .8rem 1.1rem;
  color: var(--cor-tinta);
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease, color .2s ease;
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a::after {
  flex: none;
  margin-left: auto;
  color: var(--cor-marca);
  content: "↓";
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a:hover {
  background: #F1F6FF;
  color: var(--cor-marca-escura);
  text-decoration: none;
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a:focus-visible { outline-offset: -3px; }
.site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a span { flex: none; letter-spacing: .12em; }
/* Duas colunas: Método (quatro itens) até 1023 px; Enterprise (cinco itens, rótulos mais
   longos) até 1279 px, com o quinto item na largura da fileira em vez de uma célula vazia.
   Uma coluna por item só quando todos cabem: Método a partir de 1024 px, Enterprise a partir de 1280 px. */
@media (min-width: 720px) and (max-width: 1023px) {
  .site-clean.pagina-metodo .indice-estudo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean.pagina-metodo .indice-estudo li + li { border-top: 0; }
  .site-clean.pagina-metodo .indice-estudo li:nth-child(n + 3) { border-top: 1px solid #D6DFEC; }
  .site-clean.pagina-metodo .indice-estudo li:nth-child(even) { border-left: 1px solid #D6DFEC; }
}
@media (min-width: 720px) and (max-width: 1279px) {
  .site-clean.pagina-enterprise .indice-estudo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean.pagina-enterprise .indice-estudo li + li { border-top: 0; }
  .site-clean.pagina-enterprise .indice-estudo li:nth-child(n + 3) { border-top: 1px solid #D6DFEC; }
  .site-clean.pagina-enterprise .indice-estudo li:nth-child(even) { border-left: 1px solid #D6DFEC; }
  .site-clean.pagina-enterprise .indice-estudo li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-clean.pagina-metodo .indice-estudo ul { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .site-clean.pagina-metodo .indice-estudo li + li { border-top: 0; border-left: 1px solid #D6DFEC; }
}
@media (min-width: 1280px) {
  .site-clean.pagina-enterprise .indice-estudo ul { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .site-clean.pagina-enterprise .indice-estudo li + li { border-top: 0; border-left: 1px solid #D6DFEC; }
}

/* Listas curtas dentro de cartões (papéis e limites declarados). */
.site-clean:is(.pagina-metodo, .pagina-enterprise) .metodo-lista {
  display: grid;
  gap: .7rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .metodo-lista > li {
  position: relative;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--v-texto);
  font-size: var(--t-menor);
  line-height: 1.55;
}
.site-clean:is(.pagina-metodo, .pagina-enterprise) .metodo-lista > li::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: .5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-acento-claro));
  content: "";
}

/* ===========================================================================
   /metodologia/
   ========================================================================= */

/* Blocos do índice: só a primeira seção de cada bloco leva número. As seções seguintes
   (.metodo-sub) mantêm o fundo da seção-mãe e entram como subseção: sem a divisória de
   seção, com um filete na largura do conteúdo e respiro simétrico.
   O bloco 04 inteiro fica num único painel escuro (.metodo-grupo), sem emendas de fundo. */
.site-clean.pagina-metodo .secao:has(+ .metodo-sub) { border-bottom: 0; }
.site-clean.pagina-metodo .secao.metodo-sub { padding-top: 0; }
.site-clean.pagina-metodo .metodo-sub > .env { padding-top: clamp(3rem, 4.5vw, 5rem); }
.site-clean.pagina-metodo .metodo-sub > .env::after {
  position: absolute;
  top: 0;
  right: var(--margem-pagina);
  left: var(--margem-pagina);
  height: 1px;
  background: var(--v-borda-forte);
  content: "";
  pointer-events: none;
}
.site-clean.pagina-metodo .metodo-grupo > .secao { border-bottom: 0; background: transparent; }
.site-clean.pagina-metodo .metodo-grupo .metodo-sub > .env::after { background: var(--v-borda-forte); }
.site-clean.pagina-metodo .metodo-grupo .metodo-limites .prosa > p:not(.lead) { color: var(--v-texto); }

/* O método em prática: cartão de conexão para /experiencias/#investigacao, no fim do estudo. */
.site-clean.pagina-metodo .metodo-pratica { border-bottom: 0; background: var(--cor-papel); }
.site-clean.pagina-metodo .metodo-referencias + .metodo-pratica { padding-top: 0; }
.site-clean.pagina-metodo .metodo-pratica__texto { display: grid; gap: .9rem; }
.site-clean.pagina-metodo .metodo-pratica__texto > * { margin: 0; }
.site-clean.pagina-metodo .metodo-pratica__texto .v-card__texto { max-width: 52ch; color: var(--cor-tinta-suave); }
.site-clean.pagina-metodo .metodo-passos {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--v-borda);
  list-style: none;
  counter-reset: passo;
}
.site-clean.pagina-metodo .metodo-passos > li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: .75rem;
  row-gap: .2rem;
  margin: 0;
  padding: .85rem 0;
  border-bottom: 1px solid var(--v-borda);
  counter-increment: passo;
}
.site-clean.pagina-metodo .metodo-passos > li::before {
  grid-row: span 2;
  color: var(--v-acento);
  content: counter(passo, decimal-leading-zero);
  font: 500 var(--t-mini)/1.7 var(--fonte-mono);
  letter-spacing: .12em;
}
.site-clean.pagina-metodo .metodo-passos strong {
  color: var(--v-titulo);
  font: 500 var(--t-mini)/1.7 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-clean.pagina-metodo .metodo-passos span { color: var(--v-suave); font-size: var(--t-menor); line-height: 1.5; }
@media (min-width: 1024px) {
  .site-clean.pagina-metodo .v-card.metodo-pratica__cartao {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4.5vw, 5rem);
    row-gap: 1.75rem;
    padding: clamp(1.75rem, 2.8vw, 2.75rem);
  }
  .site-clean.pagina-metodo .metodo-pratica__texto { grid-column: 1; grid-row: 1; }
  .site-clean.pagina-metodo .metodo-pratica__cartao > .v-cta { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; min-width: 19rem; margin: 0; }
  .site-clean.pagina-metodo .metodo-passos { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 1280px) {
  .site-clean.pagina-metodo .metodo-passos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.75rem, 1.4vw, 1.25rem);
    align-self: center;
    border-top: 0;
  }
  .site-clean.pagina-metodo .metodo-passos > li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: .55rem;
    padding: 1.1rem 0 0;
    border-bottom: 0;
    background: linear-gradient(90deg, var(--cor-marca), var(--cor-acento-claro)) top left / 100% 2px no-repeat;
  }
  .site-clean.pagina-metodo .metodo-passos > li:not(:first-child) { background: linear-gradient(90deg, var(--v-borda-forte), var(--v-borda)) top left / 100% 2px no-repeat; }
  .site-clean.pagina-metodo .metodo-passos > li::before { grid-row: auto; }
}

/* 01 · O método. */
.site-clean.pagina-metodo .metodo-principio .abertura-estudo { margin-top: 0; }
.site-clean.pagina-metodo .v-card.metodo-tese { gap: 1rem; }
.site-clean.pagina-metodo .metodo-tese .v-rotulo { margin: 0; }
@media (max-width: 1023px) {
  .site-clean.pagina-metodo .metodo-principio .abertura-estudo { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
  .site-clean.pagina-metodo .v-card.metodo-tese { max-width: 42rem; }
}

/* 02 · Conceitos: verbetes em cartões claros. */
.site-clean.pagina-metodo .metodo-verbetes > .v-card { gap: 1rem; padding: clamp(1.35rem, 2vw, 1.85rem); }
/* Nota curta sob uma grade: também no Enterprise, 05 · Estado da oferta (nota do asterisco
   do monitoramento contínuo, 27/09/2026). */
.site-clean:is(.pagina-metodo, .pagina-enterprise) .metodo-nota {
  max-width: 76ch;
  margin: 0;
  color: var(--cor-tinta-suave);
  font-size: var(--t-menor);
  line-height: 1.6;
}

/* 02 · Indicadores: trilha do critério, quatro elementos e a IA. */
.site-clean.pagina-metodo .metodo-bloco { margin-top: clamp(3rem, 6vw, 5rem); }
.site-clean.pagina-metodo .metodo-bloco__cabeca .v-rotulo { margin-bottom: .6rem; }
.site-clean.pagina-metodo .metodo-bloco__cabeca h3 {
  max-width: 32ch;
  margin: 0;
  font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.site-clean.pagina-metodo .metodo-bloco > :is(.v-trilha, .v-grade) { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.site-clean.pagina-metodo .v-trilha.metodo-criterio {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid #D6DFEC;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow: 0 18px 44px rgba(7, 17, 31, .06);
}
.site-clean.pagina-metodo .metodo-criterio > li:last-child { padding-bottom: 0; }
.site-clean.pagina-metodo .metodo-criterio .v-trilha__titulo { margin-bottom: .2rem; font-size: clamp(1.3rem, 1rem + .7vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; }
.site-clean.pagina-metodo .metodo-criterio .metodo-criterio__pergunta { margin: 0 0 .6rem; color: var(--v-acento); font-weight: 600; }
.site-clean.pagina-metodo .metodo-elementos { counter-reset: elemento; }
.site-clean.pagina-metodo .metodo-elementos > .v-card { gap: .75rem; counter-increment: elemento; }
.site-clean.pagina-metodo .metodo-elementos dt::before {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--v-acento);
  content: counter(elemento, decimal-leading-zero);
  font: 500 var(--t-mini)/1 var(--fonte-mono);
  letter-spacing: .12em;
}
/* Painel "IA com critério declarado" (Tiago, 04/10 ~20h30, captura a ~2000 px: "não está com a
   qualidade certa"). Uma medida só para o corpo inteiro (~80 caracteres da letra do corpo): os
   quatro parágrafos, o botão e o atalho dos quatro dossiês alinham na mesma coluna. O primeiro
   parágrafo (.lead), acima de 480 px, fica na letra, na entrelinha e na cor do corpo e segue a prosa
   justificada do site, como os outros três: o site não justifica o lead porque a letra de 22 px abre
   rios em coluna estreita (style.css), e aqui ele passa a ser prosa da mesma medida. Até 480 px
   (tudo alinhado à esquerda), o lead fica como era. */
.site-clean.pagina-metodo .metodo-bloco--lado {
  --metodo-medida: calc(var(--t-corpo) * 40);
  --metodo-vao: clamp(2rem, 10vw - 5rem, 10rem);
}
.site-clean.pagina-metodo .metodo-bloco__corpo { max-width: var(--metodo-medida, none); }
.site-clean.pagina-metodo .metodo-bloco__corpo > p { max-width: none; }
.site-clean.pagina-metodo .metodo-bloco__corpo > p:not(:last-of-type) { margin-bottom: var(--esp-4); }
.site-clean.pagina-metodo .metodo-bloco__corpo > .v-cta { margin-top: var(--esp-2); }
.site-clean.pagina-metodo .metodo-bloco__corpo > .v-atalho { max-width: none; margin-top: var(--esp-5); }
@media (min-width: 481px) {
  .site-clean.pagina-metodo .metodo-bloco__corpo > p.lead { text-align: justify; text-align-last: start; hyphens: auto; hyphenate-limit-chars: 6 3 3; }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo > p.lead { color: inherit; font-size: var(--t-corpo); line-height: inherit; }
}
/* De 1024 px em diante: cabeça e corpo lado a lado, separados por um fio. O corpo fica na medida
   (ou em 62% da largura, se for menor) e a cabeça na largura do título (até 55% da medida ou 38%);
   o par se centra no painel, e a sobra de tela larga vira margem igual dos dois lados, nunca vazio
   dentro de uma coluna. O vão cresce com a tela; a medida do corpo (até ~80 caracteres) e o título
   (até 88% dos h2 da página: título de painel, um degrau abaixo do h2 da seção e acima do h3 dos
   painéis irmãos) não. A cabeça se centra na altura do corpo. */
@media (min-width: 1024px) {
  .site-clean.pagina-metodo .metodo-bloco--lado {
    display: grid;
    grid-template-columns:
      fit-content(min(calc(var(--metodo-medida) * .55), calc((100% - var(--metodo-vao) / 2) * .38)))
      minmax(0, min(calc(var(--metodo-medida) + var(--metodo-vao) / 2), calc((100% - var(--metodo-vao) / 2) * .62)));
    justify-content: center;
    column-gap: calc(var(--metodo-vao) / 2);
    align-items: center;
  }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo {
    max-width: none;
    padding-inline-start: calc(var(--metodo-vao) / 2);
    border-inline-start: 1px solid rgba(91, 140, 255, .28);
  }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__cabeca .v-rotulo { margin-bottom: 1rem; }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__cabeca h3 {
    max-width: 12ch;
    font-size: clamp(1.9rem, 1.1rem + 1.5vw, calc(var(--t-h2) * .88));
    text-wrap: balance;
    letter-spacing: -.025em;
    line-height: 1.08;
  }
}
/* De 1760 px em diante (a queixa de Tiago foi a ~2000 px): uma medida só já não enche o painel, e a
   sobra virava margem vazia dos dois lados da moldura. O corpo passa a duas colunas de ~56 a ~64
   caracteres cada (até 80% da medida), com o botão e o atalho dos quatro dossiês por baixo das duas
   (column-span), na largura das duas colunas juntas. A cabeça continua à esquerda, centrada na altura do
   corpo, que ficou com cerca de metade da altura. As colunas não saem iguais: cada parágrafo fica inteiro
   numa coluna, e a 1ª pode terminar 2 a 4 linhas abaixo da 2ª (gate visual W19l, B1: aceito). */
@media (min-width: 1760px) {
  .site-clean.pagina-metodo .metodo-bloco--lado {
    grid-template-columns:
      fit-content(min(calc(var(--metodo-medida) * .5), calc((100% - var(--metodo-vao) / 2) * .2)))
      minmax(0, min(calc(var(--metodo-medida) * 1.6 + var(--metodo-vao)), calc((100% - var(--metodo-vao) / 2) * .8)));
  }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo {
    columns: 2;
    column-gap: calc(var(--metodo-vao) / 2);
    orphans: 2;
    widows: 2;
  }
  /* Alinhadas à esquerda e sem hifenização, só nas duas colunas (gate visual W19l, M1): justificada, a coluna
     de ~60 caracteres abria rios de até 3,3 espaços entre palavras de 1760 a 2200 px ("o Parecer Técnico de
     Integridade e Due Diligence do", a 1920). Abaixo de 1760 px o corpo segue justificado, numa medida só.
     pretty: o navegador escolhe as quebras que deixam a margem direita mais regular.
     break-inside: nenhum parágrafo começa numa coluna e termina na outra (a quebra no meio da palavra,
     "infor- / mação", passava de uma coluna para a outra a 2000 px). */
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo > p { text-align: start; text-align-last: auto; hyphens: manual; text-wrap: pretty; break-inside: avoid; }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo > p:last-of-type { margin-bottom: 0; }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo > .v-cta {
    display: flex;
    width: fit-content;
    margin-top: var(--esp-5);
    column-span: all;
  }
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo > .v-atalho { column-span: all; }
}
@media (max-width: 1023px) {
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo { margin-top: var(--esp-5); }
}
@media (forced-colors: active) {
  .site-clean.pagina-metodo .metodo-bloco--lado .metodo-bloco__corpo { border-inline-start-color: CanvasText; }
}

/* 03 · Três rotas. */
.site-clean.pagina-metodo .v-card.v-card--claro.metodo-rota--destaque {
  border-color: rgba(11, 92, 232, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(11, 92, 232, .18), 0 22px 50px rgba(11, 92, 232, .12);
}
/* As linhas Entrada/Saída também se alinham entre os cartões (subgrid aninhada, como em
   /produto/#contratacao): o dl ocupa duas das seis linhas do cartão. */
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean.pagina-metodo .metodo-rotas > .v-card > .v-card__linhas { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* Linhagem da regra: ficha na anatomia dos cartões claros (raio 18, filete, sombra suave),
   rótulos mono dos dl aprovados e separadores no acento. */
.site-clean.pagina-metodo .metodo-linhagem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
  padding: .35rem clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid #D6DFEC;
  border-radius: 18px;
  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.pagina-metodo .metodo-linhagem::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%);
  content: "";
  pointer-events: none;
}
.site-clean.pagina-metodo .metodo-linhagem > div { min-width: 0; padding: 1.25rem 0; }
.site-clean.pagina-metodo .metodo-linhagem > div + div { border-top: 1px solid #D6DFEC; }
.site-clean.pagina-metodo .metodo-linhagem dt {
  margin: 0 0 .6rem;
  color: #53637B;
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean.pagina-metodo .metodo-linhagem dd {
  margin: 0;
  color: var(--cor-tinta);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.45;
  text-align: start;
  text-align-last: start;
  hyphens: none;
}
.site-clean.pagina-metodo .metodo-linhagem__sep { color: var(--cor-marca); font-weight: 700; }
@media (min-width: 720px) and (max-width: 1023px) {
  .site-clean.pagina-metodo .metodo-linhagem { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.25rem); }
  .site-clean.pagina-metodo .metodo-linhagem > div:nth-child(2) { border-top: 0; }
}
@media (min-width: 1024px) {
  .site-clean.pagina-metodo .metodo-linhagem { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: .5rem; }
  .site-clean.pagina-metodo .metodo-linhagem > div { padding: 1.35rem clamp(1.1rem, 1.8vw, 1.75rem); }
  .site-clean.pagina-metodo .metodo-linhagem > div:first-child { padding-left: 0; }
  .site-clean.pagina-metodo .metodo-linhagem > div:last-child { padding-right: 0; }
  .site-clean.pagina-metodo .metodo-linhagem > div + div { border-top: 0; border-left: 1px solid #D6DFEC; }
}
.site-clean.pagina-metodo .metodo-acoes { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* 04 · Governança (painel escuro), responsabilidades e limites. */
.site-clean.pagina-metodo .metodo-principios > .v-card { gap: 1rem; }
.site-clean.pagina-metodo .metodo-papeis > .v-card { gap: 1rem; }
.site-clean.pagina-metodo :is(.metodo-papeis, .metodo-limites__cartao) .v-rotulo { margin: 0; }
.site-clean.pagina-metodo .v-card.metodo-limites__cartao { gap: 1.1rem; }
.site-clean.pagina-metodo .metodo-limites .prosa > p { max-width: 66ch; }
@media (min-width: 861px) {
  .site-clean.pagina-metodo .grade.metodo-limites { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Referências: links do parágrafo continuam na frase (auditoria 15c).
   W19l (Tiago, 04/10 ~03h45: a lista estava "muito muito simples" e levava à página de COMPRA da norma): grade de cartões
   vivos, cada um levando à página que DESCREVE a norma (/normas/<slug>/). HTML gerado por scripts/normas-paginas.mjs
   (região normas-referencias). Os cartões são .v-card: holofote, borda cônica, filete e som vêm da camada viva
   (vivo-sinais.js); número e pílula na anatomia de sempre (.v-card__topo). Sem estilo inline (CSP). */
.site-clean.pagina-metodo .metodo-referencias { border-bottom: 0; }
.site-clean.pagina-metodo .metodo-referencias__grade { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
/* W19 (V12): rótulo e título próprios, na escala dos títulos de seção (.v-cabeca). */
.site-clean.pagina-metodo .metodo-referencias__cabeca .v-rotulo { margin: 0 0 .6rem; }
.site-clean.pagina-metodo .metodo-referencias__cabeca h2 { max-width: 22ch; margin: 0 0 1rem; font-size: var(--t-h2); font-weight: 600; line-height: 1.18; text-wrap: balance; }
.site-clean.pagina-metodo .metodo-referencias__cabeca p { max-width: 60ch; margin: 0; color: var(--cor-tinta-suave); font-size: var(--t-menor); line-height: 1.65; text-align: start; text-align-last: auto; hyphens: manual; }
.site-clean.pagina-metodo .metodo-referencias__cabeca p a { color: var(--cor-marca); text-decoration: underline; text-underline-offset: .18em; }
.site-clean.pagina-metodo .metodo-referencias__todas {
  /* Em linha (não flex): a seta fica presa à última palavra pelo espaço inseparável do gerador; a 320 px ela ficava solta
     na ponta da primeira linha (revisão visual r3). A área de toque de 44 px vem do padding. */
  display: inline-block;
  min-height: 44px;
  padding-block: .6rem;
  margin-top: .75rem;
  color: var(--fx-ciano, #38E8FF);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.site-clean.pagina-metodo .metodo-referencias__todas:hover { color: #F6F8FC; }
.site-clean.pagina-metodo .metodo-referencias__todas:focus-visible { outline: 2px solid var(--fx-ciano, #38E8FF); outline-offset: 4px; border-radius: 4px; }
.site-clean.pagina-metodo .metodo-refs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-clean.pagina-metodo .metodo-refs > li { display: flex; min-width: 0; margin: 0; }
.site-clean.pagina-metodo a.metodo-ref {
  flex: 1;
  gap: .6rem;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--v-texto);
  text-decoration: none;
}
/* A borda acende no hover e no foco; o seletor vence o do .v-card escuro do futuro.css (revisão visual r1). */
.site-clean.tema-escuro.pagina-metodo main a.metodo-ref.v-card:is(:hover, :focus-visible) { border-color: var(--v-realce); }
.site-clean.pagina-metodo a.metodo-ref:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 3px; }
.site-clean.pagina-metodo .metodo-ref .metodo-ref__sigla {
  max-width: none;
  margin: .3rem 0 0;
  color: var(--v-titulo);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.site-clean.pagina-metodo .metodo-ref__sigla__prefixo {
  display: block;
  margin-bottom: .35rem;
  color: var(--v-suave);
  font: 500 var(--t-mini, .75rem)/1.3 var(--fonte-mono);
  letter-spacing: .1em;
}
.site-clean.pagina-metodo .metodo-ref__sigla__ano { color: #8FB0FF; font-weight: 500; }
/* Cabeçalho do cartão (número e pílula) sempre numa linha só, para os seis cartões de uma fileira começarem na mesma altura
   (revisão visual r3: a 1024 px, "Referencial voluntário" descia e o NIST ficava ~21 px abaixo de LGPD e RIPD; a 320 px, a
   pílula quebrava por dentro). A pílula nunca quebra; o cartão mede a própria largura (container) e, quando estreito, a
   pílula fica mais justa; mais estreito ainda, o número vai em cima e a pílula embaixo, igual em todos os da fileira
   (todos os cartões de uma fileira têm a mesma largura). */
.site-clean.pagina-metodo .metodo-refs > li { container-type: inline-size; }
.site-clean.pagina-metodo .metodo-ref .v-card__topo { flex-wrap: nowrap; gap: .5rem .75rem; }
.site-clean.pagina-metodo .metodo-ref .v-card__numero { flex: none; }
.site-clean.pagina-metodo .metodo-ref .v-card__tipo { flex: none; white-space: nowrap; }
@container (max-width: 19rem) {
  .site-clean.pagina-metodo .metodo-ref .v-card__tipo { padding-inline: .55rem; letter-spacing: .03em; }
}
@container (max-width: 16.5rem) {
  .site-clean.pagina-metodo .metodo-ref .v-card__topo { flex-direction: column; align-items: flex-start; }
}
/* Sigla sem número (NIST AI RMF 1.0, LGPD, RIPD): a linha de prefixo fica reservada, para alinhar com os vizinhos. */
.site-clean.pagina-metodo .metodo-ref__sigla--texto::before {
  display: block;
  margin-bottom: .35rem;
  font: 500 var(--t-mini, .75rem)/1.3 var(--fonte-mono);
  content: "\00a0";
}
/* Numa coluna só (até 639 px), sem vizinho para alinhar: sem a linha reservada (revisão visual r2). */
@media (max-width: 639px) {
  .site-clean.pagina-metodo .metodo-ref__sigla--texto::before { display: none; }
}
.site-clean.pagina-metodo .metodo-ref__nome { color: var(--v-titulo); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.site-clean.pagina-metodo .metodo-ref__texto { color: var(--v-suave); font-size: var(--t-menor, .9375rem); line-height: 1.55; text-wrap: pretty; }
@media (min-width: 640px) {
  .site-clean.pagina-metodo .metodo-ref__nome { min-height: calc(2 * 1.35em); }
}
.site-clean.pagina-metodo .metodo-ref__ir {
  display: flex;
  gap: .4em;
  align-items: center;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid rgba(91, 140, 255, .22);
  color: var(--fx-ciano, #38E8FF);
  font-size: .95rem;
  font-weight: 600;
}
.site-clean.pagina-metodo .metodo-ref__seta { display: inline-block; transition: transform .2s ease; }
.site-clean.pagina-metodo a.metodo-ref:is(:hover, :focus-visible) .metodo-ref__ir { color: var(--v-titulo); }
/* Só com ponteiro fino que paira e com o site em movimento: o cartão sobe 2 px e a seta anda. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.vivo-calmo, .vivo-quieto, .vivo-parado) .site-clean.pagina-metodo a.metodo-ref:hover { transform: translateY(-2px); }
  html:not(.vivo-calmo, .vivo-quieto, .vivo-parado) .site-clean.pagina-metodo a.metodo-ref:hover .metodo-ref__seta { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-clean.pagina-metodo :is(a.metodo-ref, .metodo-ref__seta) { transition: none; }
}
html:is(.vivo-calmo, .vivo-quieto, .vivo-parado) .site-clean.pagina-metodo :is(a.metodo-ref, .metodo-ref__seta) { transition: none; }
@media (min-width: 640px) {
  .site-clean.pagina-metodo .metodo-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Número ímpar de cartões em duas colunas: o último ocupa a linha (nada de buraco). */
  .site-clean.pagina-metodo .metodo-refs > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-clean.pagina-metodo .metodo-refs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-clean.pagina-metodo .metodo-refs > li:last-child:nth-child(odd) { grid-column: auto; }
  /* Grade de três: com 4 cartões, 2 + 2; com 5, o último par fica centrado (grade de seis). */
  .site-clean.pagina-metodo .metodo-refs[data-refs="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean.pagina-metodo .metodo-refs[data-refs="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-clean.pagina-metodo .metodo-refs[data-refs="5"] > li { grid-column: span 2; }
  .site-clean.pagina-metodo .metodo-refs[data-refs="5"] > li:nth-child(4) { grid-column: 2 / span 2; }
  /* Cabeçalho em duas colunas: título à esquerda; texto e link à direita. */
  .site-clean.pagina-metodo .metodo-referencias__cabeca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .site-clean.pagina-metodo .metodo-referencias__cabeca > .v-rotulo { grid-column: 1 / -1; }
  .site-clean.pagina-metodo .metodo-referencias__cabeca > h2 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; }
  .site-clean.pagina-metodo .metodo-referencias__cabeca > p { grid-column: 2; grid-row: 2; }
  .site-clean.pagina-metodo .metodo-referencias__cabeca > .metodo-referencias__todas { grid-column: 2; grid-row: 3; justify-self: start; }
}
@media (forced-colors: active) {
  .site-clean.pagina-metodo a.metodo-ref { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.pagina-metodo a.metodo-ref:is(:hover, :focus-visible) { border-color: Highlight; }
  .site-clean.pagina-metodo :is(.metodo-ref__ir, .metodo-referencias__todas) { color: LinkText; }
  .site-clean.pagina-metodo .metodo-ref__ir { border-top-color: CanvasText; }
}
@media print {
  .site-clean.pagina-metodo a.metodo-ref { border-color: #000; background: none; box-shadow: none; color: #000; }
  .site-clean.pagina-metodo .metodo-ref :is(.metodo-ref__sigla, .metodo-ref__sigla__prefixo, .metodo-ref__sigla__ano, .metodo-ref__nome, .metodo-ref__texto, .metodo-ref__ir) { color: #000; }
}

/* ===========================================================================
   /enterprise/
   ========================================================================= */
.site-clean.pagina-enterprise .enterprise-caminhos > .v-card { gap: 1.25rem; }
.site-clean.pagina-enterprise .v-trilha.enterprise-passos { margin: .25rem 0 0; }
.site-clean.pagina-enterprise .enterprise-passos > li { padding-bottom: 1.35rem; }
.site-clean.pagina-enterprise .enterprise-passos > li:last-child { padding-bottom: 0; }
.site-clean.pagina-enterprise .enterprise-passos p { max-width: none; padding-top: .45rem; font-size: var(--t-base); line-height: 1.6; }
.site-clean.pagina-enterprise .enterprise-passos strong { color: var(--v-titulo); font-weight: 650; }
.site-clean.pagina-enterprise .v-trilha.enterprise-etapas { margin: 0; }
.site-clean.pagina-enterprise .enterprise-etapas > li { padding-bottom: 1.25rem; }
.site-clean.pagina-enterprise .enterprise-etapas .v-trilha__titulo { margin-bottom: 0; font-weight: 600; }
.site-clean.pagina-enterprise .enterprise-configuracao .v-faixa { margin-top: var(--esp-5); }
@media (min-width: 861px) {
  .site-clean.pagina-enterprise :is(.enterprise-configuracao, .enterprise-condicoes) > .v-cabeca { margin-bottom: 0; }
}
.site-clean.pagina-enterprise .enterprise-configuracao .lead { max-width: 58ch; margin-bottom: var(--esp-6); }

/* Reconstrução assistida: sete etapas; em fileira a partir de 1280 px. */
.site-clean.pagina-enterprise .v-trilha.enterprise-fluxo { margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.site-clean.pagina-enterprise .enterprise-fluxo .v-trilha__titulo { font-weight: 650; }
@media (min-width: 1280px) {
  .site-clean.pagina-enterprise .v-trilha.enterprise-fluxo { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(1rem, 1.5vw, 1.75rem); }
  .site-clean.pagina-enterprise .v-trilha.enterprise-fluxo > li { padding: 3.5rem 0 0; }
  .site-clean.pagina-enterprise .v-trilha.enterprise-fluxo > li:not(:last-child)::after {
    top: calc(1.25rem - .5px);
    right: calc(-1 * clamp(1rem, 1.5vw, 1.75rem));
    bottom: auto;
    left: 3.25rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--v-realce), var(--v-borda));
  }
  .site-clean.pagina-enterprise .enterprise-fluxo p { font-size: var(--t-menor); line-height: 1.55; }
}
.site-clean.pagina-enterprise .enterprise-concordancia > .v-card { gap: 1rem; }
.site-clean.pagina-enterprise .enterprise-concordancia .v-rotulo { margin: 0; }
.site-clean.pagina-enterprise .enterprise-acoes { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* Visão de produto: a maquete ganha a moldura dos cartões (raio, borda, filete). */
.site-clean.pagina-enterprise .blueprint-metodo {
  position: relative;
  overflow: hidden;
  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(7, 17, 31, .28);
}
.site-clean.pagina-enterprise .blueprint-metodo::before {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 3px;
  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%);
  content: "";
  pointer-events: none;
}
.site-clean.pagina-enterprise .blueprint-metodo figcaption { color: #93A7C2; letter-spacing: .1em; }
.site-clean.pagina-enterprise .blueprint-metodo__painel { background: #F7F9FD; }

.site-clean.pagina-enterprise .enterprise-estado > .v-card { gap: 1rem; }
/* Quatro cartões em 2 × 2: a nota do asterisco fica logo abaixo da grade. */
.site-clean.pagina-enterprise .enterprise-estado { margin-bottom: var(--esp-4); }
/* W5 (03/10/2026): bloco curto de condições sem rios (alinhado à esquerda, como a D05 e a /contratacao/);
   a faixa do pacote personalizado segue a coluna dos parágrafos, com o respiro antes do botão de /fontes/. */
.site-clean.pagina-enterprise .enterprise-condicoes .prosa > p { max-width: 62ch; text-align: start; text-align-last: start; hyphens: manual; }
.site-clean.pagina-enterprise .enterprise-condicoes .prosa > .v-faixa { max-width: 62ch; }
.site-clean.pagina-enterprise .enterprise-pacote p:last-child { margin-top: var(--esp-2); }

@media (prefers-reduced-motion: reduce) {
  .site-clean:is(.pagina-metodo, .pagina-enterprise) .indice-estudo a { transition: none; }
}

/* Grades alinhadas com mais de uma fileira de cartões: componentes.css zera o row-gap
   para o subgrid (pensado para uma fileira); aqui a fileira seguinte ganha respiro. */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean:is(.pagina-metodo, .pagina-enterprise) .v-grade.v-grade--alinhada { row-gap: clamp(1rem, 2vw, 1.75rem); }
  }
}