/*
 * Seções novas das páginas de curso (tmp/curso/), um bloco por seção: gravado (single-curso-online.php),
 * presencial e ao vivo (tmp/curso/presencial-ao-vivo.php). Carregado só nessas páginas (functions.php,
 * abra_curso_online_assets).
 * Referência: Figma "Desktop - Cursos WP", frame de 1440px.
 */

/* ==========================================================================
   Comum: margem lateral e tamanho dos títulos das seções
   ========================================================================== */

/*
 * Até 1024px segue o .__wrapper do tema (width: 80%, ou seja 10% de cada lado), para alinhar com as
 * seções antigas. Acima disso fica em 102.4px (os 10% de 1024px, sem salto) até o conteúdo chegar
 * aos 1200px do Figma (120px de cada lado em 1440px). O % é da largura da seção, que ocupa a tela.
 *
 * O --curso-titulo é o tamanho do h2 de toda seção: 40px do Figma, 32px até 1024px e 28px no
 * celular, para os títulos terem o mesmo tamanho lado a lado. Garantia e Investimento, maiores no
 * Figma, usam múltiplos dele.
 */
.curso-hero,
.curso-sobre,
.curso-modulos,
.curso-bonus,
.curso-tutores,
.curso-duvidas,
.curso-escola,
.curso-espaco,
.curso-numeros,
.curso-avaliacoes,
.curso-acompanhamento,
.curso-certificado,
.curso-tempo,
.curso-garantia,
.curso-investimento,
.curso-um-por-cento,
.curso-faq,
.curso-flexibilidade,
.curso-localizacao,
.curso-ao-vivo {
  --curso-margem: max(102.4px, calc((100% - 1200px) / 2));
  --curso-titulo: 40px;
}

@media (max-width: 1024px) {
  .curso-hero,
  .curso-sobre,
  .curso-modulos,
  .curso-bonus,
  .curso-tutores,
  .curso-duvidas,
  .curso-escola,
  .curso-espaco,
  .curso-numeros,
  .curso-avaliacoes,
  .curso-acompanhamento,
  .curso-certificado,
  .curso-tempo,
  .curso-garantia,
  .curso-investimento,
  .curso-um-por-cento,
  .curso-faq,
  .curso-flexibilidade,
  .curso-localizacao,
  .curso-ao-vivo {
    --curso-margem: 10%;
    --curso-titulo: 32px;
  }
}

@media (max-width: 480px) {
  .curso-hero,
  .curso-sobre,
  .curso-modulos,
  .curso-bonus,
  .curso-tutores,
  .curso-duvidas,
  .curso-escola,
  .curso-espaco,
  .curso-numeros,
  .curso-avaliacoes,
  .curso-acompanhamento,
  .curso-certificado,
  .curso-tempo,
  .curso-garantia,
  .curso-investimento,
  .curso-um-por-cento,
  .curso-faq,
  .curso-flexibilidade,
  .curso-localizacao,
  .curso-ao-vivo {
    --curso-titulo: 28px;
  }
}

/* ==========================================================================
   Comum: fonte base das seções
   ========================================================================== */

/*
 * O dist/style.css põe Metropolis no body e em todo a, p, span e h1–h6 ("Ajuste de fonte no site
 * todo"). No Figma o texto corrido é Roboto e os títulos são Montserrat, então as seções partem de
 * Roboto e esses elementos herdam a fonte do bloco em que estão. A base pesa uma classe, para vencer o
 * reset do tema (section, article… { font: inherit }), e vem antes das regras de cada seção. O :is()
 * dos elementos pesa o mesmo que a regra do tema e vence por vir depois; qualquer regra com classe
 * continua valendo sobre ele.
 */
:is(.curso-hero, .curso-sobre, .curso-modulos, .curso-bonus, .curso-tutores, .curso-duvidas,
  .curso-escola, .curso-espaco, .curso-numeros, .curso-avaliacoes, .curso-acompanhamento,
  .curso-certificado, .curso-tempo, .curso-garantia, .curso-investimento,
  .curso-um-por-cento, .curso-faq, .curso-flexibilidade, .curso-localizacao,
  .curso-ao-vivo) {
  font-family: "Roboto", sans-serif;
}

:where(.curso-hero, .curso-sobre, .curso-modulos, .curso-bonus, .curso-tutores, .curso-duvidas,
  .curso-escola, .curso-espaco, .curso-numeros, .curso-avaliacoes, .curso-acompanhamento,
  .curso-certificado, .curso-tempo, .curso-garantia, .curso-investimento,
  .curso-um-por-cento, .curso-faq, .curso-flexibilidade, .curso-localizacao,
  .curso-ao-vivo) :is(a, p, span, h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

/* ==========================================================================
   SoundOff (vídeos do hero e do Espaço seguro)
   ========================================================================== */

/*
 * O "Seu vídeo já começou" do site-abra-v2 (src/features/video/sound-off), dentro do botão de play de
 * cada vídeo. Só aparece quando o vídeo começou a tocar (a classe --tocando da caixa); antes disso, ou
 * sem JS, fica o play que o botão já tinha. Os vídeos estão em seções com zoom: 1.1765, então os
 * px do Next valem direto.
 */
.curso-soundoff {
  display: none;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 90%;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, rgba(250, 0, 105, .75), rgba(103, 2, 142, .75));
}

.curso-hero__video--tocando .curso-soundoff,
.curso-espaco__video--tocando .curso-soundoff,
.curso-ao-vivo__video--tocando .curso-soundoff {
  display: flex;
}

.curso-hero__video--tocando .curso-hero__play svg,
.curso-espaco__video--tocando .curso-espaco__play svg,
.curso-espaco__video--tocando .curso-espaco__legenda {
  display: none;
}

/* Dentro de um button, que não herda a Roboto da seção. */
.curso-soundoff .curso-soundoff__texto {
  color: #FBFBFB;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  text-align: center;
}

.curso-soundoff__icone {
  box-sizing: border-box;
  width: 100px;
  margin: 20px 0;
  padding: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.curso-soundoff__icone img {
  display: block;
  width: 100%;
  height: auto;
}

/* O vídeo do Online Ao Vivo tem 466 × 243 no desktop, e o de 400px ocupava a caixa toda. Até 1024px
   ele vai para a largura toda e volta ao tamanho normal. */
@media (min-width: 1025px) {
  .curso-ao-vivo__video .curso-soundoff {
    width: 250px;
    padding: 14px;
  }

  .curso-ao-vivo__video .curso-soundoff .curso-soundoff__texto {
    font-size: 18px;
  }

  .curso-ao-vivo__video .curso-soundoff__icone {
    width: 64px;
    margin: 12px 0;
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .curso-soundoff {
    width: 220px;
    padding: 14px;
  }

  .curso-soundoff .curso-soundoff__texto {
    font-size: 15px;
  }

  .curso-soundoff__icone {
    width: 64px;
    margin: 12px 0;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .curso-soundoff {
    width: 190px;
    padding: 12px;
  }

  .curso-soundoff .curso-soundoff__texto {
    font-size: 14px;
  }

  .curso-soundoff__icone {
    width: 52px;
    margin: 10px 0;
    padding: 10px;
  }
}

/* ==========================================================================
   Seção 01: Hero (informações do curso + vídeo)
   ========================================================================== */

/*
 * A barra de navegação (tmp/abra-nav.php) é fixa, com 72px, por cima do hero. No Figma a etiqueta
 * fica a 188px do topo do frame (72px de barra + 116px), então o padding de cima já desconta a barra.
 */
.curso-hero {
  position: relative;
  overflow: hidden;
  /* Anula o zoom:85% do #view (dist/style.css) para os px daqui baterem com o Figma. Também
     resolve o iframe a 85% no Safari, como o zoom:1.1765 dos outros vídeos em style.css. */
  zoom: 1.1765;
  padding: clamp(160px, 13vw, 188px) 0 clamp(56px, 8vw, 116px);
  background: linear-gradient(179.74deg, #67028E 44.27%, #FA0069 99.78%);
}

.curso-hero *,
.curso-hero *::before,
.curso-hero *::after {
  box-sizing: border-box;
}

/* Pontilhado do canto inferior direito: só decoração, atrás do conteúdo. */
.curso-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(836px, 58%);
  aspect-ratio: 836 / 638;
  background: url("img/decoracao-borda-inferior-direita.webp") no-repeat right bottom / contain;
  pointer-events: none;
}

.curso-hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  /* Em 1440px: 500px de texto + 40px + 660px de vídeo (16:9 = 371px de altura). No Figma o vídeo é
     um pouco mais alto que a coluna de texto; com 500px a maioria dos títulos cabe em até duas
     linhas e isso se mantém. Em fr para manter a proporção ao encolher. */
  grid-template-columns: minmax(0, 500fr) minmax(0, 660fr);
  align-items: center;
  gap: clamp(32px, 3vw, 40px);
  padding: 0 var(--curso-margem);
}

.curso-hero--sem-video .curso-hero__container {
  grid-template-columns: minmax(0, 770px);
}

.curso-hero__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.curso-hero__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 147px;
  height: 32px;
  padding: 0 28px;
  border-radius: 16px;
  background: #FA0069;
  color: #FBFBFB;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 11.2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.curso-hero__title {
  margin: 24px 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-wrap: anywhere;
}

.curso-hero__desc {
  max-width: 400px;
  margin: 0 0 28px;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.16; /* o SDD diz 100%, mas no Figma as linhas ficam a ~22px */
  text-align: left;
}

/* Leva à Seção 15. */
.curso-hero .curso-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 298px;
  max-width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #000000;
  box-shadow: none;
  animation: none;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13.92px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .2s ease;
}

.curso-hero .curso-hero__cta:hover {
  color: #FFFFFF;
  opacity: .875;
}

.curso-hero .curso-hero__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.curso-hero__media {
  min-width: 0;
}

.curso-hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #000000;
}

.curso-hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.curso-hero__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.curso-hero__play svg {
  width: clamp(56px, 5vw, 72px);
  height: auto;
  transition: transform .2s ease;
}

.curso-hero__play:hover svg,
.curso-hero__play:focus-visible svg {
  transform: scale(1.06);
}

.curso-hero__play:focus-visible,
.curso-hero__pausar:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: -6px;
  border-radius: 20px;
}

/* --- Vídeo do YouTube no formato de "Um espaço seguro": mudo em loop, play para ouvir, clique pausa --- */

.curso-hero__video > [hidden] {
  display: none;
}

