/* Produto — os quatro dossiês em cartões (W19). Substitui a tabela; somente Produto consome.
   Grade: 1 coluna abaixo de 720 px (até 42rem, à esquerda); 2 × 2 entre 720 e 1279 px;
   4 colunas a partir de 1280 px (.modalidades-cards--4). Em colunas, as mesmas linhas de
   cartões vizinhos ficam alinhadas (subgrid por fileira). Sem --4, a grade antiga de 3. */
.site-clean .m24 .produto-modalidades.modalidades-painel {
  position: relative;
  overflow: hidden;
  color: var(--cor-tinta-invertida);
  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 .modalidades-painel .m24-heading h2 { color: var(--cor-tinta-invertida); }
.site-clean .m24 .modalidades-painel .m24-heading p { color: var(--cor-tinta-invertida-suave); }
.site-clean .m24 .modalidades-painel .m24-meta { color: var(--cor-acento-claro); }
.site-clean .m24 .modalidades-painel .home-proximo .link-seta { color: var(--cor-acento-claro); }
.site-clean .m24 .modalidades-painel > .env::before { display: none; }

.site-clean .m24 .modalidades-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 42rem;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.site-clean .m24 .modalidade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  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(0, 0, 0, .35);
  transition: border-color .2s ease, transform .2s ease;
}
/* Filete superior: faixa recortada (span decorativo no início do cartão) com uma tira de 4x a
   largura que corre por transform. Mesmo desenho e mesma velocidade de antes, mas composto na GPU:
   animar background-position recalculava o estilo a cada quadro na thread principal. */
.site-clean .m24 .modalidade-card__sinal {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
.site-clean .m24 .modalidade-card__sinal::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -200%;
  width: 400%;
  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%) repeat-x;
  background-size: 50% 100%;
  content: "";
  animation: cartao-sinal 6s linear infinite;
}
.site-clean .m24 .modalidade-card:nth-child(2) .modalidade-card__sinal::before { animation-delay: -2s; }
.site-clean .m24 .modalidade-card:nth-child(3) .modalidade-card__sinal::before { animation-delay: -4s; }
.site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(2) .modalidade-card__sinal::before { animation-delay: -1.5s; }
.site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(3) .modalidade-card__sinal::before { animation-delay: -3s; }
.site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(4) .modalidade-card__sinal::before { animation-delay: -4.5s; }
@keyframes cartao-sinal { from { transform: translateX(0); } to { transform: translateX(50%); } }
.site-clean .m24 .modalidade-card:hover,
.site-clean .m24 .modalidade-card:focus-within { border-color: rgba(56, 232, 255, .55); }
/* M36: o cartão só sobe com ponteiro fino que paira (no toque, o cartão não fica levantado). */
@media (hover: hover) and (pointer: fine) {
  .site-clean .m24 .modalidade-card:hover,
  .site-clean .m24 .modalidade-card:focus-within { transform: translateY(-2px); }
}

