/* =========================================================
   Revisando Direito — Base Design System (ref: Koursely)
   Arquivo: assets/css/styles.css
   Idioma: pt-BR
   OBS: reescrito para organização e redução de repetição,
        mantendo o comportamento final (últimas regras vencem).
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================================================
   02) Base
========================================================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}
a{
  color: inherit;
  text-decoration: none;
}
body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.55;
}
html{
  font-size: 16px;
  scroll-behavior: smooth;
}
img{
  max-width: 100%;
  display: block;
}

/* =========================================================
   03) Tokens
========================================================= */
:root{
  --azul: #1c5cff;
  --amarelo: #fcd53a;
    --amarelo-hover: #ffd21f;
  --azul-escuro: #150b3d;
  --preto-azulado: #09051a;
  --cinza-1: #81808f;
  --cinza-2: #eaedf9;
  --branco: #ffffff;
  --transparente: rgba(255, 255, 255, 0);
  --cor-fundo: var(--branco);
  --cor-texto: var(--preto-azulado);
  --cor-texto-suave: rgba(9, 5, 26, 0.68);
  --cor-borda: rgba(21, 11, 61, 0.14);
  --fs-hero: clamp(2.35rem, 4.35vw, 3.85rem);
  --fs-body: 1rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --container: 1280px;
  --gutter: 34px;
  --gutter-topbar: 42px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-btn: 12px;
  --sombra-1: 0 10px 30px rgba(9, 5, 26, 0.10);
  --sombra-2: 0 18px 50px rgba(9, 5, 26, 0.14);
  --topbar-altura: 104px;
  --topbar-blur: 10px;
}

/* =========================================================
   04) Layout
========================================================= */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   05) Botoes
========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 38px;
  border-radius: var(--radius-btn);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.111em;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border 0.12s ease, color 0.12s ease;
}
.btn:active{
  transform: translateY(1px);
}
.btn-primario{
  background: var(--preto-azulado);
  color: var(--branco);
  font-weight: var(--fw-bold);
}
.btn-secundario{
  background: var(--transparente);
  color: var(--preto-azulado);
  border: 1px solid var(--azul-escuro);
  font-weight: var(--fw-semibold);
}
.btn-secundario:hover{
  border-color: rgba(21, 11, 61, 0.75);
  background: rgba(234, 237, 249, 0.55);
}
.btn-yellow{
  background: var(--amarelo);
  color: #0b0718;
  border: 1px solid rgba(0, 0, 0, 0.85);
  font-weight: var(--fw-bold);
}

/* =========================================================
   06) Topbar + Menu Mobile
========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;
  height: var(--topbar-altura);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(var(--topbar-blur));
  -webkit-backdrop-filter: blur(var(--topbar-blur));
  box-shadow: 0 2px 5px rgba(21, 11, 61, 0.24);
  border-bottom: none;
}
.topbar .container{
  padding: 0 var(--gutter-topbar);
}
.topbar .btn{
  padding: 12px 22px;
  font-size: 16px;
  line-height: 1.1em;
}
.topbar__wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 22px;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
}
.brand__img{
  height: 62px;
  width: auto;
  display: block;
  object-fit: contain;
}
.nav{
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a{
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: rgba(9, 5, 26, 0.78);
  padding: 10px 10px;
  border-radius: 10px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav a:hover{
  color: var(--preto-azulado);
  background: rgba(234, 237, 249, 0.7);
}
.topbar__acoes{
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-toggle{
  display: none;
  height: 44px;
  width: 44px;
  border-radius: 12px;
  border: 1px solid rgba(9, 5, 26, 0.18);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.menu-toggle:focus{
  outline: 2px solid rgba(28, 92, 255, 0.25);
  outline-offset: 2px;
}

/* =========================================================
   MENU MOBILE — POPOVER (estilo Chrome)
   - não ocupa 100vh
   - não empurra layout
   - sem “pulo” horizontal
========================================================= */

/* evita qualquer overflow lateral causado por transforms/fixed */
html, body{
  overflow-x: hidden;
}

/* Overlay: bem sutil (ou pode deixar transparente) */
.menu-mobile__overlay{
  position: fixed;
  inset: 0;
  background: rgba(9, 5, 26, 0.18); /* sutil, estilo “click outside” */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 1999;
}

