/* ==========================================================================
   Site público e área do aluno — Escola Técnica Educativa

   Usa os mesmos tokens de base-admin.css (:root), para a marca ser uma só.
   ========================================================================== */

.corpo-site { background: var(--fundo); }

/* ------------------------------------------------------------- barra topo */
.barra-site {
    background: var(--azul);
    border-bottom: 3px solid var(--laranja);
}
.barra-site .navbar-brand,
.barra-site .nav-link { color: #fff; font-weight: 500; }
.barra-site .nav-link:hover,
.barra-site .nav-link:focus { color: #fff; text-decoration: underline; }
.barra-site .navbar-brand span { font-weight: 700; font-size: 1rem; }

/* Rótulo de menu não quebra no meio: "Cursos profissionalizantes" em duas
   linhas deixava a barra com 83px e o texto desalinhado com o resto. */
.barra-site .nav-link { white-space: nowrap; }

@media (min-width: 1200px) {
    /* Padrão do Bootstrap é .5rem de cada lado. Com dez itens, apertar um
       pouco devolve ~50px de folga sem encostar os rótulos. */
    .barra-site .navbar-nav .nav-link { padding-left: .42rem; padding-right: .42rem; }
    .barra-site .navbar-nav { gap: .15rem; }
}

/* ------------------------------------------------------- menu da conta */
.menu-conta .nav-link { font-weight: 600; }

/* O rótulo da conta mostra `first_name`, e cai para o nome de usuário quando
   não há um — que neste projeto é o e-mail inteiro. Medido a 1265px de largura:
   um e-mail longo empurra a barra 14px além da janela e a página inteira passa
   a rolar de lado. Cortar com reticências resolve sem esconder nada: o nome
   completo continua no title, e o dropdown abaixo não é afetado. */
.menu-conta .nav-link > span {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-conta .dropdown-menu {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 .6rem 1.6rem rgba(20, 20, 122, .18);
    padding: .35rem;
    min-width: 15rem;
}
.menu-conta .dropdown-item {
    border-radius: 6px;
    padding: .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    /* O item "Sair" é um <button> dentro de um <form>: sem isto ele herda a
       largura do botão e não a do menu. */
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
}
.menu-conta .dropdown-item:hover,
.menu-conta .dropdown-item:focus { background: var(--fundo); color: var(--azul-escuro); }
.menu-conta .dropdown-item i { color: var(--azul); }

/* Abaixo de xl o menu vira lista vertical: o dropdown fica sempre aberto,
   sem sobreposição flutuante em cima do conteúdo. */
@media (max-width: 1199.98px) {
    .barra-site .navbar-nav { gap: .1rem; padding-top: .5rem; }
    .menu-conta .dropdown-menu {
        display: block;
        position: static;
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .18);
        box-shadow: none;
        margin: .25rem 0 .5rem;
    }
    .menu-conta .dropdown-item,
    .menu-conta .dropdown-item i { color: #fff; }
    .menu-conta .dropdown-item:hover,
    .menu-conta .dropdown-item:focus { background: rgba(255, 255, 255, .16); color: #fff; }
    .menu-conta .dropdown-toggle::after { display: none; }
    .menu-conta .dropdown-divider { border-color: rgba(255, 255, 255, .2); }
}
.barra-site .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
.barra-site .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* Botão de destaque: laranja com texto escuro. Branco sobre laranja daria
   2,53:1 e reprovaria na WCAG AA. */
.btn-destaque {
    background: var(--laranja);
    border-color: var(--laranja);
    color: #1a1a1a;
    font-weight: 600;
}
.btn-destaque:hover { background: var(--laranja-claro); border-color: var(--laranja-claro); color: #1a1a1a; }

/* ---------------------------------------------------------------- rodapé */
.rodape-site {
    background: var(--azul-escuro);
    border-top: 4px solid var(--laranja);
    color: #fff;
    padding: 1.6rem 0;
    margin-top: 3rem;
}

/* ------------------------------------------------------------------ capa */
.capa {
    background: linear-gradient(160deg, var(--azul) 0%, var(--azul-profundo) 92%);
    color: #fff;
    padding: 3.5rem 0;
}
.capa h1 { font-weight: 700; letter-spacing: -.01em; }
.capa .lead { opacity: .88; }

/* ------------------------------------------------------ carrossel da capa */
.carrossel-capa {
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .28);
    background: rgba(0, 0, 0, .2);
}
/* Uma moldura só para todos os banners. Sem isto, cada slide tem a altura do
   próprio arquivo e a página pula a cada troca. */
.carrossel-capa .carousel-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
}
.carrossel-capa .carousel-item { position: relative; }
.carrossel-capa .carousel-item a { display: block; text-decoration: none; }

.carrossel-capa .legenda-banner {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.4rem .9rem .9rem;
    /* Degradê para o texto branco ter contraste sobre qualquer foto. */
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.carrossel-capa .legenda-banner strong { font-size: 1rem; line-height: 1.25; }
.carrossel-capa .legenda-banner span { font-size: .82rem; opacity: .92; }

/* Os indicadores ficam abaixo da legenda; sem o deslocamento eles caem em
   cima do texto. */
.carrossel-capa .carousel-indicators { margin-bottom: .5rem; }
.carrossel-capa .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    opacity: .55;
}
.carrossel-capa .carousel-indicators .active { opacity: 1; background: var(--laranja); }

.carrossel-capa .carousel-control-prev,
.carrossel-capa .carousel-control-next { width: 12%; opacity: 0; transition: opacity .2s ease; }
.carrossel-capa:hover .carousel-control-prev,
.carrossel-capa:hover .carousel-control-next,
.carrossel-capa .carousel-control-prev:focus-visible,
.carrossel-capa .carousel-control-next:focus-visible { opacity: .9; }

/* Em toque não há hover: as setas ficam sempre visíveis. */
@media (hover: none) {
    .carrossel-capa .carousel-control-prev,
    .carrossel-capa .carousel-control-next { opacity: .85; }
}

/* ----------------------------------------------------------- cartão curso */
.cartao-curso {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cartao-curso:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31, 31, 179, .14); }
.cartao-curso .capa-curso {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    background: var(--cinza-marca);
}
.cartao-curso .capa-vazia {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--azul) 0%, var(--azul-profundo) 100%);
    color: rgba(255, 255, 255, .55);
    font-size: 2rem;
}
.cartao-curso .corpo { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.cartao-curso .titulo { font-weight: 600; color: var(--azul-escuro); margin-bottom: .35rem; }
.cartao-curso .preco { font-weight: 700; color: var(--azul); font-size: 1.15rem; }
.cartao-curso .gratuito { color: var(--sucesso); }

/* --------------------------------------------------------------- checkout */
.painel-pix { text-align: center; }
.painel-pix img { max-width: 260px; width: 100%; border: 1px solid var(--borda); border-radius: var(--raio); }
.copia-cola {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    word-break: break-all;
    background: #f6f7fb;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: .6rem;
    max-height: 100px;
    overflow: auto;
}

/* Barra de progresso do curso */
.progresso { height: 8px; border-radius: 999px; background: var(--cinza-marca); overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--laranja); }

