/*
  Página Cursos e Treinamentos (/cursos-treinamentos/) — rules/figma.md.
  Arquivo IKdVIU3lEznWQXXH6UBjWz, root desktop 112:5023, root mobile 316:3553.
  Mobile aqui é parcialmente extraído (comparado nó a nó pra estrutura/reordenação onde
  aplicável) e parcialmente interpolado por julgamento de engenharia onde o frame mobile
  reaproveita padrões de outras seções — ver comentário de cabeçalho de cada section-N-*.php
  pras pendências específicas (rules/responsive.md seção 2/3.3).
*/

/* ---- container comum (mesmo padrão de header/footer/cta-hero) ---- */

.units__inner,
.mini-cta-banner__inner,
.formats__inner,
.included__inner,
.cursos-faq__inner,
.social-proof-logos__inner,
.final-cta-edu__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 2. Stats bar (mesmo padrão de .stats-bar da Paulista/Cascavel) ---- */

.stats-bar {
  background-color: var(--color-navy);
}

.stats-bar__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin-block: 0;
  padding-block: 34px;
  flex-wrap: wrap;
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-inline: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-bar__item:last-child {
  border-right: none;
}

.stats-bar__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #ffffff;
}

.stats-bar__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
}

.stats-bar__star {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

.stats-bar__mobile {
  display: none;
}

/* Marquee mobile — mesmo padrão de template-parts/page-paulista/section-2-stats.php e
   css/page-paulista.css (rules/responsive.md 3.1, estrutura própria). Track duplicado 2x
   lado a lado (width: max-content), anima translateX(-50%) em loop — ao completar metade do
   percurso mostra a 2ª cópia idêntica, looping sem "salto" visível. */
.stats-bar__marquee {
  overflow: hidden;
}

.stats-bar__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: stats-bar-marquee 22s linear infinite;
}

.stats-bar__marquee-item {
  flex-shrink: 0;
  padding: 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.stats-bar__marquee-item strong {
  font-weight: 700;
}

@keyframes stats-bar-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-bar__marquee-track {
    animation: none;
  }
}

/* ---- 3. Units (3 cards linkando pras unidades) ---- */

.units {
  background-color: #f9f4ee;
  padding-block: 96px;
}

.units__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.units__description {
  margin: 0 auto 44px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.units__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.units__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 24px 27px;
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.units__card:hover,
.units__card:focus-visible {
  border-color: rgba(241, 87, 53, 0.3);
  box-shadow:
    0px 20px 25px -5px rgba(0, 0, 0, 0.1),
    0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.units__icon {
  display: block;
  margin-bottom: 12px;
}

.units__card-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #11161f;
}

.units__card-address {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #4f5661;
}

.units__card-capacity {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-brand-orange);
}

.units__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-brand-orange);
}

.units__card-link img {
  display: block;
}

/* ---- 4. Mini CTA banner (claro, sem depoimento) ---- */

.mini-cta-banner {
  background-color: #f3f4f6;
  padding-block: 48px;
  text-align: center;
}

.mini-cta-banner__text {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #11161f;
}

.mini-cta-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  box-shadow:
    0px 10px 15px -3px rgba(236, 90, 0, 0.3),
    0px 4px 6px -4px rgba(236, 90, 0, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.mini-cta-banner__cta img {
  display: block;
}

/* ---- 5. Formats (6 cards ícone+título+descrição) ---- */

.formats {
  background-color: #ffffff;
  padding-block: 96px;
}

.formats__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.formats__description {
  margin: 0 auto 44px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.formats__desktop,
.social-proof-logos__desktop {
  display: block;
}

.formats__mobile,
.social-proof-logos__mobile {
  display: none;
}

/* Swiper — só usado no mobile (rules/html-css-js.md seção 7.1) */
.formats__swiper .swiper-slide,
.social-proof-logos__swiper .swiper-slide {
  width: auto;
}

.formats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.formats__card {
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  padding: 24px;
}

.formats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 16px;
  background-color: rgba(241, 87, 53, 0.1);
}

.formats__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.formats__card-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #11161f;
}

.formats__card-description {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  color: #4f5661;
}

/* ---- 6. Included (8 pills ícone+texto, grid 4x2) ---- */

.included {
  background-color: #f9f4ee;
  padding-block: 96px;
}

.included__heading {
  margin: 0 auto 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.included__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.included__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding-inline: 16px;
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: #11161f;
}

.included__pill img {
  display: block;
  flex: 0 0 auto;
}

/* ---- 7. FAQ (mesmo padrão .paulista-faq, prefixo próprio) ---- */