.menu-overlay--aberto{
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   MENU MOBILE — FULL WIDTH (clean, tipo Chrome)
   - ocupa 100% da largura
   - não empurra o fundo
   - altura limitada (não 100vh)
========================================================= */

html, body{ overflow-x: hidden; }

/* overlay bem sutil */
.menu-mobile__overlay{
  position: fixed;
  inset: 0;
  background: rgba(9, 5, 26, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 1999;
}
.menu-overlay--aberto{
  opacity: 1;
  pointer-events: auto;
}

/* painel: barra full-width abaixo da topbar */
.menu-mobile{
  position: fixed;
  left: 0;
  right: 0;

  /* cola logo abaixo da topbar */
  top: var(--topbar-altura);

  width: 100%;
  max-height: 52vh;     /* não ocupa tudo */
  overflow: auto;

  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-top: 1px solid rgba(21, 11, 61, 0.10);
  border-bottom: 1px solid rgba(21, 11, 61, 0.12);
  box-shadow: 0 18px 50px rgba(9, 5, 26, 0.18);

  padding: 14px 0 16px 0;

  z-index: 2000;

  /* animação: “desce” como o Chrome */
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;

  contain: paint;
  will-change: transform, opacity;
}

.menu-mobile--aberto{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* header (se existir no HTML, deixa discreto) */
.menu-mobile__head{
  display: none;
}

/* conteúdo alinhado no mesmo container do site */
.menu-mobile__nav{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 12px;
}

/* links: ocupam a largura toda do container */
.menu-mobile__link{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 16px 16px;
  border-radius: 14px;

  font-size: 15px;
  font-weight: var(--fw-semibold);

  color: rgba(9, 5, 26, 0.86);
  background: rgba(234, 237, 249, 0.60);
  border: 1px solid rgba(21, 11, 61, 0.10);

  transition: background 120ms ease, transform 120ms ease;
}

.menu-mobile__link:hover{
  background: rgba(234, 237, 249, 0.90);
}

/* destaque (Contato) */
.menu-mobile__link--destaque{
  background: linear-gradient(180deg, #0e0826 0%, #09051a 100%);
  color: #fff;
  border-color: rgba(0, 0, 0, 0.75);
}
.menu-mobile__link--destaque:hover{
  background: var(--amarelo);
  color: #0b0718;
  border-color: rgba(0, 0, 0, 0.85);
}

/* IMPORTANTÍSSIMO: não travar scroll do body (evita “pulo”) */
.body-menu-aberto{ overflow: auto; }

.menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle__icon{
  width: 20px;
  height: 20px;
  display: block;
}

.menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle__icon{
  width: 20px;
  height: 20px;
  display: block;
}

/* =========================================================
   07) Hero
========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  background: transparent;
  min-height: calc(100vh - var(--topbar-altura));
  display: flex;
  align-items: center;
  padding: 44px 0 72px 0;
}
.hero .container{
  padding-left: var(--gutter-topbar);
  padding-right: var(--gutter);
}
.hero::after{
  content: "";
  position: absolute;
  top: -32px;
  bottom: -46px;
  right: 0;
  left: 0;
  pointer-events: none;
  background-image: url("../img/hero-bg.svg");
  background-repeat: no-repeat;
  background-size: auto 112%;
  background-position: right -180px bottom -44px;
  z-index: 0;
}
.hero__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: start;
  background: transparent;
  padding: 24px 0;
}
.hero__left{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.hero__kicker{
  margin: 0 0 18px 0;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  font-size: 0.98rem;
  color: rgba(9, 5, 26, 0.55);
  text-transform: uppercase;
}
.hero__title{
  margin: 0 0 22px 0;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.8rem, 4.9vw, 4.4rem);
  color: var(--preto-azulado);
}
.hero__highlight{
  color: #ffb55a;
}
.hero__lead{
  margin: 0;
  max-width: 640px;
  color: rgba(9, 5, 26, 0.72);
  font-size: 1.08rem;
  line-height: 1.70;
  text-align: justify;
  text-justify: inter-word;
}
.hero__lead strong{
  color: rgba(9, 5, 26, 0.92);
}
.hero__cta{
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero .btn{
  padding: 18px 44px;
  font-size: 16px;
  line-height: 1.1em;
  border-radius: 12px;
  min-width: 200px;
}
.hero__cta .btn{
  min-width: 210px;
  min-height: 70px;
  white-space: nowrap;
}
.hero .hero__cta .btn-secundario{
  background: var(--preto-azulado);
  color: var(--branco);
  border-color: var(--preto-azulado);
}
.hero .hero__cta .btn-secundario:hover{
  background: var(--amarelo);
  color: #0b0718;
  border-color: rgba(0, 0, 0, 0.85);
}
.hero .hero__cta .btn-yellow{
  background: var(--branco);
  color: var(--preto-azulado);
  border-color: rgba(21, 11, 61, 0.55);
  font-weight: var(--fw-semibold);
}
.hero .hero__cta .btn-yellow:hover{
  background: var(--amarelo);
  color: #0b0718;
  border-color: rgba(0, 0, 0, 0.85);
}

/* =========================================================
   08) Newsletter
========================================================= */
.hero__right{
  padding-left: 0;
}
.newsletter{
  background: rgba(234, 237, 249, 0.65);
  border: 1px solid rgba(9, 5, 26, 0.10);
  border-radius: var(--radius-md);
  padding: 24px 22px 20px 22px;
  max-width: 470px;
  width: 100%;
  margin-left: 0;
  justify-self: start;
}
.newsletter__title{
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  color: var(--preto-azulado);
}
.newsletter__form{
  display: grid;
  gap: 14px;
}
.field{
  display: grid;
  gap: 8px;
}
.field__label{
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  color: rgba(9, 5, 26, 0.78);
}
.field__input{
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(9, 5, 26, 0.14);
  background: #ffffff;
  color: rgba(9, 5, 26, 0.90);
  outline: none;
}
.field__input:focus{
  border-color: rgba(28, 92, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(28, 92, 255, 0.14);
}
.newsletter__legal{
  margin: 8px 0 6px 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(9, 5, 26, 0.62);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.newsletter__legal a{
  color: rgba(9, 5, 26, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.newsletter__btn{
  width: 100%;
  border-radius: 10px;
}
.newsletter .btn-yellow{
  background: var(--amarelo);
  color: #0b0718;
  border: 1px solid rgba(0, 0, 0, 0.85);
  font-weight: var(--fw-bold);
}
.newsletter .btn-yellow:hover{
  background: var(--amarelo-hover);
  color: #0b0718;
  border: 1px solid rgba(0, 0, 0, 0.85);
}

/* =========================================================
   09) Why
========================================================= */
.why{
  padding: 90px 0 80px 0;
  background: #ffffff;
}
.why__title{
  position: relative;
  margin: 0 0 48px 0;
  text-align: center;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.why__title::before,
.why__title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(9, 5, 26, 0.35));
}
.why__title::after{
  background: linear-gradient(to left, transparent, rgba(9, 5, 26, 0.35));
}
.why__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
  align-items: start;
}
.why__item{
  text-align: center;
  padding: 6px 6px;
  transform: translateY(58px);
}
.why__icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 16px auto;
  display: block;
}
.why__item-title{
  margin: 0 0 14px 0;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: var(--fw-bold);
  color: var(--preto-azulado);
}
.why__item-text{
  margin: 0 auto;
  max-width: 320px;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(9, 5, 26, 0.68);
}

/* =========================================================
   10) Cursos
========================================================= */
.courses{
  padding: 90px 0;
  background: #ffffff;
}
.courses__title{
  position: relative;
  margin: 0 0 48px 0;
  text-align: center;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.courses__title::before,
.courses__title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(9, 5, 26, 0.35));
}
.courses__title::after{
  background: linear-gradient(to left, transparent, rgba(9, 5, 26, 0.35));
}
.course-card[data-active="false"]{
  display: none;
}
.courses__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.course-card{
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(21, 11, 61, 0.10);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(44, 38, 69, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.course-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(44, 38, 69, 0.2);
}
.course-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-card__media{
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.courses__img{
  width: 100%;
  height: 250px;
  object-fit: contain;
  background: #ffffff;
  display: block;
}
.courses__price{
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(21, 11, 61, 0.14);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  color: var(--preto-azulado);
}
.course-card__body{
  padding: 26px 24px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: left;
}
.course-card__title{
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: var(--fw-extrabold);
  color: var(--preto-azulado);
  min-height: calc(1.22rem * 1.2 * 2);
}
.course-card__text{
  margin: 0;
  color: rgba(9, 5, 26, 0.70);
  font-size: 1rem;
  line-height: 1.7;
  flex: 1;
}
.courses__actions{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.courses .courses__actions .btn-secundario{
  background: var(--branco);
  color: var(--preto-azulado);
  border-color: rgba(21, 11, 61, 0.55);
  font-weight: var(--fw-semibold);
}
.courses .courses__actions .btn-secundario:hover{
  background: var(--amarelo);
  color: #0b0718;
  border-color: rgba(0, 0, 0, 0.85);

}
/* preço dentro do body (fallback do patch) */
.course-card__body .courses__price{
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0 auto;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(248, 249, 255, 0.75);
  border: 1px solid rgba(21, 11, 61, 0.14);
  font-weight: var(--fw-extrabold);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--preto-azulado);
  width: fit-content;
}
.course-card__media > .courses__price{
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(21, 11, 61, 0.14);
  border-radius: 10px;
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
}

/* =========================================================
   11) Pagina Curso
========================================================= */
.curso-page{
  background: #ffffff;
}
.curso-page__grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 44px;
  align-items: start;
}
.curso-page__left,
.curso-page__right,
.produto-conteudo__left{
  min-width: 0;
}
.produto-hero{
  background: #eaedf9;
  padding: 64px 0 54px 0;
  width: 100%;
}
.produto-hero__title{
  margin: 0 0 14px 0;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.06;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
}
.produto-hero__desc{
  margin: 0 0 18px 0;
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(9, 5, 26, 0.75);

  /* ✅ não corta mais */
  display: block;
  overflow: visible;

  /* ✅ justificado */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.produto-hero__autor{
  margin: 0 0 18px 0;
}
.produto-hero__autor-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-semibold);
  color: rgba(9, 5, 26, 0.78);
}
.produto-hero__autor-bolinha{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(9, 5, 26, 0.12);
  border: 1px solid rgba(9, 5, 26, 0.10);
}
.produto-hero__midia{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(9, 5, 26, 0.10);
  max-width: 880px;
}
.produto-hero__img{
  width: 100%;
  height: 410px;
  object-fit: cover;
  display: block;
}
.produto-hero__play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.92);
  color: var(--azul);
  box-shadow: 0 16px 40px rgba(9, 5, 26, 0.22);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.produto-hero__play:active{
  transform: translateY(1px);
}
.curso-page__right{
  position: sticky;
  top: calc(var(--topbar-altura) + 18px);
  width: 100%;
}
.produto-card{
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(9, 5, 26, 0.10);
  border-radius: 18px;
  box-shadow: 0 2px 5px 3px rgba(163, 181, 188, 0.25);
  padding: 24px 22px;
}
.produto-card__preco{
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
  margin: 0 0 10px 0;
}
.produto-card__texto{
  margin: 0 0 18px 0;
  color: rgba(9, 5, 26, 0.72);
  line-height: 1.65;
  font-size: 0.98rem;
}
.produto-card__btn-compra{
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 16px;
  background: linear-gradient(180deg, #0e0826 0%, #09051a 100%);
  border: 1px solid rgba(0, 0, 0, 0.75);
}
.produto-card .produto-card__btn-compra:hover,
.produto-card .produto-card__btn-recursos:hover{
  background: var(--amarelo);
  color: #0b0718;
  border-color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
}
.produto-card__meta{
  margin-top: 20px;
  display: grid;
  gap: 20px;
}
.produto-card__linha{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
}
.produto-card__icone{
  color: rgba(9, 5, 26, 0.70);
  display: inline-flex;
}
.produto-card__rotulo{
  font-weight: var(--fw-medium);
  color: rgba(9, 5, 26, 0.72);
  font-size: 0.96rem;
}
.produto-card__valor{
  font-weight: var(--fw-bold);
  color: var(--preto-azulado);
  font-size: 0.96rem;
}
.produto-card__btn-recursos{
  width: 100%;
  margin-top: 26px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  background: #ffffff;
  border: 1px solid rgba(21, 11, 61, 0.24);
}
.produto-card__btn-recursos:hover{
  box-shadow: 0 18px 44px rgba(252, 213, 58, 0.20);
}
.produto-dropdown__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.produto-dropdown__icone{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(21, 11, 61, 0.18);
  background: rgba(255,255,255,0.65);
}
.produto-dropdown__svg{
  transition: transform 0.22s ease;
  color: rgba(9, 5, 26, 0.90);
}
.produto-dropdown__svg .barra-v{
  transform-origin: 50% 50%;
  transition: transform 240ms cubic-bezier(.2,.9,.2,1);
}
.produto-dropdown__trigger.is-open .produto-dropdown__svg{
  transform: rotate(180deg);
}
.produto-dropdown__trigger.is-open .produto-dropdown__svg .barra-v{
  transform: scaleY(0);
}
.produto-dropdown{
  margin-top: 14px;
  padding: 16px 14px 14px 14px;
  border-radius: 16px;
  background: #07070b;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0px;
  opacity: 0;
  transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
}
.produto-dropdown.is-open{
  opacity: 1;
}
.rd-accordion{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  margin-bottom: 12px;
}
.rd-accordion__summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  user-select: none;
}
.rd-accordion__summary::-webkit-details-marker{
  display: none;
}
.rd-accordion__title{
  font-weight: var(--fw-bold);
  color: #ffffff;
}
.rd-accordion__chevron{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  position: relative;
  transition: transform 0.18s ease;
}
.rd-accordion__chevron::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg);
}
.rd-accordion[open] .rd-accordion__chevron{
  transform: rotate(180deg);
}
.rd-accordion__content{
  padding: 0 14px 14px 14px;
  color: rgba(255,255,255,0.86);
}
.rd-lista{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,0.88);
}
.rd-lista li{
  line-height: 1.55;
}
.rd-docente__nome{
  font-weight: var(--fw-extrabold);
  color: #ffffff;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.rd-docente__desc{
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
}
.rd-btn-whats{
  width: 100%;
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: var(--fw-semibold);
}
.rd-btn-whats:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
}
.rd-termos{
  margin: 14px 2px 0 2px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}
