/* Produto (/produto/) · composição da página no sistema de componentes (W19, 26/09/2026).
   Só /produto/ consome. Carregar depois de componentes.css e antes da camada viva (vivo*.css).
   Os cartões aprovados de #modalidades continuam em produto-cartoes.css, sem alteração.
   Sem text-align aqui: o alinhamento vem de style.css e dos componentes (decisão 3). */

/* ---------------------------------------------------------------------------
   Herói: estado completo (#estado-atual) e índice da página em pílulas mono.
   ------------------------------------------------------------------------- */
.site-clean .m24 .produto-heroi .produto-estado {
  max-width: 64ch;
  background: linear-gradient(rgba(56, 232, 255, .05), rgba(56, 232, 255, .05)), var(--cor-fundo-escuro-elevado);
  scroll-margin-top: 7rem;
}
.site-clean .m24 .produto-heroi .produto-estado .v-estado { margin: 0 0 .35rem; color: var(--v-estado-cor); }
.site-clean .m24 .produto-heroi .produto-estado p:not(.v-estado) {
  color: var(--v-suave);
  font-size: .9375rem;
  line-height: 1.65;
}
/* Celular: sem a caixa, o selo cabe numa linha e o texto usa a largura toda. */
@media (max-width: 480px) {
  .site-clean .m24 .produto-heroi .produto-estado { gap: .75rem; padding: 0; border: 0; background: none; }
  .site-clean .m24 .produto-heroi .produto-estado::before { display: none; }
  /* FID-P6-09: o vidro do F11 (futuro.css, .v-faixa com a força de :not(.home-clean) main) vencia a
     regra acima e deixava uma caixa sem folga, com o texto na borda e o selo sobre o contorno.
     Mesma força aqui: no celular a caixa sai de fato e o texto fica solto. */
  .site-clean.tema-escuro:not(.home-clean) main .produto-heroi .produto-estado { padding: 0; border: 0; background: none; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .produto-heroi .produto-estado::before { display: none; }
}

/* O índice ocupa a largura inteira do herói, abaixo do título e do lead. */
.site-clean .m24 .m24-hero.produto-heroi > .m24-wrap > .produto-indice { grid-column: 1 / -1; }
.site-clean .m24 .m24-hero.produto-heroi .produto-indice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #1C3150;
  border-radius: 0;
  background: none;
}
.site-clean .m24 .m24-hero.produto-heroi .produto-indice a {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  max-width: 100%;
  padding: .6rem 1.1rem;
  border: 1px solid #2C4A70;
  border-radius: 999px;
  background: rgba(7, 16, 29, .78);
  color: #C9D6E8;
  font: 500 var(--t-mini)/1.3 var(--fonte-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.site-clean .m24 .m24-hero.produto-heroi .produto-indice :is(.m24-index__numero, .m24-index__seta) {
  flex: none;
  color: var(--cor-acento-claro);
  font: inherit;
  letter-spacing: .12em;
}
.site-clean .m24 .m24-hero.produto-heroi .produto-indice a:hover {
  border-color: var(--cor-marca-clara);
  background: rgba(11, 92, 232, .28);
  color: #FFFFFF;
}
.site-clean .m24 .m24-hero.produto-heroi .produto-indice a:focus-visible {
  outline: 3px solid var(--cor-acento-claro);
  outline-offset: 3px;
  background: rgba(11, 92, 232, .28);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   #modalidades: pé do painel aprovado, alinhado às colunas dos cartões.
   Nota à esquerda (duas colunas), chamada à direita (terceira coluna).
   ------------------------------------------------------------------------- */
.site-clean .m24 .produto-modalidades__pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 42rem;
}
/* Fundos opacos: a chuva de dados da camada viva passa por trás do painel, não por dentro. */
.site-clean .m24 .produto-modalidades__pe .v-faixa {
  max-width: none;
  margin: 0;
  align-content: center;
  background: linear-gradient(rgba(56, 232, 255, .05), rgba(56, 232, 255, .05)), var(--cor-fundo-escuro-elevado);
}
.site-clean .m24 .produto-modalidades__pe .v-faixa p { color: var(--v-suave); font-size: var(--t-menor); line-height: 1.6; }
.site-clean .m24 .produto-modalidades__pe .v-cta { display: flex; width: 100%; align-self: center; background: var(--cor-fundo-escuro-elevado); }
.site-clean .m24 .produto-modalidades__pe .v-cta:hover { background: #10213A; }
@media (min-width: 1024px) {
  .site-clean .m24 .produto-modalidades__pe {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1rem, 2vw, 1.75rem);
    max-width: none;
  }
  .site-clean .m24 .produto-modalidades__pe .v-cta { width: auto; }
}
/* Largo: os quatro cartões ficam numa fileira (v-grade--4); nota sob as três primeiras colunas e
   chamada sob a quarta, com o recuo interno dos cartões. */
@media (min-width: 1280px) {
  .site-clean .m24 .produto-modalidades__pe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-clean .m24 .produto-modalidades__pe .v-faixa { grid-column: span 3; }
  .site-clean .m24 .produto-modalidades__pe .v-cta { margin-inline: clamp(1.5rem, 2.4vw, 2.25rem); }
}

/* ---------------------------------------------------------------------------
   #contratacao e #avaliados: fichas claras na anatomia dos cartões aprovados.
   Desktop: as linhas do dl também se alinham entre os dois cartões (subgrid).
   ------------------------------------------------------------------------- */
.site-clean .m24 .produto-fichas { margin-bottom: 0; }
.site-clean .m24 .produto-fichas .v-card__linhas dd { color: var(--v-texto); }
/* O componente alinha a partir de 1024 px; estas grades já têm duas colunas a partir de 720 px. */
@media (min-width: 720px) and (max-width: 1023px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .m24 .produto-fichas.v-grade--alinhada { grid-template-rows: repeat(var(--v-linhas), auto); row-gap: 0; }
    /* Com três cartões, o terceiro desce para outra linha e precisa de espaço acima. */
    .site-clean .m24 .produto-fichas--comum.v-grade--alinhada { row-gap: clamp(1rem, 2vw, 1.75rem); }
    .site-clean .m24 .produto-fichas > .v-card { display: grid; grid-row: span var(--v-linhas); grid-template-rows: subgrid; row-gap: 1.15rem; align-content: start; }
    .site-clean .m24 .produto-fichas > .v-card > .v-cta { align-self: end; }
  }
}
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .m24 .produto-fichas > .v-card > .v-card__linhas { display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .site-clean .m24 .produto-fichas--avaliados > .v-card > .v-card__linhas { grid-row: span 2; }
  }
}
/* Cartões largos: rótulo à esquerda e texto à direita, como uma ficha técnica.
   A coluna acompanha o corpo mono (que cresce em telas largas) e comporta o rótulo
   mais longo ("O que não vai ao dossiê") numa linha. */