.cursos-faq {
  background-color: #ffffff;
  padding-block: 96px;
}

.cursos-faq__heading {
  margin: 0 auto 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: #11161f;
  text-align: center;
}

.cursos-faq__list {
  max-width: 704px;
  margin: 0 auto;
}

.cursos-faq__item {
  border-bottom: 1px solid #e1ddd7;
}

.cursos-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #11161f;
}

.cursos-faq__answer {
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4f5661;
  transition: max-height 0.25s ease;
}

.cursos-faq__item.active .cursos-faq__answer {
  max-height: 200px;
  padding-bottom: 20px;
}

.cursos-faq__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cursos-faq__item.active .cursos-faq__icon {
  transform: rotate(180deg);
}

/* ---- 8. Social proof — só logos (sem depoimentos/vídeos) ---- */

.social-proof-logos {
  background-color: #f9f4ee;
  padding-block: 96px;
  text-align: center;
}

.social-proof-logos__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #4f5661;
}

.social-proof-logos__heading {
  max-width: 700px;
  margin: 0 auto 48px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
}

.social-proof-logos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 840px;
  margin-inline: auto;
}

.social-proof-logos__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.04);
}

.social-proof-logos__card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0.7;
}

/* ---- 9. Final CTA (contexto educacional) ---- */

.final-cta-edu {
  background-color: #f9f4ee;
  padding-block: 90px;
  text-align: center;
}

.final-cta-edu__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 16px;
  border-radius: 9999px;
  background-color: rgba(0, 201, 80, 0.2);
  color: #4f5661;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
}

.final-cta-edu__badge img,
.final-cta-edu__cta img {
  display: block;
  flex: 0 0 auto;
}

.final-cta-edu__heading {
  max-width: 850px;
  margin: 0 auto 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
}

.final-cta-edu__description {
  max-width: 700px;
  margin: 0 auto 32px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
}

