/* G7 Jurídico — Home */
:root {
  --preto: #222222;
  --grafite: #333333;
  --grafite-hover: #404040;
  --texto: #333333;
  --texto-suave: #8e8e8e;
  --cinza-claro: #f5f5f5;
  --borda: #eeeeee;
  --laranja: #e38310;
  --rodape: #262626;
  --rodape-base: #0f0f0f;
  --largura: 1140px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--texto);
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 16px;
}

.btn {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 23px;
  background: var(--grafite);
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.btn:hover { background: var(--grafite-hover); }

.secao-titulo {
  text-align: center;
  color: #292929;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

/* ---------- Topo ---------- */
.topo {
  background: #fff;
  border-bottom: 1px solid var(--borda);
  font-family: 'Lato', sans-serif;
}
.topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
}
.topo__marca {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9e9e9e;
}
.topo__acoes { display: flex; align-items: center; gap: 48px; }
.topo__aluno { font-size: 13px; color: #bababa; transition: color .2s; }
.topo__aluno:hover { color: var(--texto-suave); }
.topo__redes { display: flex; gap: 10px; }
.topo__redes a { width: 20px; height: 20px; }
.topo__redes img { width: 20px; height: 20px; }
.topo__redes .hover { display: none; }
.topo__redes a:hover .normal { display: none; }
.topo__redes a:hover .hover { display: block; }

/* ---------- Menu ---------- */
.menu {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--preto);
  height: 62px;
}
.menu .container {
  display: flex;
  align-items: center;
  height: 100%;
}
.menu__logo { margin-right: 22px; flex-shrink: 0; }
.menu__logo img { width: 20px; height: 20px; }
.menu__lista {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.menu__lista a {
  display: block;
  padding: 0 18px;
  line-height: 62px;
  color: #f7f7f7;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color .2s;
}
.menu__lista a:hover,
.menu__lista a.ativo { color: #afafaf; }
.menu__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: none;
  background: url('../assets/img/menuMobile.svg') center / 26px no-repeat;
  cursor: pointer;
}

/* Menu mobile */
.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  max-width: 85vw;
  background: #fff;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .35s ease;
  overflow-y: auto;
  padding-bottom: 24px;
}
.lateral.aberto { transform: none; }
.lateral__logo { display: flex; justify-content: center; padding: 24px 0 16px; }
.lateral__logo img { width: 109px; height: 110px; }
.lateral__busca { padding: 0 24px 16px; }
.lateral__busca input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  padding: 0 12px 0 36px;
  font-size: 14px;
  background: url('../assets/img/lupa.svg') 10px center / 16px no-repeat;
}
.lateral a {
  display: block;
  padding: 14px 24px;
  border-top: 1px solid var(--borda);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: #292929;
}
.escura {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s;
}
.escura.aberto { opacity: 1; visibility: visible; }

/* ---------- Banner ---------- */
.banner { display: block; }
.banner picture, .banner img { width: 100%; height: auto; }

/* ---------- Cursos ---------- */
.cursos { padding: 30px 0 60px; }
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 25px;
}
.filtros button {
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #444;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.filtros button:hover { border-color: var(--grafite); }
.filtros button.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }

