@import url('https://fonts.googleapis.com/css?family=Lora'); /* Carregar fonte dos titulos */
@import url('https://fonts.googleapis.com/css?family=Lexend'); /* Carregar fonte dos textos */

body {
    font-family: 'Lexend', sans-serif; /* Setar fonte dos textos */
    color: #33415C; /* Setar cores dos textos */
    background-color: #0B2A5B; /* Setar cor 5 */
}
h1, h2, h3, h4, h5, h6, .navbar .nav>li>a, .dropdown-menu>li>a, #admin #toolbar .btn {
    font-family: 'Lora', sans-serif; /* Setar fonte dos titulos */
}
h1, h2, h3, h4, h5, h6 {
    color: #0B2A5B; /* Setar cores dos titulos */
}
a, .btn-link {
    color: #006A70; /* Setar cores dos links */

}
a:hover, a:focus {
    color: #0B2A5B; /* Setar cores dos links com foco*/
}
#landingpage-subscription #registration-course h4, #landingpage-subscription #registration-course h2, .popover-title, .popover-content {
    color: #0B2A5B;   
}
#landingpage-subscription .carousel .carousel-control, .cr-black {
    background-color: #0B2A5B;
}
#steps-cart, #details-course h1, #details-course h2, #details-course h3, #details-course, #payment-methods h4, .modal-body {
    color: #0B2A5B; 
}
#top-menu, footer, #course-banner {
    background-color: #0B2A5B; /* Setar cor 1 */
}
#menu-main.navbar {
    background-color: #FFFFFF; /* Setar cor 2 */
}
#footer-top, #top-internal, #menu-main .nav>li.active>a, #landing-page #instructor-course {
    background-color: #E7F1F0; /* Setar cor 3 */
}
.nav>li>a:hover, .nav>li>a:focus, .panel-default .panel-heading, .panel-default .panel-title, .panel-default .panel-footer, #list-courses .course-unit .course-text, .borda-instrutor, #cart ul li, .nav-tabs>li>a, .panel-default>.panel-heading+.panel-collapse>.panel-body, #landing-page #instructor-course .biography-text, .well, #contact-right .panel-body {
    background-color: #F3EEE3; /* Setar cor 4 */
}
#landing-page .lessons-course {
    border-color: #F3EEE3; /* Setar cor 4 */
}
.nav-pills li.active>a, .nav-pills li>a:hover, .nav-tabs.nav-justified>li>a, .panel-default>.panel-heading+.panel-collapse>.panel-body, .profile-usermenu .nav>li>a, .profile-usermenu, .information-post, .pagination>li>a, .pagination>li>span, .blog-post, .panel-default>.panel-heading, hr, #landing-page #grid-course, .panel-default, .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus, #landing-page #description-course #informations h5, .form-control, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus, .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    border-color: #DCD5C6; /* Setar cor das Bordas */
}
.btn-default, .btn-default:hover {
    background-color: #0B2A5B; /* Setar cor do botão Padrão */
}
.btn-info, .btn-info:hover {
    background-color: #007479; /* Setar cor do botão de informação */
}
.btn-success, .btn-success:hover, #landing-page #registration-course, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus  {
    background-color: #007479; /* Setar cor do botão de sucesso */
    color: #fff;
}
.btn-danger, .btn-danger:hover, #list-courses .course-unit .language-course-title {
    background-color: #F6D55C; /* Setar cor do botão de atenção */
}

/* aqui entra o css especifico no cliente */
/* ==========================================================
   INPE · custom_css · proposta v1 · 2026-10-15
   Tema Corporate Black (theme_id 3), com página clara. Anexado ao fim do client.css.
   Conceito: "caderno de observação" — papel creme com pontilhado, tinta marinho,
   o petróleo da logo como a linha de neurônios que liga os passos do método,
   o amarelo de marca-texto na palavra-chave e a anotação à mão (Caveat).
   Carrega em TODAS as páginas, inclusive checkout: tipografia, botões e
   formulários são globais de propósito; o resto é escopado.
   ========================================================== */

:root {
  --pv-marinho: #0B2A5B; --pv-tinta: #33415C; --pv-cinza: #5A6578;
  --pv-petroleo: #007479; --pv-petroleo2: #006A70; --pv-ficha: #E7F1F0;
  --pv-papel: #FBF8F1; --pv-papel2: #F3EEE3; --pv-areia: #DCD5C6; --pv-marca: #F6D55C;
  --pv-pontos: radial-gradient(rgba(0,116,121,.16) 1.3px, transparent 1.6px);
}

/* ---------- base ----------
   color5 é fundo E cor de texto do checkout no Corporate Black: ele fica marinho
   (texto legível no carrinho) e o papel creme da página vem daqui. */
body { background-color: var(--pv-papel); font-size: 16.5px; font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; }
b, strong { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; line-height: 1.15; }
hr { border-top-color: var(--pv-areia); }
::selection { color: var(--pv-marinho); background: var(--pv-marca); }

/* menu do topo, botões e formulários na Lexend; a Lora fica para título e menu principal */
.btn, #menu-top > li > a, .dropdown-menu > li > a, .pagination, .pager, .breadcrumb, .form-control { font-family: 'Lexend', sans-serif; }
/* o bootstrap.css do LMS (Bootswatch Sandstone) força MAIÚSCULAS; botão, menu e painel em caixa normal */
.btn, .nav, .navbar .nav > li > a, .dropdown-menu > li > a, .breadcrumb, .pagination, .pager,
.panel .panel-heading, .panel .panel-title { text-transform: none; }