.final-cta-edu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  padding-inline: 32px;
  margin-bottom: 32px;
  border-radius: 9999px;
  background-color: var(--color-brand-green);
  box-shadow:
    0px 20px 25px -5px rgba(0, 201, 80, 0.3),
    0px 8px 10px -6px rgba(0, 201, 80, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.final-cta-edu__trust {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  color: #4f5661;
}

.final-cta-edu__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.final-cta-edu__trust img {
  display: block;
  flex: 0 0 auto;
}

/* ---- Footer variante Cursos e Treinamentos (mais enxuto que footer-paulista.php: só copyright) ---- */

.site-footer-cursos-treinamentos {
  background-color: var(--color-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-cursos-treinamentos__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding: 24px 20px;
  text-align: center;
}

.site-footer-cursos-treinamentos__copyright {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  color: #ffffff;
}

/* =====================================================================
   Responsivo — parcialmente extraído do frame mobile (316:3553), parcialmente interpolado
   (rules/responsive.md seção 2/3.3) onde o mobile reaproveita padrão de outra seção sem
   customizar. Reordenação Foz↔Cascavel no mobile (seção 3) reflete a ordem real do frame
   mobile (316:3629/3643/3656): São Paulo, Foz do Iguaçu, Cascavel — diferente da ordem desktop
   (São Paulo, Cascavel, Foz).
   ===================================================================== */

@media (max-width: 1024px) {
  .units__grid,
  .formats__grid,
  .social-proof-logos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .included__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .stats-bar__desktop {
    display: none;
  }

  .stats-bar__mobile {
    display: block;
  }

  .units__grid,
  .formats__grid,
  .included__grid,
  .social-proof-logos__grid {
    grid-template-columns: 1fr;
  }

  /* Ordem real do frame mobile (316:3628 CITYS): São Paulo, Foz do Iguaçu, Cascavel. */
  .units__grid li:nth-child(2) {
    order: 3;
  }

  .units__grid li:nth-child(3) {
    order: 2;
  }

  /* 24px, não 26 — Figma real confirmado (node 316:3553) em 6 headings de seção mobile. */
  .units__heading,
  .formats__heading,
  .included__heading,
  .cursos-faq__heading,
  .social-proof-logos__heading,
  .final-cta-edu__heading {
    font-size: 24px;
    line-height: 1.3;
  }

  /* Esses dois usam peso 500 no mobile (Figma), não o 700 do desktop — confirmado via
     REST, consistente nos 2 (font-weight explícito no nó de texto, não é acidente). */
  .formats__heading,
  .included__heading {
    font-weight: 500;
  }

  /* .mini-cta-banner__text não é heading (é <p>), mas o Figma mobile mostra 24px/500 — bem
     maior que os 18px/400 do desktop, mudança real, não erro de leitura. */
  .mini-cta-banner__text {
    font-size: 24px;
    font-weight: 500;
  }

  /* Descrições de seção sem override nenhum até agora (herdavam 18px do desktop). */
  .units__description {
    font-size: 12px;
  }

  .formats__description,
  .final-cta-edu__description {
    font-size: 16px;
  }

  /* Cards de formato (seção 5) — título MAIOR que o desktop (18→20), descrição maior
     também (14→16), Figma real. */
  .formats__card-title {
    font-size: 20px;
  }

  .formats__card-description {
    font-size: 16px;
    line-height: 24px;
  }

  /* Pergunta do FAQ — 16px→12px, bem menor que o desktop. */
  .cursos-faq__question {
    font-size: 12px;
  }

  .social-proof-logos__eyebrow {
    font-size: 12px;
  }

  .final-cta-edu {
    background-color: #ffffff;
  }

  /* Padding vertical de volta (era 0), horizontal assimétrico — mesmo padrão do
     .social-proof__logos-block da eventos-corporativos (esquerda mantida, direita zerada,
     pedido do usuário 2026-08-31). */
  .social-proof-logos {
    padding-block: 50px;
  }

  .social-proof-logos__inner {
    padding-right: 0;
  }

  .final-cta-edu__trust {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Formatos e logos: grid estático vira Swiper no mobile — decisão do usuário 2026-08-19
     (rules/html-css-js.md seção 7.1, mesmo padrão já usado na paulista/cascavel/foz). */
  .formats__desktop,
  .social-proof-logos__desktop {
    display: none;
  }

  .formats__mobile,
  .social-proof-logos__mobile {
    display: block;
  }

  /* Card do carrossel de formatos — mesmo layout do why-choose (Figma node 316:3948, mesmo
     componente 350x350 quadrado, fundo bege #f9f4ee, sem borda — diferente do card branco
     com borda do desktop). Texto mantido, só layout/fonte/fundo mudam (pedido do usuário
     2026-08-31). Confirmado via export real do nó (não estimado): ícone continua tint
     laranja claro (rgba(241,87,53,.1), igual ao já usado), título 20px/600, descrição
     16px/400 (já corrigidos antes; aqui só o layout/fundo do card muda). */
  .formats__swiper .swiper-slide {
    width: 350px;
  }

  /* Sem os margin-bottom de ícone/título (desktop) — o gap:15px do .formats__card já cuida
     do espaço entre eles, margin duplicaria. */
  .formats__swiper .formats__icon,
  .formats__swiper .formats__card-title {
    margin: 0;
  }

  .formats__swiper .formats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 350px;
    height: 350px;
    padding-inline: 37.5px;
    background-color: #f9f4ee;
    border: none;
    text-align: center;
  }

  .social-proof-logos__swiper .swiper-slide {
    width: 160px;
  }
}

/*
  Scroll reveal (fade + slide de baixo pra cima ao entrar na viewport) — mesmo padrão sem frame
  Figma reaproveitado de page-paulista/js/css (pedido original do usuário, 2026-08-18),
  aplicado aqui às seções desta página. Hero (seção 1) fica de fora de propósito.
*/

.stats-bar__item,
.units__heading,
.units__description,
.units__card,
.mini-cta-banner__inner,
.formats__heading,
.formats__description,
.formats__card,
.included__heading,
.included__pill,
.cursos-faq__heading,
.cursos-faq__item,
.social-proof-logos__eyebrow,
.social-proof-logos__heading,
.social-proof-logos__card,
.final-cta-edu__inner {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.stats-bar__item.is-visible,
.units__heading.is-visible,
.units__description.is-visible,
.units__card.is-visible,
.mini-cta-banner__inner.is-visible,
.formats__heading.is-visible,
.formats__description.is-visible,
.formats__card.is-visible,
.included__heading.is-visible,
.included__pill.is-visible,
.cursos-faq__heading.is-visible,
.cursos-faq__item.is-visible,
.social-proof-logos__eyebrow.is-visible,
.social-proof-logos__heading.is-visible,
.social-proof-logos__card.is-visible,
.final-cta-edu__inner.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .stats-bar__item,
  .units__heading,
  .units__description,
  .units__card,
  .mini-cta-banner__inner,
  .formats__heading,
  .formats__description,
  .formats__card,
  .included__heading,
  .included__pill,
  .cursos-faq__heading,
  .cursos-faq__item,
  .social-proof-logos__eyebrow,
  .social-proof-logos__heading,
  .social-proof-logos__card,
  .final-cta-edu__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}