/* -------------------------------------------------- faixa de WhatsApp */
/* Fica acima da navbar, como no site de referência. Só aparece quando há
   número cadastrado no painel. */
.faixa-whatsapp {
    background: var(--azul-profundo);
    padding: .45rem 0;
}
.faixa-whatsapp .container { display: flex; justify-content: center; }

.botao-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #25d366;
    /* Verde do WhatsApp com texto branco daria 2,3:1 e reprovaria na WCAG AA.
       Com texto escuro fica em 8,1:1. */
    color: #10261a;
    font-weight: 700;
    font-size: .9rem;
    padding: .4rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.4;
}
.botao-whatsapp:hover { background: #1fb356; color: #10261a; }
.botao-whatsapp i { font-size: 1.05rem; }

/* ------------------------------------------------ seletor de tipo de curso */
.abas-tipo { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.abas-tipo a {
    border: 1px solid var(--borda);
    background: #fff;
    color: var(--texto-suave);
    border-radius: 999px;
    padding: .4rem 1.1rem;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}
.abas-tipo a:hover { border-color: var(--azul); color: var(--azul); }
.abas-tipo a.ativa {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--laranja);
}
.abas-tipo a .contagem { opacity: .7; font-weight: 400; }

/* ------------------------------------------------------------------ blog */
.cartao-postagem {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease;
}
.cartao-postagem:hover,
.cartao-postagem:focus-visible {
    box-shadow: 0 .5rem 1.4rem rgba(20, 20, 122, .14);
    transform: translateY(-2px);
}
.cartao-postagem:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

.cartao-postagem .capa-postagem {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.cartao-postagem .capa-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fundo);
    color: var(--azul);
    font-size: 2rem;
}
.cartao-postagem .corpo {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cartao-postagem .data { font-size: .76rem; color: #5b5b6b; margin-bottom: .35rem; }
.cartao-postagem .titulo {
    font-weight: 700;
    color: var(--azul-escuro);
    line-height: 1.25;
    margin-bottom: .4rem;
}
.cartao-postagem .chamada { font-size: .86rem; color: #4a4a58; flex: 1; }
.cartao-postagem .rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .9rem;
}
/* Azul da marca sobre branco: 11,02:1. Passa AA e AAA. */
.cartao-postagem .leia-mais { color: var(--azul); font-weight: 600; font-size: .85rem; }

/* --------------------------------------------------------- artigo do blog */
.postagem { max-width: 46rem; }
.postagem .capa-artigo {
    width: 100%;
    border-radius: var(--raio);
    margin-bottom: 1.5rem;
}
.postagem .texto-artigo { font-size: 1.02rem; line-height: 1.75; color: #2c2c38; }
.postagem .texto-artigo p { margin-bottom: 1rem; }

/* ------------------------------------------------------- galeria de fotos */
.galeria-postagem .miniatura {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--borda);
    cursor: zoom-in;
}
.galeria-postagem .miniatura img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.galeria-postagem .miniatura:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.galeria-postagem .miniatura .legenda {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem .6rem .5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: .76rem;
    text-align: left;
}

dialog.visor-foto {
    border: 0;
    border-radius: var(--raio);
    /* Faixa maior em cima para o X não ficar sobre a foto. */
    padding: 2.2rem 1rem 1rem;
    max-width: min(92vw, 60rem);
    background: #fff;
}
dialog.visor-foto::backdrop { background: rgba(0, 0, 0, .72); }
/* Sem o teto de altura, uma foto em retrato estoura a tela e o visor vira uma
   caixa com barra de rolagem — com o botão de fechar fora de alcance. */
dialog.visor-foto img {
    width: auto;
    max-width: 100%;
    max-height: 78vh;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    display: block;
}
dialog.visor-foto .fechar {
    position: absolute;
    top: .35rem;
    right: .5rem;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: #444;
    cursor: pointer;
}

/* --------------------------------------------------- título de seção */
.titulo-secao {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--azul-escuro);
    margin: 0 0 1.1rem;
    padding-bottom: .4rem;
    /* Mesma marca do título do painel: a barra laranja é a assinatura visual
       do produto, e repetir aqui liga o site ao painel. */
    border-bottom: 3px solid var(--laranja);
    display: inline-block;
}
.titulo-secao small {
    display: block;
    font-size: .82rem;
    font-weight: 400;
    color: #5b5b6b;
    margin-top: .2rem;
}

/* ------------------------------------------------------- botão "Ver mais" */
.area-ver-mais {
    display: flex;
    justify-content: center;
    /* Respiro grande de propósito: o botão fecha a seção e precisa se
       descolar da última linha de cartões. */
    margin: 2rem 0 .5rem;
}
.btn-ver-mais {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .62rem 1.9rem;
    border: 2px solid var(--azul);
    border-radius: 999px;
    /* Azul da marca sobre branco: 11,02:1. Passa AA e AAA. */
    color: var(--azul);
    background: #fff;
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-ver-mais:hover,
.btn-ver-mais:focus-visible {
    background: var(--azul);
    /* Branco sobre o azul da marca: 11,02:1 — contraste é simétrico. */
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(31, 31, 179, .22);
}
.btn-ver-mais:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.btn-ver-mais i { transition: transform .18s ease; }
.btn-ver-mais:hover i { transform: translateX(3px); }

/* Movimento é decoração: quem pediu para reduzi-lo no sistema não recebe. */
@media (prefers-reduced-motion: reduce) {
    .btn-ver-mais,
    .btn-ver-mais i { transition: none; }
    .btn-ver-mais:hover i { transform: none; }
}

/* ==========================================================================
   Cartão clicável — "Meus cursos"
   ========================================================================== */
/* O cartão inteiro leva à área do curso, e os botões levam ao que prometem.

   `stretched-link` do Bootstrap estica um pseudo-elemento do link sobre o
   ancestral posicionado mais próximo. O `.cartao-curso` já é o candidato
   natural, mas nada garante que ele esteja posicionado — daí o position
   explícito aqui, para o alvo do clique ser o cartão e não o container da
   coluna, que arrastaria a margem junto. */
.cartao-clicavel { position: relative; }

/* Os botões precisam ficar ACIMA da camada esticada. Sem isto o link do cartão
   interceptaria o clique e "Acessar aulas" nunca chegaria ao Moodle — o bug
   clássico deste padrão. */
.cartao-clicavel .acoes-cartao { position: relative; z-index: 2; }

/* O título é o próprio link esticado; sem isto ele sairia com a cor de link
   sublinhado e destoaria do título dos outros cartões. */
.cartao-clicavel .titulo { color: var(--azul-escuro); }
.cartao-clicavel:hover .titulo { text-decoration: underline; }

/* ==========================================================================
   "Em alta"
   ========================================================================== */
.posicao-em-alta { position: relative; height: 100%; }
.posicao-em-alta .selo-posicao {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--laranja);
    /* Laranja da marca NUNCA recebe texto branco: medido, 2,53:1 — reprova AA.
       Com o azul profundo por cima fica em 6,93:1, aprovado. É a mesma regra
       que já vale no tema do Moodle e no resto do painel. */
    color: var(--azul-profundo);
    font-weight: 700;
    font-size: .85rem;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .25);
}