@media (min-width: 1280px) {
  .site-clean .m24 .produto-fichas .v-card__linhas > div {
    display: grid;
    grid-template-columns: calc(var(--t-mini) * 17.5) minmax(0, 1fr);
    gap: 0 clamp(1rem, 2vw, 2rem);
    align-items: baseline;
  }
  .site-clean .m24 .produto-fichas .v-card__linhas dt { margin: 0; }
}

/* O que vale para os quatro: o cartão Âncoras e sócios empilha rótulo e texto em qualquer largura
   (cartão estreito de três colunas; sem subgrid nem ficha técnica). */
.site-clean .m24 .produto-fichas--comum > .v-card > .v-card__linhas { display: block; }
.site-clean .m24 .produto-fichas--comum .v-card__linhas > div { display: block; }
.site-clean .m24 .produto-fichas--comum .v-card__linhas dt { margin: 0 0 .4rem; }
/* Mesmo corpo de texto dos cartões vizinhos, também em Contratação (#adicionais). */
.site-clean .m24 :is(.produto-fichas--comum, .contratacao-adicionais) > .v-card > .v-card__linhas { align-content: start; }
.site-clean .m24 :is(.produto-fichas--comum, .contratacao-adicionais) .v-card__linhas dd { font-size: inherit; color: var(--v-texto); }

/* Regras de proteção: faixa na largura da grade, com as regras lado a lado no desktop. */
.site-clean .m24 .produto-regras {
  --v-faixa-fundo: #FFFFFF;
  gap: .25rem;
  max-width: none;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}
.site-clean .m24 .produto-regras__lista { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; }
.site-clean .m24 .produto-regras__lista > div { padding: 1rem 0; border-bottom: 1px solid var(--v-borda); }
.site-clean .m24 .produto-regras__lista > div:last-child { padding-bottom: 0; border-bottom: 0; }
.site-clean .m24 .produto-regras__lista dt {
  margin: 0 0 .4rem;
  color: var(--v-titulo);
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.site-clean .m24 .produto-regras__lista dd { max-width: 60ch; margin: 0; color: var(--v-texto); font-size: var(--t-menor); line-height: 1.6; }
@media (min-width: 1024px) {
  .site-clean .m24 .produto-regras__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-clean .m24 .produto-regras__lista > div { padding: .75rem clamp(1.25rem, 2.5vw, 2.25rem) 0; border-bottom: 0; }
  .site-clean .m24 .produto-regras__lista > div:first-child { padding-left: 0; }
  .site-clean .m24 .produto-regras__lista > div:last-child { padding-right: 0; }
  .site-clean .m24 .produto-regras__lista > div + div { border-left: 1px solid var(--v-borda); }
}

@media (prefers-reduced-motion: reduce) {
  .site-clean .m24 .m24-hero.produto-heroi .produto-indice a { transition: none; }
}
/* W19, D04: um só corpo para o mesmo papel. O texto de abertura das seções segue o corpo dos
   cartões, e as listas de Empresa, Pessoa física e Regras de proteção não caem para 14 px. */
.site-clean .m24--produto .m24-copy { font-size: var(--t-corpo); }
.site-clean .m24--produto :is(.v-card__linhas, .produto-regras__lista) dd { font-size: var(--t-base); line-height: 1.6; }