/*
  Página Formações: ajustes finais do Clube Fiel (pedidos de 30/09/2026, feitos em 01/10/2026).
  Só esta página carrega este arquivo; estilo.css continua igual. Para voltar: DEV-LOCAL/backup-antes-ajustes-cf-2026-10-01
*/

/* destaque das 40 horas: um selo no alto do texto, no azul-marinho do site (o parágrafo abaixo continua igual) */
.formacoes-horas{display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;margin:0 0 22px;padding:14px 24px 14px 20px;
  border-radius:14px;background:var(--navy);box-shadow:0 18px 34px -22px rgba(0,37,73,.6)}
.formacoes-horas strong{display:flex;align-items:baseline;gap:6px;font-size:3rem;font-weight:800;line-height:1;color:#fff}
.formacoes-horas strong span{font-size:1.25rem}
.formacoes-horas > span{max-width:8.5em;font-size:1.05rem;font-weight:700;line-height:1.3;color:#DCE8F5}
@media (max-width:767px){
  .formacoes-horas{gap:12px;padding:12px 18px 12px 16px}
  .formacoes-horas strong{font-size:2.5rem}
}

/* Planejamento estratégico: seção própria em outra cor, o verde da marca (o mesmo das Formações no Quem Somos),
   com o texto no azul-marinho do site (contraste 8:1) */
.formacoes-planejamento{background:#A6CE38;color:var(--navy)}
.formacoes-planejamento-texto{max-width:820px;margin-inline:auto;text-align:center}
.formacoes-planejamento-texto h2{color:var(--navy);text-wrap:balance}
.formacoes-planejamento-texto p{margin:0;font-size:1.08rem;font-weight:500}

/* o botão repetido no fim dos cartões das coleções de Formações */
.formacoes-chamada{margin:36px 0 0;text-align:center}

/* ensino intencional (01/10/2026): faixa azul-marinho (a mesma do topo da página), entre o texto das 40 horas e a faixa
   verde; o texto à esquerda e o vídeo em pé à direita, com o play vermelho do Quem Somos (pagina-formacoes.js).
   No celular, o vídeo vem abaixo do texto. */
.formacoes-intencao{background:var(--navy);color:#DCE8F5}
.formacoes-intencao-grade{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center;max-width:960px;margin-inline:auto}
.formacoes-intencao .rotulo{color:#8FD3FF}
.formacoes-intencao h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem);text-wrap:balance}
.formacoes-intencao-texto p{font-size:1.05rem}
.formacoes-intencao-frase{margin:22px 0 26px;padding-left:16px;border-left:4px solid #A6CE38;font-size:1.2rem;font-weight:700;
  line-height:1.45;color:#fff}
.formacoes-video{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0B1B2E;
  box-shadow:0 0 0 6px rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.8)}
.formacoes-video video{display:block;width:100%;height:100%;object-fit:cover}
.formacoes-video-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;
  border-radius:inherit;background:transparent;cursor:pointer}
.formacoes-video-play svg{display:block;width:64px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));transition:transform .2s ease}
.formacoes-video-play rect{fill:#FF0000}
.formacoes-video-play:hover svg{transform:scale(1.08)}
.formacoes-video-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.formacoes-video.tocando .formacoes-video-play{display:none}
@media (max-width:1024px){ .formacoes-intencao-grade{grid-template-columns:1fr 260px;gap:40px} }
@media (max-width:767px){
  .formacoes-intencao-grade{grid-template-columns:1fr;gap:32px}
  .formacoes-video{width:min(300px,80%);margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){ .formacoes-video-play svg{transition:none} }

/* Cases de sucesso (08/10/2026): um cartão branco por município, com uma foto grande e duas menores e o nome da cidade
   embaixo. Três lado a lado no computador e no tablet; no celular, um embaixo do outro. */
.formacoes-cases .secao-topo{margin-bottom:34px}
.cases-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0}
.case{margin:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(0,37,73,.45)}
.case-fotos{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.case-fotos img{display:block;width:100%;height:auto;object-fit:cover;background:var(--fundo)}
.case-fotos img:first-child{grid-column:1 / -1;aspect-ratio:3/2}
.case-fotos img:not(:first-child){aspect-ratio:1}
.case figcaption{padding:14px 18px 16px;font-size:1.05rem;font-weight:800;color:var(--navy)}
.case figcaption span{margin-left:6px;padding:2px 7px;border-radius:5px;background:var(--fundo);font-size:.75rem;font-weight:700;color:#52606D;vertical-align:2px}
@media (max-width:1024px){ .cases-grade{gap:18px} .case figcaption{padding:12px 14px 14px;font-size:.95rem} }
@media (max-width:767px){ .cases-grade{grid-template-columns:1fr;gap:22px;max-width:480px;margin-inline:auto} }