/* W19 · grupo institucional-b: Confiança, Fontes, Contato, Privacidade, Área interna e 404.
   Ajustes locais sobre componentes.css (carregado logo antes). Todas as regras ficam
   presas às páginas do grupo: .m24--confianca, .m24--fontes, .m24--contato,
   main.privacidade-contato, main.ib-area-interna e .erro-404 / main.ib-404.
   Sem text-align manual: o alinhamento vem de componentes.css e style.css. */

/* ---------------------------------------------------------------------------
   Comum às páginas m24 do grupo: selo no herói, ações e fecho.
   ------------------------------------------------------------------------- */
.site-clean :is(.m24--confianca, .m24--fontes, .m24--contato) .m24-hero .v-estado { margin: 0 0 var(--esp-5); }
.site-clean :is(.m24--confianca, .m24--fontes, .m24--contato, .ib-area-interna, .ib-404) .ib-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: center;
  margin: var(--esp-6) 0 0;
}
.site-clean :is(.m24--confianca, .m24--fontes) .ib-apos-grade { margin: 0; }

/* ---------------------------------------------------------------------------
   Confiança (/conformidade/)
   ------------------------------------------------------------------------- */
/* Detalhe técnico recolhível: mesma borda e raio da família de cartões claros. */
.site-clean .m24--confianca .protecao-detalhe {
  margin-top: var(--esp-2);
  padding: 0 clamp(1.1rem, 2vw, 1.75rem);
  border: 1px solid #D6DFEC;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(7, 17, 31, .05);
}
.site-clean .m24--confianca .protecao-detalhe summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  list-style: none;
}
.site-clean .m24--confianca .protecao-detalhe summary::-webkit-details-marker { display: none; }
.site-clean .m24--confianca .protecao-detalhe summary::after {
  flex: none;
  color: var(--cor-marca);
  font: 500 1.25rem/1 var(--fonte-mono);
  content: "+";
}
.site-clean .m24--confianca .protecao-detalhe[open] summary::after { content: "−"; }
.site-clean .m24--confianca .protecao-detalhe summary:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 3px; border-radius: 6px; }
.site-clean .m24--confianca .protecao-detalhe .prosa { padding: 0 0 var(--esp-5); border-top: 1px solid #D6DFEC; }
.site-clean .m24--confianca .protecao-detalhe .prosa p { max-width: 76ch; }
.site-clean .m24--confianca .protecao-detalhe .prosa > :first-child { margin-top: var(--esp-4); }

/* 01 · Site e assistente: quatro cartões em 2 × 2 até 1599 px (títulos longos não
   abrem vãos na linha alinhada) e em fileira única a partir de 1600 px. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .site-clean .m24--confianca #site-publico .v-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Grades alinhadas com mais de uma fileira: componentes.css zera o row-gap (subgrid);
   a margem no primeiro cartão de cada nova fileira devolve o respiro entre elas. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .site-clean .m24--confianca #site-publico .v-grade--alinhada > .v-card:nth-child(n + 3) { margin-top: clamp(1rem, 2vw, 1.75rem); }
}
/* #produto: seis cartões em 2 colunas entre 1024 e 1279 px (títulos de quatro linhas
   em três colunas estreitas); três colunas a partir de 1280 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-clean .m24--confianca #produto .v-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean .m24--confianca #produto .v-grade--alinhada > .v-card:nth-child(n + 3) { margin-top: clamp(1rem, 2vw, 1.75rem); }
}
@media (min-width: 1280px) {
  .site-clean .m24--confianca #produto .v-grade--alinhada > .v-card:nth-child(n + 4) { margin-top: clamp(1rem, 2vw, 1.75rem); }
}

/* Painel escuro #produto: a chamada fica logo abaixo da grade. */
.site-clean .m24--confianca #produto .v-grade { margin-bottom: var(--esp-5); }

/* Cartão de conexão para Método (#governanca). */
.site-clean .m24--confianca .ib-conexao { gap: var(--esp-5); }
.site-clean .m24--confianca .ib-conexao .v-rotulo { margin-bottom: var(--esp-3); }
.site-clean .m24--confianca .ib-conexao h2.v-card__nome { max-width: 22ch; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); }
.site-clean .m24--confianca .ib-conexao__corpo { display: grid; gap: var(--esp-5); justify-items: start; }
.site-clean .m24--confianca .ib-conexao__corpo .v-card__texto { max-width: 62ch; }
@media (min-width: 1024px) {
  .site-clean .m24--confianca .ib-conexao {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    padding: clamp(2rem, 3vw, 3rem);
  }
}

