/* Videre · Na prática (/experiencias/) · ajustes locais W19 (26/09/2026).
   Selo de estado no herói e seção "Como funciona", que absorve o conteúdo próprio de
   /como-funciona/ com os componentes compartilhados (componentes.css).
   Só seletores desta página. Zonas preservadas (.caso-didatico, .x-panel, .x-ask,
   .x-controls e a investigação imersiva) ficam intocadas.
   Seletores com main.experiencias: valem com este arquivo antes ou depois de componentes.css. */

/* Selo único de estado, no herói, sob o título. */
.site-clean main.experiencias .x-heading .v-estado { margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------------------
   Seção "Como funciona": painel escuro com brilhos, em caixa, no ritmo dos
   módulos da página (investigação, perguntas, documentos).
   ------------------------------------------------------------------------- */
.site-clean main.experiencias .pratica-percurso {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1.25rem, 4vw, 4rem) clamp(2rem, 4.5vw, 3.75rem);
  border: 1px solid #1B2E4A;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  scroll-margin-top: 6rem;
}
@media (max-width: 480px) {
  .site-clean main.experiencias .pratica-percurso { padding-inline: 1rem; border-radius: 18px; }
}
.site-clean main.experiencias .pratica-percurso__cabeca { max-width: 68ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.site-clean main.experiencias .pratica-percurso__cabeca h2 { max-width: 24ch; }

/* Ficha do caso: o ponto de partida que acompanha as três profundidades. */
.site-clean main.experiencias .pratica-ficha {
  display: grid;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.2vw, 1.75rem) 1.25rem;
  border: 1px solid var(--v-borda);
  border-radius: 14px;
  background: rgba(10, 22, 38, .55);
}
.site-clean main.experiencias .pratica-ficha .v-rotulo { margin: 0; }
.site-clean main.experiencias .pratica-ficha dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  max-width: none;
  margin: 0;
}
.site-clean main.experiencias .pratica-ficha dl > div { min-width: 0; }
.site-clean main.experiencias .pratica-ficha dt {
  margin: 0 0 .35rem;
  color: var(--v-campo);
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean main.experiencias .pratica-ficha dd { margin: 0; color: var(--v-titulo); font-weight: 600; line-height: 1.35; }
.site-clean main.experiencias .pratica-ficha dd > span { display: block; margin-top: .2rem; color: var(--v-suave); font-size: var(--t-menor); font-weight: 400; }
.site-clean main.experiencias .pratica-ficha .pratica-ficha__codigo { color: var(--v-acento); font-family: var(--fonte-mono); font-weight: 500; letter-spacing: .06em; }
@media (min-width: 720px) {
  .site-clean main.experiencias .pratica-ficha dl { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .site-clean main.experiencias .pratica-ficha dl > div { padding: 0 clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--v-borda); }
  .site-clean main.experiencias .pratica-ficha dl > div:first-child { padding-left: 0; border-left: 0; }
}

/* Cartões: a grade abre logo abaixo da ficha. Três colunas só a partir de 1280 px:
   dentro do painel em caixa, entre 1024 e 1279 px, a coluna ficaria estreita demais
   para as linhas do cartão. Nessa faixa, cada cartão ocupa a largura do painel, como a
   ficha acima e a trilha abaixo, em duas colunas internas: à esquerda, a identidade
   (número, pílula, nome, subtítulo, medidor, texto) e a chamada, que fecha a coluna;
   à direita, as linhas do caso, separadas por um filete vertical. As proporções são
   as mesmas nos três cartões, e as colunas se alinham ao longo da pilha. */
.site-clean main.experiencias .pratica-percurso__grade { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-clean main.experiencias .pratica-percurso__grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(1rem, 2vw, 1.75rem); }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card {
    display: grid;
    grid-row: auto;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: clamp(2rem, 3.5vw, 3rem);
    row-gap: 1.15rem;
    align-content: start;
  }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > :not(.v-card__linhas) { grid-column: 1; }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > .v-card__texto { align-self: start; }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > .v-cta { align-self: end; margin-top: .35rem; }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > .v-card__linhas {
    grid-column: 2;
    grid-row: 1 / -1;
    align-content: start;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid var(--v-borda);
  }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > .v-card__linhas > div:first-child { padding-top: 0; }
  .site-clean main.experiencias .pratica-percurso__grade > .v-card > .v-card__linhas > div:last-child { padding-bottom: 0; border-bottom: 0; }
}
.site-clean main.experiencias .pratica-percurso .v-card__linhas dd strong { color: var(--v-titulo); font-weight: 600; }

/* Pendências do Consultor Humano: lista com seta, como na versão anterior da demonstração. */
.site-clean main.experiencias .pratica-lista { display: grid; gap: .4rem; max-width: none; margin: 0; padding: 0; list-style: none; }
.site-clean main.experiencias .pratica-lista li { position: relative; margin: 0; padding-left: 1.35rem; color: inherit; font: inherit; }
.site-clean main.experiencias .pratica-lista li::before { position: absolute; top: 0; left: 0; color: var(--v-acento); content: "→"; }

/* Aviso da representação. */
.site-clean main.experiencias .pratica-percurso__nota {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  max-width: none;
  margin: 0;
  color: var(--v-campo);
  font: 400 var(--t-mini)/1.55 var(--fonte-mono);
  letter-spacing: .03em;
}
.site-clean main.experiencias .pratica-percurso__nota::before {
  flex: none;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--cor-acento-claro);
  box-shadow: 0 0 8px rgba(56, 232, 255, .5);
  content: "";
  transform: translateY(-.05em);
}

/* Leitura do percurso: três etapas em fileira no desktop, trilha vertical abaixo. */
.site-clean main.experiencias .pratica-leitura {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--v-borda);
}
.site-clean main.experiencias .pratica-leitura__cabeca h3 {
  max-width: 28ch;
  margin: 0;
  color: var(--v-titulo);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.site-clean main.experiencias .pratica-leitura .v-trilha { margin-bottom: 0; }
.site-clean main.experiencias .pratica-leitura .v-trilha > li:last-child { padding-bottom: 0; }