.rd-termos a{
  color: rgba(255,255,255,0.88);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.produto-conteudo{
  background: #ffffff;
  padding: 58px 0 90px 0;
}
.produto-conteudo__grid{
  display: block !important;
}
.produto-conteudo__h2{
  margin: 0 0 14px 0;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 1.1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
}
.produto-conteudo__p{
  margin: 0 0 22px 0;
  color: rgba(9, 5, 26, 0.72);
  line-height: 1.8;
  font-size: 1.02rem;
  max-width: 860px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.produto-conteudo__lista{
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 14px;
  color: rgba(9, 5, 26, 0.78);
  line-height: 1.8;
  font-size: 1.02rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* =========================================================
   12) Footer
========================================================= */
.footer{
  position: relative;
  background: #000421;
  color: rgba(255, 255, 255, 0.88);
  padding: 84px 0 34px 0;
  overflow: hidden;
}
.footer::before{
  content: "";
  position: absolute;
  inset: -40px -60px auto -60px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.10), rgba(255,255,255,0));
  pointer-events: none;
}
.footer__container{
  position: relative;
  z-index: 2;
}
.footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.1fr;
  gap: 52px;
  align-items: start;
}
.footer__logo{
  height: 54px;
  width: auto;
  display: block;
  margin-bottom: 18px;
  filter: brightness(1.1);
}
.footer__address{
  margin: 0;
  font-style: normal;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.footer__address strong{
  color: #ffffff;
  font-weight: var(--fw-bold);
}
.footer__title{
  margin: 0 0 14px 0;
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  color: #ffffff;
}
.footer__nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__link{
  display: block;
  width: fit-content;
  margin: 0;
  color: rgba(255,255,255,0.80);
  font-weight: var(--fw-medium);
  transition: color 0.12s ease, opacity 0.12s ease;
}
.footer__link:hover{
  color: #ffffff;
}
.footer__meta{
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.footer__label{
  font-size: 0.9rem;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.72);
}
.footer__label--block{
  display: inline-block;
  margin-top: 8px;
}
.footer__social-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.footer__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, background 0.12s ease, border 0.12s ease;
}
.footer__pill:hover{
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.26);
}
.footer__pill:active{
  transform: translateY(1px);
}
.footer__bottom{
  margin-top: 38px;
  text-align: center;
  position: relative;
}
.footer__divider{
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 auto 22px auto;
}
.footer__to-top{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, background 0.12s ease, border 0.12s ease;
  margin: -49px auto 12px auto;
}
.footer__to-top:hover{
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.26);
}
.footer__to-top:active{
  transform: translateY(1px);
}
.footer__copy{
  margin: 14px 0 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.68);
}