.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--cinza-claro);
  border-bottom: 2px solid #7e7e7e;
  transition: opacity .3s;
}
.card:hover { opacity: .8; }
.card[hidden] { display: none; }
.card__img {
  aspect-ratio: 359 / 270;
  width: 100%;
  object-fit: cover;
}
.card__corpo { padding: 25px 25px 20px; display: flex; flex-direction: column; flex: 1; }
.card__titulo {
  color: #212121;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
  min-height: 72px;
}
.card__precos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.card__precos span {
  background: var(--grafite);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 37px;
  line-height: 37px;
  padding: 0 10px;
}
.card__precos .antigo { text-decoration: line-through; }
.card__pagamento {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
}
.card__pagamento li + li { margin-top: 8px; }
.card__pagamento b { color: #555; }
.cursos__mais { text-align: center; margin-top: 35px; }

/* ---------- Vídeos ---------- */
.videos {
  background: #121212 url('../assets/img/home_fundo_videos_destaque.webp') center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 70px 0;
}
.videos__titulo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 20px;
}
.videos__sub { font-size: 16px; margin-bottom: 50px; }
.videos__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: center;
  gap: 20px 30px;
}
.video {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
.video__capa { position: relative; margin: 0 auto 20px; max-width: 334px; transition: opacity .2s; }
.video:hover .video__capa { opacity: .8; }
.video__titulo { color: var(--laranja); font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.video__sub { color: #fff; font-size: 16px; font-weight: 400; }

/* ---------- Conceito ---------- */
.conceito { background: var(--cinza-claro); padding: 45px 0 20px; text-align: center; }
.conceito h2 { font-size: 30px; font-weight: 200; color: var(--grafite); }
.conceito__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 70px;
  font-family: 'Lato', Arial, sans-serif;
}
.conceito__item { margin-bottom: 40px; }
.conceito__item img { width: 64px; height: 64px; margin: 0 auto 45px; }
.conceito__item h3 {
  font-size: 15px;
  line-height: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.conceito__item p { color: #909090; font-size: 16px; line-height: 27px; max-width: 255px; margin: 0 auto; }
.conceito__mais { margin-bottom: 30px; }

/* ---------- Professores ---------- */
.professores { padding: 60px 0; }
.carrossel { position: relative; }
.carrossel__trilho {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.prof {
  flex: 0 0 calc((100% - 60px) / 3);
  scroll-snap-align: start;
  background: var(--cinza-claro);
  padding: 15px 35px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.prof__foto {
  height: 185px;
  margin-bottom: 20px;
  background: #fff;
  display: flex;
  justify-content: center;
}
.prof__foto img { height: 100%; width: auto; object-fit: contain; }
.prof h3 {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.prof p {
  font-family: 'Lato', Arial, sans-serif;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px;
}
.prof__perfil {
  margin-top: auto;
  align-self: center;
  background: var(--grafite);
  color: #fff;
  border-bottom: 3px solid #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: background .2s;
}
.prof__perfil:hover { background: var(--grafite-hover); }
.carrossel__seta {
  position: absolute;
  top: 40%;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--grafite);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: .85;
  z-index: 2;
}
.carrossel__seta:hover { opacity: 1; }
.carrossel__seta--ant { left: -20px; }
.carrossel__seta--prox { right: -20px; }
.professores__mais { text-align: center; margin-top: 35px; }

/* ---------- Rodapé ---------- */
.rodape { font-family: 'Lato', Arial, sans-serif; font-size: 16px; color: #bfbfbf; }
.rodape__topo { background: var(--rodape); padding: 60px 0 40px; }
.rodape__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rodape h4 { font-size: 16px; font-weight: 400; color: #bfbfbf; margin-bottom: 20px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 18px; }
.rodape a { color: #7f7f7f; transition: color .2s; }
.rodape a:hover { color: #bfbfbf; }
.rodape__selos img { margin-bottom: 18px; }
.rodape__apps a { display: block; margin-bottom: 14px; }
.rodape__base {
  background: var(--rodape-base);
  border-top: 1px solid #828282;
  color: #3f3f3f;
  font-size: 14px;
  line-height: 60px;
}

/* ---------- Modal de vídeo ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .75);
}
.modal.aberto { display: flex; }
.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #121212;
  border: 1px solid #bbb;
  color: #ddd;
  padding: 40px 24px 32px;
  text-align: center;
}
.modal__fechar {
  position: absolute;
  top: 8px;
  right: 14px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}
.modal__caixa h4 { color: #e78300; font-size: 26px; text-transform: uppercase; margin-bottom: 12px; }
.modal__caixa .btn { margin-top: 20px; }

/* ---------- Aviso de cookies ---------- */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  z-index: 150;
  background: #f1f1f1;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Lato', sans-serif;
  color: #4a4a4a;
}
.cookie[hidden] { display: none; }
.cookie p { flex: 1; font-size: 14px; line-height: 26px; }
.cookie a { text-decoration: underline; }
.cookie button {
  flex-shrink: 0;
  width: 140px;
  padding: 13px 0;
  border: none;
  border-radius: 4px;
  background: var(--grafite);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .menu__lista a { padding: 0 12px; letter-spacing: 1px; }
  .carrossel__seta--ant { left: 0; }
  .carrossel__seta--prox { right: 0; }
}

@media (max-width: 990px) {
  .menu__lista { display: none; }
  .menu__toggle { display: block; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .videos__grade { grid-template-columns: repeat(2, minmax(0, 350px)); }
  .conceito__grade { grid-template-columns: repeat(2, 1fr); }
  .prof { flex-basis: calc((100% - 30px) / 2); }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .topo__acoes { gap: 20px; }
  .grade { grid-template-columns: 1fr; }
  .card__titulo { min-height: 0; }
  .videos { padding: 50px 0; }
  .videos__grade { grid-template-columns: minmax(0, 350px); }
  .conceito h2 { font-size: 24px; }
  .conceito__grade { grid-template-columns: 1fr; padding-top: 40px; }
  .prof { flex-basis: 100%; }
  .rodape__grade { grid-template-columns: 1fr; text-align: center; }
  .rodape__selos img, .rodape__apps img { margin-left: auto; margin-right: auto; }
  .rodape__base { line-height: 1.5; padding: 20px 0; text-align: center; }
  .cookie { flex-direction: column; padding: 16px; text-align: center; }
}

/* =========================================================
   Página de curso
   ========================================================= */
.curso { padding-bottom: 80px; font-family: 'Lato', Arial, sans-serif; color: #272727; }
.curso__titulo {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 30px 0 20px;
}

/* Migalha */
.migalha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 20px 0;
  font-size: 13px;
  color: #8e8e8e;
}
.migalha li + li::before { content: '•'; margin-right: 8px; }
.migalha a:hover { color: var(--texto); }
.migalha [aria-current] { color: #444; }

/* Compra */
.compra { display: flex; gap: 60px; align-items: flex-start; padding-top: 10px; }
.compra__capa { width: 367px; max-width: 100%; height: auto; flex-shrink: 0; }
.compra__info { flex: 1; min-width: 0; }
.compra h1 { font-size: 22px; letter-spacing: 2px; margin-bottom: 15px; }
.compra__de { font-size: 18px; color: #4d4d4d; text-decoration: line-through; margin-bottom: 10px; }
.compra__por { font-size: 28px; font-weight: 700; color: #e78300; margin-bottom: 15px; }

.pagamentos { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 20px; }
.pagamento {
  flex: 1;
  min-width: 218px;
  background: #f5f5f5 no-repeat 15px 12px;
  border-radius: 5px;
  padding: 10px 10px 10px 50px;
  min-height: 75px;
}
.pagamento p:first-child { font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.pagamento p + p { font-size: 12px; line-height: 15px; }
.pagamento img { margin: 8px 0 0 -35px; width: 195px; height: auto; }
.pagamento--pix { background-image: url('../assets/img/icones/fp_pix.svg'); }
.pagamento--boleto { background-image: url('../assets/img/icones/fp_boleto.svg'); }
.pagamento--cartao { background-image: url('../assets/img/icones/fp_cartao.svg'); background-position: 15px 8px; }

.btn-comprar {
  display: inline-block;
  width: 270px;
  max-width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 4px;
  background: #23a64b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity .2s;
}
.btn-comprar:hover { opacity: .85; }

/* Destaques */
.destaques__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.destaques__lista li {
  background: #f5f5f5 no-repeat 12px center;
  border-radius: 5px;
  padding: 16px 16px 16px 52px;
  min-height: 50px;
  font-size: 15px;
  line-height: 1.5;
}
.destaques__lista .sep { margin: 0 15px; }
.d-calendario { background-image: url('../assets/img/icones/novo_calendario.svg') !important; }
.d-publico { background-image: url('../assets/img/icones/novo_publico.svg') !important; }
.d-diferenciais { background-image: url('../assets/img/icones/novo_diferenciais.svg') !important; }
.d-extras { background-image: url('../assets/img/icones/novo_extras.svg') !important; }
.d-bonus { background-image: url('../assets/img/icones/novo_bonus.svg') !important; }
.destaques__lista .d-info {
  background: #272727 url('../assets/img/icones/novo_info.svg') no-repeat 12px center;
  padding: 0;
}
.destaques__mais {
  width: 100%;
  min-height: 50px;
  padding: 16px 16px 16px 52px;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.destaques__mais strong { font-weight: 400; }
.descritivo { padding: 25px 0 0; font-size: 16px; line-height: 1.6; text-align: justify; }
.descritivo h3 { font-size: 18px; text-transform: uppercase; margin: 28px 0 10px; }
.descritivo p { margin-bottom: 14px; }
.descritivo ul { padding-left: 20px; margin: 0 0 14px; }
.descritivo a { text-decoration: underline; }

/* Professores do curso */
.docentes .carrossel__trilho { gap: 35px; }
.docente { flex: 0 0 160px; scroll-snap-align: start; text-align: center; }
.docente img,
.docente__mais {
  width: 160px;
  height: 160px;
  border: 1px solid #ddd;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.docente h3 { font-size: 14px; font-weight: 700; margin-top: 10px; }
.docente__mais {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #262626;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
}
.docentes .carrossel__seta { top: 60px; }

/* Grade de disciplinas */
.grade-curso { margin-bottom: 30px; }
.grade-curso h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; color: #444; }
.grade-curso table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.grade-curso thead th {
  background: #272727;
  color: #fff;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
}
.grade-curso tbody th, .grade-curso tbody td,
.grade-curso tfoot th, .grade-curso tfoot td { background: #f5f5f5; padding: 12px 16px; text-align: left; }
.grade-curso tbody th { font-weight: 700; }
.grade-curso tfoot th, .grade-curso tfoot td { background: #e3e3e3; font-weight: 700; text-transform: uppercase; }
.grade-curso th:first-child, .grade-curso td:first-child { border-radius: 4px 0 0 4px; }
.grade-curso th:last-child, .grade-curso td:last-child { border-radius: 0 4px 4px 0; }

.compra-fim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 20px 24px;
  margin-top: 10px;
  font-size: 16px;
}

@media (max-width: 990px) {
  .compra { flex-direction: column; gap: 24px; align-items: center; }
  .compra__info { width: 100%; }
}

@media (max-width: 640px) {
  .curso__titulo { font-size: 20px; }
  .pagamento { min-width: 100%; }
  .btn-comprar { width: 100%; }
  .destaques__lista .sep { display: block; height: 0; overflow: hidden; margin: 0; }
  .grade-curso thead { display: none; }
  .grade-curso table, .grade-curso tbody, .grade-curso tfoot, .grade-curso tr { display: block; }
  .grade-curso tr { margin-bottom: 8px; border-radius: 4px; overflow: hidden; }
  .grade-curso tbody th, .grade-curso tbody td,
  .grade-curso tfoot th, .grade-curso tfoot td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-radius: 0 !important;
    padding: 8px 14px;
  }
  .grade-curso tbody th { background: #e3e3e3; }
  .grade-curso td::before { content: attr(data-label); font-weight: 700; color: #666; flex-shrink: 0; }
  .grade-curso td { text-align: right; }
  .grade-curso tfoot td[data-label="Professor"] { display: none; }
  .compra-fim { flex-direction: column; text-align: center; }
}