/* Fecho de Privacidade: título à esquerda, texto e chamadas à direita. */
.site-clean .m24--confianca .ib-fecho h2 { max-width: 20ch; margin: 0; font-size: var(--t-h2); font-weight: 600; line-height: 1.18; text-wrap: balance; }
.site-clean .m24--confianca .ib-fecho__corpo > p { max-width: 66ch; }
.site-clean .m24--confianca .ib-fecho__corpo > p:last-of-type { margin-bottom: 0; }
.site-clean .m24--confianca .ib-fecho__corpo .ib-acoes { margin-top: var(--esp-6); }
@media (min-width: 1024px) {
  .site-clean .m24.m24--confianca .m24-section > .m24-wrap.ib-fecho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
}
@media (max-width: 1023px) {
  .site-clean .m24--confianca .ib-fecho__cabeca { margin-bottom: var(--esp-5); }
}

/* ---------------------------------------------------------------------------
   Fontes (/fontes/) — página escura; fontes-dark.css força cor de h1–h4 e dt.
   ------------------------------------------------------------------------- */
/* Faixa do estado próprio das fontes, logo abaixo do lead do herói. */
.site-clean .m24--fontes .m24-hero .ib-estado-fontes { margin-top: var(--esp-5); }
.site-clean .m24--fontes .m24-hero .ib-estado-fontes p { font-size: var(--t-menor); line-height: 1.6; }