/* ==========================================================================
   Combos
   ========================================================================== */
.cartao-combo { position: relative; }
.cartao-combo .faixa-combo {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--laranja);
    color: var(--azul-profundo);
    font-size: .74rem;
    font-weight: 700;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .2);
}
.cartao-combo .lista-do-combo {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    font-size: .84rem;
    color: #5b5b6b;
}
.cartao-combo .lista-do-combo li {
    display: flex;
    gap: .35rem;
    align-items: flex-start;
    padding: .12rem 0;
}
.cartao-combo .lista-do-combo i { color: var(--sucesso); }

.item-do-combo {
    height: 100%;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: .75rem;
    background: #fff;
}

/* ==========================================================================
   Área do curso — materiais e sugestões
   ========================================================================== */
.lista-materiais .material {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--borda);
}
.lista-materiais .material:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-materiais .material .icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--raio-sm);
    background: var(--cinza-marca);
    color: var(--azul);
    font-size: 1.2rem;
}

.curso-sugerido {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--borda);
    text-decoration: none;
    color: var(--azul-escuro);
}
.curso-sugerido:last-child { border-bottom: 0; padding-bottom: 0; }
.curso-sugerido:hover { color: var(--azul); }
.curso-sugerido img,
.curso-sugerido .miniatura-vazia {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 2.6rem;
    border-radius: var(--raio-sm);
    object-fit: cover;
    background: var(--cinza-marca);
}
.curso-sugerido .miniatura-vazia {
    display: grid;
    place-items: center;
    color: var(--azul);
}