/* O iframe só aparece quando o vídeo começa, para não mostrar a capa e o botão do YouTube. */
.curso-hero__player {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.curso-hero__video--tocando .curso-hero__player {
  opacity: 1;
}

.curso-hero__pausar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Indicador, não controle: sem pointer-events ela roubaria o clique que pausa. */
.curso-hero__progresso {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  pointer-events: none;
}

.curso-hero__barra {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to right, #FA0069, #67028E);
}

/* Abaixo de 961px, menos respiro entre a barra (72px) e a etiqueta. */
@media (max-width: 960px) {
  .curso-hero {
    padding-top: 120px;
  }
}

@media (max-width: 900px) {
  .curso-hero__container,
  .curso-hero--sem-video .curso-hero__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .curso-hero::after {
    width: 90%;
    opacity: .6;
  }

  .curso-hero__desc {
    max-width: 560px;
  }

  .curso-hero .curso-hero__cta {
    width: 100%;
    max-width: 298px;
  }
}

@media (max-width: 480px) {
  .curso-hero {
    padding-top: 100px;
  }

  .curso-hero__video,
  .curso-hero__play:focus-visible,
  .curso-hero__pausar:focus-visible {
    border-radius: 12px;
  }
}

/* ==========================================================================
   Seção 02: Sobre o curso (introdução, pré-requisitos e descrição)
   ========================================================================== */

.curso-sobre {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: clamp(64px, 7vw, 96px) 0 clamp(56px, 5vw, 72px);
  background: #FFFFFF;
}

.curso-sobre *,
.curso-sobre *::before,
.curso-sobre *::after {
  box-sizing: border-box;
}

/* Em 1440px: card de 329px a partir do x=121 e descrição a partir do x=552 (gap de ~103px). */
.curso-sobre__container {
  display: grid;
  grid-template-columns: minmax(0, 329px) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(40px, 7vw, 103px);
  padding: 0 var(--curso-margem);
}

.curso-sobre__intro {
  min-width: 0;
}

.curso-sobre__tag {
  display: block;
  margin: 0 0 22px;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
}

.curso-sobre__title {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--curso-titulo);
  line-height: .86;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

/* Gradiente no preenchimento das letras; sem suporte a background-clip fica o rosa sólido. */
.curso-sobre__title-destaque {
  display: block;
  width: fit-content;
  padding-bottom: .08em; /* com line-height .86 o clip cortaria a base das letras */
  color: #FA0069;
  background: linear-gradient(180deg, #FA0069 0%, #67028E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.curso-sobre__card {
  width: 100%;
  max-width: 329px;
  margin: 50px 0 0;
  padding: 26px 24px 26px 32px;
  border-radius: 9px;
  background: #FFF2F899;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: 13.92px;
  line-height: 1.17;
}

.curso-sobre__card dt,
.curso-sobre__card dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.curso-sobre__card dt {
  color: #FA0069;
  font-weight: 600;
}

.curso-sobre__card dd {
  color: #000000;
  font-weight: 400;
}

.curso-sobre__card a {
  color: inherit;
  text-decoration: underline;
}

.curso-sobre__card ul,
.curso-sobre__card ol {
  margin: 6px 0 0;
  padding-left: 16px;
}

.curso-sobre__card li {
  margin: 0;
  list-style: disc;
}

/* Barra preta só ao lado dos pré-requisitos, a 32px da borda do card e ~78px de altura no Figma. */
.curso-sobre__requisitos,
.curso-sobre__idade {
  padding-left: 25px;
}

.curso-sobre__requisitos {
  position: relative;
}

.curso-sobre__requisitos::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 2px;
  border-radius: 1.5px;
  background: #000000;
}

.curso-sobre__requisitos + .curso-sobre__idade {
  margin-top: 18px;
}

.curso-sobre__texto {
  min-width: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2; /* o SDD diz 100%, mas no Figma as linhas ficam a ~23px */
  text-align: left;
  overflow-wrap: break-word;
}

.curso-sobre__texto p,
.curso-sobre__texto ul,
.curso-sobre__texto ol {
  margin: 0 0 22px;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.curso-sobre__texto ul,
.curso-sobre__texto ol {
  padding-left: 24px;
}

.curso-sobre__texto li {
  margin: 0 0 6px;
  list-style: disc;
}

.curso-sobre__texto ol li {
  list-style: decimal;
}

.curso-sobre__texto > :last-child {
  margin-bottom: 0;
}

.curso-sobre__texto strong,
.curso-sobre__texto b {
  font-weight: 600;
}

.curso-sobre__texto a {
  color: #FA0069;
  text-decoration: underline;
}

.curso-sobre__texto img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .curso-sobre__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .curso-sobre__card {
    max-width: none;
    margin-top: 40px;
  }
}

@media (max-width: 480px) {

  .curso-sobre__texto {
    font-size: 17px;
  }

  .curso-sobre__card {
    padding: 22px 20px 22px 24px;
  }

  .curso-sobre__requisitos,
  .curso-sobre__idade {
    padding-left: 20px;
  }
}

/* ==========================================================================
   Seção 03: Módulos do curso (acordeões em duas colunas + CTA)
   ========================================================================== */

.curso-modulos {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: clamp(56px, 6vw, 82px) 0 clamp(56px, 5.4vw, 77px);
  background: #F6F6F666;
}

.curso-modulos *,
.curso-modulos *::before,
.curso-modulos *::after {
  box-sizing: border-box;
}

.curso-modulos__container {
  padding: 0 var(--curso-margem);
}

.curso-modulos__tag {
  display: block;
  margin: 0 0 20px;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.curso-modulos__title {
  margin: 0 0 40px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--curso-titulo);
  line-height: 1.01;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

/* Gradiente no preenchimento das letras; sem suporte a background-clip fica o rosa sólido. */
.curso-modulos__title-destaque {
  display: inline-block;
  padding-bottom: .08em; /* o clip cortaria a perna do "p" */
  color: #FA0069;
  background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Duas pilhas independentes: abrir um módulo só empurra os de baixo na mesma coluna. Em 1440px dá
   dois cartões de 558px com 81px entre eles. */
.curso-modulos__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(32px, 5.6vw, 81px);
}

.curso-modulos__coluna {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.curso-modulos__item {
  border: .93px solid #000000;
  border-radius: 15.84px;
  background: #FFFFFF;
}

.curso-modulos__item-titulo {
  margin: 0;
  padding: 0;
}

.curso-modulos__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 85.7px;
  margin: 0;
  padding: 16px 37px 16px 58px;
  border: 0;
  border-radius: 15.84px;
  background: none;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21.43px;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

button.curso-modulos__toggle {
  cursor: pointer;
}

button.curso-modulos__toggle:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

.curso-modulos__nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "+" desenhado com duas barras; aberto, gira 45° e vira "×" no círculo rosa (como o CollapseItem
   do site-abra-v2). */
.curso-modulos__icone {
  position: relative;
  flex-shrink: 0;
  width: 39.5px;
  height: 39.5px;
  border: 1.4px solid #FA0069;
  border-radius: 50%;
  background: transparent;
}

.curso-modulos__icone::before,
.curso-modulos__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.6px;
  border-radius: 1px;
  background: #FA0069;
  transform: translate(-50%, -50%);
}

.curso-modulos__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.curso-modulos__toggle[aria-expanded="true"] .curso-modulos__icone {
  background: #FA0069;
  transform: rotate(45deg);
}

.curso-modulos__toggle[aria-expanded="true"] .curso-modulos__icone::before,
.curso-modulos__toggle[aria-expanded="true"] .curso-modulos__icone::after {
  background: #FFFFFF;
}

/* Abre pela altura real do conteúdo (grid 0fr → 1fr), sem max-height arbitrário. */
.curso-modulos__painel {
  display: grid;
  grid-template-rows: 0fr;
}

.curso-modulos__item.is-aberto .curso-modulos__painel {
  grid-template-rows: 1fr;
}

.curso-modulos__conteudo {
  min-height: 0;
  overflow: hidden;
  padding: 0 37px 0 58px;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: break-word;
}

.curso-modulos__conteudo > :last-child {
  margin-bottom: 28px;
}

.curso-modulos__conteudo p,
.curso-modulos__conteudo ul,
.curso-modulos__conteudo ol {
  margin: 0 0 14px;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.curso-modulos__conteudo ul,
.curso-modulos__conteudo ol {
  padding-left: 20px;
}

.curso-modulos__conteudo li {
  margin: 0 0 6px;
  list-style: disc;
}

.curso-modulos__conteudo ol li {
  list-style: decimal;
}

.curso-modulos__conteudo strong,
.curso-modulos__conteudo b {
  font-weight: 600;
}

.curso-modulos__conteudo a {
  color: #FA0069;
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .curso-modulos__painel {
    transition: grid-template-rows .3s ease;
  }

  .curso-modulos__icone {
    transition: transform .3s ease, background-color .3s ease;
  }
}

/* N par: CTA centralizado abaixo da grade. N ímpar: na vaga da última linha da coluna direita,
   centralizado na altura de um cartão fechado. */
.curso-modulos__rodape {
  display: flex;
  justify-content: center;
  margin-top: 27px;
}

.curso-modulos__vaga {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85.7px;
}

/* Os CTAs das Seções 04 e 05 são iguais a este. Os de compra levam à Seção 15. */
.curso-modulos .curso-modulos__cta,
.curso-bonus .curso-bonus__cta,
.curso-tutores .curso-tutores__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: #FA0069;
  box-shadow: none;
  animation: none;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13.92px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .2s ease;
}

.curso-modulos .curso-modulos__cta:hover,
.curso-bonus .curso-bonus__cta:hover,
.curso-tutores .curso-tutores__cta:hover {
  color: #FFFFFF;
  opacity: .875;
}

.curso-modulos .curso-modulos__cta:focus-visible,
.curso-tutores .curso-tutores__cta:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* Na vaga do N ímpar o CTA vira uma pílula do tamanho de um cartão fechado (85.7px + as bordas
   de .93px, que o botão não tem). */
.curso-modulos .curso-modulos__vaga .curso-modulos__cta {
  width: 100%;
  min-height: calc(85.7px + 2 * .93px);
  border-radius: 15.84px;
}

/* Com os cartões mais estreitos, o recuo de 58px do Figma empurra os nomes longos para 3 linhas. */
@media (max-width: 1200px) {
  .curso-modulos__toggle {
    padding: 16px 24px 16px 32px;
    font-size: 19px;
  }

  .curso-modulos__conteudo {
    padding: 0 24px 0 32px;
  }
}

/* Uma coluna: as duas pilhas se empilham (o DOM já está em 1…N) e o CTA fica no fim. */
@media (max-width: 900px) {
  .curso-modulos__grade {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .curso-modulos__vaga {
    min-height: 0;
    margin-top: 5px;
  }

  /* Em uma coluna não há vaga: volta ao botão de 300 × 40px, igual ao CTA do N par. */
  .curso-modulos .curso-modulos__vaga .curso-modulos__cta {
    width: 300px;
    min-height: 40px;
    border-radius: 4px;
  }
}

@media (max-width: 480px) {

  .curso-modulos__toggle {
    gap: 16px;
    min-height: 72px;
    padding: 14px 18px 14px 22px;
    font-size: 17px;
  }

  .curso-modulos__icone {
    width: 32px;
    height: 32px;
  }

  .curso-modulos__icone::before,
  .curso-modulos__icone::after {
    width: 13px;
  }

  .curso-modulos__conteudo {
    padding: 0 18px 0 22px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Seção 04: Módulo bônus (cards dos bônus + CTA)
   ========================================================================== */

.curso-bonus {
  position: relative;
  overflow: hidden;
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: clamp(48px, 4vw, 56px) 0 clamp(56px, 5vw, 72px);
  background: linear-gradient(180deg, #000000 0%, #333333 100%);
}

.curso-bonus *,
.curso-bonus *::before,
.curso-bonus *::after {
  box-sizing: border-box;
}

/* Pontilhado do canto inferior esquerdo: só decoração, atrás do conteúdo. Em 1440px tem ~600px de
   largura; o arquivo é 762 × 650. */
.curso-bonus::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: min(600px, 45%);
  aspect-ratio: 762 / 650;
  background: url("img/decoracao-borda-inferior-esquerda.webp") no-repeat left bottom / contain;
  pointer-events: none;
}

.curso-bonus__container {
  position: relative;
  z-index: 1;
  padding: 0 var(--curso-margem);
  text-align: center;
}

.curso-bonus__tag {
  display: block;
  margin: 0 0 16px;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
}

.curso-bonus__title {
  margin: 0 0 20px;
  padding: 0;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--curso-titulo);
  line-height: 1.01;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

.curso-bonus__desc {
  max-width: 720px;
  margin: 0 auto 50px;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
}

/* Cards de 300px com 65px entre eles: no máximo 3 por linha (3 × 300 + 2 × 65 = 1030px). Com 1 ou
   2 ficam centralizados; com 4 ou mais quebram e a última linha também centraliza. Sem espaço
   para 3, caem para 2 e depois 1 por linha sozinhos. */
.curso-bonus__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 65px;
  max-width: 1030px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.curso-bonus__card {
  display: flex;
  flex: 0 1 300px;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden; /* só para os cantos arredondados; o card cresce com o texto */
  border-radius: 10px;
  background: #FFFFFF;
  list-style: none;
}

.curso-bonus__faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 87px;
  padding: 14px 0;
  background: #FA0069;
}

.curso-bonus__faixa img {
  display: block;
  width: 56px;
  height: 56px;
}

.curso-bonus__corpo {
  flex: 1;
  padding: 22px 20px 26px;
  text-align: center;
}

.curso-bonus__nome {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.01;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  overflow-wrap: anywhere;
}

.curso-bonus__texto {
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2; /* o SDD diz 100%, mas no Figma as linhas ficam a ~18px */
  text-align: center;
  overflow-wrap: break-word;
}

/* Divisor rosa entre o nome e a descrição; sem descrição, não aparece. */
.curso-bonus__texto::before {
  content: "";
  display: block;
  width: min(212px, 100%);
  height: 1px;
  margin: 10px auto 12px;
  border-radius: .5px;
  background: #FA0069;
}

.curso-bonus__texto p {
  margin: 0 0 8px;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.curso-bonus__texto > :last-child {
  margin-bottom: 0;
}

.curso-bonus__texto strong,
.curso-bonus__texto b {
  font-weight: 600;
}

.curso-bonus__texto a {
  color: #FA0069;
  text-decoration: underline;
}

.curso-bonus__rodape {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* O rosa do foco do CTA da Seção 03 some no fundo escuro. */
.curso-bonus .curso-bonus__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .curso-bonus::before {
    width: 80%;
    opacity: .6;
  }
}

@media (max-width: 480px) {
  .curso-bonus__tag,
  .curso-bonus__desc {
    font-size: 17px;
  }

  .curso-bonus__desc {
    margin-bottom: 36px;
  }

  .curso-bonus__nome {
    font-size: 22px;
  }
}

/* ==========================================================================
   Seção 05: Tutores (texto institucional + foto "Eu sou..." e dados do professor)
   ========================================================================== */

/* Medidas da captura de 1440px: colunas de 427px, 338px e 329px com 53px entre elas, foto de
   338x300 e setas de 45px que entram 28px na foto. */
.curso-tutores {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: clamp(48px, 5.5vw, 79px) 0 clamp(48px, 5vw, 73px);
  background: #F6F6F666;
}

.curso-tutores *,
.curso-tutores *::before,
.curso-tutores *::after {
  box-sizing: border-box;
}

.curso-tutores__container {
  display: grid;
  grid-template-columns: minmax(0, 427fr) minmax(0, 338fr) minmax(0, 329fr);
  align-items: start;
  column-gap: clamp(32px, 3.7vw, 53px);
  padding: 0 var(--curso-margem);
}

/* O texto das colunas começa 10px abaixo do topo da foto, como no Figma. */
.curso-tutores__intro,
.curso-tutores__info {
  padding-top: 10px;
}

.curso-tutores__tag {
  display: block;
  margin: 0 0 20px;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
}

.curso-tutores__info .curso-tutores__tag {
  margin-bottom: 4px;
}

.curso-tutores__title {
  margin: 0 0 40px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--curso-titulo);
  line-height: 1.03;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

/* inline-block mantém "quem faz." inteiro na segunda linha. Sem background-clip fica o rosa. */
.curso-tutores__title-destaque {
  display: inline-block;
  padding-bottom: .08em; /* o clip cortaria a perna do "q" */
  color: #FA0069;
  background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* No Figma o line-height é 100%, mas as linhas da captura ficam a 22px. */
.curso-tutores__desc,
.curso-tutores__texto {
  margin: 0;
  padding: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.16;
}

.curso-tutores__desc {
  margin-bottom: 22px;
}

.curso-tutores .curso-tutores__cta {
  width: 343px;
}

.curso-tutores__midia {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* As fotos "Eu sou..." do painel são horizontais (de 1080x769 a 1758x1024), com o rosto no alto e
   no centro; o cover corta as laterais. */
.curso-tutores__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 338 / 300;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
}

.curso-tutores__foto[hidden],
.curso-tutores__professor[hidden] {
  display: none;
}

.curso-tutores__controles {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  margin-top: -28px;
}

.curso-tutores__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FA0069;
  box-shadow: 0px 0px 12px 0px #00000033;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity .2s ease;
}

.curso-tutores__seta:hover {
  opacity: .875;
}

.curso-tutores__seta:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* O Figma usa line-height 86% numa linha só; com nome em duas linhas isso encavala, então fica 1.05
   e o espaço vertical sai das margens. */
.curso-tutores__nome {
  margin: 0 0 24px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--curso-titulo);
  line-height: 1.05;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-wrap: break-word;
}

.curso-tutores__perfil {
  display: inline-block;
  margin-top: 36px;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
}

.curso-tutores__perfil:hover,
.curso-tutores__perfil:focus {
  color: #FA0069;
  text-decoration: underline;
}

.curso-tutores__perfil:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

.curso-tutores__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tablet: o texto institucional vai para cima e foto + professor ficam lado a lado. */
@media (max-width: 1024px) {
  .curso-tutores__container {
    grid-template-columns: minmax(0, 338fr) minmax(0, 329fr);
    row-gap: 48px;
  }

  .curso-tutores__intro {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .curso-tutores__desc {
    max-width: 640px;
  }
}

/* Uma coluna, na ordem do DOM: institucional, foto com as setas, professor. */
@media (max-width: 700px) {
  .curso-tutores__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .curso-tutores__info {
    padding-top: 0;
  }

  .curso-tutores__perfil {
    margin-top: 28px;
  }
}

@media (max-width: 480px) {
  .curso-tutores__tag,
  .curso-tutores__desc,
  .curso-tutores__texto,
  .curso-tutores__perfil {
    font-size: 17px;
  }

  .curso-tutores__title {
    margin-bottom: 28px;
  }

  .curso-tutores__nome {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Seção 06: Ficou com dúvida? (foto da fachada + CTA para o "Tire suas dúvidas")
   ========================================================================== */

/* Adaptado do QuestionsBanner do site-abra-v2 (features/questions-banner): card de 1200x270 com a
   foto numa metade e o gradiente na outra. Abaixo de 1024px a foto sai e o banner vira uma faixa
   de gradiente de ponta a ponta, só com o texto, como lá. */
.curso-duvidas {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  overflow: hidden; /* recorta o banner enquanto ele desliza da esquerda */
  padding: 44px 0 60px;
}

.curso-duvidas *,
.curso-duvidas *::before,
.curso-duvidas *::after {
  box-sizing: border-box;
}

.curso-duvidas__container {
  padding: 0 var(--curso-margem);
}

.curso-duvidas__banner {
  display: flex;
  min-height: 270px;
  border-radius: 22px;
  overflow: hidden;
}

.curso-duvidas__imagem {
  position: relative;
  width: 50%;
}

/* Com 63% o letreiro da ABRA e o "#ARTENAABRA" ficam no recorte, como no Figma. */
.curso-duvidas__imagem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%;
}

.curso-duvidas__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 50%;
  padding: 20px 60px 20px 80px;
  background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
}

.curso-duvidas .curso-duvidas__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--curso-titulo);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}

/* Também anula o visual de button herdado do tema. */
.curso-duvidas .curso-duvidas__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: #000000;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  perspective: 1000px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* O mesmo hover do banner do Desenho Básico, que usa este gradiente rosa. */
.curso-duvidas .curso-duvidas__cta:hover {
  background: #FFFFFF;
  color: #000000;
}

.curso-duvidas .curso-duvidas__cta:focus {
  outline: none;
}

.curso-duvidas .curso-duvidas__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.curso-duvidas__cta-texto {
  display: inline-block;
  text-align: center;
}

/* A linha só quebra entre as palavras, nunca entre as letras. */
.curso-duvidas__palavra {
  display: inline-block;
  white-space: nowrap;
}

.curso-duvidas__letra {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  /* Cada letra dá uma volta no hover, uma depois da outra (o SplitText do original). */
  .curso-duvidas__letra {
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .curso-duvidas__cta:hover .curso-duvidas__letra {
    transform: rotateX(360deg);
    transition-delay: calc(var(--letra) * 0.02s);
  }

  /* Classes postas pelo script da seção, que só roda sem movimento reduzido. */
  .curso-duvidas--animar .curso-duvidas__banner {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  }

  .curso-duvidas--visivel .curso-duvidas__banner {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 1023.98px) {
  .curso-duvidas {
    margin-top: 40px;
    padding: 0;
    background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
  }

  .curso-duvidas__banner {
    min-height: 0;
    border-radius: 0;
  }

  .curso-duvidas__imagem {
    display: none;
  }

  .curso-duvidas__conteudo {
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 40px 0;
    background: none;
    text-align: center;
  }

  .curso-duvidas .curso-duvidas__cta {
    height: 46px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Seção 07: Conheça a escola (tópicos + carrossel dos ambientes, com modal)
   ========================================================================== */

/* Adaptado do SchoolGetInspired do site-abra-v2 (features/school-get-inspired, layout "split"),
   com as medidas de lá, exceto a altura dos cartões, que segue o Figma: 465x342 (lá são 385px) a
   40px um do outro, trilho que vai até a borda direita da tela. Na captura de 1440px a galeria começa em 740px, então o texto fica com 580px. Até 768px
   vira a faixa que anda sozinha do original, sem setas nem modal. */
.curso-escola {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  overflow: hidden; /* o trilho passa da borda direita */
  padding-top: 40px;
  background: #FFFFFF;
}

.curso-escola *,
.curso-escola *::before,
.curso-escola *::after {
  box-sizing: border-box;
}

.curso-escola__layout {
  display: grid;
  grid-template-columns: min(580px, 45%) minmax(0, 1fr);
  column-gap: 40px;
  margin-bottom: 80px;
  padding-left: var(--curso-margem);
}

.curso-escola__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 342px;
}

.curso-escola__tag {
  display: block;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-transform: uppercase;
}

.curso-escola .curso-escola__title {
  margin: 0;
  padding: 18px 0 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-escola .curso-escola__topicos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso-escola .curso-escola__topico {
  display: flex;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

/* O texto desce 2,5px para centrar a primeira linha no círculo de 27px, como no original. */
.curso-escola__topico > span:last-child {
  margin-top: 2.5px;
}

.curso-escola__marcador {
  display: flex;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-right: 15px;
  border-radius: 50%;
  background: #000000;
  color: #FFFFFF;
}

.curso-escola__marcador svg {
  width: 16px;
  height: auto;
  transform: rotate(180deg); /* o desenho aponta para a esquerda */
}

/* As setas ficam no pé da coluna, na linha da base dos cartões. */
.curso-escola__setas {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
}

.curso-escola__setas[hidden] {
  display: none;
}

.curso-escola .curso-escola__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #000000;
  border-radius: 50%;
  background: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.curso-escola__seta svg {
  width: 22px;
  height: auto;
}

.curso-escola__seta--proxima svg {
  transform: rotate(180deg);
}

.curso-escola .curso-escola__seta:hover {
  border-color: #FA0069;
  background: #FA0069;
  color: #FFFFFF;
}

.curso-escola .curso-escola__seta:focus {
  outline: none;
}

.curso-escola .curso-escola__seta:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 2px;
}

/* Sem o script (que põe o --js) a galeria rola de lado; com ele quem anda é o trilho. */
.curso-escola__galeria {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.curso-escola--js .curso-escola__galeria {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}

.curso-escola .curso-escola__trilho,
.curso-escola .curso-escola__faixa-trilho {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Com a galeria mais estreita que um cartão (tablet), ele encolhe até ela: cortado, o "+" e o modal
   ficariam fora de alcance. */
.curso-escola .curso-escola__cartao {
  position: relative;
  flex: 0 0 min(465px, 100%);
  height: 342px;
  margin: 0 40px 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #000000;
  scroll-snap-align: start;
}

.curso-escola__cartao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000 0%, transparent 100%);
  pointer-events: none;
}

.curso-escola .curso-escola__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.curso-escola .curso-escola__nome {
  position: absolute;
  z-index: 1;
  right: 72px;
  bottom: 48px;
  left: 32px;
  margin: 0;
  padding: 0;
  color: #FBFBFB;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: uppercase;
}

/* Filete do tamanho do texto. */
.curso-escola__nome span {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid #FA0069;
}

.curso-escola .curso-escola__mais {
  position: absolute;
  z-index: 2;
  right: 31px;
  bottom: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FA0069;
  color: #FFFFFF;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.curso-escola .curso-escola__mais[hidden] {
  display: none;
}

.curso-escola .curso-escola__mais:hover {
  background: linear-gradient(to right, #FA0069, #67028E);
}

.curso-escola .curso-escola__mais:focus {
  outline: none;
}

.curso-escola .curso-escola__mais:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.curso-escola__faixa {
  display: none;
}

.curso-escola__container {
  padding: 0 var(--curso-margem);
}

.curso-escola .curso-escola__divisor {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #000000;
}

/* --- Modal (o MoreAbout do original): caixa de 1128x514 com a foto à esquerda e o texto à direita --- */

html.curso-escola-modal-aberto {
  overflow: hidden;
}

.curso-escola .curso-escola__modal {
  width: 1128px;
  max-width: 95vw;
  height: 514px;
  max-height: 95vh;
  margin: auto;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(to right, #000000, #282828);
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  color: #FFFFFF;
}

.curso-escola__modal::backdrop {
  background: rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: no-preference) {
  .curso-escola__modal[open] {
    animation: curso-escola-modal-entrada .25s ease-out;
  }

  .curso-escola .curso-escola__seta:hover,
  .curso-escola .curso-escola__modal-seta:hover {
    transform: scale(1.1);
  }
}

@keyframes curso-escola-modal-entrada {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.95);
  }
}

.curso-escola__modal-caixa {
  position: relative;
  display: flex;
  height: 100%;
}

.curso-escola .curso-escola__fechar {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

.curso-escola .curso-escola__fechar:hover {
  color: #FA0069;
}

.curso-escola .curso-escola__fechar:focus {
  outline: none;
}

.curso-escola .curso-escola__fechar:focus-visible,
.curso-escola .curso-escola__modal-seta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.curso-escola__modal-galeria {
  position: relative;
  flex: 0 1 75%;
  min-width: 0;
  height: 410px;
  margin: 30px;
}

.curso-escola__modal-janela {
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  touch-action: pan-y;
}

.curso-escola .curso-escola__modal-trilho {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso-escola .curso-escola__modal-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.curso-escola__modal-slide img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sobre a foto, a 40px das bordas e a 85% da altura. */
.curso-escola .curso-escola__modal-seta {
  position: absolute;
  z-index: 5;
  top: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43.6px;
  height: 43.6px;
  margin: -21.8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FA0069;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  color: #FFFFFF;
  opacity: .9;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

.curso-escola .curso-escola__modal-seta:hover {
  opacity: 1;
}

.curso-escola__modal-seta--anterior {
  left: 40px;
}

.curso-escola__modal-seta--proxima {
  right: 40px;
}

.curso-escola__modal-seta svg {
  width: 24.68px;
  height: auto;
}

.curso-escola__modal-seta--proxima svg {
  transform: rotate(180deg);
}

.curso-escola__modal-texto {
  flex: 0 1 60%;
  min-width: 0;
  padding: 60px 60px 60px 35px;
  overflow-y: auto;
}

.curso-escola .curso-escola__modal-titulo {
  margin: 0;
  padding: 0;
  color: #FBFBFB;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-escola .curso-escola__modal-separador {
  width: 100%;
  height: 1px;
  margin: 30px 0;
  border: 0;
  background: linear-gradient(to right, #FA0069, #67028E);
}

.curso-escola .curso-escola__modal-descricao {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .curso-escola .curso-escola__nome {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .curso-escola .curso-escola__modal {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    max-height: 90vh;
    padding: 0;
  }
}

/* Celular: texto em cima e a faixa de cartões de 330x250 andando sozinha. */
@media (max-width: 768px) {
  .curso-escola {
    padding-top: 40px;
  }

  .curso-escola__layout {
    display: block;
    margin-bottom: 40px;
    padding-left: 0;
  }

  .curso-escola__intro {
    min-height: 0;
    padding: 0 var(--curso-margem);
  }

  .curso-escola__setas:not([hidden]),
  .curso-escola__galeria {
    display: none;
  }

  /* relative: o offsetLeft dos cartões, que o script usa para o loop, fica medido a partir daqui. */
  .curso-escola__faixa {
    position: relative;
    display: block;
    margin-top: 30px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .curso-escola__faixa::-webkit-scrollbar {
    display: none;
  }

  .curso-escola .curso-escola__faixa-trilho {
    width: max-content;
    padding-left: var(--curso-margem);
  }

  .curso-escola .curso-escola__cartao--faixa {
    flex-basis: 330px;
    height: 250px;
    margin-right: 20px;
  }

  .curso-escola .curso-escola__cartao--faixa .curso-escola__nome {
    right: 40px;
    bottom: 40px;
    left: 40px;
  }
}

@media (max-width: 480px) {
  .curso-escola__tag,
  .curso-escola .curso-escola__topico {
    font-size: 17px;
  }

}

/* ==========================================================================
   Seção 08: Espaço seguro (textos + vídeo do tour pela escola)
   ========================================================================== */

/* Adaptado do SafeSpace do site-abra-v2 (curso-presencial/basico-de-decoracao), com as medidas de lá:
   textos em 55% / 40% alinhados pela base, vídeo 16:9 na largura toda. Sobre o vídeo, o play e o
   "Conheça a escola" do Figma no lugar do "Seu vídeo já começou" teal do original, sem véu por cima
   (o original também não tem); o comportamento é o do player de lá. O divisor de cima é da Seção 07. */
.curso-espaco {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 80px 0;
  background: #FFFFFF;
}

.curso-espaco *,
.curso-espaco *::before,
.curso-espaco *::after {
  box-sizing: border-box;
}

.curso-espaco__container {
  padding: 0 var(--curso-margem);
}

.curso-espaco__textos {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.curso-espaco__intro {
  display: flex;
  flex: 0 0 55%;
  flex-direction: column;
  gap: 16px;
}

.curso-espaco__texto {
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;
  gap: 16px;
}

.curso-espaco .curso-espaco__title {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-espaco .curso-espaco__destaque {
  color: #FA0069;
  font-weight: 600;
}

.curso-espaco .curso-espaco__subtitulo,
.curso-espaco .curso-espaco__texto p {
  margin: 0;
  padding: 0;
  color: #4C4C4C;
  line-height: 1.2;
  text-align: left;
}

.curso-espaco .curso-espaco__subtitulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 22px;
}

.curso-espaco .curso-espaco__texto p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
}

.curso-espaco .curso-espaco__texto strong {
  font-weight: 600;
}

/* --- Vídeo: capa com o play por cima; durante o som, o botão de pausar cobre o vídeo --- */

.curso-espaco__video {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #000000;
}

.curso-espaco__video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mais forte que o display: flex do play logo abaixo. */
.curso-espaco .curso-espaco__video > [hidden] {
  display: none;
}

.curso-espaco .curso-espaco__play,
.curso-espaco .curso-espaco__pausar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.curso-espaco .curso-espaco__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #FFFFFF;
}

.curso-espaco__play svg {
  width: 130px;
  height: auto;
  transition: transform .2s ease;
}

.curso-espaco__play:hover svg,
.curso-espaco__play:focus-visible svg {
  transform: scale(1.06);
}

.curso-espaco .curso-espaco__legenda {
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
}

.curso-espaco .curso-espaco__play:focus,
.curso-espaco .curso-espaco__pausar:focus {
  outline: none;
}

.curso-espaco .curso-espaco__play:focus-visible,
.curso-espaco .curso-espaco__pausar:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -6px;
}

/* Indicador, não controle: sem pointer-events ela roubaria o clique que pausa. */
.curso-espaco__progresso {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  pointer-events: none;
}

.curso-espaco__barra {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to right, #FA0069, #67028E);
}

/* Do tablet para baixo, os tamanhos de celular do original. */
@media (max-width: 1024px) {
  .curso-espaco .curso-espaco__subtitulo {
    font-size: 22px;
  }

  .curso-espaco .curso-espaco__texto p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .curso-espaco {
    padding: 48px 0;
  }

  .curso-espaco__textos {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .curso-espaco__intro,
  .curso-espaco__texto {
    flex: 1 1 auto;
    width: 100%;
  }

  .curso-espaco__video {
    margin-top: 32px;
  }

  .curso-espaco .curso-espaco__play {
    gap: 12px;
  }

  .curso-espaco__play svg {
    width: 80px;
  }

  .curso-espaco .curso-espaco__legenda {
    font-size: 16px;
  }
}

/* ==========================================================================
   Seção 09: Nossos números (KPIs)
   ========================================================================== */

/* Adaptado da variante "compact" do KPIS do site-abra-v2 (features/kpis), que é a do Figma: título em
   até 300px (quebra em "Nossos" / "números") e itens de 75px sem o padding do GridItem, o que dá os
   ~115px entre as linhas. Sem a linha cinza do rodapé, como no curso gravado de lá (divider={false}).
   O 40px / 100px do original mais o margin-top de 30px dos grids viram o padding da seção. */
.curso-numeros {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 70px 0 100px;
  background: #FFFFFF;
}

.curso-numeros *,
.curso-numeros *::before,
.curso-numeros *::after {
  box-sizing: border-box;
}

.curso-numeros__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 0 var(--curso-margem);
}

/* Fica com o que a lista deixa (260px em 1440px), até os 300px do original, e nunca menos que
   "números". */
.curso-numeros .curso-numeros__title {
  flex: 1 1 0;
  min-width: min-content;
  max-width: 300px;
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

/* O "gradient" do tema de lá; sem suporte a background-clip fica o rosa sólido. */
.curso-numeros .curso-numeros__destaque {
  color: #FA0069;
  font-weight: 600;
  background: linear-gradient(to right, #FA0069, #67028E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 900px dá, em 1440px, a primeira coluna no x=420 do Figma. As colunas são iguais, como o 1fr do
   original; o minmax(0, …) faz o papel do min-width: 0 que ele aplica abaixo de 1200px. */
.curso-numeros .curso-numeros__lista {
  display: grid;
  flex: 0 1 900px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso-numeros .curso-numeros__item {
  position: relative;
  min-height: 75px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso-numeros .curso-numeros__item:nth-child(n+4) {
  margin-top: 20px;
}

/* O item do meio de cada linha, com as duas divisórias do original. Elas ficam centradas no item, como
   no Figma: o "top: calc(50% - 25%)" de lá as empurra até a base. */
.curso-numeros .curso-numeros__item:nth-child(3n+2) {
  padding: 0 25px;
}

.curso-numeros__item:nth-child(3n+2)::before,
.curso-numeros__item:nth-child(3n+2)::after {
  content: "";
  position: absolute;
  top: 12.5%;
  height: 75%;
  width: 1px;
  background-color: #A6A6A6;
}

.curso-numeros__item:nth-child(3n+2)::before {
  left: -7%;
}

.curso-numeros__item:nth-child(3n+2)::after {
  right: 0;
}

.curso-numeros .curso-numeros__valor {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.curso-numeros .curso-numeros__texto {
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  white-space: nowrap;
}

.curso-numeros .curso-numeros__icone {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0 0 0 5px;
  object-fit: contain;
}

.curso-numeros .curso-numeros__desc {
  margin: 7px 0 0;
  padding: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-align: left;
}

/* Cópia do valor final para o leitor de tela, posta pelo script enquanto o número conta. */
.curso-numeros__lido {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* O Reveal do original: sobe 28px (título) ou 20px (itens) com fade, os da mesma linha um depois do
     outro. Classes postas pelo script da seção, que só roda sem movimento reduzido. */
  .curso-numeros--animar .curso-numeros__title,
  .curso-numeros--animar .curso-numeros__item {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .curso-numeros--animar .curso-numeros__title {
    transform: translateY(28px);
  }

  .curso-numeros--animar .curso-numeros__item {
    transform: translateY(20px);
    transition-delay: calc(var(--ordem) * 0.14s);
  }

  .curso-numeros--animar .is-visivel {
    opacity: 1;
    transform: none;
  }
}

/* Lado a lado não cabe abaixo disso: o título vai para cima e as três colunas ficam com a largura
   toda. O original só zera o min-width e deixa os valores quebrarem. */
@media (max-width: 1280px) {
  .curso-numeros__container {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .curso-numeros .curso-numeros__title {
    flex: 0 0 auto;
    max-width: none;
  }

  .curso-numeros .curso-numeros__lista {
    flex: 0 0 auto;
  }
}

/* Tablet: as três colunas continuam, com os tamanhos do mobile do original. Começa antes dos 1024px
   do original porque, entre 1025 e 1100px, "+1mi seguidores" em 30px já não cabe na coluna. */
@media (max-width: 1100px) {
  .curso-numeros .curso-numeros__item:nth-child(3n+2) {
    padding: 0 16px;
  }

  .curso-numeros .curso-numeros__texto {
    font-size: 22px;
  }

  .curso-numeros .curso-numeros__desc {
    font-size: 16px;
  }
}

/* Mobile, como o original: tudo numa coluna centralizada, sem as divisórias. */
@media (max-width: 768px) {
  .curso-numeros {
    padding: 30px 0 50px;
  }

  .curso-numeros__container {
    align-items: center;
  }

  .curso-numeros .curso-numeros__title {
    text-align: center;
  }

  .curso-numeros .curso-numeros__lista {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .curso-numeros .curso-numeros__item:nth-child(n+4) {
    margin-top: 0;
  }

  .curso-numeros__item:nth-child(3n+2)::before,
  .curso-numeros__item:nth-child(3n+2)::after {
    display: none;
  }

  .curso-numeros .curso-numeros__valor {
    justify-content: center;
  }

  .curso-numeros .curso-numeros__desc {
    text-align: center;
  }
}

/* ==========================================================================
   Seção 10: Avaliações do Google
   ========================================================================== */

/* O GoogleReviews da página de Sketch Automotivo Manual do site-abra-v2, com as medidas de lá
   (sections/google-reviews/styles.ts): título, setas e selo à esquerda, centralizados na altura dos
   cards, e o carrossel indo até a borda direita da tela. O destaque do título é o rosa do Figma (lá
   é o azul do curso de Sketch). Até 768px empilha em título, carrossel e selo, sem as setas. */
.curso-avaliacoes {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  overflow-x: clip; /* o carrossel passa da borda direita; clip não corta a sombra dos cards */
  padding: 56px 0 64px;
  background: #F6F6F6CC;
}

.curso-avaliacoes *,
.curso-avaliacoes *::before,
.curso-avaliacoes *::after {
  box-sizing: border-box;
}

/* As linhas 1fr das pontas centralizam o bloco da esquerda na altura dos cards. */
.curso-avaliacoes__grade {
  display: grid;
  grid-template-columns: min(410px, 38%) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas:
    '. carrossel'
    'titulo carrossel'
    'setas carrossel'
    'selo carrossel'
    '. carrossel';
  column-gap: clamp(40px, 6vw, 86px);
  padding-left: var(--curso-margem);
}

/* O título lê a largura desta célula em cqi. */
.curso-avaliacoes__titulo-celula {
  grid-area: titulo;
  container-type: inline-size;
  min-width: 0;
}

/* 10.25em é o avanço de "Essa é a experiência", a linha mais larga: dividir a célula por ele faz o
   título encolher com a coluna em vez de ganhar uma quarta linha. O max-width joga o "de" para a
   segunda linha sem <br>. */
.curso-avaliacoes .curso-avaliacoes__title {
  max-width: 10.6em;
  margin: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: min(var(--curso-titulo), 100cqi / 10.25);
  line-height: 1.06;
  text-transform: none;
}

.curso-avaliacoes .curso-avaliacoes__title span {
  color: #FA0069;
  font-weight: 600;
}

.curso-avaliacoes__setas {
  grid-area: setas;
  display: flex;
  gap: 16px;
  margin-top: 34px;
}

.curso-avaliacoes__setas[hidden] {
  display: none;
}

.curso-avaliacoes .curso-avaliacoes__seta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 2px solid #000000;
  border-radius: 50%;
  background: transparent;
  color: #000000;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.curso-avaliacoes__seta svg {
  width: 20px;
  height: auto;
}

.curso-avaliacoes__seta--proxima svg {
  transform: rotate(180deg);
}

.curso-avaliacoes .curso-avaliacoes__seta:hover {
  background: #000000;
  color: #FFFFFF;
}

.curso-avaliacoes .curso-avaliacoes__seta:focus {
  outline: none;
}

.curso-avaliacoes .curso-avaliacoes__seta:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 2px;
}

.curso-avaliacoes__carrossel {
  grid-area: carrossel;
  min-width: 0;
}

/* O recuo à esquerda (igual ao vão entre cards) e devolvido em padding leva a borda do recorte para
   fora sem mexer no primeiro card, e a máscara apaga aos poucos a sombra do card que já passou. Os
   40px de cima e de baixo são o alcance da sombra, que a máscara cortaria. Sem o script a janela
   rola de lado; com ele quem anda é o trilho. */
.curso-avaliacoes__janela {
  --curso-avaliacoes-vao: 40px;
  margin: -40px 0 -40px calc(-1 * var(--curso-avaliacoes-vao));
  padding: 40px 0 40px var(--curso-avaliacoes-vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--curso-avaliacoes-vao));
  mask-image: linear-gradient(to right, transparent, #000 var(--curso-avaliacoes-vao));
}

.curso-avaliacoes--js .curso-avaliacoes__janela {
  overflow-x: clip;
  overflow-y: visible;
  scroll-snap-type: none;
  touch-action: pan-y pinch-zoom;
}

/* Sem altura fixa: o stretch dá a todos os cards a altura do mais alto. */
.curso-avaliacoes .curso-avaliacoes__trilho {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O card do Figma tem 331px. O piso de 34% garante que quatro cards sempre cubram a janela mais um
   passo, que é o que o loop precisa em tela larga. O slide é o container do cqi do card. */
.curso-avaliacoes .curso-avaliacoes__slide {
  container-type: inline-size;
  display: flex;
  flex: 0 0 max(331px, 34%);
  min-width: 0;
  margin: 0 var(--curso-avaliacoes-vao) 0 0;
  padding: 0;
  scroll-snap-align: start;
}

/* As medidas são as do card de 331px; quando o card encolhe (mobile) elas encolhem na mesma
   proporção, e quando ele cresce param no px do Figma: min(Npx, N/331 em cqi). */
.curso-avaliacoes__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: min(42px, 12.689cqi) min(35px, 10.574cqi) min(29px, 8.761cqi) min(42px, 12.689cqi);
  border-radius: min(12px, 3.625cqi);
  background: #FFFFFF;
  box-shadow: 0 0 24.5px 0 #00000040;
}

.curso-avaliacoes .curso-avaliacoes__texto {
  margin: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: max(12px, min(19px, 5.740cqi));
  line-height: 1.2;
  text-align: left;
}

/* Estrelas, divisor e autor descem juntos para a base: as estrelas ficam na mesma linha em todos. */
.curso-avaliacoes__rodape {
  margin-top: auto;
  padding-top: min(20px, 6.042cqi);
}

.curso-avaliacoes .curso-avaliacoes__estrelas {
  display: block;
  width: min(92px, 27.795cqi);
  max-width: none;
  height: auto;
}

/* O divisor é a borda de cima do bloco do autor. */
.curso-avaliacoes__autor {
  display: flex;
  align-items: center;
  gap: min(15px, 4.532cqi);
  margin-top: min(19px, 5.740cqi);
  padding-top: min(16px, 4.834cqi);
  border-top: 1px solid #505050;
}

.curso-avaliacoes__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: min(47px, 14.199cqi);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #FA0069;
}

.curso-avaliacoes .curso-avaliacoes__avatar img {
  display: block;
  width: 44%;
  height: auto;
}

.curso-avaliacoes__nome {
  min-width: 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: max(12px, min(19px, 5.740cqi));
  line-height: 1.2;
}

/* Logo, separador, nota e texto numa linha só. O stretch dá à nota a altura do logo, e a borda
   esquerda dela é o separador. Numa tela estreita demais só o texto quebra. */
.curso-avaliacoes__selo {
  grid-area: selo;
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 28px;
}

/* O arquivo (1000x500) tem margem transparente; a tinta vai de (8, 28) a (1000, 426). A moldura
   recorta essa margem, então a caixa é o logo e o separador fica a 16px dele. */
.curso-avaliacoes__logo {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 64px;
  aspect-ratio: 992 / 398;
  overflow: hidden;
}

.curso-avaliacoes .curso-avaliacoes__logo img {
  position: absolute;
  top: -7.035%;
  left: -0.806%;
  width: 100.806%;
  max-width: none;
  height: auto;
}

.curso-avaliacoes__nota {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-left: 16px;
  border-left: 0.5px solid #505050;
  color: #575757;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16.77px;
  line-height: 1;
}

.curso-avaliacoes__base {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 10.06px;
  line-height: 1.3;
}

.curso-avaliacoes__base strong {
  color: #575757;
  font-weight: 700;
}

@media (max-width: 768px) {
  .curso-avaliacoes {
    padding: 42px 0 48px;
  }

  .curso-avaliacoes__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'titulo'
      'carrossel'
      'selo';
  }

  .curso-avaliacoes__titulo-celula,
  .curso-avaliacoes__selo {
    padding-right: var(--curso-margem);
  }

  .curso-avaliacoes .curso-avaliacoes__setas {
    display: none;
  }

  .curso-avaliacoes__carrossel {
    margin-top: 28px;
  }

  .curso-avaliacoes__janela {
    --curso-avaliacoes-vao: 27px;
  }

  .curso-avaliacoes .curso-avaliacoes__slide {
    flex-basis: 60.5%;
  }

  .curso-avaliacoes__selo {
    gap: 12px;
    margin-top: 31px;
  }

  .curso-avaliacoes__logo {
    width: 57px;
  }

  .curso-avaliacoes__nota {
    padding-left: 12px;
  }
}

/* ==========================================================================
   Seção 11: Acompanhamento (título sobre a faixa rosa + três cards)
   ========================================================================== */

/* O VolkswagenChief da página de Sketch Automotivo Manual do site-abra-v2, com as medidas de lá
   (sections/volkswagen-chief/styles.ts). O título e o gradiente são os do SDD da seção: Montserrat
   500/700 em branco (lá a chamada é em Avega) sobre o rosa (lá é o azul do curso de Sketch).

   O fundo claro é da seção inteira; a faixa em gradiente vem por cima e termina 126px abaixo do topo
   dos cards (~42% do card em 1440px): ela leva o vão até os cards mais esses 126px de padding, e a
   lista sobe o mesmo tanto. A divisão depende só do topo dos cards, então sobrevive a texto que
   cresce e às colunas empilhadas, quando cai só no primeiro card. */
.curso-acompanhamento {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 0 0 72px;
  background: #F9F9F9;
}

.curso-acompanhamento *,
.curso-acompanhamento *::before,
.curso-acompanhamento *::after {
  box-sizing: border-box;
}

.curso-acompanhamento__faixa {
  padding: 56px var(--curso-margem) calc(56px + 126px);
  background: linear-gradient(180deg, #FA0069 46.88%, #E6F7FF 130.89%);
}

/* Um h2 só: o leitor de tela lê a frase inteira. O span em bloco dá as duas linhas do Figma. */
.curso-acompanhamento .curso-acompanhamento__title {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.11;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.curso-acompanhamento .curso-acompanhamento__title span {
  display: block;
  font-weight: 700;
}

/* minmax(0, 1fr) deixa a trilha encolher abaixo do min-content do card; o stretch padrão dá aos três
   a altura do mais alto. O position põe os cards acima da faixa, que eles cobrem pelos 126px. */
.curso-acompanhamento .curso-acompanhamento__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 46px);
  margin: -126px 0 0;
  padding: 0 var(--curso-margem);
  list-style: none;
}

.curso-acompanhamento .curso-acompanhamento__card {
  container-type: inline-size;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 0 20.41px 0 #00000040;
}

/* As medidas são as do card de 368px em 1440px, cada uma em min(px, px/368 do card): no desktop dá o
   px do desenho, quando o card encolhe ela encolhe junto e, empilhado, para no px do desenho. O cqi
   lê o card, por isso elas ficam aqui e não nele. Alinhado à esquerda: o centro é só do título. */
.curso-acompanhamento__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: min(34px, 9.239cqi) min(55px, 14.946cqi) min(64px, 17.391cqi);
}

/* Altura comum aos três ícones; a largura sai da proporção de cada arquivo. */
.curso-acompanhamento .curso-acompanhamento__icone {
  display: block;
  width: auto;
  max-width: none;
  height: min(38px, 10.326cqi);
  margin: 0 0 min(12px, 3.261cqi);
}

/* O piso de 18px ainda deixa "individualizado", que não quebra, dentro do card mais estreito. O
   título avança 10px sobre o recuo da direita: na quebra de linha o Chrome mede "Evolução de acordo"
   palavra a palavra, sem o kerning entre elas, e dá 264px para os 259px do card, quebrando a linha
   que no desenho é uma só. */
.curso-acompanhamento .curso-acompanhamento__card-title {
  margin: 0 calc(-1 * min(10px, 2.717cqi)) 0 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: max(18px, min(26.53px, 7.209cqi));
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-acompanhamento .curso-acompanhamento__card-title strong {
  display: block;
  color: #FA0069;
  font-weight: 600;
}

/* O max-width em em segura as quebras de linha do desenho sem <br>. */
.curso-acompanhamento .curso-acompanhamento__card-texto {
  max-width: 13.7em;
  margin: min(14px, 3.804cqi) 0 0;
  padding: 0;
  color: #3B3B3B;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: max(14px, min(16px, 4.348cqi));
  line-height: 1.42;
  text-align: left;
}

/* Empilha no mesmo corte do original. O título continua centralizado, como pede o SDD (lá ele vai
   para a esquerda). */
@media (max-width: 768px) {
  .curso-acompanhamento {
    padding-bottom: 48px;
  }

  .curso-acompanhamento__faixa {
    padding: 40px var(--curso-margem) calc(32px + 100px);
  }

  .curso-acompanhamento .curso-acompanhamento__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-top: -100px;
  }

  /* Empilhado, o card tem a largura da coluna: o texto ocupa a largura dele em vez de ficar preso nos
     13.7em do card de 368px, e o pé encolhe para o card não sobrar vazio embaixo. */
  .curso-acompanhamento__corpo {
    padding-bottom: 40px;
  }

  .curso-acompanhamento .curso-acompanhamento__card-texto {
    max-width: none;
  }
}

/* ==========================================================================
   Seção 12: Certificado oficial (arte com o nome do curso + texto)
   ========================================================================== */

/* O OfficialCertificate do site-abra-v2 (features/official-certificate/styles.ts), como a página de
   Sketch Automotivo Manual o usa: contido, com brilho, parágrafos em #7E7E7E, respiro "roomyFlushMobile"
   (80/60px; no mobile 40px acima e nada abaixo) e a arte encostada na calha no mobile. */
.curso-certificado {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 80px var(--curso-margem) 60px;
  background: #FFFFFF;
}

.curso-certificado *,
.curso-certificado *::before,
.curso-certificado *::after {
  box-sizing: border-box;
}

.curso-certificado__linha {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* A arte já vem com sombra e cantos arredondados desenhados, cercada por uma margem transparente; o
   recuo de -20px alinha a borda visível do certificado com o resto do conteúdo. No Figma a arte está
   no tamanho do arquivo (541px, ~510px visíveis), maior que os 480px do original; abaixo de 1200px
   ela fica com os mesmos ~45% da linha, para a coluna de texto não espremer. O container mede a
   largura da imagem para o nome do curso escalar com ela. */
.curso-certificado__arte {
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  width: min(541px, 45%);
  margin-left: -20px;
  overflow: hidden;
  border-radius: 12px;
}

.curso-certificado .curso-certificado__arte img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* O nome do curso por cima da arte, que chegou só com o "Formado em" (como o CertificateArtTitle do
   Sketch). Medido no gabarito certificado-abra-curso-online.png, na escala do arquivo (541px): o
   texto começa na vertical do "Formado em" (x = 297), vai até 30px antes da borda direita do painel
   (x = 481) e a primeira linha de base fica em y ≈ 230, com Montserrat 25px e 29px de entrelinha.
   Cada medida é px/541 em cqi do .curso-certificado__arte, que tem a largura da imagem.

   O painel acaba em y = 298 e o texto não passa de y ≈ 285: no corpo do desenho cabem duas linhas.
   Os nomes mais longos ganham um corpo menor no PHP, pelo número de caracteres. As faixas foram
   medidas com todos os cursos publicados: até 23 caracteres cabem em 25px, até 34 em 20px (três
   linhas, até y = 277) e os maiores, de 36 e 38, em 17px. */
.curso-certificado__nome {
  position: absolute;
  top: 38.262cqi;
  left: 54.898cqi;
  z-index: 1;
  width: 34.011cqi;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 4.621cqi;
  line-height: 1.16;
  overflow-wrap: break-word;
  pointer-events: none;
}

.curso-certificado__nome--medio {
  font-size: 3.697cqi; /* 20px no arquivo */
}

.curso-certificado__nome--menor {
  font-size: 3.142cqi; /* 17px no arquivo */
}

/* O Shine do original: atravessa a arte toda vez que ela entra na tela (o script liga a classe). */
.curso-certificado__brilho {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  transform: translateX(-150%) skewX(-25deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .curso-certificado--visivel .curso-certificado__brilho {
    animation: curso-certificado-brilho 1.5s ease-in-out .5s infinite;
  }
}

@keyframes curso-certificado-brilho {
  from {
    transform: translateX(-150%) skewX(-25deg);
  }

  to {
    transform: translateX(250%) skewX(-25deg);
  }
}

.curso-certificado__texto {
  flex: 1;
  min-width: 0;
}

.curso-certificado .curso-certificado__title {
  margin: 0 0 24px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-certificado .curso-certificado__texto p {
  margin: 0 0 1em;
  padding: 0;
  color: #7E7E7E;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: normal;
  text-align: left;
}

.curso-certificado .curso-certificado__texto p:last-child {
  margin-bottom: 0;
}

.curso-certificado .curso-certificado__texto strong {
  font-weight: 600;
}

/* O Typography do original já usa o corpo do mobile no tablet (tabletFontSize || mobileFontSize). */
@media (max-width: 1024px) {

  .curso-certificado .curso-certificado__texto p {
    font-size: 16px;
  }
}

/* Empilha no mesmo corte do original, arte primeiro. */
@media (max-width: 768px) {
  .curso-certificado {
    padding: 40px var(--curso-margem) 0;
  }

  .curso-certificado__linha {
    flex-direction: column;
    gap: 32px;
  }

  .curso-certificado__arte {
    width: 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   Seção 13: Não tenho tempo (objeção nas pílulas + frases em rodízio)
   ========================================================================== */

/* O DontHaveTime do site-abra-v2 (sketch-automotivo-manual/components/sections/dont-have-time), sem
   os carros e as linhas de pincel do Sketch: o balão vira duas pílulas e o fundo ganha o pontilhado
   da Seção 04. Corpos, cores e distâncias entre os blocos são os do original; os pontos ficam rosa,
   como no Figma. */
.curso-tempo {
  position: relative;
  overflow: hidden;
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 72px 0 100px;
  background: #FFFFFF;
}

.curso-tempo *,
.curso-tempo *::before,
.curso-tempo *::after {
  box-sizing: border-box;
}

/* O mesmo pontilhado do .curso-bonus::before, maior: no Figma ele vai do canto inferior esquerdo
   até perto do centro da seção. Só decoração, atrás do conteúdo; o topo, que é o trecho mais
   ralo, fica cortado pela própria seção. */
.curso-tempo::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: min(900px, 65%);
  aspect-ratio: 762 / 650;
  background: url("img/decoracao-borda-inferior-esquerda.webp") no-repeat left bottom / contain;
  pointer-events: none;
}

.curso-tempo__container {
  position: relative;
  z-index: 1;
  padding: 0 var(--curso-margem);
  text-align: center;
}

/* As duas pílulas de 837 × 117.59px do Figma, a cinza 17px à esquerda e 18px abaixo da frente. O
   deslocamento fica dentro da caixa (854px no total, que é o que o Figma centraliza em 1440px),
   então o conjunto encolhe com a coluna sem vazar para os lados. A cinza é só volume: o texto
   está todo na da frente. */
.curso-tempo__pilulas {
  --curso-tempo-x: 17px;
  --curso-tempo-y: 18px;
  position: relative;
  width: min(854px, 100%);
  margin: 0 auto;
  padding: 0 0 var(--curso-tempo-y) var(--curso-tempo-x);
}

.curso-tempo__pilulas::before {
  content: "";
  position: absolute;
  top: var(--curso-tempo-y);
  right: var(--curso-tempo-x);
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 100px;
  background: #373737;
}

/* O h2 da seção, como o BalloonQuote do original: a objeção que as frases respondem. */
.curso-tempo .curso-tempo__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 117.59px;
  margin: 0;
  padding: 16px 48px;
  border-radius: 100px;
  background: linear-gradient(90deg, #FA0069 0%, #9536B9 100%);
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

/* Sem rodízio (sem JS ou com movimento reduzido), as quatro frases ficam uma embaixo da outra. */
.curso-tempo__frases {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.curso-tempo .curso-tempo__frase {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 35px;
  line-height: 1.2;
  text-align: center;
}

.curso-tempo .curso-tempo__frase strong {
  font-weight: 700;
}

/* Em rodízio: todas na mesma célula, então a caixa mede a maior frase em cada largura e a troca não
   mexe no que vem abaixo. A inativa some só na opacidade e continua na árvore de acessibilidade. */
.curso-tempo--rodizio .curso-tempo__frases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.curso-tempo--rodizio .curso-tempo__frase {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.curso-tempo--rodizio .curso-tempo__frase.is-ativa {
  opacity: 1;
  transform: none;
}

/* Indicadores: cada um leva à sua frase. Só existem em rodízio. */
.curso-tempo__pontos {
  display: none;
  justify-content: center;
  gap: 9px;
  margin-top: 38px;
}

.curso-tempo--rodizio .curso-tempo__pontos {
  display: flex;
}

.curso-tempo .curso-tempo__ponto {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2.51px solid #FA0069;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}

.curso-tempo .curso-tempo__ponto[aria-current="true"] {
  background-color: #FA0069;
}

/* A área de clique passa da bolinha sem encostar na da vizinha (menos que metade do gap de cada lado). */
.curso-tempo__ponto::before {
  content: "";
  position: absolute;
  inset: calc(-2.51px - 4px);
  border-radius: 50%;
}

.curso-tempo .curso-tempo__ponto:focus {
  outline: none;
}

.curso-tempo .curso-tempo__ponto:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* Largura controlada para a quebra ficar como no desenho ("que" não cabe na primeira linha). */
.curso-tempo .curso-tempo__subtitulo {
  max-width: 710px;
  margin: 38px auto 0;
  padding: 0;
  color: #3B3B3B;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  text-align: center;
}

.curso-tempo .curso-tempo__subtitulo strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  /* O respiro de baixo é maior que o do original para o trecho mais denso do pontilhado ficar abaixo
     do subtítulo, e não atrás dele. */
  .curso-tempo {
    padding: 45px 0 96px;
  }

  .curso-tempo::before {
    width: min(600px, 100%);
  }

  .curso-tempo__pilulas {
    --curso-tempo-x: 9px;
    --curso-tempo-y: 9px;
  }

  .curso-tempo .curso-tempo__title {
    min-height: 72px;
    padding: 14px 28px;
  }

  .curso-tempo__frases {
    gap: 12px;
    margin-top: 24px;
  }

  .curso-tempo .curso-tempo__frase {
    font-size: 25px;
    line-height: 1.24;
  }

  .curso-tempo__pontos {
    margin-top: 36px;
  }

  .curso-tempo .curso-tempo__subtitulo {
    max-width: none;
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.3;
  }
}

/* A pílula é uma citação dentro de um balão, não um título solto: com os 28px dos títulos do celular
   a frase vai para três linhas. Fica nos 23px do original, em duas. */
@media (max-width: 480px) {
  .curso-tempo .curso-tempo__title {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curso-tempo .curso-tempo__frase,
  .curso-tempo .curso-tempo__ponto {
    transition: none;
  }
}

/* ==========================================================================
   Seção 14: Garantia (card dos 7 dias + meios de pagamento)
   ========================================================================== */

/* Sem componente de origem no site-abra-v2: medidas do Figma. O card avança 45px sobre o fim da Seção
   13 com margem negativa; o flow-root impede que ela colapse e puxe a seção (e o fundo) junto. Sem
   overflow aqui, senão o trecho que avança seria cortado.
   A sombra é a do Figma e escurece o pé da Seção 13 por cima do pontilhado. O position põe a seção na
   camada dos posicionados, depois da 13 (senão o fundo dela cobriria a sombra); o texto da 13, com
   z-index 1, continua por cima. */
.curso-garantia {
  position: relative;
  display: flow-root;
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 0 0 60px;
  background: #F9F9F9;
  box-shadow: -20px -20px 35.2px 0 #00000057;
}

.curso-garantia *,
.curso-garantia *::before,
.curso-garantia *::after {
  box-sizing: border-box;
}

.curso-garantia__container {
  padding: 0 var(--curso-margem);
}

/* Por cima do pontilhado (z-index 0) e do conteúdo (z-index 1) da Seção 13, que vem antes no DOM, e
   por baixo da barra de navegação. O overflow fica no card só para recortar os cantos das duas faixas. */
.curso-garantia__card {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: -45px auto 0;
  border-radius: 24px;
  overflow: hidden;
}

.curso-garantia__topo {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 39px 64px; /* com o selo de 156px, dá os ~234px da faixa no Figma */
  background: linear-gradient(86.37deg, #FA0069 14.01%, #67028E 58.45%);
}

/* O selo vem no tamanho natural (105 × 156), que é o do Figma. */
.curso-garantia__selo {
  flex: 0 0 auto;
  width: 105px;
  height: auto;
}

.curso-garantia__texto {
  flex: 1 1 auto;
  min-width: 0;
}

.curso-garantia .curso-garantia__title {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(var(--curso-titulo) * 1.375);
  line-height: 58px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

/* O SDD diz line-height 100%, mas no print as linhas estão a ~22px umas das outras: vale o print. */
.curso-garantia .curso-garantia__texto p {
  margin: 16px 0 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
}

/* A arte é @2x: os 631px são os da imagem no Figma. */
.curso-garantia__pagamento {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 97px;
  padding: 12px 24px;
  background: #F0F0F0;
}

.curso-garantia .curso-garantia__pagamento-inteira {
  display: block;
  width: 631px;
  max-width: 100%;
  height: auto;
}

/* As duas linhas do mobile. Cada uma é uma janela na arte inteira: na 1ª vão "Pague com segurança",
   b!cash, Visa e PayPal (x 33–651 da arte, 618px); na 2ª, Mastercard, Hipercard, Boleto e American
   Express (x 712–1211, 499px). Os dois recortes vão de y 34 a 104 (70px). A largura da 2ª é
   proporcional à da 1ª, para os logos saírem do mesmo tamanho, e nenhuma passa da escala do desktop
   (metade da arte). As margens em % são relativas à largura da própria janela. */
.curso-garantia__pagamento-linha {
  display: none;
  overflow: hidden;
}

.curso-garantia__pagamento-linha--1 {
  width: min(100%, 309px);
  aspect-ratio: 618 / 70;
}

.curso-garantia__pagamento-linha--2 {
  width: min(80.7443%, 249.5px);
  aspect-ratio: 499 / 70;
}

.curso-garantia .curso-garantia__pagamento-linha img {
  display: block;
  max-width: none;
  height: auto;
}

.curso-garantia .curso-garantia__pagamento-linha--1 img {
  width: 204.2071%;
  margin: -5.5016% 0 0 -5.3398%;
}

.curso-garantia .curso-garantia__pagamento-linha--2 img {
  width: 252.9058%;
  margin: -6.8136% 0 0 -142.6854%;
}

@media (max-width: 1024px) {
  .curso-garantia__card {
    margin-top: -40px;
  }

  .curso-garantia__topo {
    gap: 40px;
    padding: 36px 40px;
  }

  .curso-garantia__selo {
    width: 88px;
  }

  .curso-garantia .curso-garantia__title {
    line-height: 1.15;
  }

  .curso-garantia .curso-garantia__texto p {
    font-size: 17px;
    line-height: 1.15;
  }
}

@media (max-width: 768px) {
  .curso-garantia {
    padding-bottom: 40px;
  }

  /* Menos avanço: a Seção 13 aqui tem 96px de respiro embaixo. */
  .curso-garantia__card {
    margin-top: -32px;
    border-radius: 20px;
  }

  .curso-garantia__topo {
    gap: 24px;
    padding: 32px 24px;
  }

  .curso-garantia__selo {
    width: 64px;
  }

  /* O 100% do Figma fica apertado demais em colunas estreitas. */
  .curso-garantia .curso-garantia__texto p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.3;
  }

  .curso-garantia__pagamento {
    min-height: 0;
    padding: 14px 16px;
  }
}

/* Só empilha quando o texto ao lado do selo ficaria estreito demais. Na mesma largura, os logos numa
   linha só já ficariam pequenos demais para ler, então vão para duas. */
@media (max-width: 600px) {
  .curso-garantia__topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .curso-garantia__pagamento {
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
  }

  .curso-garantia .curso-garantia__pagamento-inteira {
    display: none;
  }

  .curso-garantia__pagamento-linha {
    display: block;
  }
}

/* ==========================================================================
   Seção 15: Investimento (curso avulso × kit)
   ========================================================================== */

/* Sem componente de origem no site-abra-v2: medidas do Figma (seção de ~944px no frame de 1440).
   O fundo são as três camadas do Figma sobre a foto, de cima para baixo:
   - 9047:240, o gradiente do SDD (preto 40% → rosa transparente). O Figma interpola sem pré-multiplicar
     o alpha, então o meio puxa rosa; no CSS (que pré-multiplica) isso vira as paradas intermediárias;
   - 9047:238, roxo diagonal a 20% (dá o tom arroxeado do alto);
   - 9047:238, preto 80% → rosa 80%, a cobertura que escurece a foto. O Figma ainda tem uma parada
     #B7004D no fim, que o render dele não mostra; ficou de fora.
   Conferido contra o render do frame no Figma. */
.curso-investimento {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 73px 0 80px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .4) 48.03%, rgba(63, 0, 26, .3) 60.09%, rgba(125, 0, 53, .2) 72.16%, rgba(188, 0, 79, .1) 84.22%, rgba(250, 0, 105, 0) 96.28%),
    linear-gradient(108.28deg, rgba(103, 2, 142, .2) 18.02%, rgba(0, 0, 0, 0) 99.46%),
    linear-gradient(180deg, rgba(0, 0, 0, .8) 48.03%, rgba(250, 0, 105, .8) 96.28%),
    url("img/investimento-fundo.webp") center / cover no-repeat;
  background-color: #1A0010;
}

/* O passaporte desce 117px abaixo do avulso: com ele, a seção termina 22px depois da foto, como no Figma. */
.curso-investimento:not(.curso-investimento--sem-kit) {
  padding-bottom: 22px;
}

.curso-investimento *,
.curso-investimento *::before,
.curso-investimento *::after {
  box-sizing: border-box;
}

/* Destino dos botões de compra da página: para logo abaixo da barra de navegação fixa, com os 72px
   dela mais 20px de folga, como o HEADER_OFFSET do Next. Logado, a barra do admin soma 32px. O foco
   que vem com o clique não precisa de contorno na seção. */
.curso-investimento {
  scroll-margin-top: 92px;
}

.curso-investimento:focus {
  outline: none;
}

.curso-investimento__container {
  padding: 0 var(--curso-margem);
  text-align: center;
}

.curso-investimento__tag {
  display: block;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18.09px;
  line-height: 1;
  text-transform: uppercase;
}

.curso-investimento .curso-investimento__title {
  margin: 0;
  padding: 6px 0 0;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(var(--curso-titulo) * 1.19);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.curso-investimento .curso-investimento__desc {
  margin: 17px 0 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

/* Centrados pelo eixo vertical: o passaporte, mais alto, avança 160px acima e 117px abaixo do avulso, e
   o alto transparente da foto chega a passar por trás do fim do subtítulo. O vão é o do Figma (681 −
   676.3); a capa de couro só começa 29px para dentro da foto. */
.curso-investimento__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: -7px;
  text-align: left;
}

/* Sem o passaporte, nada passa por trás do subtítulo: o avulso fica a ~130px dele, onde ficaria ao lado
   do kit. */
.curso-investimento--sem-kit .curso-investimento__cards {
  margin-top: 87px;
}

.curso-investimento__card {
  flex: 0 1 382px;
  min-width: 0;
}

/* A foto do passaporte aberto (507×761 no Figma) é o card. Com o aspect-ratio, o card cresce se o
   conteúdo passar da altura, e a foto estica junto (o celular, que não tem frame no Figma). */
.curso-investimento__card--kit {
  position: relative;
  flex: 0 0 507px;
  aspect-ratio: 507 / 761;
  background: url("img/investimento-passaporte.webp") center / 100% 100% no-repeat;
}

.curso-investimento__card--avulso {
  overflow: hidden; /* recorta os cantos da faixa do nome */
  border-radius: 20px;
  box-shadow: 16.19px 16.19px 20px 0 #0000003B;
}

/* O conteúdo na página creme, nas medidas do Figma: em % da largura do card (99, 73, 141 e 75px dos
   507), para acompanhar a foto quando ela encolhe. */
.curso-investimento__caixa {
  padding: 19.53% 14.4% 27.8% 14.79%;
}

/* Nome do curso (avulso). Nomes longos quebram linha. */
.curso-investimento .curso-investimento__nome {
  margin: 0;
  padding: 30px 24px;
  background: #FA0069;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 24.29px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* No kit, o título é o carimbo "Passaporte para o futuro" (254px dos 359 úteis no Figma). */
.curso-investimento .curso-investimento__card--kit .curso-investimento__nome {
  padding: 0;
  background: none;
  font-size: 0;
  line-height: 0;
}

.curso-investimento .curso-investimento__carimbo {
  display: block;
  width: 70.85%;
  max-width: none;
  height: auto;
}

.curso-investimento__corpo {
  padding: 18px 38px 32px;
  background: linear-gradient(214.38deg, #FFFFFF 8.51%, #EBEBEB 100.09%);
  color: #000000;
}

.curso-investimento__card--kit .curso-investimento__corpo {
  padding: 0;
  background: none;
}

/* Com :where() o reset pesa só uma classe, e as margens de cada bloco abaixo valem. */
.curso-investimento :where(.curso-investimento__corpo p) {
  margin: 0;
  padding: 0;
  text-align: left;
}

.curso-investimento__off {
  display: inline-block;
  margin-bottom: 11px;
  padding: 0 13px;
  border-radius: 13.09px;
  background: #67028E;
  color: #F6DEFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13.09px;
  line-height: 26.18px;
  white-space: nowrap;
}

/* "12x de" e a parcela, em duas linhas, com o cartão ao lado da parcela. */
.curso-investimento .curso-investimento__parcelas {
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  line-height: 1.11;
}

.curso-investimento__vezes {
  font-weight: 500;
  font-size: 30.94px;
}

.curso-investimento__parcela {
  display: flex;
  flex-wrap: wrap; /* em tela muito estreita o cartão desce, em vez de cobrir o valor */
  align-items: center;
  column-gap: 16px;
  font-weight: 700;
  font-size: 44.19px;
}

.curso-investimento__valor {
  white-space: nowrap;
}

.curso-investimento .curso-investimento__cartao {
  display: block;
  width: 45px;
  max-width: none;
  height: auto;
}

.curso-investimento .curso-investimento__avista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 11px;
  margin-top: 22px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 27.48px;
  line-height: 1;
}

.curso-investimento__etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 43.98px;
  height: 17.92px;
  padding: 0 6px;
  border: 1px solid #000000;
  border-radius: 9px;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* O divisor é a borda de cima da lista. */
.curso-investimento .curso-investimento__beneficios {
  margin: 21px 0 0;
  padding: 22px 0 0;
  border-top: .81px solid #676767;
  list-style: none;
}

.curso-investimento .curso-investimento__beneficios li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 13px 0 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13.96px;
  line-height: 1;
}

.curso-investimento .curso-investimento__beneficios li:first-child {
  margin-top: 0;
}

.curso-investimento .curso-investimento__beneficios strong {
  font-weight: 600;
}

.curso-investimento__marcador {
  display: flex;
  flex: 0 0 17px;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: .56px solid #FA0069;
  border-radius: 50%;
  background: #FA0069;
  color: #FFFFFF;
}

.curso-investimento__marcador svg {
  width: 9px;
  height: auto;
  transform: rotate(180deg); /* o desenho aponta para a esquerda */
}

/* O MATRICULE-SE também é .btn-subscribe (tracking do ACF); aqui anula o visual herdado dela. */
.curso-investimento .curso-investimento__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 46px;
  margin: 23px 0 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: #FA0069;
  box-shadow: none;
  animation: none;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity .2s ease;
}

.curso-investimento a.curso-investimento__cta:hover {
  color: #FFFFFF;
  opacity: .875;
}

.curso-investimento a.curso-investimento__cta:focus-visible {
  outline: 2px solid #67028E;
  outline-offset: 3px;
}

.curso-investimento .curso-investimento__cta:disabled {
  cursor: default;
}

/* Kit: tudo impresso na página creme do passaporte, em preto. As margens são as distâncias do Figma
   entre um bloco e outro. */
.curso-investimento__card--kit .curso-investimento__corpo {
  color: #000000;
}

/* Por cima da borda de cima da capa de couro (58px dos 761 da foto): o centro fica a 8.85% da altura,
   para acompanhar a capa quando a foto estica no celular. */
.curso-investimento__selo {
  position: absolute;
  z-index: 1;
  top: calc(8.85% - 17.69px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 174px;
  padding: 0 20px;
  border: 1px solid #060505;
  border-radius: 17.69px;
  background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13.86px;
  line-height: 33.38px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.curso-investimento .curso-investimento__de {
  margin-top: 4px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 15.22px;
  line-height: 1;
}

.curso-investimento__de s {
  font-weight: 700;
  text-decoration: line-through;
}

.curso-investimento .curso-investimento__oferta {
  display: inline-block;
  max-width: 100%;
  min-width: 224px;
  margin-top: 16px;
  padding: 0 14px;
  border-radius: 14.74px;
  background: #FA0069;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14.74px;
  line-height: 29px;
  text-align: center;
  text-transform: uppercase;
}

/* Sem background-clip: text, fica o roxo do fim do gradiente. */
.curso-investimento__card--kit .curso-investimento__parcelas {
  margin-top: 8px;
  color: #67028E;
}

.curso-investimento__card--kit .curso-investimento__vezes {
  font-size: 34.84px;
}

/* Em Montserrat, "R$ XXX,XX" ocupa ~275px dos 359px úteis do kit: com mais vão o cartão desceria. No
   Figma a parcela fica 8px mais perto do "12x de" (line-height 0.91, que aqui cortaria o gradiente do
   cifrão), e o cartão, centrado nela. */
.curso-investimento__card--kit .curso-investimento__parcela {
  column-gap: 12px;
  margin-top: -8px;
  font-size: 49.76px;
}

.curso-investimento .curso-investimento__card--kit .curso-investimento__cartao {
  width: 51px;
}

.curso-investimento .curso-investimento__card--kit .curso-investimento__avista {
  gap: 6px 8px;
  margin-top: 18px;
  font-size: 30.94px;
}

.curso-investimento__card--kit .curso-investimento__etiqueta {
  min-width: 49.53px;
  height: 20.18px;
  border-width: 1.12px;
  border-radius: 10.14px;
  font-size: 7.88px;
}

/* "Cada curso sai" / "por apenas R$ x", em duas linhas ao lado do ícone. */
.curso-investimento .curso-investimento__economia {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 15.22px;
  line-height: .8816;
}

.curso-investimento__economia strong {
  font-weight: 800;
}

.curso-investimento .curso-investimento__economia img {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: auto;
  margin-left: 3px;
}

/* O divisor do kit tem 210px dos 359 úteis, e não a largura toda: vai no fundo, e não na borda. */
.curso-investimento .curso-investimento__card--kit .curso-investimento__beneficios {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 0;
  background: linear-gradient(#000000, #000000) left top / 58.5% .91px no-repeat;
}

.curso-investimento .curso-investimento__card--kit .curso-investimento__beneficios li {
  margin-top: 6.4px;
  font-size: 14.21px;
}

.curso-investimento .curso-investimento__card--kit .curso-investimento__beneficios li:first-child {
  margin-top: 0;
}

.curso-investimento .curso-investimento__card--kit .curso-investimento__cta {
  min-height: 50.4px;
  margin-top: 17px;
  border-radius: 4.58px;
  font-weight: 600;
  font-size: 18.5px;
}

/* Gradientes de texto do Figma. Sem background-clip: text, fica a cor sólida de cima. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .curso-investimento__card--avulso .curso-investimento__avista .curso-investimento__valor,
  .curso-investimento__card--kit .curso-investimento__vezes,
  .curso-investimento__card--kit .curso-investimento__parcela .curso-investimento__valor {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .curso-investimento__card--avulso .curso-investimento__avista .curso-investimento__valor {
    background-image: linear-gradient(91.55deg, #000000 0.69%, #3A3A3A 97.38%);
  }

  .curso-investimento__card--kit .curso-investimento__vezes,
  .curso-investimento__card--kit .curso-investimento__parcela .curso-investimento__valor {
    background-image: linear-gradient(254.62deg, #FA0069 10.18%, #67028E 99.79%);
  }
}

@media (max-width: 1024px) {
  .curso-investimento .curso-investimento__title {
    line-height: 1.1;
  }

}

/* O avulso (382px), o vão e o passaporte (507px) só cabem lado a lado nos 895px úteis de 1100px: abaixo
   disso, empilha, avulso primeiro. O alto transparente da foto já afasta o selo do avulso. Empilhado, a
   capa de couro fica da largura do avulso (100%, até 430px): ela ocupa 89.55% da foto (de 29.2 a 483.2
   nos 507px), então o card vai a 111.67%, até 480.2px. O flex centraliza a foto, mas a capa está 2.7px
   à direita do centro dela: o translate devolve esses 0.53%. */
@media (max-width: 1100px) {
  .curso-investimento__cards,
  .curso-investimento--sem-kit .curso-investimento__cards {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
  }

  .curso-investimento__card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 430px;
  }

  .curso-investimento__card--kit {
    width: min(111.67%, 480.2px);
    max-width: none;
    transform: translateX(-.53%);
  }
}

/* Com o card mais estreito, a página creme fica apertada para o respiro do Figma: o conteúdo abre para
   perto da borda dela (8.8% da foto) e desce mais no fim, porque a foto estica na altura. */
@media (max-width: 640px) {
  .curso-investimento__caixa {
    padding: 19.53% 11% 30% 11.5%;
  }
}

@media (max-width: 768px) {
  .curso-investimento {
    padding: 56px 0 64px;
  }

  .curso-investimento__tag {
    font-size: 16px;
  }

  .curso-investimento .curso-investimento__desc {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.2;
  }
}

/* Celular: cards a ~300px. Menos respiro lateral e preços menores para a parcela caber com o cartão. */
@media (max-width: 480px) {

  .curso-investimento .curso-investimento__nome {
    padding: 24px 20px;
    font-size: 21px;
  }

  .curso-investimento__card--avulso .curso-investimento__corpo {
    padding: 18px 22px 26px;
  }

  .curso-investimento__vezes,
  .curso-investimento__card--kit .curso-investimento__vezes {
    font-size: 24px;
  }

  .curso-investimento__parcela,
  .curso-investimento__card--kit .curso-investimento__parcela {
    column-gap: 10px;
    font-size: 34px;
  }

  .curso-investimento .curso-investimento__cartao,
  .curso-investimento .curso-investimento__card--kit .curso-investimento__cartao {
    width: 36px;
  }

  .curso-investimento .curso-investimento__avista,
  .curso-investimento .curso-investimento__card--kit .curso-investimento__avista {
    margin-top: 16px;
    font-size: 23px;
  }

  .curso-investimento .curso-investimento__de,
  .curso-investimento .curso-investimento__economia {
    font-size: 13.5px;
  }

  .curso-investimento .curso-investimento__oferta {
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 12px;
    line-height: 26px;
  }

  .curso-investimento .curso-investimento__card--kit .curso-investimento__beneficios li {
    font-size: 13.5px;
  }

  /* A foto estica mais que no tablet (o card passa de 2x a altura pela largura): o conteúdo desce
     para começar na página creme, que abre a 10% da altura, e o botão não chegar no código de barras,
     a 83%. */
  .curso-investimento__caixa {
    padding-top: 24%;
    padding-bottom: 38%;
  }

  .curso-investimento__card--kit .curso-investimento__parcela {
    margin-top: 0;
  }

  .curso-investimento .curso-investimento__card--kit .curso-investimento__cta {
    min-height: 46px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 14.5px;
  }
}

/* Até 400px o cartão encostaria no carimbo "4 cursos online" da foto, que começa a 68% da largura. */
@media (max-width: 400px) {
  .curso-investimento .curso-investimento__card--kit .curso-investimento__cartao {
    display: none;
  }
}

@media (max-width: 360px) {
  .curso-investimento__parcela,
  .curso-investimento__card--kit .curso-investimento__parcela {
    font-size: 30px;
  }

  .curso-investimento .curso-investimento__oferta {
    font-size: 11px;
  }

  .curso-investimento .curso-investimento__card--kit .curso-investimento__cta {
    font-size: 13px;
  }
}

/* ==========================================================================
   Seção 17: 1% Transforma
   ========================================================================== */

/*
 * O OnePercentBanner (fullBleed) do site-abra-v2: arte e texto em duas colunas iguais no container de
 * 1200px, 70px acima e abaixo. O gradiente é o do SDD (o original da página gravada é preto/azul), e a arte
 * fica com os ~560px da captura do Figma em vez dos 501 do original.
 */
.curso-um-por-cento {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 70px 0;
  background: linear-gradient(90.64deg, #1F1916 42.73%, #FA0069 98.01%);
}

.curso-um-por-cento *,
.curso-um-por-cento *::before,
.curso-um-por-cento *::after {
  box-sizing: border-box;
}

.curso-um-por-cento__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  padding: 0 var(--curso-margem);
}

/* O h2 só embrulha a arte: sem o espaço de linha, a altura é a da imagem. */
.curso-um-por-cento .curso-um-por-cento__title {
  justify-self: center;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.curso-um-por-cento__title img {
  display: block;
  width: 560px;
  max-width: 100%;
  height: auto;
}

/* O max-width dá as quebras do Figma sem <br>. */
.curso-um-por-cento .curso-um-por-cento__texto {
  justify-self: center;
  max-width: 495px;
  margin: 0;
  padding: 0;
  color: #FBFBFB;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
}

.curso-um-por-cento .curso-um-por-cento__texto strong {
  font-family: inherit;
  font-weight: 700;
}

/* Abaixo de 1024px empilha, como o GS.Grid do original. */
@media (max-width: 1024px) {
  .curso-um-por-cento__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }
}

/* No mobile o original centraliza tudo e estreita o texto. A arte para nos mesmos 300px do texto (o original
   usa 70vw, que dentro do zoom não é confiável). */
@media (max-width: 768px) {
  .curso-um-por-cento {
    padding: 50px 0;
  }

  .curso-um-por-cento__title img {
    width: 300px;
  }

  .curso-um-por-cento .curso-um-por-cento__texto {
    max-width: 300px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }
}

/* ==========================================================================
   Seção 18: Perguntas frequentes
   ========================================================================== */

/*
 * O CourseFaq do site-abra-v2 (features/faq + collapse/CollapseItem): uma pergunta aberta por vez, a
 * primeira já aberta, e o "+" que gira e vira "×" no círculo rosa. A aparência segue a captura do
 * Figma, que difere do original: pergunta em Montserrat regular (lá é Roboto bold), título em 500 e
 * divisória só entre os itens (lá também há uma depois do último). Lista na largura do container.
 */
.curso-faq {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 60px 0 70px;
  background: #FFFFFF;
}

.curso-faq *,
.curso-faq *::before,
.curso-faq *::after {
  box-sizing: border-box;
}

.curso-faq__container {
  padding: 0 var(--curso-margem);
}

.curso-faq .curso-faq__title {
  margin: 0 0 70px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

.curso-faq__item {
  padding: 22px 0;
}

.curso-faq__item + .curso-faq__item {
  border-top: 1px solid #CCCCCC;
}

.curso-faq .curso-faq__pergunta {
  margin: 0;
  padding: 0;
}

.curso-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.curso-faq__toggle:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 4px;
}

/* Item flex que encolhe para a pergunta longa quebrar sem empurrar o botão. */
.curso-faq__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* O mesmo "+" de duas barras da Seção 03, no círculo de 42px do original. */
.curso-faq__icone {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1.4px solid #FA0069;
  border-radius: 50%;
  background: transparent;
}

.curso-faq__icone::before,
.curso-faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.8px;
  border-radius: 1px;
  background: #FA0069;
  transform: translate(-50%, -50%);
}

.curso-faq__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.curso-faq__toggle[aria-expanded="true"] .curso-faq__icone {
  background: #FA0069;
  transform: rotate(45deg);
}

.curso-faq__toggle[aria-expanded="true"] .curso-faq__icone::before,
.curso-faq__toggle[aria-expanded="true"] .curso-faq__icone::after {
  background: #FFFFFF;
}

/* Abre pela altura real da resposta (grid 0fr → 1fr), sem altura fixa. */
.curso-faq__painel {
  display: grid;
  grid-template-rows: 0fr;
}

.curso-faq__item.is-aberto .curso-faq__painel {
  grid-template-rows: 1fr;
}

/* A margem da direita deixa a resposta fora da coluna do botão, como na captura. */
.curso-faq__resposta {
  min-height: 0;
  overflow: hidden;
  padding-right: 66px;
}

.curso-faq .curso-faq__resposta p {
  margin: 0;
  padding: 28px 0 14px;
  color: #484848;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: break-word;
}

.curso-faq__resposta a {
  color: #FA0069;
  text-decoration: underline;
}

/* As durações e a curva do CollapseItem do original. */
@media (prefers-reduced-motion: no-preference) {
  .curso-faq__painel {
    transition: grid-template-rows .5s cubic-bezier(.25, .46, .45, .94);
  }

  .curso-faq__icone {
    transition: transform .3s ease, background-color .3s ease;
  }
}

@media (max-width: 1024px) {
  .curso-faq {
    padding: 50px 0 60px;
  }

  .curso-faq .curso-faq__title {
    margin-bottom: 50px;
  }

  .curso-faq__toggle {
    font-size: 20px;
  }

  .curso-faq__resposta {
    padding-right: 0;
  }
}

/* No mobile o original encolhe o título e o círculo (32px) e aproxima o texto do botão. */
@media (max-width: 768px) {
  .curso-faq {
    padding: 40px 0;
  }

  .curso-faq .curso-faq__title {
    margin-bottom: 30px;
  }

  .curso-faq__item {
    padding: 18px 0;
  }

  .curso-faq__toggle {
    gap: 16px;
    font-size: 17px;
  }

  .curso-faq__icone {
    width: 32px;
    height: 32px;
  }

  .curso-faq__icone::before,
  .curso-faq__icone::after {
    width: 13px;
    height: 1.6px;
  }

  .curso-faq .curso-faq__resposta p {
    padding: 18px 0 8px;
    font-size: 15px;
    line-height: 1.4;
  }
}

/* ==========================================================================
   Presencial e ao vivo: cores próprias do Hero e do 1% Transforma
   ========================================================================== */

/* As mesmas seções do gravado, com as cores pedidas para estas páginas. A classe vem do <article> de
   tmp/curso/presencial-ao-vivo.php e pesa o mesmo que as regras do gravado, que vêm antes. */
.curso-presencial-ao-vivo .curso-hero {
  background: linear-gradient(179.92deg, #FA0069 14.28%, #67028E 75.64%, #000000 99.93%);
}

.curso-presencial-ao-vivo .curso-hero__tag {
  background: #000000;
}

.curso-presencial-ao-vivo .curso-hero__cta {
  background: #FA0069;
}

.curso-presencial-ao-vivo .curso-um-por-cento {
  background: linear-gradient(90.64deg, #1F1916 42.73%, #000000 98.01%);
}

/* ==========================================================================
   Presencial e ao vivo: Flexibilidade de horários (cards que viram)
   ========================================================================== */

/* O FlexibleHours do site-abra-v2 (features/flexible-hours e o CardIconText de features/card-icon-text),
   com as cores da página de Desenho Básico: ícones em #FA0069, "+" e verso em #67028E. Só entra nos
   cursos que a API do Painel marca como individualizados (tmp/curso/presencial-ao-vivo.php). */
.curso-flexibilidade {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 0 var(--curso-margem);
  background: #FFFFFF;
}

/* A mesma linha que separa Conheça a escola do Espaço seguro (.curso-escola__divisor), entre os
   números e esta seção. O respiro de cima vem do fim dos números. */
.curso-flexibilidade .curso-flexibilidade__divisor {
  height: 0;
  margin: 0 0 80px;
  border: 0;
  border-top: 1px solid #000000;
}

.curso-flexibilidade *,
.curso-flexibilidade *::before,
.curso-flexibilidade *::after {
  box-sizing: border-box;
}

.curso-flexibilidade .curso-flexibilidade__title {
  margin: 0 0 60px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

/* Quatro cards de 260px com 50px entre eles (1190px), centralizados. */
.curso-flexibilidade__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.curso-flexibilidade__card {
  width: 260px;
  height: 285px;
  margin: 0;
  padding: 0;
  perspective: 1000px;
}

.curso-flexibilidade__card::before {
  content: none;
}

.curso-flexibilidade--animar .curso-flexibilidade__card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.3s ease-out, transform 1.3s ease-out;
  transition-delay: calc(var(--ordem) * .2s);
}

.curso-flexibilidade--visivel .curso-flexibilidade__card {
  opacity: 1;
  transform: none;
}

.curso-flexibilidade__giro {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.curso-flexibilidade__card.is-virado .curso-flexibilidade__giro {
  transform: rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .curso-flexibilidade__giro {
    transition: none;
  }
}

.curso-flexibilidade__frente,
.curso-flexibilidade__verso {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 27px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.curso-flexibilidade__frente {
  z-index: 2;
  background: #F4F4F4;
}

.curso-flexibilidade__verso {
  z-index: 1;
  padding-left: 35px;
  background: #67028E;
  transform: rotateX(180deg);
}

.curso-flexibilidade__texto {
  position: absolute;
  top: 16%;
  left: 16%;
  max-width: 75%;
}

.curso-flexibilidade__icone {
  display: block;
  margin-bottom: 14px;
  color: #FA0069;
  line-height: 0;
}

.curso-flexibilidade__icone svg {
  display: block;
}

.curso-flexibilidade .curso-flexibilidade__nome {
  margin: 0;
  padding: 0;
  color: #494949;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-flexibilidade .curso-flexibilidade__nome strong {
  font-weight: 700;
}

/* O "+" da frente e o "×" do verso (o mesmo "+" girado 45°), de 28px. */
.curso-flexibilidade .curso-flexibilidade__abrir,
.curso-flexibilidade .curso-flexibilidade__fechar {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
}

.curso-flexibilidade .curso-flexibilidade__abrir {
  right: 30px;
  bottom: 35px;
  background: #67028E;
}

.curso-flexibilidade .curso-flexibilidade__abrir[hidden] {
  display: none;
}

.curso-flexibilidade .curso-flexibilidade__fechar {
  top: 30px;
  right: 30px;
  background: #000000;
  transform: rotate(45deg);
}

.curso-flexibilidade .curso-flexibilidade__abrir:focus-visible,
.curso-flexibilidade .curso-flexibilidade__fechar:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* O texto do verso rola dentro do card, com a barra branca de 8px do original. */
.curso-flexibilidade__verso-texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 35px 29px 20px 0;
  overflow: auto;
  scrollbar-color: #FFFFFF transparent;
}

.curso-flexibilidade__verso-texto::-webkit-scrollbar {
  width: 8px;
}

.curso-flexibilidade__verso-texto::-webkit-scrollbar-thumb {
  border: 2px solid #67028E;
  border-radius: 3px;
  background: #FFFFFF;
}

.curso-flexibilidade__verso-texto::-webkit-scrollbar-track {
  background: transparent;
}

.curso-flexibilidade .curso-flexibilidade__verso-texto p {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15.3px;
  line-height: 1.15;
  text-align: left;
}

/* Margem do original, para o título não correr por baixo do "×". */
.curso-flexibilidade .curso-flexibilidade__verso-texto .curso-flexibilidade__verso-titulo {
  margin-right: 15px;
  font-weight: 700;
}

/* Quando a linha de quatro não cabe, dois por linha (2 × 260px + 50px) em vez do 3 + 1 da quebra.
   Com a margem lateral das seções, os quatro só cabem a partir de 1395px de tela. */
@media (min-width: 901px) and (max-width: 1394px) {
  .curso-flexibilidade__cards {
    max-width: 570px;
  }
}

/* Uma coluna, cards na largura toda e com 240px de altura, como no original. */
@media (max-width: 900px) {
  .curso-flexibilidade .curso-flexibilidade__divisor {
    margin-bottom: 50px;
  }

  .curso-flexibilidade .curso-flexibilidade__title {
    margin-bottom: 40px;
  }

  .curso-flexibilidade__cards {
    flex-direction: column;
    gap: 20px;
  }

  .curso-flexibilidade__card {
    width: 100%;
    height: 240px;
  }

  .curso-flexibilidade__texto {
    left: 0;
    padding-left: 40px;
  }

  .curso-flexibilidade__verso-texto {
    padding-top: 40px;
  }
}

/* ==========================================================================
   Presencial: Localização (vídeo do trajeto + endereço e horários)
   ========================================================================== */

/* O Localization do site-abra-v2 (features/localization) no layout "fullWidth", como a página de
   Sketch Automotivo Manual o usa: variant="course", sem tag, sem respiro em volta e o degradê escuro
   de ponta a ponta, com o conteúdo nos 1200px. Abaixo de 1024px empilha, texto em cima e vídeo
   embaixo. */
.curso-localizacao {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 0 var(--curso-margem);
  background: linear-gradient(to right top, #282828, #000000);
}

.curso-localizacao *,
.curso-localizacao *::before,
.curso-localizacao *::after {
  box-sizing: border-box;
}

.curso-localizacao__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Na largura toda o vídeo encosta na borda esquerda do conteúdo (no card ele ficava recuado). */
.curso-localizacao__midia {
  padding: 50px 0;
}

.curso-localizacao__video {
  height: 530px;
  overflow: hidden;
  border-radius: 22px;
}

.curso-localizacao__video video {
  display: block;
  width: 471px;
  max-width: none;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  object-position: right center;
}

/* A coluna do texto puxa 25px para a esquerda, como no original, e os blocos se distribuem na altura. */
.curso-localizacao__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: -25px;
}

.curso-localizacao .curso-localizacao__title {
  margin: 0;
  padding: 18px 0;
  color: #FBFBFB;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

/* "da Estação Moema" na segunda linha, acima de 768px. */
@media (min-width: 769px) {
  .curso-localizacao__quebra {
    display: block;
  }
}

.curso-localizacao .curso-localizacao__destaque {
  color: #FA0069;
  font-family: "Roboto", sans-serif;
}

.curso-localizacao .curso-localizacao__desc {
  margin: 0;
  padding: 0;
  color: #FBFBFB;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-align: left;
}

.curso-localizacao__info {
  display: flex;
}

.curso-localizacao__icone {
  flex: 0 0 auto;
  margin-right: 10px;
  color: #FA0069;
}

.curso-localizacao .curso-localizacao__rotulo {
  margin: 0;
  padding: 0;
  color: #FBFBFB;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-transform: uppercase;
}

.curso-localizacao .curso-localizacao__endereco {
  display: inline-block;
  margin: 7px 0 7px;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  text-decoration: none;
}

.curso-localizacao .curso-localizacao__endereco:hover {
  text-decoration: underline;
}

.curso-localizacao .curso-localizacao__endereco:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* Só para o leitor de tela, como o .curso-numeros__lido. */
.curso-localizacao__nova-aba {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.curso-localizacao__horarios {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.curso-localizacao .curso-localizacao__horarios li {
  margin: 0 0 7px;
  padding: 0;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

.curso-localizacao .curso-localizacao__horarios li::before {
  content: none;
}

/* O Reveal do original (easeOutQuint, .7s): o vídeo entra 32px da esquerda e os blocos sobem 28px,
   0,14s um depois do outro. As classes só entram pelo script, que não roda com movimento reduzido. */
.curso-localizacao--animar .curso-localizacao__video,
.curso-localizacao--animar .curso-localizacao__bloco {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.curso-localizacao--animar .curso-localizacao__video {
  transform: translateX(-32px);
}

.curso-localizacao--animar .curso-localizacao__bloco {
  transform: translateY(28px);
  transition-delay: calc(var(--ordem, 0) * .14s);
}

.curso-localizacao--visivel .curso-localizacao__video,
.curso-localizacao--visivel .curso-localizacao__bloco {
  opacity: 1;
  transform: none;
}

/* Empilha: texto em cima e o vídeo embaixo com 400px de altura, na largura toda. */
@media (max-width: 1023px) {
  .curso-localizacao__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 20px 0 40px;
  }

  .curso-localizacao__texto {
    order: 1;
    margin-left: 0;
    padding: 0 0 20px;
  }

  .curso-localizacao__info {
    padding-top: 40px;
  }

  .curso-localizacao__midia {
    order: 2;
    padding: 0;
  }

  .curso-localizacao__video {
    height: 400px;
    margin-left: 0;
  }

  .curso-localizacao__video video {
    width: 100%;
  }

  .curso-localizacao .curso-localizacao__endereco,
  .curso-localizacao .curso-localizacao__horarios li {
    font-size: 16px;
  }
}

/* ==========================================================================
   Presencial: Não consegue vir até a escola? (pitch do Online Ao Vivo + vídeo)
   ========================================================================== */

/* Do Figma "Desktop - Cursos WP (Presencial)": título, parágrafo e vídeo (466 × 243) à esquerda e, a
   80px, o card de 609px com os tópicos e o CTA em gradiente. As duas colunas terminam na mesma linha.
   Só entra no presencial de curso que tem Online Ao Vivo. */
.curso-ao-vivo {
  zoom: 1.1765; /* mesmo motivo do .curso-hero */
  padding: 110px var(--curso-margem) 100px;
  background: #FFFFFF;
}

.curso-ao-vivo *,
.curso-ao-vivo *::before,
.curso-ao-vivo *::after {
  box-sizing: border-box;
}

.curso-ao-vivo__container {
  display: grid;
  grid-template-columns: minmax(0, 509fr) minmax(0, 609fr);
  align-items: end;
  column-gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.curso-ao-vivo__texto {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.curso-ao-vivo .curso-ao-vivo__title {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: var(--curso-titulo);
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.curso-ao-vivo .curso-ao-vivo__title strong {
  font-weight: 600;
}

.curso-ao-vivo .curso-ao-vivo__paragrafo {
  margin: 0;
  padding: 0;
  color: #7E7E7E;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.17;
  text-align: left;
}

.curso-ao-vivo .curso-ao-vivo__paragrafo strong {
  font-weight: 700;
}

.curso-ao-vivo__card {
  display: flex;
  flex-direction: column;
  gap: 47px;
  padding: 67px 42px 41px 45px;
  border: 1px solid #000000;
  border-radius: 19px;
  background: rgba(247, 247, 247, .6);
}

/* O marcador do Figma: seta branca numa bolinha de 30px com sombra. */
.curso-ao-vivo__topicos {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.curso-ao-vivo .curso-ao-vivo__topicos li {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  color: #7E7E7E;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.17;
}

.curso-ao-vivo .curso-ao-vivo__topicos li::before {
  content: none;
}

.curso-ao-vivo__marcador {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-left: 5px;
  border-radius: 50%;
  background: #FA0069;
  box-shadow: 0 0 13px rgba(0, 0, 0, .2);
  color: #FFFFFF;
}

.curso-ao-vivo__marcador svg {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.curso-ao-vivo .curso-ao-vivo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 5.65px;
  background: linear-gradient(90deg, #FA0069 0%, #67028E 100%);
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s ease;
}

.curso-ao-vivo .curso-ao-vivo__cta:hover {
  opacity: .875;
}

.curso-ao-vivo .curso-ao-vivo__cta:focus-visible {
  outline: 2px solid #FA0069;
  outline-offset: 3px;
}

/* A caixa de 466 × 243 do Figma, mais baixa que o 16:9 do vídeo (que fica cortado em cima e embaixo),
   e os botões do player do Espaço seguro. */
.curso-ao-vivo__video {
  position: relative;
  overflow: hidden;
  width: 466px;
  max-width: 100%;
  aspect-ratio: 466 / 243;
  border-radius: 20px;
  background: #000000;
}

.curso-ao-vivo__video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curso-ao-vivo .curso-ao-vivo__video > [hidden] {
  display: none;
}

.curso-ao-vivo .curso-ao-vivo__play,
.curso-ao-vivo .curso-ao-vivo__pausar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
}

.curso-ao-vivo .curso-ao-vivo__play {
  display: flex;
  align-items: center;
  justify-content: center;
}

.curso-ao-vivo__play svg {
  width: 100px;
  height: auto;
  transition: transform .2s ease;
}

.curso-ao-vivo__play:hover svg,
.curso-ao-vivo__play:focus-visible svg {
  transform: scale(1.06);
}

.curso-ao-vivo__video--tocando .curso-ao-vivo__play svg {
  display: none;
}

.curso-ao-vivo .curso-ao-vivo__play:focus,
.curso-ao-vivo .curso-ao-vivo__pausar:focus {
  outline: none;
}

.curso-ao-vivo .curso-ao-vivo__play:focus-visible,
.curso-ao-vivo .curso-ao-vivo__pausar:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -6px;
}

.curso-ao-vivo__progresso {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  pointer-events: none;
}

.curso-ao-vivo__barra {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to right, #FA0069, #67028E);
}

/* Até 1024px empilha (lado a lado o card fica estreito demais): título, parágrafo, vídeo na largura
   toda e o card. */
@media (max-width: 1024px) {
  .curso-ao-vivo__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .curso-ao-vivo__video {
    width: 100%;
  }

  .curso-ao-vivo .curso-ao-vivo__paragrafo {
    font-size: 20px;
  }

  .curso-ao-vivo .curso-ao-vivo__topicos li {
    font-size: 18px;
  }

  .curso-ao-vivo .curso-ao-vivo__cta {
    font-size: 17px;
  }
}

@media (max-width: 768px) {
  .curso-ao-vivo {
    padding: 60px var(--curso-margem);
  }

  .curso-ao-vivo__texto {
    gap: 24px;
  }

  .curso-ao-vivo__card {
    gap: 32px;
    padding: 32px 20px;
  }

  .curso-ao-vivo .curso-ao-vivo__paragrafo {
    font-size: 18px;
  }

  .curso-ao-vivo__topicos {
    gap: 20px;
  }

  .curso-ao-vivo .curso-ao-vivo__topicos li {
    gap: 16px;
    font-size: 16px;
  }

  .curso-ao-vivo__marcador {
    flex-basis: 26px;
    height: 26px;
    margin-left: 0;
  }

  .curso-ao-vivo__marcador svg {
    width: 15px;
    height: 15px;
  }

  .curso-ao-vivo .curso-ao-vivo__cta {
    height: 56px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Presencial e ao vivo: Investimento por modalidade (cards + formulário de matrícula)
   ========================================================================== */

/* O CourseCareerInvestment do site-abra-v2 (features/career-investment-section) no visual do print
   aprovado: um card por modalidade e, ao lado, o formulário de lead (EnrollmentContactNotice). A seção
   também é .curso-investimento: fundo, tag, título e destino das âncoras vêm do bloco da Seção 15. As
   medidas saem do print (frame de 1440px): cards de 309px com 52px entre eles, o form de 396px a 123px. */
.curso-matricula {
  padding-bottom: 90px;
}

.curso-matricula__conteudo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 123px;
  margin-top: 60px;
  text-align: left;
}

.curso-matricula__modalidades {
  min-width: 0;
}

.curso-matricula__cards {
  display: flex;
  align-items: stretch;
  gap: 52px;
}

.curso-matricula__card {
  display: flex;
  flex: 0 1 309px;
  flex-direction: column;
  min-width: 0;
  padding: 30px 39px 40px;
  border-radius: 20px;
  background: #FFFFFF;
}

/* A da modalidade da página é preta; a outra, vazada (as Tags do FormatCards). */
.curso-matricula .curso-matricula__pilula {
  margin: 0 0 30px;
  padding: 12px 8px 11px;
  border: 1.5px solid #000000;
  border-radius: 28px;
  background: transparent;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.curso-matricula .curso-matricula__pilula--ativa {
  background: #000000;
  color: #FFFFFF;
}

.curso-matricula__preco {
  padding-bottom: 24px;
  border-bottom: 1px solid #C4C4C4;
}

.curso-matricula .curso-matricula__preco p {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.curso-matricula .curso-matricula__de {
  margin-bottom: 8px;
  color: #5B5B5B;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}

.curso-matricula .curso-matricula__rotulo {
  color: #000000;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}

.curso-matricula .curso-matricula__valor {
  margin-top: 2px;
  color: #000000;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  white-space: nowrap;
}

.curso-matricula__beneficios {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.curso-matricula .curso-matricula__beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  color: #6B6B6B;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
}

/* O marcador é o da Seção 15; aqui desce para a primeira linha do texto. */
.curso-matricula .curso-matricula__beneficios .curso-investimento__marcador {
  margin-top: 3px;
}

.curso-matricula__pontos {
  display: none;
}

/* ---- Formulário ---- */
.curso-matricula__form-card {
  flex: 0 0 396px;
  padding: 38px 33px 30px 35px;
  border-radius: 20px;
  background: #FFFFFF;
}

.curso-matricula .curso-matricula__chamada {
  margin: 0 0 36px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  text-align: left;
}

.curso-matricula .curso-matricula__chamada strong {
  font-weight: 700;
}

.curso-matricula__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.curso-matricula .curso-matricula__input {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 20px 0 25px;
  border: 1px solid #A0A0A0;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
  color: #222222;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}

.curso-matricula .curso-matricula__input::placeholder {
  color: #5B5B5B;
  opacity: 1;
}

.curso-matricula .curso-matricula__input:focus-visible {
  border-color: #000000;
  outline: none;
}

.curso-matricula .curso-matricula__input--erro,
.curso-matricula .curso-matricula__input--erro::placeholder {
  border-color: #FA0069;
  color: #FA0069;
}

.curso-matricula__telefone {
  position: relative;
}

.curso-matricula__ddi {
  position: absolute;
  top: 50%;
  left: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  color: #222222;
  font-size: 15px;
  pointer-events: none;
}

.curso-matricula__ddi svg {
  width: 24px;
  height: auto;
}

.curso-matricula .curso-matricula__telefone .curso-matricula__input {
  padding-left: 98px;
}

/* A seta do select, como o chevron do Dropdown do Next. Sem escolha, o texto fica na cor do placeholder. */
.curso-matricula .curso-matricula__select {
  padding-right: 52px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 12'%3E%3Cpath d='M1 1l9.5 9.5L20 1' fill='none' stroke='%23A0A0A0' stroke-width='2'/%3E%3C/svg%3E") right 25px center / 13px auto no-repeat;
  cursor: pointer;
}

.curso-matricula .curso-matricula__select:invalid,
.curso-matricula .curso-matricula__select:has(option[value=""]:checked) {
  color: #5B5B5B;
}

.curso-matricula .curso-matricula__erro {
  display: block;
  margin: 6px 0 0;
  color: #FA0069;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}

.curso-matricula .curso-matricula__erro:empty {
  display: none;
}

.curso-matricula .curso-matricula__erro--geral {
  margin: 0;
}

.curso-matricula .curso-matricula__lgpd {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 8px 0 0;
  color: #505050;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}

.curso-matricula .curso-matricula__lgpd input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  border: 1px solid #A0A0A0;
  border-radius: 2px;
  background: #FFFFFF;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.curso-matricula .curso-matricula__lgpd input:checked {
  border-color: #FA0069;
  background: #FA0069 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 11px auto no-repeat;
}

.curso-matricula .curso-matricula__lgpd input:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.curso-matricula .curso-matricula__enviar {
  width: 100%;
  height: 49px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: #000000;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}

.curso-matricula .curso-matricula__enviar:hover:not(:disabled) {
  background: #FA0069;
}

.curso-matricula .curso-matricula__enviar:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Aviso de sucesso (o SuccessModal do Next) ---- */
.curso-matricula__sucesso {
  width: min(500px, calc(100% - 32px));
  padding: 30px;
  border: 0;
  border-radius: 20px;
  background: #FFFFFF;
  text-align: center;
}

.curso-matricula__sucesso::backdrop {
  background: rgba(0, 0, 0, .6);
}

.curso-matricula .curso-matricula__sucesso-titulo {
  margin: 0 0 14px;
  padding: 0;
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
}

.curso-matricula .curso-matricula__sucesso-texto {
  margin: 0 0 24px;
  padding: 0;
  color: #7D7D7D;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

.curso-matricula__sucesso form {
  margin: 0;
}

.curso-matricula .curso-matricula__sucesso-fechar {
  padding: 10px 24px;
  border: 0;
  border-radius: 4px;
  background: #FA0069;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
}

/* Os 1189px do print só cabem a partir de ~1400px: abaixo, os vãos e o respiro dos cards encolhem. */
@media (max-width: 1400px) {
  .curso-matricula__conteudo {
    gap: 56px;
  }

  .curso-matricula__cards {
    gap: 32px;
  }

  .curso-matricula__card {
    padding-right: 30px;
    padding-left: 30px;
  }

  .curso-matricula .curso-matricula__valor {
    font-size: 32px;
  }
}

/* Os três blocos não cabem lado a lado: o form desce, abaixo dos cards. */
@media (max-width: 1200px) {
  .curso-matricula__conteudo {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .curso-matricula__form-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 530px;
  }
}

@media (max-width: 1024px) {
  .curso-matricula__conteudo {
    margin-top: 48px;
  }
}

/* Celular: os dois cards viram um carrossel (scroll-snap, como o FormatCards), que vaza até a borda da
   tela; a margem da seção volta como respiro da rolagem. */
@media (max-width: 768px) {
  .curso-matricula {
    padding-bottom: 64px;
  }

  .curso-matricula__conteudo {
    gap: 40px;
    margin-top: 40px;
  }

  .curso-matricula__modalidades {
    width: 100%;
  }

  .curso-matricula__cards {
    gap: 20px;
  }

  .curso-matricula__card {
    flex-basis: auto;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 24px 24px 32px;
  }

  .curso-matricula--escolha .curso-matricula__cards {
    margin: 0 calc(-1 * var(--curso-margem));
    padding: 0 var(--curso-margem);
    overflow-x: auto;
    scroll-padding: 0 var(--curso-margem);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .curso-matricula--escolha .curso-matricula__cards::-webkit-scrollbar {
    display: none;
  }

  .curso-matricula--escolha .curso-matricula__card {
    flex: 0 0 min(280px, 85%);
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }

  .curso-matricula--escolha .curso-matricula__card:last-child {
    scroll-snap-align: end;
  }

  .curso-matricula__pontos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .curso-matricula__ponto {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    transition: width .3s ease, background-color .3s ease;
  }

  .curso-matricula__ponto--ativo {
    width: 46px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  }

  .curso-matricula .curso-matricula__pilula {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .curso-matricula .curso-matricula__de {
    font-size: 13px;
  }

  .curso-matricula .curso-matricula__rotulo {
    font-size: 16px;
  }

  .curso-matricula .curso-matricula__valor {
    font-size: 28px;
  }

  .curso-matricula .curso-matricula__beneficios li {
    font-size: 16px;
  }

  .curso-matricula__beneficios {
    gap: 20px;
  }

  .curso-matricula__form-card {
    padding: 32px 24px 28px;
  }

  .curso-matricula .curso-matricula__chamada {
    margin-bottom: 28px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .curso-matricula .curso-matricula__input {
    height: 50px;
    padding-left: 18px;
  }

  .curso-matricula__ddi {
    left: 18px;
  }

  .curso-matricula .curso-matricula__telefone .curso-matricula__input {
    padding-left: 90px;
  }

  .curso-matricula .curso-matricula__select {
    background-position: right 18px center;
  }

  .curso-matricula .curso-matricula__sucesso-titulo {
    font-size: 24px;
  }
}

/* ==========================================================================
   Modal "Tire suas dúvidas" (plugin abra-tire-suas-duvidas)
   ========================================================================== */

/*
 * O WhatsAppModal do site-abra-v2 (features/whatsapp-contact): card com gradiente cinza → preto
 * encostado na direita, campos brancos só com placeholder, botão rosa na largura toda e o preço na
 * escala do PricingBlock. O modal é do plugin, que serve também as páginas antigas; aqui só muda o
 * visual nas páginas de curso redesenhadas, e os textos que mudam com ele vêm do plugin
 * ($abra_modal_curso_online). Ele fica fora do #view (entra depois do </footer>), então não pega o
 * zoom de 85% e os px do Next valem direto. O body.curso-redesenhado (abra_curso_body_class) na
 * frente de tudo é para vencer o <style> do plugin, que vem depois deste arquivo e usa !important em
 * parte das regras.
 */

/* Fundo escuro do Next no lugar do desfoque que o tema aplica na página com modal aberto. */
body.curso-redesenhado.modal-open ._anime > *:not(#certModal):not(#certModal_2),
body.curso-redesenhado.modal-open .header-menu,
body.curso-redesenhado.modal-open #footer {
  filter: none;
}

body.curso-redesenhado #modal-atendimento {
  background: rgba(0, 0, 0, .6);
  animation: curso-modal-fundo .2s ease;
}

/*
 * O card fica encostado na direita e centrado na vertical; até 767px, no centro da tela. O
 * deslize usa a propriedade translate, que soma com o transform da centralização, para a mesma
 * animação servir aos dois. O plugin deixa o .in no modal desde o carregamento, então a entrada é
 * keyframe (roda a cada display: none → block); a saída é a transição de quando o Bootstrap tira o .in.
 */
body.curso-redesenhado #modal-atendimento .modal-dialog {
  position: fixed;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: 480px;
  max-width: calc(100vw - 32px);
  height: auto;
  margin: 0;
  transform: translateY(-50%);
  translate: 0 0;
  transition: translate .25s ease, opacity .25s ease;
  animation: curso-modal-card .25s ease;
}

body.curso-redesenhado #modal-atendimento:not(.in) .modal-dialog {
  translate: 100% 0;
  opacity: 0;
}

@keyframes curso-modal-fundo {
  from { opacity: 0; }
}

@keyframes curso-modal-card {
  from { translate: 100% 0; opacity: 0; }
}

body.curso-redesenhado #modal-atendimento .modal-content {
  display: block;
  width: 100%;
  height: auto;
  max-height: 95vh;
  max-height: 95dvh;
  padding: 40px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 16px 0 0 16px;
  box-shadow: none;
  background: linear-gradient(205.99deg, #434343 1.63%, rgba(0, 0, 0, .99) 99.46%);
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  scrollbar-color: rgba(255, 255, 255, .4) transparent;
}

body.curso-redesenhado #modal-atendimento .modal-content *,
body.curso-redesenhado #modal-atendimento .modal-content *::before,
body.curso-redesenhado #modal-atendimento .modal-content *::after {
  box-sizing: border-box;
}

body.curso-redesenhado #modal-atendimento .modal-content::-webkit-scrollbar {
  width: 6px;
}

body.curso-redesenhado #modal-atendimento .modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .4);
  border-radius: 3px;
}

body.curso-redesenhado #modal-atendimento .modal-content::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Cabeçalho: título e fechar na primeira linha, aviso embaixo ---- */
body.curso-redesenhado #modal-atendimento .modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 12px;
  height: auto;
  margin: 0 0 20px;
  padding: 0 !important;
  border: 0;
}

body.curso-redesenhado #modal-atendimento .modal-header::before,
body.curso-redesenhado #modal-atendimento .modal-header::after {
  content: none;
}

body.curso-redesenhado #modal-atendimento .modal-header .modal-title {
  grid-area: 1 / 1;
  width: auto;
  margin: 0;
  padding: 0;
  border-bottom: 0 !important; /* o plugin põe o sublinhado rosa inline */
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: break-word;
}

body.curso-redesenhado #modal-atendimento .modal-title strong {
  font-weight: 600;
}

/* O "×" do plugin dá lugar a duas barras, como o + girado do Next. */
body.curso-redesenhado #modal-atendimento .modal-header .close {
  grid-area: 1 / 2;
  position: relative;
  top: auto;
  bottom: auto;
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fa0069;
  font-size: 0;
  opacity: 1;
  text-shadow: none;
  transition: opacity .2s ease;
}

body.curso-redesenhado #modal-atendimento .modal-header .close:hover {
  opacity: .85;
}

body.curso-redesenhado #modal-atendimento .modal-header .close span {
  display: none;
}

body.curso-redesenhado #modal-atendimento .modal-header .close::before,
body.curso-redesenhado #modal-atendimento .modal-header .close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

body.curso-redesenhado #modal-atendimento .modal-header .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Aviso: o texto inteiro leva para a Central de Ajuda. */
body.curso-redesenhado #modal-atendimento .modal-info-text {
  grid-area: 2 / 1 / 3 / -1;
  display: block;
  margin: 0;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}

body.curso-redesenhado #modal-atendimento .modal-info-text:hover {
  color: #fff;
  opacity: .85;
}

/* ---- Formulário ---- */
body.curso-redesenhado #modal-atendimento .modal-body {
  padding: 0 !important;
}

body.curso-redesenhado #modal-atendimento .modal-body::before {
  content: none;
}

body.curso-redesenhado #enviar-whatsapp,
body.curso-redesenhado #enviar-whatsapp .form-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

/* Os rótulos ficam para o leitor de tela; na tela vale o placeholder. */
body.curso-redesenhado #enviar-whatsapp label {
  display: block;
  margin: 0;
  color: #fff;
  font-weight: 400;
}

body.curso-redesenhado #enviar-whatsapp .modal-whats__rotulo,
body.curso-redesenhado #enviar-whatsapp label[for="telefone"],
body.curso-redesenhado #enviar-whatsapp label[for="curso"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A div do telefone traz margin-bottom inline. */
body.curso-redesenhado #enviar-whatsapp .form-group > div {
  margin: 0 !important;
}

body.curso-redesenhado #enviar-whatsapp .form-control {
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 0 20px 0 44px;
  border: 1px solid #a0a0a0;
  border-radius: 11px;
  background-color: #fff;
  box-shadow: none;
  color: #5b5b5b;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* No Next o placeholder é maior que o texto digitado (20px contra 16px). */
body.curso-redesenhado #enviar-whatsapp .form-control::placeholder {
  color: #5b5b5b;
  font-size: 20px;
  opacity: 1;
}

body.curso-redesenhado #enviar-whatsapp .form-control:focus {
  outline: none;
  border-color: #67028e;
}

/* Campo com erro fica rosa, como o hasError do Next. */
body.curso-redesenhado #enviar-whatsapp label:has(.error-msg) .form-control,
body.curso-redesenhado #enviar-whatsapp div:has(> .telefone-error) .form-control {
  border-color: #fa0069;
  color: #fa0069;
}

body.curso-redesenhado #enviar-whatsapp select.form-control {
  padding-right: 60px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L10.5 11L20 1' stroke='%23a0a0a0' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 30px center / 21px 12px;
  cursor: pointer;
}

body.curso-redesenhado #enviar-whatsapp select option {
  background-color: #fff;
  color: #5b5b5b;
}

body.curso-redesenhado #enviar-whatsapp .error-msg {
  margin: 10px 0 0;
  color: #fa0069;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* ---- Telefone (intl-tel-input): bandeira e DDI dentro do campo, lista branca ---- */
/* Os seletores do DDI não ficam presos ao #enviar-whatsapp: com o modal fechado, o plugin mede a
   largura dele num clone solto no body, e é por essa medida que ele afasta o texto do campo. */
body.curso-redesenhado #enviar-whatsapp .iti {
  display: block;
  width: 100%;
}

body.curso-redesenhado #enviar-whatsapp .iti .form-control {
  background-color: #fafbfc;
}

body.curso-redesenhado .iti__selected-country,
body.curso-redesenhado .iti__selected-country:hover {
  width: auto;
  padding: 0 8px 0 15px !important;
  color: #5b5b5b !important;
  font-size: 15px;
  font-weight: 500;
}

body.curso-redesenhado .iti__selected-dial-code {
  margin-left: 8px;
  color: #5b5b5b;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

body.curso-redesenhado .iti__arrow {
  border-top-color: #5b5b5b;
}

body.curso-redesenhado .iti__arrow--up {
  border-top-color: transparent;
  border-bottom-color: #5b5b5b;
}

body.curso-redesenhado .iti__dropdown-content {
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .13);
}

body.curso-redesenhado .iti__country-list {
  background-color: #fff;
  color: #222;
  font-family: "Roboto", sans-serif;
}

body.curso-redesenhado .iti__search-input {
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

body.curso-redesenhado .iti__country {
  padding: 8px 18px;
  font-size: 15px;
}

body.curso-redesenhado .iti__country.iti__highlight {
  background-color: #f2f2f2;
  color: #222;
}

/* ---- Botão de envio ---- */
body.curso-redesenhado #enviar-whatsapp .btn-enviar,
body.curso-redesenhado #enviar-whatsapp .btn-enviar:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background-color: #fa0069;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

body.curso-redesenhado #enviar-whatsapp .btn-enviar:disabled {
  border: 0;
  background-color: #fa0069;
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Preço: escala do PricingBlock (o plugin usa !important nos mesmos seletores) ---- */
body.curso-redesenhado #abra-price-block {
  margin: 0 0 4px;
}

body.curso-redesenhado #abra-price-block .abra-price-wrapper {
  gap: 4px;
}

/* O plugin empilha as colunas abaixo de 400px; no Next elas continuam lado a lado. */
body.curso-redesenhado #abra-price-block .abra-price-grid {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 16px;
}

body.curso-redesenhado #abra-price-block p {
  line-height: 1.2 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-label,
body.curso-redesenhado #abra-price-block .abra-price-or {
  font-size: 22px !important;
  font-weight: 400 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-original,
body.curso-redesenhado #abra-price-block .abra-price-discounted {
  font-size: 22px !important;
  font-weight: 600 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-note {
  font-size: 19px !important;
  font-weight: 400 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-cash {
  font-size: 55px !important;
  font-weight: 500 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-cash-sub {
  font-size: 22px !important;
  font-weight: 400 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-from {
  font-size: 25px !important;
  font-weight: 600 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-to {
  font-size: 30px !important;
  font-weight: 600 !important;
}

body.curso-redesenhado #abra-price-block .abra-price-value {
  font-size: clamp(2rem, 8.6vw, 2.5rem) !important;
}

body.curso-redesenhado #abra-price-block .abra-price-badge {
  padding: 5px clamp(10px, 3vw, 14px);
}

body.curso-redesenhado #abra-price-block .abra-price-badge p {
  font-size: clamp(1rem, 4.6vw, 1.375rem) !important;
}

body.curso-redesenhado #abra-price-block .abra-price-badge-cash p {
  font-weight: 400 !important;
}

/* ---- Botão flutuante do WhatsApp ---- */
/* O bottom vai sem !important: o plugin sobe o botão inline quando há contador regressivo. */
body.curso-redesenhado .chat-tire-suas-duvidas {
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  animation: none;
  transition: transform .2s ease;
}

body.curso-redesenhado .chat-tire-suas-duvidas:hover {
  transform: scale(1.05);
}

/* ---- Mobile: card no centro da tela, campos e textos menores ---- */
@media (max-width: 767px) {
  body.curso-redesenhado #modal-atendimento .modal-dialog {
    right: auto;
    left: 50%;
    width: calc(100vw - 32px);
    transform: translate(-50%, -50%);
  }

  body.curso-redesenhado #modal-atendimento .modal-content {
    padding: 40px 28px;
    border-radius: 16px;
  }

  body.curso-redesenhado #modal-atendimento .modal-header {
    gap: 12px;
    margin-bottom: 14px;
  }

  body.curso-redesenhado #modal-atendimento .modal-header .modal-title {
    font-size: 19px;
  }

  body.curso-redesenhado #modal-atendimento .modal-info-text {
    font-size: 14px;
  }

  body.curso-redesenhado #enviar-whatsapp,
  body.curso-redesenhado #enviar-whatsapp .form-group {
    gap: 12px;
  }

  /* 16px no mínimo: abaixo disso o iOS dá zoom ao focar o campo. */
  body.curso-redesenhado #enviar-whatsapp .form-control {
    height: 52px;
    padding-left: 20px;
  }

  body.curso-redesenhado #enviar-whatsapp .form-control::placeholder {
    font-size: 16px;
  }

  body.curso-redesenhado #enviar-whatsapp select.form-control {
    background-position: right 20px center;
  }

  body.curso-redesenhado #enviar-whatsapp .btn-enviar,
  body.curso-redesenhado #enviar-whatsapp .btn-enviar:hover {
    height: 48px;
    font-size: 19px;
  }

  body.curso-redesenhado #abra-price-block .abra-price-label,
  body.curso-redesenhado #abra-price-block .abra-price-note {
    font-size: 14px !important;
  }

  body.curso-redesenhado #abra-price-block .abra-price-original,
  body.curso-redesenhado #abra-price-block .abra-price-or,
  body.curso-redesenhado #abra-price-block .abra-price-from {
    font-size: 16px !important;
  }

  body.curso-redesenhado #abra-price-block .abra-price-discounted,
  body.curso-redesenhado #abra-price-block .abra-price-cash-sub,
  body.curso-redesenhado #abra-price-block .abra-price-to {
    font-size: 19px !important;
  }

  body.curso-redesenhado #abra-price-block .abra-price-cash {
    font-size: 38px !important;
  }
}

/* Celulares estreitos: o padding de 28px come a largura que os campos precisam. */
@media (max-width: 430px) {
  body.curso-redesenhado #modal-atendimento .modal-content {
    padding: 24px 20px;
  }
}