/* Índice das famílias: mesma borda e raio dos cartões escuros. */
.site-clean.pagina-fontes .m24--fontes .m24-index { border-color: #22385A; border-radius: 14px; background: linear-gradient(180deg, var(--cor-fundo-escuro-cartao) 0%, var(--cor-fundo-escuro-elevado) 100%); }
.site-clean.pagina-fontes .m24--fontes .m24-index a { border-color: #22385A; }

/* Ficha de fonte: cartão escuro largo — cabeçalho à esquerda, linhas à direita.
   Cada origem continua com uma faixa completa (nunca três cartões estreitos). */
.site-clean .m24--fontes .ib-fontes-lista { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.site-clean .m24--fontes .ib-fonte { gap: var(--esp-5); }
.site-clean .m24--fontes .ib-fonte__cabeca { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.site-clean .m24--fontes .ib-fonte__cabeca > * { margin: 0; }
.site-clean .m24--fontes .ib-fonte .v-card__nome { max-width: 26ch; }
.site-clean .m24--fontes .ib-fonte__origem { max-width: 46ch; color: var(--v-suave); font-size: var(--t-menor); line-height: 1.6; }
/* Referência oficial: no celular fecha o cartão; no desktop fica sob o cabeçalho. */
.site-clean .m24--fontes .ib-fonte > .v-cta { margin-top: 0; }
.site-clean .m24--fontes .ib-fonte__linhas dd { font-size: .9375rem; line-height: 1.65; }
.site-clean .m24--fontes .ib-fonte__linhas dd a { color: var(--v-acento); text-underline-offset: .2em; }
.site-clean .m24--fontes .ib-fonte__linhas dd a:hover { color: #FFFFFF; }
@media (min-width: 1101px) {
  .site-clean .m24--fontes .ib-fonte {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: var(--esp-5) clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    padding: clamp(1.75rem, 2.6vw, 2.75rem);
  }
  .site-clean .m24--fontes .ib-fonte__cabeca { grid-column: 1; grid-row: 1; }
  .site-clean .m24--fontes .ib-fonte__linhas { grid-column: 2; grid-row: 1 / span 2; }
  .site-clean .m24--fontes .ib-fonte > .v-cta { grid-column: 1; grid-row: 2; }
}
@media (min-width: 720px) {
  /* Linhas em 2 × 2: o alcance da informação fecha a segunda fileira. */
  .site-clean .m24--fontes .ib-fonte__linhas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
}
@media (min-width: 720px) and (max-width: 1100px) {
  /* Cartão em coluna única e largo: a chamada tem a largura do texto. */
  .site-clean .m24--fontes .ib-fonte > .v-cta { align-self: start; min-width: 16rem; }
}

/* Notas da página (pessoas físicas, dependência da API) na faixa de destaque. */
.site-clean .m24--fontes .v-faixa { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site-clean .m24--fontes .ib-faixa-pf p:last-child { margin-top: var(--esp-2); }

/* Da fonte à evidência: painel com brilhos (fontes-dark.css pinta as seções de chapado). */
.site-clean.pagina-fontes .m24--fontes .m24-section.v-painel {
  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 .m24--fontes .ib-contexto { counter-reset: ib-contexto; margin-bottom: var(--esp-5); }
.site-clean .m24--fontes .ib-contexto > .v-card { gap: .75rem; counter-increment: ib-contexto; }
.site-clean .m24--fontes .ib-contexto > .v-card::after {
  order: -1;
  color: var(--v-acento);
  content: counter(ib-contexto, decimal-leading-zero);
  font: 500 var(--t-mini)/1 var(--fonte-mono);
  letter-spacing: .12em;
}
.site-clean.pagina-fontes .m24--fontes .ib-contexto .v-card dt { margin: 0; color: var(--v-titulo); font-size: clamp(1.25rem, 1rem + .6vw, 1.65rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.site-clean .m24--fontes .ib-contexto .v-card dd { margin: 0; color: var(--v-suave); line-height: 1.6; }
.site-clean .m24--fontes .ib-evidencia .fontes-conclusao { max-width: 76ch; margin-top: var(--esp-6); }

/* ---------------------------------------------------------------------------
   Contato (/contato/) — acabamento; formulário, campos e fluxo inalterados.
   ------------------------------------------------------------------------- */
.site-clean .m24--contato .m24-contact-context .v-cabeca { margin-bottom: var(--esp-5); }
.site-clean .m24--contato .m24-contact-context .v-faixa { margin: var(--esp-5) 0; }
.site-clean .m24--contato .m24-contact-context .v-faixa p { font-size: var(--t-menor); line-height: 1.65; }
.site-clean .m24--contato .ib-contato-email { margin-bottom: var(--esp-5); }
/* O formulário ganha a anatomia do cartão claro: raio 18, borda fina, filete cobalto → ciano. */
.site-clean .m24--contato .m24-form {
  position: relative;
  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 .m24--contato .m24-form::before {
  position: absolute;
  inset: -1px -1px 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 .m24--contato .m24-form h2 { font-weight: 650; letter-spacing: -.02em; }
.site-clean .m24--contato .m24-field :is(input, textarea) { border-color: #B9C8DD; border-radius: 10px; background: #FFFFFF; }
.site-clean .m24--contato .m24-field :is(input, textarea):hover { border-color: #8FA4C2; }
.site-clean .m24--contato .m24-actions .botao { min-width: 12rem; border-radius: 12px; }

/* ---------------------------------------------------------------------------
   Herói das páginas m24 do grupo: selo e faixa com fundo próprio, para que a
   chuva de dados da camada viva passe por trás deles sem atravessar o texto.
   ------------------------------------------------------------------------- */
.site-clean :is(.m24--confianca, .m24--fontes, .m24--contato) .m24-hero .v-estado {
  background: linear-gradient(rgba(56, 232, 255, .08), rgba(56, 232, 255, .08)), var(--cor-papel-escuro);
}
.site-clean .m24--fontes .m24-hero .ib-estado-fontes {
  background: linear-gradient(rgba(56, 232, 255, .05), rgba(56, 232, 255, .05)), var(--cor-papel-escuro);
}

/* ---------------------------------------------------------------------------
   Privacidade (/privacidade/) — só acabamento; o texto do aviso não muda.
   ------------------------------------------------------------------------- */
.site-clean main.privacidade-contato .nota.v-faixa { max-width: var(--medida); margin: 0 0 var(--esp-5); }
.site-clean main.privacidade-contato .nota.v-faixa p { color: var(--v-texto); font-size: var(--t-menor); line-height: 1.65; }
.site-clean main.privacidade-contato .prosa ul { padding-left: 0; list-style: none; }
.site-clean main.privacidade-contato .prosa ul > li { position: relative; padding-left: 1.5rem; }
.site-clean main.privacidade-contato .prosa ul > li::before {
  position: absolute;
  top: .72em;
  left: .1rem;
  width: .45rem;
  height: .45rem;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--cor-marca), var(--cor-acento-claro));
  content: "";
}

/* ---------------------------------------------------------------------------
   Área interna (/area-interna/) — dois cartões claros alinhados.
   ------------------------------------------------------------------------- */
.site-clean main.ib-area-interna .v-grade { margin: 0; }
.site-clean main.ib-area-interna .v-card__nome { max-width: 24ch; }

/* ---------------------------------------------------------------------------
   404 — chamada principal e atalho de profundidade para as modalidades.
   ------------------------------------------------------------------------- */
.site-clean main.ib-404 .erro-404 .ib-acoes { margin-top: var(--esp-6); }
.site-clean main.ib-404 .erro-404 .v-atalho { margin-top: var(--esp-5); }
.site-clean main.ib-404 .erro-404 .ib-atalho__rotulo {
  flex-basis: 100%;
  margin-bottom: .1rem;
  color: var(--v-rotulo-cor);
  font: 500 var(--t-mini)/1.4 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-clean main.ib-404 .erro-404 a.v-atalho:hover .ib-atalho__rotulo { text-decoration: underline; text-underline-offset: .25em; }