/* ==========================================================================
   Área do curso — a parada entre "Meus cursos" e o Moodle
   ========================================================================== */

/* A capa usa a imagem do curso por baixo de um véu azul. O véu não é estética
   apenas: sem ele o texto branco cairia sobre uma foto qualquer, e o contraste
   passaria a depender do arquivo que a escola subiu.

   Medido no pior caso possível — imagem totalmente branca por baixo. No ponto
   mais claro do gradiente (70%) o fundo efetivo vira #565686, e sobre ele:
   título 6,84:1, linha de meta 5,91:1, etiquetas 4,64:1, painel de andamento
   5,11:1. Todos passam AA, qualquer que seja a foto que a escola subir. */
.capa-curso-aluno {
    position: relative;
    padding: 1.25rem 0 2.25rem;
    background-color: var(--azul-profundo);
    color: #fff;
    overflow: hidden;
}
.capa-curso-aluno::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg, rgba(13, 13, 82, .92) 0%, rgba(13, 13, 82, .70) 100%),
        var(--arte, none);
    background-size: cover;
    background-position: center;
}
/* Sem imagem cadastrada, o gradiente da marca cobre a área sozinho. */
.capa-curso-aluno.sem-imagem::before {
    background-image: linear-gradient(120deg, var(--azul) 0%, var(--azul-profundo) 100%);
}
.capa-curso-aluno > .container { position: relative; }