.site-clean .m24 .modalidade-card__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-clean .m24 .modalidade-card__numero { color: var(--cor-acento-claro); font: 500 var(--t-mini)/1 var(--fonte-mono); letter-spacing: .12em; }
.site-clean .m24 .modalidade-card__tipo {
  padding: .35rem .7rem;
  border: 1px solid #2C4A70;
  border-radius: 999px;
  color: #C9D6E8;
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-clean .m24 .modalidade-card__nome {
  margin: .2rem 0 0;
  color: #FFFFFF;
  font-size: clamp(1.75rem, 1.1rem + 1.1vw, 2.2rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.site-clean .m24 .modalidade-card__dossie { margin: -.35rem 0 0; color: var(--cor-acento-claro); font-weight: 600; text-align: start; text-wrap: balance; }
/* Cada item da linha fica inteiro: a quebra acontece entre itens, sem "·" solto no fim da linha. */
.site-clean .m24 .modalidade-card__dossie .nowrap { white-space: nowrap; }

.site-clean .m24 .modalidade-card__profundidade { display: grid; gap: .5rem; }
.site-clean .m24 .modalidade-card__rotulo,
.site-clean .m24 .modalidade-card__detalhes dt {
  color: #93A7C2;
  font: 500 var(--t-mini)/1.2 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Nível: 3 ou 4 barras (uma coluna por barra). */
.site-clean .m24 .modalidade-card__barras { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.site-clean .m24 .modalidade-card__barras span { height: 6px; border-radius: 999px; background: #1C3150; }
.site-clean .m24 .modalidade-card__barras .is-ativo {
  background: linear-gradient(90deg, var(--cor-marca-clara), var(--cor-acento-claro));
  box-shadow: 0 0 12px rgba(56, 232, 255, .35);
}
/* Fluxo: um pulso de luz percorre as barras ativas, da esquerda para a direita. */
.site-clean .m24 .modalidade-card__barras .is-ativo { position: relative; overflow: hidden; }
.site-clean .m24 .modalidade-card__barras .is-ativo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .9) 50%, transparent 100%);
  content: "";
  transform: translateX(-110%);
  animation: barra-fluxo 2.4s ease-in-out infinite;
}
.site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(2)::after { animation-delay: .22s; }
.site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(3)::after { animation-delay: .44s; }
.site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(4)::after { animation-delay: .66s; }
@keyframes barra-fluxo {
  0% { transform: translateX(-110%); }
  45%, 100% { transform: translateX(110%); }
}

.site-clean .m24 .modalidade-card__entrega { margin: 0; color: #E3EAF5; line-height: 1.6; text-align: start; text-align-last: start; hyphens: none; }
.site-clean .m24 .modalidade-card__detalhes { display: grid; margin: 0; border-top: 1px solid #22385A; }
.site-clean .m24 .modalidade-card__detalhes > div { padding: .95rem 0; border-bottom: 1px solid #22385A; }
.site-clean .m24 .modalidade-card__detalhes dt { margin: 0 0 .4rem; }
.site-clean .m24 .modalidade-card__detalhes dd {
  margin: 0;
  color: var(--cor-tinta-invertida-suave);
  font-size: var(--t-menor);
  line-height: 1.6;
  text-align: start;
  text-align-last: start;
  hyphens: none;
}

.site-clean .m24 .modalidade-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  margin-top: auto;
  padding: .8rem 1rem;
  border: 1px solid #2C4A70;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-clean .m24 .modalidade-card__link:hover { background: rgba(11, 92, 232, .28); border-color: var(--cor-marca-clara); }
.site-clean .m24 .modalidade-card__link:focus-visible { outline: 3px solid var(--cor-acento-claro); outline-offset: 3px; }
.site-clean .m24 .modalidade-card__link span { color: var(--cor-acento-claro); }

/* Colunas. Quatro cartões: 2 × 2 entre 720 e 1279 px, 4 colunas a partir de 1280 px.
   Grade antiga de três cartões (sem --4): 3 colunas a partir de 1024 px. */
@media (min-width: 720px) {
  .site-clean .m24 .modalidades-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (min-width: 1280px) {
  .site-clean .m24 .modalidades-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Quatro colunas estreitas: nome e respiro um pouco menores para o nome caber em até duas linhas. */
  .site-clean .m24 .modalidades-cards--4 > .modalidade-card { padding: clamp(1.25rem, 1.6vw, 2.25rem); }
  .site-clean .m24 .modalidades-cards--4 .modalidade-card__nome { font-size: clamp(1.5rem, .75rem + 1vw, 2.2rem); text-wrap: balance; }
  .site-clean .m24 .modalidades-cards--4 :is(.modalidade-card__dossie, .modalidade-card__entrega) { font-size: var(--t-base); }
}
@media (min-width: 1024px) {
  .site-clean .m24 .modalidades-cards:not(.modalidades-cards--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
/* As mesmas linhas de cartões vizinhos ficam alinhadas entre si (subgrid por fileira):
   7 filhos, com o dl de 2 linhas = 8 linhas.
   O row-gap da grade separa as fileiras do 2 × 2; dentro de cada cartão vale o row-gap
   próprio do subgrid. */
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .m24 .modalidades-cards--4 { grid-template-rows: repeat(8, auto); grid-auto-rows: auto; row-gap: clamp(1rem, 2vw, 1.75rem); }
    .site-clean .m24 .modalidades-cards--4 > .modalidade-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 1.15rem; align-content: start; }
    /* "Para quem" e "Autoria e decisão" também alinham entre vizinhos: o dl ocupa 2 linhas da subgrid. */
    .site-clean .m24 .modalidades-cards--4 .modalidade-card__detalhes { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    /* stretch: os quatro botões ficam com a altura do maior; margin-top auto anularia o stretch. */
    .site-clean .m24 .modalidades-cards--4 .modalidade-card__link { align-self: stretch; margin-top: 0; }
  }
}
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .site-clean .m24 .modalidades-cards:not(.modalidades-cards--4) { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .site-clean .m24 .modalidades-cards:not(.modalidades-cards--4) > .modalidade-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 1.15rem; align-content: start; }
    .site-clean .m24 .modalidades-cards:not(.modalidades-cards--4) .modalidade-card__link { align-self: end; }
  }
}
/* Modos da camada viva (vivo.js põe as classes no <html>). Quieto (só a pausa do usuário: desde o
   turno 15 o nível automático para no calmo; .vivo-parado mantido por compatibilidade): o filete
   congela onde está, o pulso das barras some e o cartão não se move. Calmo: o cartão não sobe; o
   filete e o pulso das barras seguem a 0,45× (regras depois do bloco de movimento reduzido, para
   vencê-lo; W19q: antes o pulso sumia no calmo e o medidor parecia parado). */
html:is(.vivo-quieto, .vivo-parado) .site-clean .m24 .modalidade-card__sinal::before { animation-play-state: paused; }
html:is(.vivo-quieto, .vivo-parado) .site-clean .m24 .modalidade-card__barras .is-ativo::after { display: none; animation: none; }
html:is(.vivo-quieto, .vivo-parado) .site-clean .m24 .modalidade-card { transition: none; }
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .m24 .modalidade-card:hover,
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean .m24 .modalidade-card:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-clean .m24 .modalidade-card,
  .site-clean .m24 .modalidade-card__link { transition: none; }
  .site-clean .m24 .modalidade-card__sinal::before,
  .site-clean .m24 .modalidade-card__barras .is-ativo::after { animation: none; }
  .site-clean .m24 .modalidade-card__barras .is-ativo::after { display: none; }
  .site-clean .m24 .modalidade-card:hover,
  .site-clean .m24 .modalidade-card:focus-within { transform: none; }
}
/* Versão calma: filete a 0,45× (6 s → 13,3 s, fora da faixa de 4-6 s), mesma defasagem de um
   terço entre os cartões. Especificidade e !important vencem o corte global de style.css sob
   movimento reduzido (*{animation-duration:.01ms!important}) e o animation:none acima; sem JS
   não há classe, e o movimento reduzido continua estático. */
html.vivo-calmo .site-clean .m24 .modalidade-card__sinal::before { animation: cartao-sinal 13.3s linear infinite !important; }
html.vivo-calmo .site-clean .m24 .modalidade-card:nth-child(2) .modalidade-card__sinal::before { animation-delay: -4.43s !important; }
html.vivo-calmo .site-clean .m24 .modalidade-card:nth-child(3) .modalidade-card__sinal::before { animation-delay: -8.87s !important; }
/* Quatro cartões: defasagem de um quarto (6 s → -1,5/-3/-4,5 s; calma 13,3 s → -3,33/-6,65/-9,98 s). */
html.vivo-calmo .site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(2) .modalidade-card__sinal::before { animation-delay: -3.33s !important; }
html.vivo-calmo .site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(3) .modalidade-card__sinal::before { animation-delay: -6.65s !important; }
html.vivo-calmo .site-clean .m24 .modalidades-cards--4 > .modalidade-card:nth-child(4) .modalidade-card__sinal::before { animation-delay: -9.98s !important; }
/* Pulso das barras no calmo (W19q): o mesmo do vivo-sinais.css (vs-barra-fluxo-calmo), atravessa em
   2,4 s e descansa; ciclo de 7,2 s, fora da faixa de 4 a 6 s. */
html.vivo-calmo .site-clean .m24 .modalidade-card__barras .is-ativo::after {
  display: block;
  animation: barra-fluxo-calmo 7.2s ease-in-out infinite !important;
}
html.vivo-calmo .site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(2)::after { animation-delay: .48s !important; }
html.vivo-calmo .site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(3)::after { animation-delay: .97s !important; }
html.vivo-calmo .site-clean .m24 .modalidade-card__barras .is-ativo:nth-child(4)::after { animation-delay: 1.45s !important; }
@keyframes barra-fluxo-calmo {
  0% { transform: translateX(-110%); }
  33.3%, 100% { transform: translateX(110%); }
}
/* Cores forçadas (alto contraste do sistema): o filete e o pulso das barras somem em qualquer
   modo, inclusive na versão calma (display vence o !important de animation acima). */
@media (forced-colors: active) {
  .site-clean .m24 .modalidade-card__sinal::before,
  .site-clean .m24 .modalidade-card__barras .is-ativo::after { display: none !important; animation: none !important; }
  .site-clean .m24 .modalidade-card:hover,
  .site-clean .m24 .modalidade-card:focus-within { transform: none; }
}