.btn, .btn-lg { text-shadow: none; border: 0; border-radius: 6px; font-weight: 500; letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-info, .btn-info:focus, .btn-success, .btn-success:focus { color: #fff; }
.btn-info:hover, .btn-success:hover { color: #fff; background-color: var(--pv-marinho); box-shadow: 0 12px 26px -14px rgba(11,42,91,.8); }
.btn-default, .btn-default:hover, .btn-default:focus { color: #fff; }
.btn-default:hover { background-color: var(--pv-petroleo); }
/* button4 é o amarelo de marca-texto: texto marinho (branco nele daria 1,4:1) */
.btn-danger, .btn-danger:hover, .btn-danger:focus { color: var(--pv-marinho); }
.btn-danger:hover { background-color: #F1C93A; }
.btn:focus-visible { outline: 3px solid var(--pv-marinho); outline-offset: 3px; }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { color: #fff; }

.form-control { color: var(--pv-marinho); background-color: #fff; border-radius: 6px; box-shadow: none; }
.form-control:focus { border-color: var(--pv-petroleo); box-shadow: 0 0 0 3px rgba(0,116,121,.2); }
.form-control::placeholder { color: #6E778A; opacity: 1; }
.panel-default > .panel-heading .panel-title, .panel-default > .panel-heading .panel-title a { font-family: 'Lexend', sans-serif; font-size: 15.5px; font-weight: 500; color: var(--pv-marinho); }

/* ---------- ícones dos blocos ----------
   O CKEditor 4 do admin APAGA elementos vazios como <i class="fa ..."></i> ao salvar.
   Por isso o ícone é um ::before em elemento COM texto: class="pv-ic pv-ic-<nome>". */
.pv-ic::before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.pv-ic-whats::before { content: "\f232"; }
.btn.pv-ic::before { margin-right: 10px; font-size: 1.15em; vertical-align: -1px; }

/* ---------- marcas do caderno ---------- */
/* marca-texto amarelo atrás da palavra-chave */
.pv-marca { padding: 0 .06em; background: linear-gradient(180deg, transparent 0 56%, rgba(246,213,92,.9) 56% 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* rótulo com o fio de neurônio (linha + nó), o traço da logo */
.pv-chave { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pv-petroleo2); }
.pv-chave::before { content: ""; flex: none; width: 46px; height: 10px;
  background: radial-gradient(circle at calc(100% - 5px) 50%, var(--pv-petroleo) 3.5px, transparent 4px),
              linear-gradient(var(--pv-petroleo), var(--pv-petroleo)) 0 50% / calc(100% - 8px) 1.5px no-repeat; }
.pv-sub { font-size: 18px; line-height: 1.7; color: var(--pv-tinta); }
.pv-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.pv-btn-linha, .pv-btn-linha:focus { color: var(--pv-marinho); background: transparent; box-shadow: inset 0 0 0 1.5px var(--pv-marinho); }
.pv-btn-linha:hover { color: #fff; background: var(--pv-marinho); }

/* ---------- barra do topo (head_block) ---------- */
#top-menu { min-height: 44px; margin: 0; border: 0; border-radius: 0; }
#text-top-menu { font-size: 13px; color: #C6D3E6; }
@media (min-width: 768px) { #text-top-menu { display: flex; align-items: center; min-height: 44px; } }
#text-top-menu .pv-topo { margin: 0; line-height: 1.2; }
.pv-topo-nome { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: #E4ECF6; }
.pv-topo a { margin-left: 14px; padding-left: 14px; border-left: 1px solid #2B4A7C; color: var(--pv-marca); font-weight: 400; }
.pv-topo a:hover { color: #fff; }
.pv-topo a.pv-ic::before { margin-right: 7px; }
#top-menu ul.flag li img { width: 18px; border-radius: 2px; }
#menu-top > li > a { color: #E4ECF6; font-size: 13px; font-weight: 400; }
#menu-top > li > a:hover, #menu-top > li > a:focus { background: transparent; color: var(--pv-marca); }
/* o 1º item é Cadastrar/Login para o visitante (<li> sem id) e Administrador/Área do aluno para quem está logado */
#menu-top > li:first-child > a, #menu-top > li#environment-access > a { margin: 0 0 0 6px; padding: 6px 16px; color: var(--pv-marinho) !important; background: var(--pv-marca); border-radius: 6px; font-weight: 500; }
#menu-top > li:first-child > a:hover, #menu-top > li#environment-access > a:hover { color: var(--pv-marinho) !important; background: #fff; }
#menu-top > li#environment-access, #menu-top > li.btn-info { background: transparent !important; }
/* bandeiras e botão no mesmo eixo (o ul.flag flutua com margem fixa e fica 4px abaixo) */
@media (min-width: 768px) {
  #top-menu .container > .row { display: flex; align-items: center; min-height: 44px; }
  #top-menu .container > .row::before, #top-menu .container > .row::after { display: none; }
  #top-menu .container > .row > div { float: none; }
  #top-menu .container > .row > div:last-child { display: flex; align-items: center; justify-content: flex-end; }
  #top-menu .container > .row > div:last-child > * { float: none; }
  #top-menu ul.flag { order: 2; display: flex; align-items: center; gap: 6px; margin: 0 0 0 16px; padding: 0; float: none; }
  #top-menu ul.flag > li { display: block; float: none; }
  #top-menu ul.flag > li > a { display: block; padding: 0; line-height: 0; }
  #top-menu #menu-mobile { display: flex !important; align-items: center; padding: 0; }
  #top-menu #menu-top { display: flex; align-items: center; float: none; margin: 0; }
  #top-menu #menu-top > li { float: none; }
}
@media (min-width: 768px) and (max-width: 1199px) { .pv-topo-nome { display: none; } .pv-topo a { margin-left: 0; padding-left: 0; border-left: 0; } }

/* ---------- logo + busca + menu: um cabeçalho branco só ---------- */
#logotipo-search { padding: 22px 0 18px; background: #fff; }
#logotipo-search img { max-height: 84px; width: auto; margin: 0; }
#search-site .input-group { margin-top: 16px; }
#search-site .form-control { height: 48px; padding-left: 18px; border-color: var(--pv-areia); border-right: 0; border-radius: 6px 0 0 6px; background: var(--pv-papel); }
#search-site .btn { height: 48px; padding: 0 22px; font-size: 14px; border-radius: 0 6px 6px 0; }
#search-site .btn:hover { transform: none; }

/* menu: links marinho (o tema os pinta de branco) e o item ativo grifado de marca-texto */
#menu-main.navbar { min-height: 0; position: sticky; top: 0; z-index: 1000; border: 0; border-top: 1px solid #EEE9DF; border-bottom: 1px solid var(--pv-areia); border-radius: 0;
  box-shadow: 0 10px 24px -22px rgba(11,42,91,.6); }
#menu-main .nav-justified { display: flex; justify-content: center; gap: 4px; width: auto; }
#menu-main .nav-justified > li { display: block; width: auto; float: none; }
#menu-main .nav > li > a { padding: 17px 22px 15px; font-size: 17px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--pv-marinho); background: transparent; border-radius: 0; }
#menu-main .nav > li > a:hover, #menu-main .nav > li > a:focus { color: var(--pv-petroleo); background: transparent; }
#menu-main .nav > li.active > a, #menu-main .nav > li.active > a:hover, #menu-main .nav > li.active > a:focus { color: var(--pv-marinho);
  background: linear-gradient(180deg, transparent 0 46%, rgba(246,213,92,.95) 46% 74%, transparent 74%) center / calc(100% - 36px) 100% no-repeat; }
/* o painel "Modifique Cores e Fontes" do admin logado (z-index 99) fica abaixo do menu fixo */
body #side-colors { z-index: 1045; }

/* ---------- slides: legenda à esquerda, sobre o papel pontilhado da foto ---------- */
#slider { margin-bottom: 0; background: var(--pv-papel); }
#slider .carousel-inner .item { background: var(--pv-papel); }
#slider .item img { width: 100%; }
#slider .carousel-caption { left: 50%; right: auto; top: 50%; bottom: auto; width: 100%; max-width: 1170px; padding: 0 15px;
  transform: translate(-50%, -50%); text-align: left; text-shadow: none; }
#slider .carousel-caption h2 { max-width: 560px; margin: 0 0 14px; font-size: 48px; line-height: 1.08; font-weight: 600; color: var(--pv-marinho); }
#slider .carousel-caption h2::before { content: ""; display: block; width: 46px; height: 10px; margin-bottom: 18px;
  background: radial-gradient(circle at calc(100% - 5px) 50%, var(--pv-petroleo) 3.5px, transparent 4px),
              linear-gradient(var(--pv-petroleo), var(--pv-petroleo)) 0 50% / calc(100% - 8px) 1.5px no-repeat; }
#slider .carousel-caption p { max-width: 470px; margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--pv-tinta); }
#slider .carousel-control { width: 60px; background: none; color: var(--pv-marinho); opacity: .35; text-shadow: none; }
#slider .carousel-control:hover { opacity: .9; }
#slider .carousel-indicators li { border-color: rgba(11,42,91,.5); }
#slider .carousel-indicators .active { background: var(--pv-marinho); }
@media (max-width: 1199px) { #slider .carousel-caption h2 { font-size: 40px; max-width: 460px; } #slider .carousel-caption p { max-width: 400px; font-size: 15.5px; margin-bottom: 18px; } }
@media (max-width: 991px)  { #slider .carousel-caption h2 { font-size: 32px; max-width: 360px; } #slider .carousel-caption h2::before { margin-bottom: 10px; } }

/* ---------- blocos da home ---------- */
section.content_block + hr, #courses-list + hr { display: none; }
section.content_block { overflow-x: clip; }
.content_block h2 { margin: 0 0 16px; font-size: 44px; color: var(--pv-marinho); text-wrap: balance; }

/* abertura: o texto à esquerda e a ficha de observação presa no caderno, à direita */
.pv-abre { position: relative; display: flex; align-items: center; gap: 70px; margin: 0 calc(50% - 50vw); padding: 96px calc(50vw - 50%) 104px;
  background: var(--pv-pontos) 0 0 / 22px 22px, var(--pv-papel); border-bottom: 1px solid var(--pv-areia); }
.pv-abre-txt { flex: 1 1 0; min-width: 0; }
.pv-abre h1 { max-width: 17ch; margin: 0 0 24px; font-size: 54px; line-height: 1.1; color: var(--pv-marinho); text-wrap: balance; }
.pv-abre .pv-sub { max-width: 560px; margin: 0 0 34px; }

.pv-ficha { position: relative; flex: 0 0 400px; margin: 0; padding: 30px 34px 30px 58px; background: #fff; border-radius: 4px;
  background-image: linear-gradient(90deg, transparent 38px, rgba(0,116,121,.45) 38px 39.5px, transparent 39.5px),
                    repeating-linear-gradient(180deg, transparent 0 31px, #E3EEF0 31px 32px);
  box-shadow: 0 1px 0 var(--pv-areia), 0 34px 50px -34px rgba(11,42,91,.55); transform: rotate(1.6deg); }
/* a fita que prende a ficha no caderno */
.pv-ficha::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px;
  background: rgba(246,213,92,.72); transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.pv-ficha-cab { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-family: 'Lora', serif; font-size: 21px;
  font-style: italic; font-weight: 600; color: var(--pv-marinho); }
.pv-ficha-cab span { flex: none; padding: 3px 9px 2px; font-family: 'Lexend', sans-serif; font-size: 10.5px; font-style: normal; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pv-marinho); background: var(--pv-marca); border-radius: 3px; }
.pv-ficha-caso { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--pv-tinta); }
.pv-ficha-perg { margin: 0 0 16px; padding: 0; list-style: none; }
.pv-ficha-perg li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 32px; color: var(--pv-marinho); }
.pv-ficha-perg li::before { content: "\f096"; position: absolute; left: 0; top: 0; font-family: FontAwesome; font-size: 15px; color: var(--pv-petroleo); }
.pv-ficha-nota { margin: 0; font-family: 'Caveat', cursive; font-size: 29px; font-weight: 600; line-height: 1.1; color: var(--pv-petroleo2); transform: rotate(-2deg); }

/* o método: quatro passos ligados pela linha de neurônio */
.pv-metodo { margin: 110px 0 0; }
.pv-metodo .pv-sub { max-width: 700px; margin: 0 0 54px; }
.pv-passos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0 0 54px; padding: 0; list-style: none; counter-reset: none; }
.pv-passos::before { content: ""; position: absolute; top: 27px; left: 28px; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--pv-petroleo) 0 70%, rgba(0,116,121,.25) 100%); }
.pv-passos li { position: relative; }
.pv-passos .pv-num { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 22px; font-family: 'Lora', serif;
  font-size: 24px; font-weight: 600; color: var(--pv-marinho); background: #fff; border: 2px solid var(--pv-petroleo); border-radius: 50%; }
.pv-passos li:last-child .pv-num { color: var(--pv-marinho); background: var(--pv-marca); border-color: var(--pv-marca); }
.pv-passos h3 { margin: 0 0 8px; font-size: 25px; color: var(--pv-marinho); }
.pv-passos p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--pv-tinta); }
.pv-para { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 22px 26px; background: var(--pv-ficha); border-radius: 6px; font-size: 15px; color: var(--pv-marinho); }
.pv-para b { margin-right: 4px; font-weight: 600; }
.pv-para span { padding: 4px 12px; background: #fff; border: 1px solid #C9DEDC; border-radius: 999px; font-size: 14px; }
.pv-para em { flex-basis: 100%; margin-top: 4px; font-family: 'Caveat', cursive; font-size: 23px; font-style: normal; font-weight: 600; color: var(--pv-petroleo2); }

/* a professora: foto de ficha presa com fita, trajetória e a forma de pensar */
.pv-docente { display: flex; align-items: center; gap: 70px; margin: 120px 0 0; }
.pv-docente-foto { position: relative; flex: 0 0 300px; margin: 0; padding: 14px 14px 10px; background: #fff; box-shadow: 0 30px 46px -30px rgba(11,42,91,.55); transform: rotate(-2deg); }
.pv-docente-foto::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: rgba(246,213,92,.72); transform: rotate(4deg); }
.pv-docente-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pv-docente-legenda { margin: 8px 0 0; font-family: 'Caveat', cursive; font-size: 25px; font-weight: 600; line-height: 1.1; text-align: center; color: var(--pv-petroleo2); }
.pv-docente-txt { flex: 1 1 0; min-width: 0; }
.pv-docente-txt .pv-sub { max-width: 640px; margin: 0 0 26px; }
.pv-citacao { margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pv-petroleo); }
.pv-citacao p { margin: 0 0 8px; font-family: 'Lora', serif; font-size: 22px; font-style: italic; font-weight: 500; line-height: 1.45; color: var(--pv-marinho); }
.content_block .pv-citacao .pv-autor { margin: 0; font-family: 'Lexend', sans-serif; font-size: 13px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-cinza); }

/* título da lista de cursos (o do sistema sai só na home) */
.pv-cursos { margin: 120px 0 0; text-align: center; }
.pv-cursos .pv-sub { margin: 0; }
body#index #courses-list h2.cl-title, body#index #courses-list > .container > div > h2.text-center { display: none; }

/* curso gratuito (footer_block): faixa petróleo-claro com a foto presa no caderno */
.pv-gratis { display: flex; align-items: center; gap: 70px; margin: 110px calc(50% - 50vw) 0; padding: 90px calc(50vw - 50%) 96px;
  background: var(--pv-pontos) 0 0 / 22px 22px, var(--pv-ficha); }
.pv-gratis-img { position: relative; flex: 0 0 420px; padding: 12px; background: #fff; box-shadow: 0 30px 46px -30px rgba(11,42,91,.5); transform: rotate(1.5deg); }
.pv-gratis-img::before { content: ""; position: absolute; top: -12px; left: 46px; width: 96px; height: 26px; background: rgba(246,213,92,.72); transform: rotate(-4deg); }
.pv-gratis-img img { display: block; width: 100%; height: auto; }
.pv-gratis-txt { flex: 1 1 0; min-width: 0; }
.pv-selo { display: inline-block; margin: 0 0 16px; padding: 5px 12px 4px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-marinho); background: var(--pv-marca); border-radius: 3px; }
.pv-gratis .pv-sub { max-width: 600px; margin: 0 0 30px; }
.pv-gratis .pv-nota { margin: 22px 0 0; font-family: 'Caveat', cursive; font-size: 25px; font-weight: 600; color: var(--pv-petroleo2); }

/* ---------- cards de curso: a ficha na estante ---------- */
#courses-list { padding: 34px 0 0; }
body#index #courses-list #list-courses { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 34px 0 0; }
body#index #courses-list #list-courses::before, body#index #courses-list #list-courses::after { display: none; }
body#index #courses-list #list-courses > .cl-item, body#index #courses-list #list-courses > .cl-skel-card { float: none; width: 350px; padding: 0; }
body#index #courses-list #list-courses > .cl-skel-card ~ .cl-skel-card ~ .cl-skel-card ~ .cl-skel-card { display: none; }
#list-courses .course-unit { display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--pv-areia); border-radius: 6px;
  transition: transform .25s ease, box-shadow .25s ease; }
#list-courses .course-unit:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgba(11,42,91,.55); }
#list-courses .course-unit .course-img { position: relative; overflow: hidden; }
#list-courses .course-unit .course-img img.height-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
#list-courses .course-unit .language-course-title { left: 14px; right: auto; bottom: 14px; max-width: calc(100% - 28px); padding: 4px 10px 3px; border-radius: 3px;
  font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
#list-courses .course-unit .language-course-title p { margin: 0; }
#list-courses .course-unit .language-course-title a { color: var(--pv-marinho); }
#list-courses .course-unit .course-text { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 18px; text-align: left; background: #fff; }
/* o tema corta o título em UMA linha com reticências; aqui o nome do curso cabe inteiro */
#list-courses .course-unit .course-text h4 { height: auto; min-height: 0; max-height: none; margin: 0 0 16px; overflow: visible; font-size: 21px; line-height: 1.25;
  white-space: normal; text-overflow: clip; -webkit-line-clamp: unset; }
#list-courses .course-unit .course-text h4 a { color: var(--pv-marinho); }
#list-courses .course-unit .course-text h4 a:hover { color: var(--pv-petroleo); }
#list-courses .course-unit .course-text h4 + p { display: none; }
#list-courses .course-unit .course-text br { display: none; }
#list-courses .course-unit .course-text > p:has(.btn) { margin: auto 0 0; }
#list-courses .course-unit .course-text .btn-block { padding: 12px; font-size: 15px; }
#list-courses .course-unit .course-text hr { margin: 16px 0 12px; border-top-color: #ECE6DA; }
#list-courses .course-unit p.teacher-name, #list-courses .course-unit p.teacher-name a { display: flex; align-items: center; height: auto; max-height: none; margin: 0; overflow: visible;
  color: var(--pv-tinta); font-size: 13.5px; font-weight: 400; white-space: normal; }
#list-courses .course-unit p.teacher-name img { flex: none; width: 30px; height: 30px; margin-right: 10px; object-fit: cover; font-size: 0; color: transparent; border: 2px solid var(--pv-marca); }

/* ---------- rodapé ---------- */
#footer-top { margin-top: 0; padding: 60px 0 46px; color: var(--pv-tinta); }
#footer-top .row { display: flex; flex-wrap: wrap; align-items: flex-start; }
#footer-top .row::before, #footer-top .row::after { display: none; }
#footer-top .row > div { float: none; }
/* "Últimas do Blog": a cliente já tentava escondê-lo no custom_css (a regra estava quebrada) */
#footer-top .row > .col-sm-5 { display: none; }
#footer-top .row > .col-sm-3 { margin-left: auto; }
#footer-top ul { margin-bottom: 0; }
#footer-top h3 { margin: 0 0 16px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-petroleo2); }
#footer-top ul li { margin-bottom: 9px; font-size: 14.5px; color: var(--pv-tinta); }
#footer-top ul li strong { font-family: 'Lora', serif; font-size: 17px; color: var(--pv-marinho); }
#footer-top a { color: var(--pv-marinho); }
#footer-top a:hover { color: var(--pv-petroleo); }
#footer-top .fa-lg { margin-right: 6px; font-size: 20px; }
footer { padding: 22px 0; font-size: 12.5px; color: #C6D3E6; }

/* ---------- responsivo ---------- */
@media (max-width: 1199px) {
  .pv-abre { gap: 46px; }
  .pv-abre h1 { font-size: 46px; }
  .pv-ficha { flex-basis: 360px; }
  .pv-docente, .pv-gratis { gap: 46px; }
  .pv-gratis-img { flex-basis: 360px; }
}
@media (max-width: 991px) {
  .pv-abre { flex-direction: column; align-items: flex-start; gap: 64px; }
  .pv-ficha { flex: none; width: 100%; max-width: 440px; align-self: center; }
  .pv-passos { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .pv-passos::before { display: none; }
  .pv-docente, .pv-gratis { flex-direction: column; align-items: flex-start; }
  .pv-docente-foto { flex: none; width: 280px; align-self: center; }
  .pv-gratis-img { flex: none; width: 100%; max-width: 460px; align-self: center; }
}
@media (max-width: 767px) {
  .pv-sub { font-size: 16px; }
  .pv-acoes .btn { width: 100%; white-space: normal; }
  .content_block h2 { font-size: 32px; }
  .pv-metodo { margin-top: 76px; }
  .pv-metodo .pv-sub { margin-bottom: 36px; }
  /* passos em coluna, com a linha de neurônio descendo à esquerda */
  .pv-passos { grid-template-columns: 1fr; row-gap: 26px; margin-bottom: 36px; }
  .pv-passos::before { display: block; top: 20px; bottom: 30px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--pv-petroleo) 0 75%, rgba(0,116,121,.25)); }
  .pv-passos li { padding-left: 64px; }
  .pv-passos .pv-num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; font-size: 19px; }
  .pv-passos h3 { font-size: 22px; padding-top: 8px; }
  .pv-para { padding: 18px; }
  .pv-docente { margin-top: 80px; gap: 40px; }
  .pv-docente-foto { width: 240px; }
  .pv-citacao p { font-size: 19px; }
  .pv-cursos { margin-top: 84px; }
  .pv-gratis { margin-top: 80px; padding: 64px 20px 70px; gap: 40px; }
  #courses-list #list-courses > div { width: 100%; max-width: 420px; }
  body#index #courses-list #list-courses > .cl-item, body#index #courses-list #list-courses > .cl-skel-card { width: 100%; max-width: 380px; }
  /* o tema esconde o rodapé inteiro no celular (hidden-xs): aqui ele volta */
  #footer-top.hidden-xs { display: block !important; padding: 44px 0 26px; text-align: center; }
  #footer-top .row > div { width: 100%; }
  #footer-top .row > .col-sm-3 { margin: 0; }
  #footer-top .col-sm-4 { margin-bottom: 26px; }
  #footer-top ul li, #contact-right li, #footer-top .list-config li { overflow-wrap: anywhere; }
  /* o botão de WhatsApp da cliente vira só o ícone no celular: inteiro, ele cobria o texto dos cards */
  .inpe-whatsapp { padding: 6px !important; }
  .inpe-whatsapp .inpe-whatsapp-text { display: none; }
}

/* ==========================================================
   PÁGINAS INTERNAS — o custom_css é global
   ========================================================== */

/* cabeçalho das páginas internas (color3 = papel de ficha) com o fio de neurônio */
#top-internal { position: relative; padding-bottom: 30px; background-image: var(--pv-pontos); background-size: 22px 22px; border-bottom: 1px solid #C9DEDC; }
#top-internal h1 { font-size: 46px; color: var(--pv-marinho); }
#top-internal .breadcrumb, #top-internal .breadcrumb a, #top-internal .breadcrumb > .active { color: var(--pv-tinta); }
/* o item ativo do menu fica com o marca-texto também nas internas (o tema pinta o fundo com color3) */
#menu-main .nav > li.active > a { background-color: transparent; }

/* catálogo, categoria e blog usam <h3> no título do item (a home usa <h4>) */
#list-courses .course-unit h3 a, #list-courses .course-unit .course-text h3 a, .blog-post h3 a { color: var(--pv-marinho); }
#list-courses .course-unit h3 a:hover, #list-courses .course-unit .course-text h3 a:hover, .blog-post h3 a:hover { color: var(--pv-petroleo); }

/* o esqueleto pinta o BLOCO INTEIRO de inscrição com a cor de button3: vira marinho */
#landing-page #registration-course { background-color: var(--pv-marinho); color: #DCE6F2; }
#landing-page #registration-course h2, #landing-page #registration-course h3, #landing-page #registration-course h4 { color: #fff; }
/* comprar o curso e entrar na conta nascem .btn-default (marinho): viram a ação petróleo */
#registration-course .btn-default, #registration-course .btn-default:hover, #registration-course .btn-default:focus,
form[action$="/auth"] button[type="submit"].btn-default, form[action$="/auth"] button[type="submit"].btn-default:hover { background-color: var(--pv-petroleo); color: #fff; }
#registration-course .btn-default:hover { background-color: #0B8A90; }
/* o preço fica num quadro claro dentro do bloco marinho: volta a ser tinta */
#registration-course #courseValues h3, #registration-course #courseValues h3 b { color: var(--pv-marinho); }
#registration-course #courseValues .text-muted { color: #4A5568; }
#registration-course #courseValues .text-success { color: var(--pv-marinho); }

/* banner da página do curso: véu marinho sobre o fundo claro do curso, para o título branco ler */
#landing-page #course-banner { position: relative; isolation: isolate; }
#landing-page #course-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,42,91,.86), rgba(11,42,91,.62)); }
#landing-page #course-banner h1 { font-size: 52px; line-height: 1.1; color: #fff; text-shadow: none; }
#landing-page #course-banner h2 { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.6; color: #E4ECF6; text-shadow: none; letter-spacing: 0; }

/* no FAQ e nas dúvidas do curso a pergunta É o conteúdo */
#site-faq .panel-default > .panel-heading .panel-title, #site-faq .panel-default > .panel-heading .panel-title a,
#course-show .panel-default > .panel-heading .panel-title, #course-show .panel-default > .panel-heading .panel-title a { font-size: 18px; line-height: 1.4; }
#course-show .panel-default > .panel-heading, #course-show .panel-default > .panel-heading .panel-title { text-align: left; }

/* página do curso: abas dos módulos com a ativa em petróleo; menu de âncoras legível */
#landing-page .nav-tabs.nav-justified > li > a { color: var(--pv-tinta); background-color: var(--pv-papel2); border-color: var(--pv-areia); }
#landing-page .nav-tabs.nav-justified > li > a:hover, #landing-page .nav-tabs.nav-justified > li > a:focus { color: var(--pv-marinho); background-color: #fff; }
#landing-page .nav-tabs.nav-justified > li.active > a, #landing-page .nav-tabs.nav-justified > li.active > a:hover, #landing-page .nav-tabs.nav-justified > li.active > a:focus {
  color: #fff; background-color: var(--pv-petroleo); border-color: var(--pv-petroleo); }
@media (min-width: 768px) { #grid-course .nav-tabs.nav-justified { display: flex; flex-wrap: wrap; } }
#menu-landing.nav-pills > li > a { color: var(--pv-tinta); }
#menu-landing.nav-pills > li > a:hover, #menu-landing.nav-pills > li > a:focus { color: var(--pv-petroleo); background: transparent; }

/* texto e imagem colados com tamanho fixo estouram o celular (curso, professor e páginas estáticas) */
@media (max-width: 767px) {
  #grid-course, #description-course .text-left, .biography-text, body#site-staticpage #content-page { overflow-wrap: anywhere; }
}
body#site-staticpage #content-page img, #grid-course img, #description-course img { max-width: 100%; height: auto !important; }
/* no celular o nome da pós ocupava a tela inteira no banner do curso */
@media (max-width: 767px) {
  #top-internal h1 { font-size: 34px; }
  #landing-page #course-banner h1 { font-size: 30px; line-height: 1.15; }
  #landing-page #course-banner h2 { font-size: 15.5px; }
}

/* o rodapé volta a ter respiro em todas as páginas menos na home (lá a faixa do curso gratuito já separa) */
#footer-top { margin-top: 72px; }
body#index #footer-top { margin-top: 0; }

/* grades com linhas iguais (blog, instrutores); a lista do catálogo (.list2) é horizontal e fica de fora */
#list-courses:not(.list2) { display: flex; flex-wrap: wrap; }
#list-courses:not(.list2)::before, #list-courses:not(.list2)::after { display: none; }
#list-courses:not(.list2) > div { float: none; }

/* paginação do blog: vem com classes do Tailwind e o bloco numerado (em inglês) é apagado pelo .hidden */
#blog-list nav[role="navigation"] { display: flex; justify-content: center; margin: 40px 0 0; }
#blog-list nav[role="navigation"] > div:first-child { display: flex; flex: none; gap: 12px; }
#blog-list nav[role="navigation"] > div:first-child > span,
#blog-list nav[role="navigation"] > div:first-child > a { margin: 0; padding: 11px 22px; border-radius: 6px; font-size: 14px; font-weight: 500;
  line-height: 1.2; background: #fff; border: 1px solid var(--pv-areia); color: var(--pv-marinho); }
#blog-list nav[role="navigation"] > div:first-child > a { color: #fff; background: var(--pv-petroleo); border-color: var(--pv-petroleo); }
#blog-list nav[role="navigation"] > div:first-child > span { opacity: .5; }

/* blog: .course-unit é a PRÓPRIA coluna; HTML aberto em resumo de post não pode embrulhar os cards */
#blog-list #list-courses strong { display: contents; }
#blog-list #list-courses.row { margin-left: 0; margin-right: 0; gap: 26px; }
#blog-list #list-courses .course-unit { width: 100%; height: auto; min-height: 0; padding: 0; margin: 0; align-self: stretch; overflow: hidden; }
@media (min-width: 768px) { #blog-list #list-courses .course-unit { width: calc((100% - 26px) / 2); } }
@media (min-width: 992px) { #blog-list #list-courses .course-unit { width: calc((100% - 52px) / 3); } }
#blog-list #list-courses .course-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#blog-list #list-courses .course-unit .course-text { padding: 16px 18px 18px; }

/* catálogo e categoria: no desktop é uma LISTA (.list2), não a grade */
#list-courses.list2 > div { margin-bottom: 22px; }
/* a regra do cartão da home (#list-courses .course-unit em coluna) também pega a lista: aqui volta a ser linha, capa ao lado do texto */
#list-courses.list2 .course-unit.row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; height: auto; margin: 0; overflow: hidden; }
#list-courses.list2 .course-unit.row::before, #list-courses.list2 .course-unit.row::after { display: none; }
#list-courses.list2 .course-img { flex: 0 0 300px; width: 300px; padding: 0; float: none; display: flex; align-items: center; background: var(--pv-papel2); border-right: 1px solid var(--pv-areia); }
#list-courses.list2 .course-img a { display: block; width: 100%; }
#list-courses.list2 .course-img img.height-img { display: block; width: 100%; height: auto !important; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; }
#list-courses.list2 .course-unit > .col-sm-9 { display: flex; flex: 1; width: auto; padding: 0; float: none; }
#list-courses.list2 .course-text { flex: 1; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 24px; padding: 26px 32px; text-align: left; }
#list-courses.list2 .course-text > * { grid-column: 1 / -1; }
#list-courses.list2 .course-text h3 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
#list-courses.list2 .course-text > p.ng-binding:empty { display: none; }
#list-courses.list2 .course-text > p.teacher-name { grid-column: 1; grid-row: 10; align-self: center; height: auto; max-height: none; overflow: visible; margin: 20px 0 0 !important; }
#list-courses.list2 .course-text > p.ng-scope { grid-column: 2; grid-row: 10; align-self: center; margin: 20px 0 0 !important; }
#list-courses.list2 .course-text p.teacher-name, #list-courses.list2 .course-text p.teacher-name a { display: flex; align-items: center; gap: 10px; height: auto; max-height: none; overflow: visible; white-space: nowrap; }
@media (max-width: 991px) { #list-courses.list2 .course-img { flex-basis: 220px; width: 220px; } #list-courses.list2 .course-text { padding: 20px 22px; } }

/* ==========================================================
   CELULAR (até 767px) — o desktop não muda.
   Hoje o topo são três faixas (barra marinho só com o hambúrguer,
   faixa da logo e um slide de 108px ilegível). Aqui: uma barra só
   com logo + menu, e a home abre na abertura, com a foto da psicóloga.
   ========================================================== */
@media (max-width: 767px) {
  #top-menu { position: absolute; top: 0; left: 0; right: 0; z-index: 1030; min-height: 0; background: transparent; border: 0; pointer-events: none; }
  #top-menu .navbar-header { display: flex; align-items: center; justify-content: flex-end; height: 76px; }
  #top-menu .navbar-toggle { pointer-events: auto; float: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 46px; height: 46px; margin: 0; padding: 0; background: var(--pv-marinho); border: 0; border-radius: 6px; }
  #top-menu .navbar-toggle .icon-bar { width: 20px; height: 2px; margin: 0; border-radius: 2px; background: #fff; }
  #top-menu .navbar-toggle[aria-expanded="true"] { background: var(--pv-marca); }
  #top-menu .navbar-toggle[aria-expanded="true"] .icon-bar { background: var(--pv-marinho); }
  #top-menu #menu-mobile { pointer-events: auto; margin: 0 -15px; padding: 10px 20px 18px; max-height: none; background: var(--pv-marinho);
    border: 0; border-bottom: 4px solid var(--pv-marca); box-shadow: 0 30px 40px -24px rgba(0,0,0,.5); }
  #top-menu #menu-top { margin: 0; }
  #top-menu #menu-top > li > a { margin: 0; padding: 15px 0; font-size: 16px; text-align: center; color: #E4ECF6; background: transparent; border-bottom: 1px solid #22426F; border-radius: 0; }
  #top-menu #menu-top > li:last-child > a { border-bottom: 0; }
  #top-menu #menu-top > li:first-child > a { margin: 6px 0 8px; padding: 13px 0; color: var(--pv-marinho) !important; background: var(--pv-marca); border: 0; border-radius: 6px; }

  #logotipo-search { display: flex; align-items: center; height: 76px; padding: 0; background: #fff; border-bottom: 1px solid var(--pv-areia); }
  #logotipo-search .container { width: 100%; }
  #logotipo-search .col-sm-4 { padding-right: 76px; }
  #logotipo-search img { max-height: 50px; }

  /* home: o slide sai; a abertura vira a capa, com a foto da psicóloga e do aluno */
  body#index #slider { display: none; }
  body#index .pv-abre { gap: 44px; margin: 0 -15px; padding: 360px 20px 64px;
    background: linear-gradient(180deg, rgba(251,248,241,0) 0, rgba(251,248,241,0) 250px, var(--pv-papel) 370px) 0 0 / 100% 100% no-repeat,
                url("/tenancy/image/storage/editor/images/inpe-abertura-celular.jpg") center top / 100% auto no-repeat, var(--pv-papel); }
  body#index .pv-abre h1 { font-size: 36px; }
  .pv-ficha { padding: 26px 22px 24px 50px; transform: none; }

  /* textos dos cards centralizados */
  body:not(#blog-list) #list-courses .course-unit .course-text { text-align: left; }
}

/* ==========================================================
   CONTRASTE (texto secundário do Bootstrap e ajuda de formulário)
   ========================================================== */
.text-muted, .help-block, .help-block small { color: #5A6578; }
footer .text-muted { color: #9FB2CC; }
.text-danger { color: #B42318; }
/* auditoria no site publicado (15/10/2026) */
/* botão flutuante da cliente (body_custom_script): verde mais fechado, branco legível (2,6:1 → 5,1:1); o desenho fica igual */
.inpe-whatsapp { background: linear-gradient(135deg, #0F7E41, #0B6F37) !important; }
/* etiqueta de categoria no blog: o vermelho do Bootstrap dava 3,96:1 */
.course-text a.label-danger { background-color: var(--pv-petroleo); color: #fff; }
/* seta desativada da paginação sumia (1,31:1) */
.pagination > .disabled > a, .pagination > .disabled > a span, .pagination > .disabled > span { color: var(--pv-cinza); }