/* ==========================================================================
   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; }
.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; }
}