.capa-curso-aluno .voltar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Medido no pior caso (imagem branca sob o véu): 5,26:1. Passa AA. */
    color: rgba(255, 255, 255, .82);
    font-size: .86rem;
    text-decoration: none;
}
.capa-curso-aluno .voltar:hover { color: #fff; text-decoration: underline; }

.capa-curso-aluno h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 700;
    margin: .5rem 0 .65rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.capa-curso-aluno .etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}
.capa-curso-aluno .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
}
/* Laranja da marca nunca com texto branco: aqui vai o azul profundo, 6,93:1. */
.capa-curso-aluno .etiqueta.concluido {
    background: var(--laranja);
    border-color: var(--laranja);
    color: var(--azul-profundo);
}

.capa-curso-aluno .meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}
.capa-curso-aluno .meta i { opacity: .8; margin-right: .2rem; }

/* Cartão de andamento flutuando sobre a capa. */
.painel-andamento {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio);
    padding: 1rem;
    backdrop-filter: blur(6px);
}
.painel-andamento .rotulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .85);
}
.painel-andamento .numero { font-size: 1.5rem; font-weight: 700; }
.painel-andamento .detalhe { font-size: .8rem; color: rgba(255, 255, 255, .85); }
/* A barra de progresso é a mesma do resto do site, mas aqui o trilho precisa
   ser translúcido: o cinza sólido viraria uma mancha em cima da foto. */
.painel-andamento .progresso { background: rgba(255, 255, 255, .25); }

/* ------------------------------------------------------- faixa do certificado */
.faixa-certificado {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--laranja);
    border-radius: var(--raio);
    padding: 1rem 1.15rem;
    box-shadow: 0 .35rem 1rem rgba(20, 20, 122, .07);
}
.faixa-certificado .icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--cinza-marca);
    color: var(--laranja);
    font-size: 1.35rem;
}

/* ------------------------------------------------------------ blocos internos */
.titulo-bloco {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    margin-bottom: .85rem;
}
.texto-curso { color: var(--texto); line-height: 1.65; }
.texto-curso p:last-child { margin-bottom: 0; }

/* Programa do curso */
.numero-modulo {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--cinza-marca);
    color: var(--azul-escuro);
    font-size: .78rem;
    font-weight: 700;
}
.accordion-button:not(.collapsed) .numero-modulo { background: var(--laranja); color: var(--azul-profundo); }
.lista-aulas { list-style: none; margin: 0; padding: 0; }
.lista-aulas li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem 0;
    font-size: .9rem;
    color: var(--texto);
}
.lista-aulas i { color: var(--azul); margin-top: .18rem; }

/* Ficha de informações */
.ficha-curso { margin: 0; font-size: .88rem; }
.ficha-curso dt {
    font-weight: 400;
    color: var(--texto-suave);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ficha-curso dd { margin: 0 0 .7rem; font-weight: 600; color: var(--azul-escuro); }
.ficha-curso dd:last-child { margin-bottom: 0; }
.ficha-curso dd .small { font-weight: 400; }

/* Chamada para o ambiente de estudo */
.cartao-acesso { border-top: 3px solid var(--laranja); }
.cartao-acesso .bi-mortarboard { font-size: 1.9rem; color: var(--azul); }

/* ==========================================================================
   Página de venda do curso
   ========================================================================== */
/* Reaproveita a capa da área do curso (.capa-curso-aluno: imagem sob o véu
   azul, contraste medido no pior caso). Aqui ela ganha mais altura e o cartão
   de compra por cima, em branco. */
.capa-venda { padding-bottom: 2.75rem; }
.capa-venda .resumo-capa {
    max-width: 44rem;
    font-size: 1.05rem;
    line-height: 1.55;
    /* Branco a 92% sobre o véu mais claro possível: acima de 6:1. */
    color: rgba(255, 255, 255, .92);
    margin-bottom: .9rem;
}

.cartao-compra {
    background: #fff;
    color: var(--texto);
    border-radius: var(--raio);
    border-top: 4px solid var(--laranja);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .28);
    padding: 1.35rem 1.35rem 1.1rem;
}
.cartao-compra .rotulo-preco {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
}
.cartao-compra .preco-grande {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--azul);
}
.cartao-compra .preco-grande.gratuito { color: var(--sucesso); }
.cartao-compra .parcelamento { font-size: .9rem; color: var(--texto-suave); margin-top: .15rem; }
.cartao-compra .aviso-compra { font-size: .85rem; color: var(--sucesso); margin-top: .6rem; text-align: center; }