/* =========================================================
   13) Termos
========================================================= */
.terms{
  background: #ffffff;
  padding: 6px 0 90px;
}
.terms-hero{
  padding: 64px 0 34px;
  background: var(--cor-fundo);
}
.terms-hero .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.terms-hero__kicker{
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(9, 5, 26, 0.55);
}
.terms-hero__titulo{
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 4vw, 3.35rem);
  line-height: 1.04;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  max-width: 980px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.terms-hero__texto{
  max-width: 980px;
  color: rgba(9, 5, 26, 0.72);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-right: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.terms-hero__texto p{
  margin: 0 0 14px;
}
.terms-hero__texto p:last-child{
  margin-bottom: 0;
}
.terms-sep{
  height: 1px;
  background: rgba(21, 11, 61, 0.12);
  margin: 26px 0;
}
.terms-index{
  padding: 0 0 8px;
  background: var(--cor-fundo);
}
.terms-index__grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 44px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.terms-index__label{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.terms-index__label::before{
  content: none !important;
}
.terms-index__bar{
  width: 3px;
  height: 16px;
  border-radius: 99px;
  background: var(--amarelo);
}
.terms-index__txt{
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(9, 5, 26, 0.78);
}
.terms-index__lista{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.terms-index__li{
  margin: 0;
}
.terms-index__link{
  display: grid;
  grid-template-columns: 3px 34px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
  color: rgba(9, 5, 26, 0.78);
  transition: background 0.12s ease, color 0.12s ease;
}
.terms-index__link::before{
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 99px;
  background: var(--amarelo);
  opacity: 0.55;
}
.terms-index__num{
  font-weight: var(--fw-bold);
  color: rgba(9, 5, 26, 0.72);
}
.terms-index__name{
  font-weight: var(--fw-semibold);
  color: rgba(9, 5, 26, 0.72);
  line-height: 1.35;
}
.terms-index__link:hover{
  background: rgba(234, 237, 249, 0.65);
  color: var(--preto-azulado);
}
.terms-index__link.is-active{
  background: rgba(234, 237, 249, 0.85);
}
.terms-index__link.is-active::before{
  opacity: 1;
}
.terms-index__link.is-active .terms-index__num,
.terms-index__link.is-active .terms-index__name{
  color: var(--preto-azulado);
}
.terms__stack{
  display: grid;
  gap: 0;
}
.terms-item__grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 44px;
  align-items: start;
  padding: 22px 0;
  width: 100%;
  max-width: 100%;
}
.terms-item__num{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}
.terms-item__num-bar{
  width: 3px;
  height: 18px;
  background: var(--amarelo);
  border-radius: 99px;
  flex: 0 0 auto;
}
.terms-item__num-txt{
  font-size: 0.95rem;
  font-weight: var(--fw-extrabold);
  color: rgba(9, 5, 26, 0.75);
  flex: 0 0 auto;
}
.terms-item__num-title{
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  color: rgba(9, 5, 26, 0.78);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terms-item__h2{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: var(--fw-extrabold);
  color: var(--cor-texto);
}
.terms-item__conteudo p{
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: rgba(9, 5, 26, 0.72);
  max-width: 92ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.terms-item__conteudo p:last-child{
  margin-bottom: 0;
}
.terms-list{
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(9, 5, 26, 0.74);
  line-height: 1.8;
  font-size: 0.98rem;
}
.terms-list li{
  margin: 0;
}
.terms-last{
  padding-top: 18px;
}
.terms-last__txt{
  margin: 0;
  font-size: 0.98rem;
  color: rgba(9, 5, 26, 0.70);
}
.terms-last__txt strong{
  color: rgba(9, 5, 26, 0.86);
}

/* =========================================================
   Responsivo — (max-width: 520px)
========================================================= */
@media (max-width: 520px){
  /* ----- 05) Botoes ----- */
  .btn{
    padding: 18px 22px;
    font-size: 16px;
  }

  /* ----- 10) Cursos ----- */
  .courses__title::before,
  .courses__title::after{
    display: none;
  }
}

/* =========================================================
   Responsivo — (max-width: 860px)
========================================================= */
@media (max-width: 860px){
  /* ----- 06) Topbar ----- */
  .nav{
    display: none;
  }
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 22px;
    right: 16px;
    z-index: 2001;
  }
  .topbar__btn-contato{
    display: none !important;
  }
  .brand__img{
    height: 68px;
  }
}

/* =========================================================
   Responsivo — (max-width: 720px)
========================================================= */
@media (max-width: 720px){
  /* ----- 07) Hero ----- */
  .hero{
    min-height: unset;
    display: block;
    padding: 48px 0 70px 0;
  }
  .hero::after{
    display: none;
  }
  .hero .container{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0;
    align-items: stretch;
  }
  .hero__left{
    min-height: unset;
  }
  .hero__cta{
    margin-top: 18px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .hero__cta .btn{
    min-width: 0;
    flex: 1 1 0;
    padding: 14px 14px;
    min-height: 56px;
    font-size: 14px;
    white-space: nowrap;
  }
  .hero__title{
    font-size: clamp(3.05rem, 9.2vw, 3.9rem);
    line-height: 1.02;
  }

  /* ----- 08) Newsletter ----- */
  .newsletter{
    max-width: 560px;
    margin: 0 auto;
  }
  .newsletter__legal{
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }

  /* ----- 11) Pagina Curso ----- */
  .curso-page__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .curso-page__right{
    position: static;
    top: auto;
  }
  .produto-hero{
    padding: 46px 0 40px 0;
  }
  .produto-hero__img{
    height: 320px;
    object-fit: contain;
    background: #ffffff;
  }
  .produto-hero__midia{
    background: #ffffff;
  }
  .produto-conteudo{
    padding: 40px 0 70px 0;
  }
@media (max-width: 720px){
  .produto-conteudo__p,
  .produto-conteudo__lista{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

  /* ----- 13) Termos ----- */
  .terms-hero{
    padding: 46px 0 28px;
  }
  .terms-hero__titulo,
  .terms-hero__texto,
  .terms-item__conteudo p{
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .terms-index__link{
    grid-template-columns: 3px 30px 1fr;
  }
}

/* =========================================================
   Responsivo — (min-width: 721px) and (max-width: 980px)
========================================================= */
@media (min-width: 721px) and (max-width: 980px){
  /* ----- 07) Hero ----- */
  .hero{
    min-height: unset;
    padding: 46px 0 66px 0;
    display: flex;
    align-items: flex-start;
  }
  .hero::after{
    display: none;
  }
  .hero .container{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .hero__grid{
    grid-template-columns: 1fr 0.95fr;
    gap: 22px;
    align-items: start;
    padding: 0;
  }
  .hero__title{
    font-size: clamp(3.2rem, 5.2vw, 4.2rem);
    line-height: 1.0;
    margin-bottom: 18px;
  }
  .hero__lead{
    max-width: 520px;
  }
  .hero__right{
    display: flex;
    justify-content: flex-end;
  }
  .newsletter{
    max-width: 460px;
    width: 100%;
    margin: 0;
  }
  .field__input{
    height: 42px;
  }
  .hero__cta{
    flex-wrap: nowrap;
    gap: 12px;
  }
  .hero__cta .btn{
    min-width: 0;
    flex: 1 1 0;
    padding: 16px 18px;
    min-height: 60px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* ----- 11) Pagina Curso ----- */
  .curso-page__grid{
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
    align-items: start;
  }
  .produto-hero__img{
    height: 340px;
    object-fit: contain;
    background: #ffffff;
  }
  .produto-hero__midia{
    background: #ffffff;
  }
  .curso-page__right{
    position: sticky;
    top: calc(var(--topbar-altura) + 14px);
  }
  .produto-card{
    padding: 22px 20px;
  }
  .produto-card__preco{
    font-size: 1.85rem;
  }
}

/* =========================================================
   Responsivo — (max-width: 980px)
========================================================= */
@media (max-width: 980px){
  /* ----- 09) Why ----- */
  .why{
    padding: 70px 0 60px 0;
  }
  .why__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }
  .why__item{
    transform: translateY(18px);
  }

  /* ----- 10) Cursos ----- */
  .courses{
    padding: 70px 0;
  }
  .courses__title{
    gap: 18px;
    margin-bottom: 34px;
  }
  .courses__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .course-card{
    min-height: unset;
  }
  .courses__img{
    height: 230px;
  }
  .course-card__body .courses__price{
    margin-top: 8px;
    font-size: 0.96rem;
  }

  /* ----- 12) Footer ----- */
  .footer{
    padding: 70px 0 30px 0;
  }
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer__to-top{
    margin-top: -42px;
  }

  /* ----- 13) Termos ----- */
  .terms-index__grid,
  .terms-item__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .terms-item__num{
    white-space: normal;
  }
  .terms-item__num-title{
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
}

/* =========================================================
   Responsivo — (max-width: 560px)
========================================================= */
@media (max-width: 560px){
  /* ----- 09) Why ----- */
  .why__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .why__item-text{
    max-width: 420px;
  }
  .why__item{
    transform: translateY(10px);
  }
}

/* =========================================================
   Responsivo — (max-width: 640px)
========================================================= */
@media (max-width: 640px){
  /* ----- 10) Cursos ----- */
  .courses__grid{
    grid-template-columns: 1fr;
  }
  .courses__img{
    height: 240px;
  }
}

/* =========================================================
   Responsivo — (min-width: 641px) and (max-width: 980px)
========================================================= */
@media (min-width: 641px) and (max-width: 980px){
  /* ----- 12) Footer ----- */
  .footer{
    padding: 70px 0 30px 0;
  }
  .footer__grid{
    grid-template-columns: 1.25fr 0.85fr 1fr;
    gap: 34px;
    align-items: start;
  }
  .footer__grid > *{
    min-width: 0;
  }
  .footer__social-row{
    gap: 10px;
  }
  .footer__pill{
    padding: 10px 14px;
  }
  .footer__to-top{
    margin-top: -42px;
  }
}

/* =========================================================
   Responsivo — (min-width: 981px) and (max-width: 1180px)
========================================================= */
@media (min-width: 981px) and (max-width: 1180px){
  .hero{
    padding: 36px 0 64px 0;
  }
  .hero__grid{
    grid-template-columns: 1.25fr 0.75fr;
    gap: 26px;
    align-items: start;
  }
  .hero__lead{
    max-width: 560px;
  }
  .hero__kicker{
    font-size: 1.02rem;
    margin-bottom: 14px;
  }
  .hero__title{
    font-size: clamp(3.1rem, 5.2vw, 4.2rem);
    line-height: 1.00;
    margin-bottom: 18px;
  }
  .newsletter{
    max-width: 380px;
    width: 100%;
    justify-self: end;
    margin: 0;
  }
  .field__input{
    height: 42px;
  }
  .hero .btn{
    min-width: 180px;
  }
  .hero__cta .btn{
    min-width: 190px;
    min-height: 64px;
  }
}

/* =========================================================
   Responsivo — (max-width: 380px)
========================================================= */
@media (max-width: 380px){
  .hero__title{
    font-size: 2.85rem;
  }
}

/* =========================================================
   Responsivo — (max-width: 360px)
========================================================= */
@media (max-width: 360px){
  .hero__cta{
    flex-wrap: wrap;
  }
  .hero__cta .btn{
    width: 100%;
  }
}
/* =========================================================
   FIX — hamburger apenas no MOBILE (até 720px)
========================================================= */

/* garantia: fora do mobile, some */
.menu-toggle{
  display: none !important;
}

/* mobile: aparece */
@media (max-width: 720px){
  .menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* extra segurança: se abrir menu e girar tela / aumentar */
@media (min-width: 721px){
  .menu-mobile,
  .menu-mobile__overlay{
    display: none !important;
  }
}
/* Newsletter feedback */
#newsletter-msg {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #111;              /* preto */
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.25s ease;
}

#newsletter-msg.is-success {
  color: #111;              /* preto também no sucesso */
}

#newsletter-msg.is-error {
  color: #b00020;           /* vermelho elegante para erro */
}

#newsletter-msg.is-hidden {
  opacity: 0;
}
/* =========================================================
   MELHORIA — Duração do curso (layout tipo “bloco” com lista)
========================================================= */

/* Linha da duração: vira 2 colunas (ícone + conteúdo) e permite “descer” */
.produto-card__linha--duracao{
  grid-template-columns: 22px 1fr;
  align-items: start;
}

/* Rótulo permanece na coluna 2 */
.produto-card__linha--duracao .produto-card__rotulo{
  grid-column: 2 / -1;
}

/* Valor vira “cardzinho” embaixo e ocupa largura */
.produto-card__linha--duracao .produto-card__valor{
  grid-column: 2 / -1;
  justify-self: stretch;
  text-align: left;

  white-space: pre-line; /* ✅ mostra \n como quebra */
  line-height: 1.55;

  margin-top: 8px;
  padding: 10px 12px;

  border-radius: 12px;
  background: rgba(234, 237, 249, 0.65);
  border: 1px solid rgba(21, 11, 61, 0.14);

  font-weight: var(--fw-semibold);
  color: rgba(9, 5, 26, 0.86);
  font-size: 0.95rem;
}
/* ==============================
   Duração do curso (layout premium)
============================== */

.produto-card__linha--duracao{
  grid-template-columns: 22px 1fr;
  align-items: start;
}

.produto-card__linha--duracao .produto-card__rotulo{
  grid-column: 2 / -1;
}

.produto-card__linha--duracao .produto-card__valor{
  grid-column: 2 / -1;
  justify-self: stretch;
  text-align: left;

  margin-top: 8px;
  padding: 10px 12px;

  border-radius: 14px;
  background: rgba(234, 237, 249, 0.65);
  border: 1px solid rgba(21, 11, 61, 0.14);

  /* agora o conteúdo é HTML (box + ul), não precisa pre-line */
  line-height: 1.45;
}

/* Caixa interna */
.duracao-box{
  display: grid;
  gap: 10px;
}

/* Cabeçalho (usa melhor a largura e dá status) */
.duracao-box__head{
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(9, 5, 26, 0.92);
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(21, 11, 61, 0.16);
}

/* Lista: limpa e com bom aproveitamento horizontal */
.duracao-box__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

/* Cada item vira “linha” com marcador elegante */
.duracao-box__list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(9, 5, 26, 0.86);
  font-weight: 600;
  font-size: 0.94rem;
}

/* Marcador (bolinha) */
.duracao-box__list li::before{
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(21, 11, 61, 0.35);
  flex: 0 0 8px;
}
/* Remove espaço extra abaixo do botão "Recursos do curso" */
.produto-card__btn-recursos {
  margin-bottom: 0;
}
/* Dropdown fechado não ocupa espaço */
.produto-dropdown[aria-hidden="true"] {
  display: none;
}
/* =========================================
   Curso — Dropdown "Aulas" (idêntico ao Recursos)
   (apenas espaçamento entre botões)
========================================= */
.curso-page .produto-card__btn-recursos + .produto-dropdown__trigger{
  margin-top: 12px;
}

/* mantém a regra de dropdown fechado não ocupar espaço (se ainda não estiver) */
.produto-dropdown[aria-hidden="true"]{
  display: none;
}
/* =========================================
   FIX — Dropdown não empurra o conteúdo abaixo
   Estratégia: card sticky com altura travada + scroll interno
========================================= */
@media (min-width: 721px){
  /* trava a altura do card no viewport */
  .curso-page__right .produto-card{
    max-height: calc(100vh - var(--topbar-altura) - 36px);
    overflow: auto;
  }

  /* opcional: evita “pulo” quando aparece scrollbar */
  .curso-page__right .produto-card{
    scrollbar-gutter: stable;
  }

  /* opcional: mais suave no iOS */
  .curso-page__right .produto-card{
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================
   FIX — Dropdown não empurra o conteúdo abaixo
   (o card é o próprio .curso-page__right)
========================================= */
@media (min-width: 721px){
  /* trava a altura do card no viewport e cria scroll interno */
  .curso-page__right.produto-card{
    max-height: calc(100vh - var(--topbar-altura) - 36px);
    overflow: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}
@media (min-width: 721px){
  /* impede o grid do hero de “esticar” por conteúdo interno */
  .curso-page__grid{
    align-items: start;
  }
}

/* CARD MAIS ENXUTO */
.produto-card {
  padding: 18px 20px;
}

/* Preço */
.produto-card__preco {
  margin-bottom: 6px;
}

/* Texto resumo */
.produto-card__texto {
  margin-bottom: 8px; /* antes 18px */
}

/* Meta (nível + duração) */
.produto-card__meta {
  margin-top: 16px; /* antes 20px */
  gap: 16px; /* antes 20px */
}

/* Botões dropdown */
.produto-card__btn-recursos {
  margin-top: 14px;
}

/* Dropdown */
.produto-dropdown {
  margin-top: 10px;
  padding: 14px;
}
/* =========================================================
   CURSO — CARD DIREITO (compacto e sem espaço fantasma)
========================================================= */

.curso-page__right.produto-card{
  position: sticky;
  top: calc(var(--topbar-altura) + 18px);

  /* não cria altura artificial */
  height: auto;
  max-height: none;
  overflow: visible;

  /* padding controlado (sem inflar topo/rodapé) */
  padding: 18px 20px;
}

/* reduz respiro acima do preço */
.curso-page__right .produto-card__preco{
  margin: 0 0 6px 0;
}

/* reduz respiro do texto */
.curso-page__right .produto-card__texto{
  margin: 0 0 12px 0;
}

/* blocos meta mais enxutos */
.curso-page__right .produto-card__meta{
  margin-top: 14px;
  gap: 14px;
}

/* botões dropdown mais próximos */
.curso-page__right .produto-card__btn-recursos{
  margin-top: 12px;
}

/* dropdown mais compacto */
.curso-page__right .produto-dropdown{
  margin-top: 10px;
  padding: 14px;
}
/* =========================================================
   FIX DEFINITIVO — remove “altura sobrando” do card da direita
========================================================= */
@media (min-width: 721px){
  .curso-page__right.produto-card{
    position: sticky;
    top: calc(var(--topbar-altura) + 18px);

    max-height: calc(100vh - var(--topbar-altura) - 36px);
    overflow: auto;

    padding: 18px 20px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}

/* espaçamentos internos do conteúdo */
.curso-page__right .produto-card__preco{ margin: 0 0 6px 0; }
.curso-page__right .produto-card__texto{ margin: 0 0 12px 0; }
.curso-page__right .produto-card__meta{ margin-top: 14px; gap: 14px; }
.curso-page__right .produto-card__btn-recursos{ margin-top: 12px; }
/* =========================================================
   CURSO — Card direito limitado pela altura da mídia (desktop)
========================================================= */
:root{
  --curso-midia-altura: 580px;   /* igual .produto-hero__img */
  --curso-midia-margem: 30px;    /* ajuste fino (respiro) */
}

@media (min-width: 721px){
  .curso-page__right.produto-card{
    position: sticky;
    top: calc(var(--topbar-altura) + 18px);

    /* ✅ limita o crescimento pra “terminar” junto da imagem */
    max-height: calc(var(--curso-midia-altura) + var(--curso-midia-margem));

    overflow: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================
   Próxima turma — data com gradiente animado
========================================= */
.rd-date-anim{
  font-weight: 800;
  letter-spacing: -0.01em;

  /* gradiente quente e sóbrio */
  background: linear-gradient(
    90deg,
    #ffb55a,
    #fcd53a,
    #ff7a45,
    #ffb55a
  );
  background-size: 240% 100%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: rdGradientMove 2.6s ease-in-out infinite;
}

@keyframes rdGradientMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* respeita acessibilidade */
@media (prefers-reduced-motion: reduce){
  .rd-date-anim{ animation: none; }
}
/* =========================================================
   FIX — Justificar texto do resumo no card (desktop + tablet)
========================================================= */
@media (min-width: 721px){
  .curso-page__right .produto-card__texto{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}
/* =========================================================
   Página "Todos os cursos" — Catálogo
========================================================= */
.catalogo-page{
  background: #ffffff;
}

.catalogo-hero{
  background: #eaedf9;
  padding: 64px 0 44px 0;
}

.catalogo-hero__kicker{
  margin: 0 0 14px 0;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.86rem;
  color: rgba(9, 5, 26, 0.55);
  text-transform: uppercase;
}

.catalogo-hero__title{
  margin: 0 0 14px 0;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--preto-azulado);
}

.catalogo-hero__lead{
  margin: 0;
  max-width: 880px;
  color: rgba(9, 5, 26, 0.72);
  font-size: 1.02rem;
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.catalogo-filtros{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* chips */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(21, 11, 61, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(9, 5, 26, 0.86);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border 0.12s ease;
}

.chip:hover{
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(21, 11, 61, 0.35);
}

.chip:active{
  transform: translateY(1px);
}

.chip.is-active{
  background: linear-gradient(180deg, #0e0826 0%, #09051a 100%);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.75);
}

.chip__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(234, 237, 249, 0.9);
  border: 1px solid rgba(21, 11, 61, 0.12);
  color: rgba(9, 5, 26, 0.86);
  font-weight: 800;
  font-size: 0.85rem;
}

.chip.is-active .chip__count{
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

.catalogo{
  padding: 54px 0 90px 0;
  background: #ffffff;
}

.catalogo__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* empty state */
.catalogo-empty{
  margin-top: 30px;
  padding: 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(21, 11, 61, 0.10);
  background: rgba(234, 237, 249, 0.55);
}

.catalogo-empty__title{
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--preto-azulado);
}

.catalogo-empty__text{
  margin: 0;
  color: rgba(9, 5, 26, 0.72);
  line-height: 1.75;
  max-width: 92ch;
}

.catalogo-empty__actions{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* responsivo */
@media (max-width: 980px){
  .catalogo__grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px){
  .catalogo__grid{ grid-template-columns: 1fr; }
}
/* Preço fixo na parte inferior do card (catálogo) */
.course-card__body{
  display: flex;
  flex-direction: column;
}

.course-card__price-bottom{
  margin-top: auto; /* empurra para o final */
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(248, 249, 255, 0.85);
  border: 1px solid rgba(21, 11, 61, 0.14);
  font-weight: var(--fw-extrabold);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--preto-azulado);
}

.produto-card__lotes{
  margin: 10px 0 18px 0;
}

.produto-card__lotes-titulo{
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(9, 5, 26, 0.65);
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.produto-card__lotes-lista{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.lote{
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: rgba(9, 5, 26, 0.75);
}

.lote__prazo{
  font-size: 0.85rem;
  color: rgba(9, 5, 26, 0.55);
}

.lote--ativo{
  font-weight: 700;
  color: var(--preto-azulado);
}

.lote--encerrado{
  text-decoration: line-through;
  opacity: 0.55;
}
.produto-card__lotes .rd-date-anim{
  animation-duration: 3.4s;  /* mais lento */
}
/* =========================================
   Lotes — valor do lote ATIVO com gradiente (cinza/preto)
   (não afeta .rd-date-anim nem outros elementos)
========================================= */
.produto-card__lotes .lote--ativo .lote__valor{
  font-weight: 800;
  letter-spacing: -0.01em;

  background: linear-gradient(
    90deg,
    #0b0b10,   /* quase preto */
    #2b2b33,   /* grafite */
    #7b7b86,   /* cinza médio */
    #d7d7de,   /* cinza claro */
    #7b7b86,   /* volta */
    #2b2b33,
    #0b0b10
  );
  background-size: 260% 100%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: rdLoteGradientMove 3.4s ease-in-out infinite;
}

@keyframes rdLoteGradientMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .produto-card__lotes .lote--ativo .lote__valor{
    animation: none;
  }
}

/* =========================================
   LOTES — nome + prazo à esquerda / valor fixo à direita
========================================= */
.lote{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

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

.lote__nome{
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.lote__prazo{
  font-size: 0.85rem;
  color: rgba(9, 5, 26, 0.55);
}