.cartao-compra .formas-pagamento {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .9rem;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--borda);
    font-size: .8rem;
    color: var(--texto-suave);
}
.cartao-compra .formas-pagamento i { color: var(--azul); }

.cartao-compra .garantias {
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
    font-size: .84rem;
    color: var(--texto);
}
.cartao-compra .garantias li { display: flex; gap: .5rem; padding: .22rem 0; }
.cartao-compra .garantias i { color: var(--sucesso); flex: 0 0 auto; }

.lista-incluido { list-style: none; margin: 0; padding: 0; }
.lista-incluido li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .45rem 0;
    border-bottom: 1px solid var(--borda);
    font-size: .92rem;
}
.lista-incluido li:last-child { border-bottom: 0; }
.lista-incluido i { color: var(--azul); font-size: 1.1rem; flex: 0 0 auto; }

.cartao-professor { display: flex; align-items: center; gap: 1rem; }
.cartao-professor .avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--cinza-marca);
    color: var(--azul);
    font-size: 1.5rem;
}

/* Barra fixa de compra: só no celular, onde o cartão ficou lá em cima. */
.barra-compra-movel { display: none; }
@media (max-width: 991.98px) {
    .barra-compra-movel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--borda);
        box-shadow: 0 -.4rem 1.2rem rgba(20, 20, 122, .12);
    }
    /* Espaço no fim da página para a barra não cobrir o rodapé. */
    body:has(.barra-compra-movel) { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Checkout: escolha da forma de pagamento
   ========================================================================== */
.metodos-pagamento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .6rem;
}
.metodos-pagamento .metodo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .9rem .6rem;
    border: 2px solid var(--borda);
    border-radius: var(--raio);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
/* O rádio fica invisível mas no fluxo: segue focável e acessível por teclado. */
.metodos-pagamento .metodo input { position: absolute; opacity: 0; pointer-events: none; }
.metodos-pagamento .metodo i { font-size: 1.5rem; color: var(--azul); }
.metodos-pagamento .metodo .nome { font-weight: 700; color: var(--azul-escuro); }
.metodos-pagamento .metodo .detalhe { font-size: .76rem; color: var(--texto-suave); }
.metodos-pagamento .metodo:hover { border-color: var(--azul); }
.metodos-pagamento .metodo:has(input:checked) {
    border-color: var(--azul);
    background: #f1f1fd;
    box-shadow: inset 0 0 0 1px var(--azul);
}
.metodos-pagamento .metodo:has(input:focus-visible) { outline: 3px solid var(--laranja); outline-offset: 2px; }
.metodos-pagamento .metodo.indisponivel { opacity: .5; cursor: not-allowed; }

/* O <fieldset> vira cartão: tira a moldura nativa do navegador. */
fieldset.card { min-width: 0; padding: 0; }

.erro-campo { color: var(--perigo); font-size: .82rem; margin-top: .25rem; }

.linha-digitavel { font-size: .95rem; letter-spacing: .02em; max-height: none; }

.resumo-pedido .miniatura {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 3.2rem;
    border-radius: var(--raio-sm);
    object-fit: cover;
}
.resumo-pedido .miniatura.vazia {
    display: grid;
    place-items: center;
    background: var(--cinza-marca);
    color: var(--azul);
    font-size: 1.3rem;
}
.resumo-pedido .total-pedido { font-size: 1.6rem; font-weight: 800; color: var(--azul); }
.lista-do-resumo { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .86rem; }
.lista-do-resumo li { padding: .15rem 0; }
.lista-do-resumo i { color: var(--sucesso); }

/* Forma de pagamento que não vale para este valor (cartão abaixo do mínimo da
   operadora): continua listada, esmaecida, para o visitante saber o motivo. */
.lista-incluido li.forma-indisponivel { color: var(--texto-suave); }
.lista-incluido li.forma-indisponivel i { color: var(--texto-suave); }