/* style.css */

/* --- Variáveis Globais --- */
:root {
    --primary-color: #4682B4;   /* SteelBlue */
    --secondary-color: #87CEFA; /* LightSkyBlue */
    --terceary-color: #FFC72C;
    --gold-color: #FFD700; 
    --light-bg: #f8f9fa;
    --dark-text: #212529;
    --light-text: #f8f9fa;
    --gray-text: #6c757d;
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Lato', sans-serif;
}

/* --- Estilos Gerais --- */
body {
    font-family: var(--body-font);
    color: var(--dark-text);
    padding-top: 70px; /* Adiciona padding p/ navbar, mas a animação JS pode ajustar */
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title {
    font-family: var(--heading-font);
    font-weight: 700; /* Títulos mais marcantes */
}

/* --- Navbar --- */
#main-navbar {
    background: linear-gradient(105deg, rgba(20, 70, 108, .97), rgba(31, 101, 139, .95));
    border-bottom: 1px solid rgba(174, 220, 242, .18);
    transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    z-index: 1040;
}

#main-navbar.scrolled {
    background: linear-gradient(105deg, #123f63, #1a5a80);
    box-shadow: 0 5px 18px rgba(4, 28, 48, .24);
    padding-top: 0.5rem; /* Reduz padding ao rolar */
    padding-bottom: 0.5rem;
}

#main-navbar .navbar-brand {
    color: var(--light-text);
    font-size: 1.3rem;
}

#main-navbar .nav-link {
    position: relative; /* Adicione esta linha */
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem; /* Adicione um pouco de espaço para o sublinhado */
    transition: color 0.2s ease;
}

#main-navbar .nav-link:not(.dropdown-toggle)::after {
    content: ''; /* Pseudo-elementos precisam disso */
    position: absolute;
    /* Posição do sublinhado */
    left: 1rem;  /* Alinha com o início do texto (considerando o padding) */
    right: 1rem; /* Alinha com o fim do texto (considerando o padding) */
    bottom: 0;
    
    /* Estilo do sublinhado */
    height: 2px;
    background-color: #8dccea;

    /* Animação */
    transform: scaleX(0); /* Começa com largura 0 */
    transform-origin: center; /* Garante que a animação parta do centro */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Transição suave */
}

/* Ativa a animação no hover e para o link ativo */
#main-navbar .nav-link:not(.dropdown-toggle):hover::after, 
#main-navbar .nav-link:not(.dropdown-toggle).active::after { 
    transform: scaleX(1); /* Expande para a largura total */
}

#main-navbar .nav-link:hover,
#main-navbar .nav-link.active {
    /* A cor do texto muda para a sua variável dourada */
    color: var(--light-text);
}

/* --- Dropdown Menu Hover (Desktop) --- */
#main-navbar .dropdown-menu {
    z-index: 1041;
}

/* O menu do usuário acompanha o maior rótulo sem truncar os nomes. */
#main-navbar .user-menu-dropdown {
    width: max-content;
    min-width: 13.5rem;
    max-width: calc(100vw - 2rem);
}

#main-navbar .user-menu-dropdown .dropdown-item {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
@media (min-width: 992px) {
    #main-navbar .nav-item.dropdown:has(> .user-menu-dropdown) {
        position: relative;
    }

    #main-navbar .user-menu-dropdown,
    #main-navbar .user-menu-dropdown[data-bs-popper] {
        inset: 100% 0 auto auto !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0;
        transform: none !important;
    }

    #main-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        animation: fadeInDown 0.3s ease-out; /* Animação sutil */
    }
    #main-navbar .nav-item.dropdown .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }
    #main-navbar .nav-item.dropdown > .dropdown-toggle {
        cursor: default;
    }
    /* Estilo do dropdown */
    .dropdown-menu {
         box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
         border: none; /* Remove borda padrão */
    }
    .dropdown-item {
        padding: 0.5rem 1rem; /* Ajuste padding */
         transition: background-color 0.2s ease, color 0.2s ease;
    }
     .dropdown-item i { /* Ícones no dropdown */
        width: 20px; /* Alinha ícones */
        text-align: center;
        margin-right: 0.5rem;
     }
}

/* Animação para dropdown */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 991.98px) {
    #main-navbar {
        transition: transform 0.3s ease-in-out !important;
        will-change: transform;
    }

    /* Classe que o JS vai injetar para esconder a barra */
    .nav-up {
        transform: translateY(-100%);
    }
}

/* =================================================================== */
/* ===   MENU MOBILE (HERO STYLE - VERSÃO LIMPA E OTIMIZADA)       === */
/* =================================================================== */

@media (max-width: 991.98px) {
    
    /* 1. Ajustes de Layout Global Mobile */
    body { padding-top: 56px; } 
    #hero { margin-top: -30px; min-height: 60vh; }

    /* 2. O Card do Menu (Container Principal) */
    #main-navbar .navbar-collapse {
        position: absolute;
        top: 100%; left: 0; right: 0;
        
        /* NOVO VISUAL: Card Branco Flutuante */
        background-color: #ffffff;
        border-top: 4px solid #78bfe1;
        border-radius: 0 0 25px 25px; /* Arredondado embaixo */
        box-shadow: 0 20px 50px rgba(0, 41, 155, 0.25); /* Sombra Hero */
        
        padding: 1.5rem 1rem;
        margin-top: 0;
        z-index: 1021;
        max-height: 85vh;
        overflow-y: auto;

        /* Animação de Entrada (Slide Down) */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), 
                    opacity 0.3s ease-out, 
                    visibility 0s 0.35s;
    }

    /* Estado Aberto (Show) */
    #main-navbar .navbar-collapse.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), 
                    opacity 0.3s ease-out, 
                    visibility 0s 0s;
    }

    /* 3. Links do Menu (Estilo Botão Clean) */
    #main-navbar .navbar-nav { text-align: left; }
    
    #main-navbar .navbar-nav .nav-link {
        color: var(--secondary-color) !important; /* Azul Escuro */
        font-family: var(--heading-font);
        font-weight: 600;
        padding: 12px 20px;
        border-radius: 12px;
        border-bottom: 1px solid #f8faff; /* Divisória ultra sutil */
        transition: all 0.3s ease;
        display: flex; 
        justify-content: space-between; 
        align-items: center;
    }

    /* Remove borda do último item */
    #main-navbar .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; }

    /* Efeito Hover/Ativo Mobile */
    #main-navbar .navbar-nav .nav-link:hover,
    #main-navbar .navbar-nav .nav-link.active {
        background-color: #f0f4f8; /* Azul gelo */
        color: var(--primary-color) !important;
        transform: translateX(5px);
        border-color: transparent;
    }

    /* 4. Dropdowns (Submenus com borda tracejada) */
    #main-navbar .navbar-nav .dropdown-menu {
        background-color: #fcfcfc;
        border: 2px dashed #eef2f7; /* Referência ao upload de foto */
        border-radius: 15px;
        box-shadow: none;
        padding: 10px;
        margin: 10px 0;
    }

    #main-navbar .navbar-nav .user-menu-dropdown {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #main-navbar .navbar-nav .user-menu-dropdown .dropdown-item {
        white-space: normal;
    }

    #main-navbar .navbar-nav .dropdown-item {
        color: var(--gray-text) !important;
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 0.9rem;
    }

    #main-navbar .navbar-nav .dropdown-item:hover {
        background-color: var(--primary-color);
        color: #fff !important;
        transform: translateX(3px);
    }
    
    #main-navbar .navbar-nav .dropdown-divider {
        border-color: #eef2f7;
    }

    /* 5. Área de Login e Botões (Final do Menu) */
    #main-navbar .navbar-collapse .navbar-nav.ms-lg-auto {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(0, 65, 155, 0.1);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* 6. Usuário Logado (Mobile) */
    #main-navbar .navbar-collapse .nav-item.dropdown .nav-link {
        background-color: #f8faff; /* Destaca o usuário logado */
        border: 1px solid #e9ecef;
        margin-bottom: 5px;
    }
    
    #main-navbar .navbar-collapse .nav-item.dropdown .nav-link i.bi-person-circle {
        font-size: 1.4rem;
        color: var(--primary-color);
        margin-right: 10px;
    }


/* ========================================================== */
    /* === BOTÕES LOGIN/CADASTRO (MOBILE HERO STYLE)          === */
    /* ========================================================== */

    /* Container dos botões no mobile (ajuste de espaçamento) */
    #main-navbar .navbar-collapse .navbar-nav.d-lg-none {
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(0, 65, 155, 0.1) !important;
        gap: 12px; /* Espaço entre os botões */
        display: flex;
        flex-direction: column;
    }

    /* Estilo Base para AMBOS os botões no Mobile */
    #main-navbar .navbar-collapse .navbar-nav.d-lg-none .btn {
        width: 100%; /* Largura total */
        border-radius: 50px; /* Formato Pílula */
        padding: 12px 0; /* Altura confortável para o dedo */
        font-family: var(--heading-font);
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important; /* Remove margens inline do HTML */
    }

    /* 1. Botão LOGIN (Transformação: De Branco para Azul Escuro) */
    #main-navbar .navbar-collapse .btn-outline-light {
        /* Força a cor escura pois o fundo agora é branco */
        color: var(--secondary-color) !important; 
        border: 2px solid var(--secondary-color) !important;
        background-color: transparent !important;
        transition: all 0.3s ease;
    }

    #main-navbar .navbar-collapse .btn-outline-light:hover {
        background-color: var(--secondary-color) !important;
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    /* 2. Botão CADASTRE-SE (Transformação: Gradiente Hero) */
    #main-navbar .navbar-collapse .btn-secondary-custom {
        /* Gradiente Premium */
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
        border: none !important;
        color: #ffffff !important;
        /* Sombra Azulada */
        box-shadow: 0 8px 20px rgba(0, 65, 155, 0.3);
        transition: all 0.3s ease;
    }

    #main-navbar .navbar-collapse .btn-secondary-custom:hover {
        /* Efeito de Brilho/Elevação */
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(0, 65, 155, 0.4);
        filter: brightness(1.1); /* Clareia levemente */
    }

}


/* ========================================================= */
/* === EFEITO HOVER NA LOGO/MARCA (IGUAL AOS LINKS) === */
/* ========================================================= */

/* 1. Prepara o container da marca */
#main-navbar .navbar-brand {
    position: relative; /* Necessário para posicionar a linha */
    transition: color 0.3s ease; /* Suaviza a mudança de cor do texto */
    padding-bottom: 5px; /* Um pequeno espaço extra para a linha não colar no texto */
}

/* 2. Cria a linha invisível (estado inicial) */
#main-navbar .navbar-brand::after {
    content: '';
    position: absolute;
    
    /* Posição e Tamanho */
    left: 0;
    bottom: 0;
    width: 100%; /* A linha vai cobrir a largura total (img + texto) */
    height: 2px; /* Espessura da linha */
    
    /* Cor e Animação */
    background-color: var(--light-text); /* Sua cor Dourada/Amarela */
    transform: scaleX(0); /* Começa com largura 0 (invisível) */
    transform-origin: center; /* A animação nasce do centro para as pontas */
    
    /* A mesma curva de velocidade (Bezier) dos seus links atuais */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 3. Ações ao passar o mouse (Hover) */
#main-navbar .navbar-brand:hover {
    color: var(--light-text); /* Muda o texto para amarelo */
}

#main-navbar .navbar-brand:hover::after {
    transform: scaleX(1); /* Estica a linha para 100% */
}



/* --- Botões Customizados --- */
.btn-secondary-custom {
    background-color: var(--secondary-color);
    color: var(--primary-color); /* Texto escuro no botão claro */
    font-weight: 700;
    border-radius: 25px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-secondary-custom:hover {
    background-color: var(--light-bg); /* LightSkyBlue um pouco mais escuro */
    border-color: #76c5f8;
    color: var(--dark-text);
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-primary-custom:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;

}
.btn-primary-custom:hover {
    background-color: #3a6a94; /* Tom mais escuro */
    border-color: #3a6a94;
    color: var(--light-text);
}

.btn-outline-secondary-custom {
     border-color: var(--secondary-color);
     color: var(--primary-color);
     font-weight: 700;
     border-radius: 25px;
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.btn-outline-secondary-custom:hover {
     background-color: var(--secondary-color);
     color: var(--dark-text); /* Ajustado para texto escuro no hover */
     border-color: var(--secondary-color);
}

/* --- Hero Section --- */
#hero {
    min-height: 50vh;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    background-size: cover;
    position: relative;
    margin-top: -70px; /* Compensa o padding-top do body */
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--light-text);
}

#hero h1 {
    font-weight: 800;
    margin-bottom: 1rem;
}

#hero p.lead {
    margin-bottom: 2rem;
}

/* Ajustes Input Group na Hero */
#hero .input-group {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
#hero .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none; /* Remove borda padrão */
}
#hero .input-group .btn { /* Estilo específico para o botão de busca na Hero */
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     color: var(--secondary-color);
}
#hero .input-group .btn:hover {
    background-color: #FFD700;
    border-color: var(--primary-color);
}






#hero-search-suggestions {
    /* position: absolute; -- Definido inline ou aqui */
    /* width: auto; -- A largura será definida por JS */
    background-color: #fff;
    
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem; /* Ajustar se o input tiver cantos arredondados diferentes */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    border-bottom-left-radius: 25px;
    /* left: 0; -- O left será definido por JS */
    /* top: 100%; -- O top será definido por JS em relação ao input-group */
}


.hero_radius_imput_esquerda_0{
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 0px !important;
}

#hero #hero-search-container { /* Seletor mais específico para o container da busca na hero */
    position: relative; /* Já deve estar, mas para garantir */
    z-index: 20;      /* Um z-index menor que a lista, mas que eleve o container */
                     /*  Se a lista for 1050, o pai dela não precisa ser tão alto,
                         mas precisa criar um contexto de empilhamento.
                         O importante é que #hero-search-suggestions tenha o z-index mais alto
                         DENTRO DESTE CONTEXTO (ou globalmente se não houver outros contextos conflitantes).
                         Vamos tentar um valor para elevar este container.
                     */

}

#hero-search-suggestions .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-left: none; /* Remove bordas laterais dos itens se a borda do container já existe */
    border-right: none;
}

/* Arredondamento específico para o primeiro item */
#hero-search-suggestions .list-group-item:first-child {
    border-top-left-radius: 0px;
    /* Se o input tiver borda superior arredondada também à direita, você pode adicionar:
    border-top-right-radius: 25px;
    Mas você pediu apenas do lado esquerdo. */
}

/* Arredondamento específico para o último item */
#hero-search-suggestions .list-group-item:last-child {
    border-bottom-left-radius: 25px;
    border-bottom: none; /* Garante que não haja borda extra aqui */
     /* Se o input tiver borda inferior arredondada também à direita, você pode adicionar:
    border-bottom-right-radius: 25px;
    Mas você pediu apenas do lado esquerdo. */
}

#hero-search-suggestions .list-group-item:hover {
    background-color: #FFD700;
}

#hero-search-suggestions .item-type {
    font-size: 0.8em;
    color: #6c757d; /* Cinza Bootstrap */
    margin-left: 8px;
    padding: 0.1em 0.4em;
    border-radius: 0.2rem;
}
#hero-search-suggestions .item-type-evento { font-size:12px; }
#hero-search-suggestions .item-type-refugio { font-size:12px; }
#hero-search-suggestions .item-type-comercio { font-size:12px; }








/* --- Animações de Scroll --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }

/* --- Títulos de Seção --- */
.section-title {
    position: relative;
    color: var(--primary-color);
    padding-bottom: 15px;
    margin-bottom: 4rem !important;
    text-align: center;
}
.section-title span {
    position: relative;
    z-index: 1;
    padding: 0 15px;
}
.section-title::after { /* Linha decorativa */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
    z-index: 0;
}
/* Ajustes para diferentes fundos de seção */
#locais-destaque.bg-light .section-title span { background-color: #FFD700; }
#locais-destaque:not(.bg-light) .section-title span { background-color: #fff; }





.scrollable-list-container::-webkit-scrollbar { width: 6px; }
.scrollable-list-container::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.scrollable-list-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; border: 1px solid transparent; }
.scrollable-list-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); }


.text-primary-custom { color: var(--primary-color) !important; }
.text-secondary-custom { color: var(--secondary-color) !important; }

/* --- Footer --- */
footer {
    background: linear-gradient(105deg, rgba(20, 70, 108, .97), rgba(31, 101, 139, .95));
    border-top: 1px solid rgba(116, 174, 202, .24);
    color: rgba(236, 247, 250, .74);
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

/* Carrinho da navbar: proporção compacta e contador sobreposto ao ícone. */
#cart-icon-wrapper,
#cart-icon-wrapper-mobile {
    position: relative;
}

#cart-icon-wrapper #cart-badge,
#cart-icon-wrapper-mobile #cart-badge-mobile {
    position: absolute;
    top: -3px;
    right: -4px;
    left: auto;
    min-width: 18px;
    height: 18px;
    padding: 2px 4px;
    transform: none;
    border: 2px solid #fff;
    font-size: .65rem;
    line-height: 10px;
    text-align: center;
    background-color: #d95763 !important;
}

@media (min-width: 992px) {
    #cart-icon-wrapper {
        width: 38px;
        height: 38px;
    }

    #cart-icon-wrapper .bi-cart3 {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 991.98px) {
    #cart-icon-wrapper-mobile {
        width: 40px;
        height: 40px;
    }

    #cart-icon-wrapper-mobile .bi-cart3 {
        font-size: 1.25rem !important;
    }
}
footer h5 {
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.5px;
}
.footer-links li {
    margin-bottom: 0.5rem;
}
.footer-links a {
    color: rgba(236, 247, 250, .74);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-links a:hover {
    color: #d9f1f7;
    text-decoration: none;
    padding-left: 5px;
}

footer .form-control {
     border-color: rgba(255, 255, 255, 0.2);
     color: #000;
     background-color: #FFF !important;
     left: -1px !important;
}
footer .form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}
footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--secondary-color);
    color: #fff;
    box-shadow: none;
}
footer .btn-secondary-custom {
    width: 100%;
}
footer .social-icons a {
    color: rgba(211, 235, 242, .78);
    font-size: 1.5rem;
    margin-right: 1rem;
    transition: color 0.2s ease;
}
footer .social-icons a:hover {
    color: #d9f1f7;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.newsletter_borda_cima{
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.newsletter_borda_baixo{
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* --- Feedback de Validação (Geral) --- */
.form-control.is-invalid,
.form-select.is-invalid {
     border-color: #dc3545;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
    font-weight: 500;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}
.input-group.has-validation + .invalid-feedback {
    display: none;
}
.was-validated .input-group.has-validation:has(.is-invalid) + .invalid-feedback,
.input-group.has-validation:has(.is-invalid) + .invalid-feedback {
     display: block;
}

/* --- Estilos Específicos de Páginas (Cadastro, Login, Perfil) --- */
.auth-container, .profile-container, .login-container, .register-container{
    max-width: 1140px;
    min-height: 100vh;
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-box, .profile-box, .login-box, .register-box, .gerenciar-eventos-box {
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 25px;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    width: 100%;
    border-top: 4px solid var(--primary-color);
}
.auth-box h2, .profile-box h2, .login-box h2, .register-box h2 {
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--dark-text);
    text-align: center;
}
.auth-logo, .profile-logo, .login-logo, .register-logo {
     font-size: 1.8rem;
     color: var(--primary-color);
}

.login-box { max-width: 480px; }
.register-box { max-width: 550px; }
.profile-box { max-width: 750px; }

/* Login focado: sem a moldura do portal e sem card. */
body.pagina-login {
    min-height: 100vh;
    padding-top: 0;
    background:
        radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 34rem),
        #f8fafc;
}
.pagina-login .login-container {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 58px);
    min-height: calc(100svh - 58px);
    padding: 3rem 1.5rem;
}
.pagina-login .login-box {
    width: min(100%, 420px);
    max-width: 420px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.pagina-login .login-focusbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
    padding: .45rem clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid #dde6ed;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 3px 15px rgba(28, 52, 77, .05);
    backdrop-filter: blur(10px);
}
.pagina-login .login-focus-back,
.pagina-login .login-focus-brand,
.pagina-login .login-focus-context {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.pagina-login .login-focus-back:hover,
.pagina-login .login-focus-back:focus-visible { color: var(--primary-color); }
.pagina-login .login-focus-brand {
    color: #26394f;
    font-family: Montserrat, sans-serif;
}
.pagina-login .login-focus-brand img { width: 32px; height: 32px; object-fit: contain; }
.pagina-login .login-focus-context { justify-self: end; }
.pagina-login .login-focus-context i { color: var(--primary-color); font-size: 1.15rem; }
.pagina-login .login-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.pagina-login .login-brand-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    place-items: center;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08);
}
.pagina-login .login-brand-mark img { width: 72%; height: 72%; object-fit: contain; }
.pagina-login .login-heading span:not(.login-brand-mark) {
    color: var(--primary-color);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pagina-login .login-heading h1 {
    margin: .15rem 0 .2rem;
    color: #172033;
    font-size: clamp(1.75rem, 5vw, 2.2rem);
    font-weight: 800;
}
.pagina-login .login-heading p { margin: 0; color: #64748b; }
.pagina-login .login-box h2 { margin-bottom: 0; }
.pagina-login .form-label { color: #334155; font-weight: 700; }
.pagina-login .form-control { background-color: rgba(255, 255, 255, .9); }
.pagina-login #login-submit-btn { min-height: 3.25rem; border-radius: 999px; font-weight: 800; }
.pagina-login .login-status { min-height: 1.25rem; margin-top: .75rem; color: #64748b; font-size: .85rem; text-align: center; }

@media (max-width: 575.98px) {
    .pagina-login .login-focusbar {
        grid-template-columns: 1fr auto;
        min-height: 52px;
        padding: .35rem 10px;
    }
    .pagina-login .login-focus-brand { display: none; }
    .pagina-login .login-container {
        min-height: calc(100vh - 52px);
        min-height: calc(100svh - 52px);
        align-items: center;
        justify-content: center;
        padding: 1.5rem 1.25rem;
    }
}

.input-group-password .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group-password .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0;
}
.input-group-password .btn:focus,
.input-group-password .btn:hover {
   z-index: 3;
}



/* --- Editar Perfil --- */
#croppie-container {
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    margin: 1em auto;
    border: 1px dashed #ccc;
}
.current-profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
    background-color: #FFD700;
}
label[for="profile_picture_input"] {
    cursor: pointer;
}


#form-container #croppie-container {
    width: 210px;
    height: 210px;
}


/* --- Meu Money Form --- */
.meu-money-form-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem;
    background-color: #FFD700;
    border-radius: 25px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    margin-top: 0.1rem;
    margin-bottom: 2rem;
}
.grafico_barras{
    width: 100% !important;
    max-height: 30vh !important;
}
.grafico_pizza{
    width: 100% !important;
    max-height: 40vh !important;
}
.meu-money-form-container h2 {
    color: #343a40;
    font-weight: 500;
}
.meu-money-form-container .dynamic-section {
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease-out;
}
.meu-money-form-container .dynamic-section .section-title {
    font-size: 1.25rem;
    font-weight: 500;
    padding-bottom: 0.6rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #eee;
}
.meu-money-form-container label.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: #495057;
}
.meu-money-form-container label.form-label:has(+ :required)::after,
.meu-money-form-container label.form-label:has(+ .select2-container .select2-hidden-accessible[required])::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: bold;
    padding-left: 2px;
}
.meu-money-form-container .form-control, /* Unificado aqui */
.meu-money-form-container .form-select {
    font-size: 0.95rem;
}
.meu-money-form-container .form-control:focus, /* Unificado aqui */
.meu-money-form-container .form-select:focus {
     border-color: #86b7fe;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Estilos Específicos para Select2 */
.meu-money-form-container .category-select-wrapper .select2-container--bootstrap-5 {
    width: 100% !important;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.95rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid #ced4da;
}
.meu-money-form-container .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.meu-money-form-container .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
}
.meu-money-form-container .form-select.select2-hidden-accessible.is-invalid + .select2-container--bootstrap-5 .select2-selection {
     border-color: var(--bs-form-invalid-border-color) !important;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #6c757d;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}
.select2-dropdown {
    border-radius: var(--bs-border-radius);
    border-color: #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.select2-results__option--new {
    font-style: italic;
    color: #0d6efd;
}
.select2-results__option--new::before {
    content: "+ ";
    font-style: normal;
}
.meu-money-form-container .submit-button-wrapper .btn-primary {
    font-weight: 500;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.meu-money-form-container .submit-button-wrapper .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
.meu-money-form-container #formFeedback .alert {
    border-radius: var(--bs-border-radius);
    font-size: 0.95rem;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection__rendered,
.meu-money-form-container .select2-results__option {
    display: flex;
    align-items: center;
}
.meu-money-form-container .select2-selection__icon,
.meu-money-form-container .select2-results__icon {
    flex-shrink: 0;
    line-height: 1;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection.border-danger {
    border-color: var(--bs-danger) !important;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__icon {
    margin-right: 0.5rem;
    width: 1.2em;
    text-align: center;
    color: #6c757d;
    opacity: 0.8;
    display: inline-block;
}
.meu-money-form-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder .select2-selection__icon {
    display: none;
}
.select2-results__option .select2-result__icon {
    margin-right: 0.6rem;
    width: 1.3em;
    text-align: center;
    color: #495057;
    opacity: 0.9;
    display: inline-block;
}
.select2-results__option--selected .select2-result__icon {
    color: #0a58ca;
}
.select2-results__option--new .select2-result__icon {
    color: #0d6efd;
}
.meu-money-form-container .submit-button-wrapper .btn .spinner-border {
    margin-left: 5px;
}
#tipoOperacao {
  color: inherit;
}
#tipoOperacao.text-danger {
  color: var(--bs-danger) !important;
}
#tipoOperacao.text-primary {
  color: var(--bs-primary) !important;
}

ont-size: 3rem !important; }


/* --- Leitor de QR Code --- */
.container_qrcode{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}
#leitor-qrcode-container {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    text-align: center;
}
#leitor-qrcode {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 2px solid #007bff;
    border-radius: 8px;
    margin: 0 auto 20px auto;
    background-color: #333;
}
#leitor-qrcode video {
    border-radius: 6px;
}
#resultado-qrcode {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 25px;
    background-color: #e9ecef;
    min-height: 50px;
    word-wrap: break-word;
    text-align: left;
}
#resultado-qrcode strong {
    color: #007bff;
}
#status-leitor {
    margin-bottom: 15px;
    font-style: italic;
    color: #555;
}
/* Estilo para botões DENTRO do leitor-qrcode-container */

.camera-select-container {
    margin-bottom: 15px;
}
.camera-select-container label {
    margin-right: 10px;
    font-weight: bold;
}
#camera-select { /* Estilo para o select da câmera */
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    /* Adicionar estilos de seta customizada se desejar, similar aos outros selects */
}

@media (max-width: 600px) {
    #leitor-qrcode-container {
        padding: 15px;
    }
    #leitor-qrcode {
        max-width: 100%;
    }
}








/* === Estilos para Previsão do Tempo UbaFest - Garantindo Responsividade === */

/* ... (mantenha o CSS do título e dos controles do carrossel da versão anterior que você gostou) ... */

/* Carrossel de Previsão */
.forecast-carousel-ubafest .carousel-inner {
    /* O padding vertical pode ser útil */
    /* padding-top: 0.5em; */
    /* padding-bottom: 0.5em; */
}

.forecast-carousel-ubafest .carousel-item .row {
    /* Certifica que a row use todo o espaço disponível e permita quebra de linha */
    width: 100%;
    margin-left: 0; /* Resetar possíveis margens negativas de row se houver */
    margin-right: 0;
}

/* Card de Previsão UbaFest (mantendo o estilo que você gostou) */
.forecast-card-ubafest {
    font-family: var(--body-font);
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    border: 1px solid #e9ecef;
    color: var(--dark-text);
    display: flex;
    flex-direction: column;
    width: 90%; /* Você definiu a largura do card */
    margin-left: auto;  /* Adicionado para centralizar */
    margin-right: auto; /* Adicionado para centralizar */
    /* height: 100%; -- d-flex align-items-stretch na coluna pai cuida disso */
}

.forecast-card-ubafest:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

.forecast-card-header-ubafest {
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.9rem 1rem; /* Ajustado para ser consistente com o hover anterior, ou use o seu valor */
    text-align: center;
}

.forecast-day-name-ubafest {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.80rem;
    color: var(--primary-color);
    margin-bottom: 0.1rem;
}

.forecast-date-ubafest {
    font-size: 0.8rem;
    color: var(--gray-text);
}

.forecast-card-ubafest .card-body {
    padding: 1.25rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.forecast-weather-icon-ubafest {
    font-size: 2.8rem;
}

.forecast-condition-ubafest {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--dark-text);
    min-height: 1em; /* Para consistência de altura */
}

.forecast-temp-ubafest {
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 700;
    color: var(--dark-text);
}

.forecast-temp-ubafest .temp-min-ubafest {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--gray-text);
    margin-left: 4px;
}

.forecast-details-ubafest {
    font-size: 1rem;
    color: var(--gray-text);
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}
.forecast-details-ubafest small {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
}
.forecast-details-ubafest i {
    margin-right: 6px;
    font-size: 0.85em;
    min-width: 14px;
    text-align: center;
}



.forecast-carousel-ubafest .carousel-item {
    /* A duração padrão é 0.6s. Aumentar pode tornar mais suave. */
    transition: transform 0.5s ease-in-out; /* Aumenta a duração do deslizamento */
}







.forecast-details-ubafest i.bi-droplet-fill { color: var(--secondary-color); }
.forecast-details-ubafest i.bi-water { color: #6CB4EE; }

/* Cores de destaque para os cards (mantendo da versão anterior) */
.forecast-card-ubafest.bg-light-blue { border-top: 4px solid var(--secondary-color); }
.forecast-card-ubafest.bg-light-blue .forecast-day-name-ubafest { color: var(--secondary-color); }
.forecast-card-ubafest.bg-dark-blue { border-top: 4px solid #003366; }
.forecast-card-ubafest.bg-dark-blue .forecast-day-name-ubafest { color: #003366; }
.forecast-card-ubafest.bg-light-grey { border-top: 4px solid #AEAEAE; }
.forecast-card-ubafest.bg-light-grey .forecast-day-name-ubafest { color: #808080; }
.forecast-card-ubafest.bg-blue-grey { border-top: 4px solid #546E7A; }
.forecast-card-ubafest.bg-blue-grey .forecast-day-name-ubafest { color: #546E7A; }
.forecast-card-ubafest.bg-light-sky { border-top: 4px solid #87CEEB; }
.forecast-card-ubafest.bg-light-sky .forecast-day-name-ubafest { color: #70A8C4; }
.forecast-card-ubafest.bg-forecast-default { border-top: 4px solid var(--primary-color); }


/* --- FORÇAR O COMPORTAMENTO DE MÚLTIPLOS ITENS VISÍVEIS --- */
/* Esta parte é mais experimental e pode precisar de ajustes finos.
   A ideia é fazer com que o carrossel mostre múltiplos cards mesmo
   que a lógica de slides do Bootstrap seja para um item. */

/* Em telas pequenas (mobile), queremos 1 card visível */
@media (max-width: 767.98px) { /* Breakpoint para 'md' (tablets) */
    .forecast-carousel-ubafest .carousel-inner .carousel-item > div[class*="col-"] {
        /* Para forçar um card por vez, mesmo que o .carousel-item contenha 3 */
        /* Esta técnica geralmente envolve esconder os outros cards no mesmo slide */
        /* Mas com as classes col-12, eles já deveriam empilhar. */
        /* Se estão sobrepondo, algo está errado com o fluxo normal. */
    }
    /*  A linha de coluna no HTML já é:
        <div class="col-12 col-md-4 col-lg-4 ...">
        Isto DEVERIA fazer com que em telas <768px, o card ocupe 12 colunas (largura total)
        e empilhe naturalmente.
    */
}

/* Em telas médias (tablet) e grandes (desktop), queremos 3 cards visíveis */
@media (min-width: 768px) {
    /* Não precisamos de CSS específico aqui se as classes col-md-4 e col-lg-4 estiverem funcionando.
       Elas já instruem o Bootstrap a colocar 3 itens por linha. */
}


/* === Estilos para os Controles do Carrossel UbaFest === */

.forecast-carousel-control-ubafest .carousel-control-prev-icon,
.forecast-carousel-control-ubafest .carousel-control-next-icon {
    background-color: var(--secondary-color); /* SUA COR AZUL CLARO AQUI */
    border-radius: 50%; /* Para deixá-los redondos */
    width: 2.8rem;      /* Ajuste o tamanho conforme desejar */
    height: 2.8rem;
    background-size: 50% 50%; /* Ajusta o tamanho do ícone SVG da seta branca interna */
    opacity: 0.85; /* Uma leve transparência para não serem muito dominantes */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Efeito Hover para os controles */
.forecast-carousel-control-ubafest:hover .carousel-control-prev-icon,
.forecast-carousel-control-ubafest:hover .carousel-control-next-icon {
    background-color: var(--primary-color); /* Ou um azul claro um pouco mais escuro no hover */
    /* Exemplo de azul claro mais escuro: #70c0f0 */
    opacity: 1;
}

/* Os ícones SVG das setas dentro dos controles são brancos por padrão no Bootstrap.
   Se precisar forçar a cor da seta (o ícone em si), seria mais complexo,
   envolvendo a modificação do `background-image` (que é um SVG embutido)
   ou usando um ícone de fonte e colorindo-o. Mas geralmente, mudar o `background-color`
   do controle é suficiente. */

/* Posição dos controles (ajuste conforme seu layout, se necessário) */
.forecast-carousel-control-ubafest.carousel-control-prev {
    left: -15px;
    /* Removendo qualquer estilo de background do elemento 'button' em si,
       para que apenas o ícone (span) tenha o fundo colorido */
    background: none;
    border: none;
}
.forecast-carousel-control-ubafest.carousel-control-next {
    right: -15px;
    /* Removendo qualquer estilo de background do elemento 'button' em si */
    background: none;
    border: none;
}

@media (min-width: 992px) { /* Telas LG e acima */
    .forecast-carousel-control-ubafest.carousel-control-prev {
        left: -30px; /* Afasta mais para não sobrepor cards largos */
    }
    .forecast-carousel-control-ubafest.carousel-control-next {
        right: -30px;
    }
}
@media (max-width: 767.98px) { /* Telas pequenas */
    .forecast-carousel-control-ubafest.carousel-control-prev { left: 0px; }
    .forecast-carousel-control-ubafest.carousel-control-next { right: 0px; }

    .forecast-carousel-control-ubafest .carousel-control-prev-icon,
    .forecast-carousel-control-ubafest .carousel-control-next-icon {
        width: 2.2rem; /* Um pouco menor em telas pequenas */
        height: 2.2rem;
    }
}






/* === Estilos para a Linha do Tempo COMPACTA da Previsão === */

.forecast-timeline {
    /* padding-top: 0.75rem; /* Reduzido o padding superior da seção */
    /* padding-bottom: 0.75rem; /* Reduzido o padding inferior da seção */
    /* Não vamos adicionar padding aqui, deixamos para os itens se precisarem de espaço interno */
}

.forecast-timeline-items-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Tenta manter em uma linha, scroll se necessário */
    gap: 1px; /* Espaçamento MÍNIMO entre os itens da timeline */
    padding-top: 0.75rem; /* Espaço acima dos itens */
    padding-bottom: 0.75rem; /* Espaço abaixo para scrollbar ou visual */
    overflow-x: auto; /* SEMPRE permite scroll horizontal se não couber */
    /* Para esconder a barra de scroll visualmente mas manter funcionalidade: */
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}
.forecast-timeline-items-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.forecast-timeline-item {
    background-color: #fff;
    padding: 0.5rem 0.4rem; /* Padding interno BEM reduzido */
    border-radius: 10px;    /* Bordas menos arredondadas */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra mais sutil */
    cursor: pointer;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
    min-width: 60px; /* Largura mínima para cada item, AJUSTE CONFORME NECESSÁRIO */
    max-width: 75px; /* Largura máxima */
    border: 1px solid #f0f0f0; /* Borda muito sutil */
    text-align: center; /* Garante que o conteúdo interno esteja centralizado */
}

.forecast-timeline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 7px rgba(0,0,0,0.08);
}

.forecast-timeline-item.active-day {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(var(--secondary-color-rgb, 135, 206, 250), 0.4);
}
.forecast-timeline-item.active-day .timeline-day-name,
.forecast-timeline-item.active-day .timeline-icon i,
.forecast-timeline-item.active-day .timeline-temp {
    color: var(--primary-color);
}
.forecast-timeline-item.active-day .timeline-icon i {
    color: var(--primary-color) !important; /* Garante a cor */
}

.timeline-day-name {
    font-family: var(--body-font);
    font-size: 0.65rem; /* Fonte do nome do dia BEM menor */
    font-weight: 600;
    color: var(--gray-text);
    margin-bottom: 0.15rem; /* Menos espaço */
    text-transform: uppercase;
    white-space: nowrap; /* Impede que o nome do dia quebre linha */
}

.timeline-icon {
    margin-bottom: 0.15rem; /* Menos espaço */
}
.timeline-icon i {
    font-size: 1.3rem; /* Ícone menor */
}

.timeline-temp {
    font-family: var(--heading-font);
    font-size: 0.75rem; /* Fonte da temperatura menor */
    font-weight: 700;
    color: var(--dark-text);
    line-height: 1.2; /* Ajuste para melhor encaixe vertical */
}
.timeline-temp-separator {
    font-weight: 400;
    color: var(--gray-text);
    margin: 0 1px;
}

/* Não precisamos de media query específica para a timeline compacta,
   pois o overflow-x: auto; já cuida de telas menores.
   O min-width e max-width dos itens controlam quantos cabem.
*/











.sobre-hero {
        min-height: 50vh;
        margin-top: -70px; /* Compensa o padding-top do body */
        position: relative;
        padding: 8rem 0;
        background-image: url('../img/sobre_nos.jpg'); /* IMAGEM SUGESTÃO - TROQUE PELA SUA! */
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Efeito Parallax */
        color: #fff;
        text-align: center;
    }
    .sobre-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.55); /* Overlay escuro para legibilidade */
    }
    .sobre-hero .container {
        position: relative;
        z-index: 2;
    }
    .sobre-hero h1 {
        font-family: var(--heading-font);
        font-weight: 800;
        font-size: 3.5rem;
        text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    }
    .sobre-hero p.lead {
        font-size: 1.25rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        font-weight: 400;
    }

    .pilares-section {
        background-color: var(--light-bg); /* #FFD700 */
    }

    .feature-card {
        background-color: #fff;
        padding: 2.5rem 1.5rem;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 5px 25px rgba(0,0,0,0.07);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-top: 4px solid var(--secondary-color);
        height: 100%;
    }
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .feature-icon {
        font-size: 3.5rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        display: inline-block;
    }
    .feature-card h3 {
        font-family: var(--heading-font);
        color: var(--primary-color);
        margin-bottom: 1rem;
        font-weight: 700;
    }
    .feature-card p {
        color: var(--gray-text);
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .compromisso-section {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: var(--light-text);
    }
    .compromisso-section h2 {
        font-weight: 700;
    }
    
    @media (max-width: 768px) {
        .sobre-hero h1 {
            font-size: 2.5rem;
        }
    }






.termos-hero {
        min-height: 50vh;
        margin-top: -70px; /* Compensa o padding-top do body */
        position: relative;
        padding: 8rem 0;
        background-image: url('../img/sobre_nos.jpg'); /* IMAGEM SUGESTÃO - TROQUE PELA SUA! */
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Efeito Parallax */
        color: #fff;
        text-align: center;

}  
.termos-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6); /* Overlay escuro para legibilidade */
    }
    .termos-hero .container {
        position: relative;
        z-index: 2;
    }
    .termos-hero h1 {
        font-family: var(--heading-font);
        font-weight: 700;
        font-size: 3rem;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    }
    .termos-hero p.last-updated {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    .legal-content-box {
        background-color: #fff;
        padding: 2.5rem 3rem;
        border-radius: 15px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.07);
        border-top: 4px solid var(--primary-color);
    }

    .legal-section h3 {
        display: flex;
        align-items: center;
        font-family: var(--heading-font);
        color: var(--primary-color);
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .legal-section h3 i {
        font-size: 1.8rem;
        margin-right: 1rem;
        color: var(--secondary-color);
    }

    .legal-content-box p,
    .legal-content-box li {
        font-size: 0.95rem;
        line-height: 1.8;
        color: #555;
    }

    .legal-content-box ul {
        padding-left: 20px;
    }

    .legal-content-box ul li {
        margin-bottom: 0.5rem;
    }

    @media (max-width: 768px) {
        .legal-content-box {
            padding: 2rem 1.5rem;
        }
        .termos-hero {
            padding: 4rem 0;
        }
        .termos-hero h1 {
            font-size: 2.2rem;
        }
        .legal-section h3 {
            font-size: 1.3rem;
        }
         .legal-section h3 i {
            font-size: 1.5rem;
            margin-right: 0.75rem;
        }
    }




     .como-comprar-hero {
        min-height: 50vh;
        margin-top: -70px; /* Compensa o padding-top do body */
        position: relative;
        padding: 6rem 0;
        background-image: url('../img/como_comprar.jpg'); /* IMAGEM SUGESTÃO: Show/evento */
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        color: #fff;
        text-align: center;
    }
    .como-comprar-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }
    .como-comprar-hero .container {
        position: relative;
        z-index: 2;
    }
    .como-comprar-hero h1 {
        font-family: var(--heading-font);
        font-weight: 700;
        font-size: 3rem;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    }
    .como-comprar-hero p.lead {
        font-size: 1.15rem;
        max-width: 700px;
        margin: 1rem auto 0;
    }

    .steps-timeline-container {
        position: relative;
        padding: 3rem 0;
    }
    /* A linha da timeline */
    .steps-timeline-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: 3px;
        background-color: #e9ecef;
        transform: translateX(-50%);
        z-index: 1;
    }

    .step-item {
        position: relative;
        z-index: 2;
        margin-bottom: 3rem;
        display: flex;
        align-items: flex-start; /* Alinha o ícone com o topo do texto */
    }
    .step-item:last-child {
        margin-bottom: 0;
    }

    /* Inverte a posição para itens pares */
    .step-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .step-icon-wrapper {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        box-shadow: 0 0 0 5px #fff, 0 0 15px rgba(0,0,0,0.1);
    }

    .step-content {
        background-color: #fff;
        padding: 1.5rem 2rem;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
        width: calc(100% - 120px); /* Largura total menos o ícone e margem */
    }

    .step-item:nth-child(odd) .step-content {
        margin-left: 40px;
    }
    .step-item:nth-child(even) .step-content {
        margin-right: 40px;
    }

    .step-content h3 {
        color: var(--primary-color);
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .step-content p {
        color: var(--gray-text);
        line-height: 1.7;
    }
    .step-content strong {
        color: var(--dark-text);
    }

    .faq-section {
        background-color: var(--light-bg);
    }
    .faq-section .accordion-button:not(.collapsed) {
        color: var(--primary-color);
        background-color: #e7f1ff;
    }
    
    /* Media queries para mobile */
    @media (max-width: 768px) {
        .steps-timeline-container::before {
            left: 40px; /* Move a linha para a esquerda */
        }
        .step-item, .step-item:nth-child(even) {
            flex-direction: row; /* Força todos a terem o ícone na esquerda */
        }
        .step-item:nth-child(odd) .step-content,
        .step-item:nth-child(even) .step-content {
            margin-left: 20px;
            margin-right: 0;
            width: calc(100% - 60px);
        }
        .step-icon-wrapper {
            width: 60px;
            height: 60px;
            font-size: 2rem;
        }
    }



/* =================================================================== */
/* === ESTILOS PÁGINA FAQ (VERSÃO REVISADA E ESCOPADA) === */
/* =================================================================== */

.faq-page-container .faq-category {
    margin-bottom: 3.5rem;
}

.faq-page-container .faq-category-title {
    display: flex;
    align-items: center;
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--secondary-color);
}

.faq-page-container .faq-category-title i {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: var(--primary-color);
}

/* Redefinição total do estilo do Acordeão dentro do nosso container */
.faq-page-container .accordion-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
    border-left: 4px solid transparent; /* Borda para o estado ativo */
}

.faq-page-container .accordion-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    border-left-color: var(--secondary-color);
}

/* Quando o item está aberto, a borda ganha a cor primária */
.faq-page-container .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: #d1eaff;
    border-left-color: var(--primary-color);
}

/* Zera as bordas padrão do Bootstrap para um visual mais limpo */
.faq-page-container .accordion-item:first-of-type,
.faq-page-container .accordion-item:last-of-type {
    border-radius: 12px;
}

.faq-page-container .accordion-button {
    font-weight: 500;
    color: var(--dark-text);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
}

.faq-page-container .accordion-button:focus {
    box-shadow: none; /* Remove o anel de foco azul do Bootstrap */
}

/* Estilo do botão quando a resposta está aberta */
.faq-page-container .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    font-weight: 700;
    background-color: transparent;
    box-shadow: none;
}

/* Estilo do corpo da resposta */
.faq-page-container .accordion-body {
    padding: 0.25rem 1.5rem 1.25rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-text);
}

/* Animação e cor da seta do acordeão */
.faq-page-container .accordion-button::after {
    transition: transform 0.3s ease-in-out;
    /* Filtro para colorir o ícone SVG padrão do Bootstrap com sua cor primária */
    filter: brightness(0) saturate(100%) invert(38%) sepia(35%) saturate(1217%) hue-rotate(175deg) brightness(94%) contrast(90%);
}

.faq-page-container .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Estilo do card de contato no final */
.faq-page-container .faq-contact-card {
    text-align: center;
    margin-top: 2rem;
    padding: 2.5rem;
    border-radius: 15px;
    background-color: var(--light-bg);
    border: 1px solid #e9ecef;
}

.faq-page-container .faq-contact-card h4 {
    font-family: var(--heading-font);
    color: var(--dark-text);
    font-size: 1.5rem;
}

.faq-page-container .faq-contact-card p {
    color: var(--gray-text);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.modern-event-menu a.active-link {
    background-color: #FFFACD !important; /* Um cinza claro para destacar */
    font-weight: bold;
    color: var(--primary-color); /* Sua cor primária */
}


#tabela-produtos tbody tr:hover {
    cursor: pointer;
    background-color: #f5f5f5; /* Opcional: Adiciona um leve fundo cinza para destacar a linha */
}



 

    /* --- O CARD DO PRODUTO (A principal mudança) --- */
  .product-card {
        background-color: #FFF8DC;
        border: 1px solid #e9ecef;
        border-radius: 20px;
        transition: all 0.3s ease;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* ESSENCIAL para conter o zoom da imagem */
    }
    .product-card:hover {
        
        border-color: var(--primary-color);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }


    .product-card-image-container {
        height: 200px; /* Mesma altura que a imagem tinha */
        overflow: hidden; /* ESTA É A PROPRIEDADE MÁGICA */
        border-radius: 11px 11px 0 0; /* Movemos o border-radius para o container */
    }

    /* 2. A imagem em si */
    .product-card .card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease; /* Transição suave para o zoom */
    }

    /* 3. O efeito de zoom no hover do CARD INTEIRO */
    .product-card:hover .card-img-top {
        transform: scale(1.1); /* A imagem cresce (ex: 1.1 = 10% de zoom) */
    }



/* =================================================================== */
/* === CURSOR CARDS DO SWIPER === */
/* =================================================================== */


    /* Corpo do Card */
    .product-card .card-body {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    /* Título do Produto */
    .product-card .card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--dark-text);
        margin-bottom: 0.5rem;

        /* Lógica para UMA linha com "..." */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Descrição do Produto */
    .product-card .card-text {
        font-size: 0.88rem;
        color: var(--gray-text);
        line-height: 1.5;
        flex-grow: 1;
        margin-bottom: 0.2rem;

        /* --- Lógica para MÁXIMO DE 2 LINHAS com "..." --- */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* <-- AQUI você define o número de linhas! */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Preço do Produto (Padrão para Desktop) */
    .product-card .price {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--dark-text);
        font-family: var(--heading-font);
    }
    
    /* Botão de Adicionar (Padrão para Desktop) */
    .product-card .btn-primary-custom {
        width: 100%; /* Botão ocupa toda a largura do card */
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }


    .product-swiper {
    padding-bottom: 20px; /* Espaço para a barra de rolagem se aparecer */
}

.swiper-slide {
    height: auto; /* Permite que o card defina a altura do slide */
}

/* Estilos para os botões de navegação (setas) */
.swiper-navigation-buttons button {
    width: 50px;
    height: 50px;
    border: 1px solid #dee2e6;
    color: var(--dark-text);
    font-size: 1.3rem;
    transition: all 0.2s ease;
    padding-bottom: 1rem;
}
.swiper-navigation-buttons button:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--primary-color);
}
/* Esconde os botões se eles estiverem desabilitados pelo Swiper */
.swiper-navigation-buttons .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}




/* 
 * 1. Regra Geral: Define o cursor como uma "mão aberta" (grab)
 * para todo o card do produto. Isso sinaliza que ele é arrastável.
*/
.product-card {
    cursor: grab;
}

/* 
 * 2. Bônus (UX): Quando o usuário clica e começa a arrastar,
 * o Swiper.js adiciona a classe '.swiper-grabbing' ao container.
 * Nós usamos isso para mudar o cursor para uma "mão fechada" (grabbing).
*/
.product-swiper.swiper-grabbing .product-card {
    cursor: grabbing;
}

/* 
 * 3. A Exceção: Define o cursor como uma "mão de ponteiro" (pointer)
 * para os botões DENTRO do card. Esta regra é mais específica e
 * sobrescreve a regra geral do .product-card.
*/
.product-card .action-button-group .btn {
    cursor: pointer;
}



/* --- ESTILO PARA O BOTÃO DUPLO DE AÇÃO --- */
.action-button-group {
    display: flex;
    width: 100%; /* Ocupa toda a largura disponível no card */
}
.action-button-group .btn {
    flex-grow: 1; /* Faz ambos os botões terem a mesma largura */
    font-size: 0.85rem;
    padding: 0.5rem 0.25rem; /* Padding ajustado */
    border: 1px solid var(--primary-color);
}
.btn-personalizar {
    background-color: #fff;
    color: var(--primary-color);
    border-radius: 50px 0 0 50px; /* Canto esquerdo arredondado */
    border-right-width: 0.5px;
}
.btn-adicionar {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 0 50px 50px 0; /* Canto direito arredondado */
    border-left-width: 0.5px;
}
.btn-personalizar:hover {
    background-color: #f8f9fa;
}

.btn-adicionar:hover {
    background-color: #87CEFA;
}






/* =================================================================== */
/* === ESTILO PARA O BOTÃO "VER DETALHES" NO CARD DE PRODUTO === */
/* =================================================================== */

.btn-view-details {
    /* Cores e Borda */
    background-color: transparent;
    color: var(--primary-color);

    /* Tipografia e Layout */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.05rem 0.6rem; /* Padding vertical e horizontal */
    
    /* Forma */
    border-radius: 50px; /* Formato de pílula, bem moderno */

    /* Animação */
    transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o mouse */
.btn-view-details:hover {
    background-color: var(--primary-color);
    color: var(--light-text); /* Muda o texto para a cor clara definida nas variáveis */
    box-shadow: 0 4px 10px rgba(70, 130, 180, 0.2); /* Sombra suave na cor primária */
}

.btn-view-details i {
    font-size: 1.3rem; /* Ajuste este valor conforme desejar */
}




/* =================================================================== */
/* === ESTILOS PARA PREÇO PROMOCIONAL NO CARD === */
/* =================================================================== */

/* O container dos preços quando HÁ promoção - A NOSSA ÂNCORA */
.price-wrapper {
    position: relative; /* ESSENCIAL: Torna este div a referência para o posicionamento absoluto. */
    display: inline-block; /* Faz o wrapper ter o tamanho do seu conteúdo, não a linha inteira. */
}

/* Preço promocional (em destaque) */
.promotional-price {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--heading-font);
    color: #dc3545 !important; /* Vermelho para indicar promoção */
    line-height: 1;
}

/* Preço original (riscado) - O ELEMENTO FLUTUANTE */
.original-price {
    position: absolute;     /* Retira do fluxo normal e permite o posicionamento livre. */
    top: 0;                 /* Alinha no topo do .price-wrapper. */
    left: 100%;             /* Começa exatamente onde o .price-wrapper termina. */
    white-space: nowrap;    /* Impede que o "R$ XX,XX" quebre em duas linhas. */

    font-size: 0.7rem;
    font-weight: 400;
    color: var(--gray-text);
    text-decoration: line-through;
    margin-left: 0.1rem; /* Um pequeno espaço para não colar no preço principal. */
}




/* =================================================================== */
/* === ESTILOS PARA PREÇO PROMOCIONAL E BADGE SOBRE A IMAGEM === */
/* =================================================================== */

/* 1. Prepara o container da imagem para ser a referência de posicionamento */
.product-card-image-container {
    position: relative; /* ESSENCIAL para posicionar o badge dentro dele */
}

/* 2. Estilo do Badge de Desconto (agora flutuante) */
.discount-badge {
    position: absolute; /* Para "flutuar" sobre o container pai */
    top: 10px;          /* 10px de distância do topo */
    right: 10px;        /* 10px de distância da direita */
    z-index: 10;        /* Garante que ele fique acima da imagem */
    
    background-color: #dc3545;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para destacar */
}


.price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}











/* Aplica estes estilos APENAS em telas com largura máxima de 767.98px */
@media (max-width: 767.98px) {

    /* --- AJUSTE NO SWIPER --- */
    
    /* A largura dos slides é controlada pelo Swiper para não disputar com o CSS. */

    /* --- ESTILOS DO CARD COMPACTO --- */

    /* 2. Esconde a descrição do produto */
    .product-card .card-text {
        display: none;
    }

    /* 3. Reduz a altura da imagem */
    .product-card-image-container {
        height: 120px;
    }

    /* 4. Ajusta o corpo do card */
    .product-card .card-body {
        padding: 0.75rem;
    }
    
    .product-card .card-title {
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.1rem;
    }

    /* 5. A LÓGICA PARA EMPILHAR OS BOTÕES */

    /* Altera o container dos botões para empilhar verticalmente */
    .action-button-group {
        flex-direction: column; /* EMPILHA os botões */
        /* Removemos o 'width' para que ele tenha o tamanho dos botões */
    }

    /* Posiciona o grupo de botões à direita e o preço à esquerda */
 .product-card .mt-0 {
        display: block; 
    }

    .product-card .price {
        font-size: 1rem;
        margin-bottom: 1;
    }

    /* Botão "Personalizar" (o de cima) */
    .btn-personalizar {
        border-radius: 20px 20px 0 0; /* Cantos arredondados no topo */
        border-bottom-width: 0;    /* Remove a borda inferior */
    }

    /* Botão "Adicionar" (o de baixo) */
    .btn-adicionar {
        border-radius: 0 0 20px 20px; /* Cantos arredondados na base */
    }

    /* Ajuste de tamanho para os botões */
    .action-button-group .btn {
        font-size: 0.75rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        width: 100%; /* Define uma largura fixa para o grupo de botões */
    }




/* =================================================================== */
/* === ESTILOS PARA PREÇO PROMOCIONAL NO CARD === */
/* =================================================================== */


/* Preço original (riscado) */
.original-price {
    font-size: 0.5rem; /* Um pouco menor */
    font-weight: 400;
    margin-left: 0.2rem; /* Espaço para não colar no preço promocional */
}

/* Preço promocional (em destaque) */
.promotional-price {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}







}



/* --------------------------------------------------- */
/* --- ESTILOS PARA O MENU DE ÍCONES DE CATEGORIAS --- */
/* --------------------------------------------------- */

.category-menu-container {
    /* O padding vertical agora garante espaço para a animação */
    padding: 25px 0; 
}

.category-menu {
    overflow: hidden;
    width: 100%; /* Garante que o swiper ocupe todo o espaço do container */
}
.category-menu .swiper-wrapper {
    display: inline-flex;
    justify-content: flex-start;
}

.category-menu .swiper-slide {
    width: auto;
    flex-shrink: 0;
    padding: 5px 0; 
}

/* O estilo do "botão" de ícone - um pouco maior */
.category-menu .swiper-slide a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: auto;
    min-height: 42px;
    padding: .55rem .9rem;
    margin: 0 2px;
    border-radius: 999px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.3s ease;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
}



/* Efeito Hover e Estado Ativo */
.category-menu .swiper-slide a.active,
.category-menu .swiper-slide a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(70, 130, 180, .22);
}

.category-menu .swiper-slide a:focus-visible {
    outline: 3px solid rgba(70, 130, 180, .28);
    outline-offset: 2px;
}


/* Estilo do Tooltip do Bootstrap (permanece o mesmo) */
.tooltip-inner {
    background-color: var(--dark-text);
    color: #fff;
    font-weight: 600;
}
.tooltip .tooltip-arrow::before {
    border-bottom-color: var(--dark-text);
}


/* ------------------------------------------- */
/* --- ESTILOS PARA O BOTÃO VOLTAR AO TOPO --- */
/* ------------------------------------------- */

#back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1030;
    
    /* Dimensões e Alinhamento */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Cores do seu sistema */
    background-color: var(--secondary-color); /* Fundo VERMELHO */
    color: var(--primary-color);              /* Ícone AMARELO */
    
    /* Sombra e Forma */
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(70, 130, 180, 0.3);;

    /* Animações e Visibilidade */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

/* Efeito Hover */
#back-to-top:hover {
    background-color: #FFC72C; /* Tom de amarelo mais escuro */
    transform: translateY(-3px) scale(1.05); /* Efeito de levantar e crescer */
    box-shadow: 0 6px 18px rgba(70, 130, 180, 0.5);;
}

/* Classe de visibilidade controlada pelo JS */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estilo do Ícone Interno */
#back-to-top i {
    font-size: 1.5rem;
    line-height: 1; /* Garante alinhamento vertical perfeito */
}




/* ------------------------------------------- */
/* --- ESTILOS PARA CARRINHO --- */
/* ------------------------------------------- */

/* Overlay escuro que cobre a página */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 25, 40, 0.68);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* A sidebar em si */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* Começa fora da tela */
    width: 100%;
    max-width: 500px;
    height: 100%;
    background-color: #fbfdff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
    box-shadow: -8px 0 32px rgba(5, 32, 51, 0.22);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.4s;
}
.cart-sidebar.show {
    right: 0;
    visibility: visible;
    pointer-events: auto;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s;
}

/* Cabeçalho */
.cart-header {
    background: linear-gradient(105deg, #14466c, #1f658b);
    color: #fff;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(174, 220, 242, .35);
}

/* Corpo (lista de itens) */
.cart-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: #fbfdff;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dce9f0;
}
.cart-item-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}
.cart-item-details {
    flex-grow: 1;
}
.cart-item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.cart-item-price {
    color: #286f98;
    font-size: 0.9rem;
}
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
}
.quantity-controls button {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;

    width: 35px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background-color 0.2s ease;

}

/* Efeito de hover nos botões */
.quantity-controls button:hover {
    color: var(--primary-color); /* Um cinza um pouco mais escuro */
}


.quantity-controls .item-quantity {
    font-weight: 700;
    font-family: var(--heading-font);
    font-size: 1.1rem;
    color: var(--dark-text);
    padding: 0 0.5rem; /* Espaçamento horizontal para o número não colar nos botões */
    min-width: 35px; /* Garante que o controle não "pule" quando o número muda de 9 para 10 */
    display: flex;
    text-align: center;
    justify-content: center;
}
.remove-item-btn {
    color: #bd4d59;
    font-size: 1.4rem;
}
.cart-empty-message {
    padding: 4rem 0;
}


.cart-header .text-muted {
    color: #d8edf7 !important;
    opacity: 0.8; /* Um pouco mais sutil que o título */
}


/* Estilo do texto "Subtotal" */
.cart-footer .fw-semibold {
    color: var(--dark-text);
}

/* Estilo do valor do subtotal */
.cart-footer #cart-subtotal {
    color: #174d70;
    font-family: var(--heading-font);
}
/* Rodapé */
.cart-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #d5e5ee;
    background-color: #f1f7fa;
}


/* =================================================================== */
/* === ESTILO CUSTOMIZADO PARA O BOTÃO "FINALIZAR PEDIDO" === */
/* =================================================================== */

/* 
 * Alvo: O botão #checkout-btn dentro do rodapé do carrinho.
*/
.cart-footer #checkout-btn {
    /* Cores que combinam com o cabeçalho do carrinho */
    background: linear-gradient(105deg, #1f658b, #14466c);
    color: #FFFFFF; /* Texto branco para máximo contraste */
    
    /* Tipografia e Layout */
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.1rem; /* Um pouco maior para mais destaque */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    
    /* Forma e Sombra */
    border: none;
    border-radius: 50px; /* Totalmente arredondado (pílula) */
    padding: 0.85rem 1.5rem; /* Um pouco mais de padding vertical */
    box-shadow: 0 4px 15px rgba(20, 70, 108, 0.28);
    
    /* Animações */
    transition: all 0.3s ease-in-out;
}

/* 
 * Efeito ao passar o mouse (apenas quando o botão NÃO está desabilitado)
*/
.cart-footer #checkout-btn:not(.disabled):hover {
    background: linear-gradient(105deg, #287ba6, #18557d);
    box-shadow: 0 8px 25px rgba(20, 70, 108, 0.38);
    transform: translateY(-3px); /* Efeito de "levantar" um pouco mais pronunciado */
}

/*
 * Efeito ao clicar no botão
*/
.cart-footer #checkout-btn:not(.disabled):active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(20, 70, 108, 0.3);
}

/* 
 * Estilo para quando o botão estiver desabilitado (carrinho vazio)
*/
.cart-footer #checkout-btn.disabled {
    background: #e9ecef; /* Remove o gradiente */
    color: #adb5bd;
    box-shadow: none;
    cursor: not-allowed;
}



@media (min-width: 992px) {

    /* Alvo: O link 'a' que envolve o ícone de desktop */
    #cart-icon-wrapper {
        /* Formato de pílula com fundo sutil */
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .14);
        
        /* Centraliza o conteúdo */
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .28);
        box-shadow: 0 4px 12px rgba(4, 28, 48, .2);
        margin-right: 8px;
        
        /* Adicionado para garantir que o badge tenha uma referência */
        position: relative; 


    }

    /* Efeito ao passar o mouse */
    #cart-icon-wrapper:hover {
        background-color: rgba(141, 204, 234, .3);
    }

    /* Alvo: O ícone 'i' dentro do link */
    #cart-icon-wrapper .bi-cart3 {
        color: white; /* Garante que o ícone seja branco */
        font-size: 1.2rem !important; /* Leve ajuste de tamanho */
    }

    /* 
       Alvo: O badge 'span' de contagem.
       O posicionamento padrão do Bootstrap com 'translate-middle' já funciona bem em desktop.
       Apenas adicionamos uma borda para destacar.
    */
    #cart-icon-wrapper #cart-badge {
        border: 2px solid #fff;
    }

}

/* Aplica estes estilos APENAS em telas com largura máxima de 991.98px */
@media (max-width: 991.98px) {

  

 #cart-icon-wrapper-mobile {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .14);
        
        /* Centraliza o conteúdo */
        display: flex;
        align-items: center;
        justify-content: center;
        
        border: 1px solid rgba(255, 255, 255, .28);
        box-shadow: 0 4px 12px rgba(4, 28, 48, .2);
        margin-right: 8px;
        
        /* Adicionado para garantir que o badge tenha uma referência */
        position: relative; 
    }

    /* O ícone dentro do link */
    #cart-icon-wrapper-mobile .bi-cart3 {
        color: #fff;
        font-size: 1.25rem !important;
    }

    /* --- A CORREÇÃO PRINCIPAL ESTÁ AQUI --- */
    /* Posicionamento do badge de contagem */
    #cart-badge-mobile {
        position: absolute;
        
        /* Posiciona DENTRO do canto superior direito */
        top: -3px;
        right: -4px;
        left: auto;

        /* Remove qualquer transformação que possa estar causando problemas */
        transform: none; 
        
        /* Estilo visual */
        font-size: 0.7rem;
        padding: 0.25em 0.5em; /* Padding para manter a forma de pílula */
    }


}








/* Aplica estes estilos APENAS em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {

    /* A sidebar do carrinho */
    .cart-sidebar {
        /* Remove a largura máxima para ocupar a tela inteira */
        max-width: 100%;
        width: 100%;

        /* Remove a sombra lateral, pois não faz mais sentido */
        box-shadow: none;

        /* A animação agora será de baixo para cima */
        right: 0; /* Garante que comece alinhado */
        top: 100%; /* Começa totalmente para baixo, fora da tela */
        transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.4s;
    }

    /* Quando o carrinho estiver ativo (com a classe .show) */
    .cart-sidebar.show {
        right: 0;
        top: 0; /* Desliza para o topo, cobrindo a tela */
        transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s;
    }

    /* Ajuste no corpo do carrinho para melhor espaçamento */
    .cart-body {
        padding: 1rem 1.25rem; /* Um pouco mais de padding lateral */
    }
    
    /* Rodapé do carrinho */
    .cart-footer {
        /* Adiciona uma sombra sutil para separar do conteúdo quando há rolagem */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    }
}


/* =================================================================== */
/* === REFINAMENTO VISUAL DO MODAL DE PERSONALIZAÇÃO (MOBILE) === */
/* =================================================================== */

/* --- ESTILOS GERAIS DO MODAL (APLICADOS SEMPRE) --- */

/* Cabeçalho do Modal */
#personalize-modal .modal-header {
    background: linear-gradient(105deg, #14466c, #1f658b);
    color: #fff;
    border-bottom: 1px solid rgba(174, 220, 242, .35);
    padding: 1rem 1.25rem;
}

#personalize-modal .modal-content {
    overflow: hidden;
    background-color: #fbfdff;
    border: 1px solid #d5e5ee;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(5, 32, 51, .24);
}

#personalize-modal .modal-body {
    background-color: #fbfdff;
}

#personalize-modal .modal-footer {
    background-color: #f1f7fa;
    border-top: 1px solid #d5e5ee;
    padding: 1rem 1.25rem;
}

#personalize-modal .modal-title {
    font-weight: 700;
}

/* Garante que o texto 'Fechar' e o ícone 'X' também fiquem vermelhos */
#personalize-modal .modal-header .text-muted {
    color: #d8edf7 !important;
    opacity: 0.8;
}

/* Corpo do Modal - Conteúdo Principal */
#modal-product-content h6 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
#modal-product-content p.small {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Títulos das Seções (Adicionais, Ingredientes, etc.) */
#modal-product-content strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dce9f0;
}


#modal-product-content .form-check-input.modal-adicional-check {
        /* Aumenta o tamanho do switch */
        width: 2em; 
        height: 1.2em;
        /* Usa a cor de sucesso (verde) do Bootstrap */
        background-color: #dcecf4;
        border-color: #8ebbd2;
    }

#modal-product-content .form-check-input.modal-adicional-check:checked {
    background-color: #1f658b;
    border-color: #1f658b;
}


#modal-product-content .form-check:not(:last-child) {
    margin-bottom: 0.25rem; /* 12px de espaço - ajuste este valor se quiser mais ou menos */
}

/* 
 * Ajuste fino na label para garantir que o texto fique bem alinhado
 * com o switch, mesmo com o aumento do espaço.
*/
#modal-product-content .form-check-label {
    padding-top: 0.1rem; 
}


/* --- Estilo para o Botão "Adicionar" no Modal --- */
#personalize-modal #modal-add-to-cart-btn {
    /* Cores e Gradiente */
    background: linear-gradient(105deg, #1f658b, #14466c);
    color: #FFFFFF;
    
    /* Tipografia e Layout */
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Forma e Sombra */
    border: none;
    border-radius: 50px; /* Formato de pílula */
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(20, 70, 108, .28);
    
    /* Animações */
    transition: all 0.3s ease-in-out;
}

/* Efeito de hover e clique (similar ao botão do carrinho) */
#personalize-modal #modal-add-to-cart-btn:hover {
    background: linear-gradient(105deg, #287ba6, #18557d);
    box-shadow: 0 8px 25px rgba(20, 70, 108, .38);
    transform: translateY(-2px);
}
#personalize-modal #modal-add-to-cart-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(20, 70, 108, .3);
}




/* =================================================================== */
/* === ESTILOS PARA SEÇÕES DE PERSONALIZAÇÃO NO MODAL === */
/* =================================================================== */

/* Container geral de uma seção (Adicionar ou Remover) */
.modal-section {
    border-radius: 0px 0px 12px 12px;
    background-color: #f1f7fa;
    padding: 1rem;
    border-top: 4px solid; /* Prepara a borda superior colorida */
}

/* Título da seção */
.modal-section-title {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d5e5ee;
    color: #24485f;
}

/* Badge (+) ou (-) */
.modal-section-title .badge {
    font-size: 1rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- Estilos específicos para a seção ADICIONAR --- */
.modal-section-adicionar {
    border-top-color: #2d7da7;
}
.modal-section-adicionar .modal-section-title {
    color: #245f80;
}

/* --- Estilos específicos para a seção REMOVER --- */
.modal-section-remover {
    border-top-color: #bd4d59;
}
.modal-section-remover .modal-section-title {
    color: #91404a;
}

/* Aplica estes estilos APENAS em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {

    /* Alvo: O container do modal, quando estiver visível */
    #personalize-modal.show {
        padding: 0 !important; /* Remove o padding padrão do modal */
    }

    /* Alvo: O 'dialog' do modal, a caixa principal */
    #personalize-modal .modal-dialog {
        /* Remove margens e garante que ocupe 100% da tela */
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
        /* Remove a transformação que centraliza o modal, para que ele comece no topo */
        transform: none;
    }

    /* Alvo: O conteúdo dentro do 'dialog' */
    #personalize-modal .modal-content {
        /* Garante que o conteúdo ocupe toda a altura do dialog */
        height: 100%;
        border-radius: 0; /* Remove cantos arredondados para um visual de tela cheia */
        border: none;
        /* Define o layout flex para que o corpo do modal cresça */
        display: flex;
        flex-direction: column;
    }

    /* Alvo: O corpo do modal, onde ficam as opções */
    #personalize-modal .modal-body {
        /* Faz o corpo crescer e ocupar todo o espaço disponível */
        flex-grow: 1;
        overflow-y: auto; /* Adiciona rolagem se as opções forem muitas */
    }

    /* Alvo: O rodapé do modal */
    #personalize-modal .modal-footer {
        /* Adiciona uma sombra para separar do conteúdo, como no carrinho */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        flex-shrink: 0; /* Impede que o rodapé encolha */
    }

    /* Animação: Faz o modal deslizar de baixo para cima, igual ao carrinho */
    /* O Bootstrap adiciona 'fade' e 'show', nós aproveitamos isso */
    #personalize-modal .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    #personalize-modal.show .modal-dialog {
        transform: translateY(0);
    }

}




.swal2-container.swal2-top-end {
    /* 
     * O 'top' padrão é geralmente 0 ou um valor pequeno.
     * Vamos definir um valor maior para empurrá-lo para baixo.
     * 5rem (aprox. 80px) é um bom ponto de partida para passar a navbar.
     * Ajuste este valor se a altura da sua navbar for diferente.
    */
    top: 5rem !important;
}

/* 
 * Ajuste opcional para telas menores (mobile), onde a navbar
 * pode ser um pouco menor.
*/
@media (max-width: 991.98px) {
    .swal2-container.swal2-top-end {
        top: 4.5rem !important; /* Ex: 72px, um pouco menos que a versão desktop */
    }
}



/* =================================================================== */
/* === ESTILOS PARA O BOTÃO FLUTUANTE DE PAGAMENTO === */
/* =================================================================== */

#pagar-flutuante-btn {
    position: fixed; /* Chave para mantê-lo fixo na tela */
    top: 5rem;       /* Distância do topo (aprox. 80px, abaixo da navbar) */
    left: 1.5rem;   /* Distância da direita (aprox. 24px) */
    z-index: 1035;   /* Garante que fique acima do conteúdo, mas abaixo de modais */
    
    /* Estilo sutil */
    background-color: var(--terceary-color); /* Vermelho do seu tema */
    color: var(--primary-color);           /* Amarelo do seu tema */
    font-family: var(--heading-font);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 50px; /* Totalmente arredondado */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    width: 7rem;
    min-width: 120px;

    /* Animação de entrada e saída */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Começa um pouco para cima */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Classe que o JavaScript irá adicionar para mostrar o botão */
#pagar-flutuante-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#pagar-flutuante-btn:hover {
    transform: scale(1.05); /* Efeito de crescimento sutil ao passar o mouse */
    color: var(--primary-color);
}

/* Ajuste para telas menores */
@media (max-width: 767.98px) {
    #pagar-flutuante-btn {
        top: 5rem; /* Um pouco mais perto do topo em telas mobile */
        left: 0.8rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}


.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1; /* Garante alinhamento vertical */
}






/* =================================================================== */
/* === ESTILOS CUSTOMIZADOS PARA A PÁGINA DE CHECKOUT === */
/* =================================================================== */

/* --- Estilo Geral do Container --- */
.checkout-container {
    max-width: 1024px; /* Um pouco mais de espaço */
}

/* --- Título Principal --- */
.checkout-container .text-center h1 {
    color: var(--dark-text);
    font-weight: 800;
}

/* --- Estrutura dos Passos (Steps) --- */
.checkout-step {
    background-color: #fff;
    border: none; /* Removemos a borda padrão */
    border-radius: 16px; /* Bordas mais arredondadas */
    margin-bottom: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Sombra mais suave e proeminente */
    overflow: hidden; /* Garante que os cantos arredondados sejam respeitados */
}

/* Cabeçalho de cada passo */
.checkout-step-header {
    padding: 1rem 1.5rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-bottom: 1px solid #e9ecef;
}

.checkout-step-title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--light-text);
    display: flex;
    align-items: center;
}

/* Badge numérico de cada passo */
.checkout-step-title .badge {
    background-color: var(--primary-color) !important; /* Amarelo */
    color: var(--secondary-color) !important;       /* Texto Vermelho */
    font-size: 1rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Corpo de cada passo */
.checkout-step-body {
    padding: 1.5rem;
}

/* --- Cards de Seleção (Endereço, Tipo de Serviço) --- */
.address-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.address-card:hover {
    transform: translateY(-2px);
    border-color: #d1d9e2;
}

/* Estilo do card QUANDO SELECIONADO */
.address-card.selected {
    border-color: var(--secondary-color); /* Borda Vermelha */
    background-color: #fff4f3; /* Fundo vermelho muito sutil */
    box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.2);
}

/* Esconde o radio button padrão, o card inteiro é o controle */
.address-card .form-check-input {
    display: none;
}

/* Ícone de lápis para editar endereço */
.address-card .btn-edit-address {
    color: var(--gray-text);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.address-card:hover .btn-edit-address {
    opacity: 1;
}

/* --- Seletores de Forma de Pagamento --- */
.list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.list-group-item:hover {
    background-color: #f8f9fa;
}

/* --- Botões --- */

/* Botão "Confirmar Pedido" (Principal) */
#btn-confirm-order {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    color: #FFFFFF;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 1.5rem;
    box-shadow: 0 4px 15px rgba(70, 130, 180, 0.35);;
    transition: all 0.3s ease-in-out;
}
#btn-confirm-order:hover {
    box-shadow: 0 8px 25px rgba(70, 130, 180, 0.5);;
    transform: translateY(-3px);
}
#btn-confirm-order:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(70, 130, 180, 0.4);
}

/* Botão "Novo Endereço" */
#btn-add-new-address {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    font-weight: 600;
}
#btn-add-new-address:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.checkout-container .form-check-input:checked {
    background-color: var(--secondary-color); /* Fundo Vermelho */
    border-color: var(--secondary-color);     /* Borda Vermelha */
}

/* 
 * (Opcional) Refinamento do Foco:
 * Alvo: O anel de foco que aparece ao clicar no elemento.
 * Ação: Muda a cor do anel de foco de azul para vermelho.
*/
.checkout-container .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(218, 41, 28, 0.25); /* Sombra de foco vermelha */
}

/* Checkout focado: sem navegação global e sem rodapé. */
body.pagina-checkout {
    padding-top: 0;
    min-height: 100vh;
    background: #f4f7fb;
}

/* Catálogo da home: cards menores, consistentes e responsivos. */
.home-category-section { margin-bottom: 2.25rem; scroll-margin-top: 88px; }
.home-category-heading { margin-bottom: 1rem; }
.home-category-section .section-title-category { font-size: 1.45rem; }
.home-category-section .product-swiper { padding: 2px 2px 12px; }

/* Reserva o tamanho final dos cards antes da inicialização do Swiper. */
.home-category-section .product-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 10px;
}

.home-category-section .product-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(48.7805% - 5.122px);
    flex: 0 0 calc(48.7805% - 5.122px);
}

@media (min-width: 480px) {
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-wrapper { gap: 12px; }
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc(42.5532% - 6.894px);
        flex-basis: calc(42.5532% - 6.894px);
    }
}

@media (min-width: 576px) {
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-wrapper { gap: 14px; }
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc(40% - 8.4px);
        flex-basis: calc(40% - 8.4px);
    }
}

@media (min-width: 768px) {
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-wrapper { gap: 18px; }
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc(33.3333% - 12px);
        flex-basis: calc(33.3333% - 12px);
    }
}

@media (min-width: 992px) {
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-wrapper { gap: 20px; }
    .home-category-section .product-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc(25% - 15px);
        flex-basis: calc(25% - 15px);
    }
}

.home-category-section .product-card {
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .055);
}
.home-category-section .product-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.home-category-section .product-card-image-container { height: 165px; border-radius: 15px 15px 0 0; }
.home-category-section .product-card .card-body { padding: .9rem; }
.home-category-section .product-card .card-title { margin-bottom: .35rem; font-size: 1rem; }
.home-category-section .product-card .card-text { min-height: 2.5em; margin-bottom: .35rem; font-size: .8rem; line-height: 1.35; }
.product-type-badge {
    position: absolute;
    left: 9px;
    bottom: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .78);
    backdrop-filter: blur(5px);
    font-size: .7rem;
    font-weight: 700;
}
.home-category-section .discount-badge { top: 9px; right: 9px; font-size: .7rem; padding: .22rem .5rem; }
.product-card-footer { min-width: 0; }
.product-card-commerce-row { display: flex; align-items: center; justify-content: space-between; gap: .45rem; min-height: 38px; margin-bottom: .55rem; }
.home-category-section .price-wrapper { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.home-category-section .product-card .price,
.home-category-section .promotional-price { font-size: 1.2rem; line-height: 1.05; }
.home-category-section .original-price { position: static; margin: .16rem 0 0; font-size: .62rem; line-height: 1; }
.home-category-section .btn-view-details { flex: 0 0 auto; gap: .25rem; padding: .22rem .5rem; font-size: .72rem; }
.home-category-section .btn-view-details i { font-size: 1rem; }
.home-category-section .action-button-group { gap: 6px; }
.home-category-section .action-button-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    min-width: 0;
    min-height: 36px;
    padding: .4rem .45rem;
    border-width: 1px;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}
.home-category-section .btn-personalizar { border-right-width: 1px; }
.home-category-section .btn-adicionar { border-left-width: 1px; color: #fff; }
.home-category-section .btn-comprado { min-height: 36px; border-radius: 9px !important; }
.label-mobile { display: none; }
.swiper-navigation-buttons button { width: 38px; height: 38px; padding: 0 0 .2rem; font-size: 1rem; }

@media (max-width: 991.98px) {
    body { padding-top: 64px; }
    #main-navbar { min-height: 64px; padding-top: .5rem; padding-bottom: .5rem; }
    #main-navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
    #hero { margin-top: 0; }
}

@media (max-width: 767.98px) {
    #hero { margin-top: 0; min-height: 285px; }
    #hero h1 { margin-bottom: .55rem !important; font-size: clamp(1.9rem, 10vw, 2.35rem); line-height: 1.05; }
    #hero p.lead { margin-bottom: 1.15rem !important; font-size: 1rem; }
    #hero .input-group { max-width: calc(100vw - 24px); }
    #hero .input-group-lg > .form-control,
    #hero .input-group-lg > .btn { min-height: 44px; padding-block: .45rem; font-size: .95rem; }
    .category-menu-container { margin-top: .7rem !important; padding: 10px 0; }
    .category-menu .swiper-slide a { width: auto; min-height: 36px; height: auto; padding: .42rem .7rem; font-size: .7rem; }
    .home-category-section { margin-bottom: 1.5rem; scroll-margin-top: 66px; }
    .home-category-heading { margin-bottom: .7rem; }
    .home-category-section .section-title-category { font-size: 1.15rem; }
    .home-category-section .category-badge { width: 31px; height: 31px; font-size: .88rem; }
    .home-category-section .swiper-navigation-buttons { display: none; }
    .home-category-section .product-swiper { padding-bottom: 8px; }
    .home-category-section .product-card { border-radius: 12px; box-shadow: 0 3px 10px rgba(15, 23, 42, .06); }
    .home-category-section .product-card:hover { transform: none; }
    .home-category-section .product-card:hover .card-img-top { transform: none; }
    .home-category-section .product-card-image-container { height: 88px; border-radius: 11px 11px 0 0; }
    .home-category-section .product-card .card-body { padding: .52rem; }
    .home-category-section .product-card .card-title { margin-bottom: .28rem; font-size: .78rem; font-weight: 700; }
    .home-category-section .product-card .card-text { display: none; }
    .product-type-badge { left: 6px; bottom: 6px; gap: .2rem; padding: .16rem .38rem; font-size: .58rem; }
    .home-category-section .discount-badge { top: 6px; right: 6px; padding: .16rem .38rem; font-size: .61rem; }
    .product-card-commerce-row { min-height: 30px; margin-bottom: .38rem; gap: .25rem; }
    .home-category-section .product-card .price,
    .home-category-section .promotional-price { font-size: .9rem; }
    .home-category-section .original-price { margin-top: .12rem; font-size: .52rem; }
    .home-category-section .btn-view-details { width: 28px; height: 28px; justify-content: center; padding: 0; border: 1px solid #d9e4ee; border-radius: 8px; }
    .home-category-section .btn-view-details span { display: none; }
    .home-category-section .btn-view-details i { font-size: .88rem; }
    .home-category-section .action-button-group { flex-direction: row; gap: 4px; }
    .home-category-section .action-button-group .btn { min-height: 32px; padding: .3rem .25rem; border-radius: 7px; font-size: .62rem; }
    .home-category-section .action-button-group .btn i { font-size: .68rem; }
    .home-category-section .btn-comprado { min-height: 32px; }
    .label-desktop { display: none; }
    .label-mobile { display: inline; }
}

.checkout-page {
    min-height: 100vh;
    color: #1e293b;
}

.checkout-shell {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.checkout-focus-header {
    height: 64px;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e5eaf1;
}

.checkout-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #1e293b;
    text-decoration: none;
}

.checkout-brand img { border-radius: 10px; object-fit: cover; }
.checkout-brand span { display: flex; align-items: baseline; gap: .45rem; }
.checkout-brand strong { color: var(--primary-color); font-size: 1.05rem; }
.checkout-brand small { color: #64748b; font-size: .78rem; }

.checkout-secure-label,
.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
}

.checkout-secure-label { color: #15803d; }
.checkout-back-link { color: #475569; text-decoration: none; font-weight: 700; }
.checkout-back-link:hover { color: var(--primary-color); }

.checkout-content { padding-block: 30px 44px; }
.checkout-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 24px; }
.checkout-eyebrow { color: var(--primary-color); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-intro h1 { margin: .2rem 0 .25rem; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.1; }
.checkout-intro p { margin: 0; color: #64748b; font-size: .95rem; }

.checkout-progress { display: flex; align-items: center; flex: 0 0 auto; color: #94a3b8; font-size: .75rem; font-weight: 700; }
.checkout-progress span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.checkout-progress b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #cbd5e1; border-radius: 50%; font-size: .7rem; }
.checkout-progress i { width: 24px; height: 1px; margin-inline: .4rem; background: #cbd5e1; }
.checkout-progress .is-active { color: var(--primary-color); }
.checkout-progress .is-active b { color: #fff; border-color: var(--primary-color); background: var(--primary-color); }

.checkout-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.checkout-panel-heading { display: flex; align-items: center; gap: .8rem; padding: 18px 20px; border-bottom: 1px solid #edf1f5; }
.checkout-panel-heading h2 { margin: 0; font-size: 1.05rem; }
.checkout-panel-heading p { margin: .12rem 0 0; color: #64748b; font-size: .8rem; }
.checkout-panel-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: #fff; background: var(--primary-color); font-size: .8rem; font-weight: 800; }

.checkout-assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; }
.checkout-assurances > div { min-width: 0; padding: 16px; border: 1px solid #e8edf3; border-radius: 12px; background: #f8fafc; }
.checkout-assurances i { display: block; margin-bottom: .55rem; color: var(--primary-color); font-size: 1.25rem; }
.checkout-assurances span { display: flex; flex-direction: column; gap: .18rem; }
.checkout-assurances strong { font-size: .84rem; }
.checkout-assurances small { color: #64748b; font-size: .72rem; line-height: 1.35; }

.checkout-change-note { display: flex; gap: .7rem; margin: 0 20px 20px; padding: 12px 14px; color: #475569; background: #eef6fc; border-radius: 10px; font-size: .82rem; }
.checkout-change-note i { color: var(--primary-color); }
.checkout-change-note a { color: var(--primary-color); font-weight: 700; }

.checkout-summary-panel { position: sticky; top: 16px; }
.checkout-summary-body { padding: 8px 20px 0; }
#checkout-summary-items { max-height: 310px; overflow-y: auto; padding-right: 4px; }
.summary-product-item { padding-block: 10px !important; margin: 0 !important; }
.checkout-total-lines { margin-top: 6px; padding-block: 14px; border-top: 1px solid #e8edf3; }
.checkout-total-lines > div { display: flex; justify-content: space-between; color: #64748b; font-size: .86rem; }
.checkout-total-lines .checkout-total { margin-top: .55rem; color: #172033; font-size: 1.12rem; font-weight: 800; }
.checkout-total-lines .checkout-total span:last-child { color: var(--primary-color); }
.checkout-submit-area { padding: 16px 20px 18px; background: #fbfcfe; border-top: 1px solid #e8edf3; text-align: center; }
.checkout-submit-area #btn-confirm-order { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; letter-spacing: 0; text-transform: none; box-shadow: 0 5px 14px rgba(70, 130, 180, .22); }
.checkout-submit-area small { display: block; margin-top: .6rem; color: #64748b; font-size: .72rem; }

.checkout-login-panel { display: flex; align-items: flex-start; gap: 1rem; padding: 24px; }
.checkout-login-panel h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.checkout-login-panel p { color: #64748b; }
.checkout-panel-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; color: var(--primary-color); background: #eaf3fa; font-size: 1.25rem; }

@media (max-width: 767.98px) {
    body.pagina-checkout { padding-top: 0; }
    .checkout-shell { width: min(100% - 24px, 1120px); }
    .checkout-focus-header { height: 56px; }
    .checkout-brand img { width: 32px; height: 32px; }
    .checkout-brand small, .checkout-secure-label span, .checkout-back-link span { display: none; }
    .checkout-content { padding-block: 22px 32px; }
    .checkout-intro { display: block; margin-bottom: 18px; }
    .checkout-intro p { font-size: .87rem; }
    .checkout-progress { margin-top: 16px; justify-content: space-between; }
    .checkout-progress i { flex: 1; max-width: 40px; }
    .checkout-assurances { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
    .checkout-assurances > div { display: flex; align-items: center; gap: .75rem; padding: 12px; }
    .checkout-assurances i { margin: 0; }
    .checkout-change-note { margin: 0 14px 14px; }
    .checkout-summary-panel { position: static; }
    #checkout-summary-items { max-height: none; }
}




.category-inactive {
    opacity: 0.6; /* Deixa a linha meio transparente */
    background-color: #f8f9fa; /* Um fundo cinza claro */
}



/* O espaço pontilhado que o card vai ocupar */
.sortable-ghost {
    opacity: 0.4;
    background: #e7f1ff;
    border: 2px dashed var(--primary-color);
}

.form-control[readonly] {
    background-color: #e9ecef; /* Um cinza claro para indicar que está bloqueado */
    cursor: not-allowed;      /* Muda o cursor para indicar que não é clicável */
    opacity: 1;
}









/* =============================================
   Estilos da Seção de Notícias - Design Arrojado
   =============================================== */
.news-showcase-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* Fundo claro para destacar o conteúdo */
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-tag {
    display: inline-block;
    padding: 5px 15px;
    background-color: #eef4ff; /* Azul bem claro */
    color: #00419B;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a253c;
    margin-top: 10px;
}

/* Grid Assimétrico */
.news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Coluna da esquerda é 2x maior */
    gap: 40px;
}

/* Artigo em Destaque */
.featured-article {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 500px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 15px 30px rgba(0, 65, 155, 0.1);
}

.featured-article::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Gradiente que escurece a imagem na base para legibilidade */
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0) 60%);
    z-index: 1;
    transition: background 0.4s ease;
}

.featured-article img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.featured-article:hover img {
    transform: scale(1.05); /* Efeito de zoom sutil */
}

.article-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    z-index: 2;
}
.article-category {
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase;
    color: #87CEFA; /* Azul claro para a categoria */
}
.article-content h3 {
    font-size: 1.8rem; margin: 5px 0 10px 0;
    line-height: 1.3;
}
.article-content p {
    font-weight: 300;
    opacity: 0.8;
}

/* Artigos Secundários */
.secondary-articles {
    display: flex;
    flex-direction: column;
}

.secondary-article-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #dee2e6;
    text-decoration: none;
    color: #1a253c;
}
.article-date {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 5px;
}
.secondary-article-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}
.article-arrow {
    font-size: 1.5rem;
    color: #00419B;
    transition: transform 0.3s ease;
}
.secondary-article-item:hover h4 {
    color: #00419B;
}
.secondary-article-item:hover .article-arrow {
    transform: translateX(5px);
}

/* Link "Ver Todos" */
.view-all-link {
    margin-top: auto; /* Empurra o link para o final da coluna */
    padding-top: 20px;
    font-weight: 700;
    color: #00419B;
    text-decoration: none;
    position: relative;
}
.view-all-link::after {
    content: '';
    position: absolute;
    width: 30%; height: 2px;
    background-color: #00419B;
    bottom: -5px; left: 0;
    transition: width 0.3s ease;
}
.view-all-link:hover::after {
    width: 100%;
}


/* Responsividade */
@media (max-width: 991.98px) {
    .news-grid {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
    }
    .featured-article {
        height: 400px;
    }
}


.icone-imagem {
    width: 35px;      /* Largura desejada (tamanho de um ícone comum) */
    height: 35px;     /* Altura desejada */
    border-radius: 50%;
    vertical-align: middle; /* Alinha a imagem com o texto ao redor */
    object-fit: contain;    /* Garante que a imagem se ajuste sem distorcer */
}







    /**
 * =========================================================================
 * ARQUIVO: curso_dashboard/style.css
 * RESPONSABILIDADE: Estilização sofisticada e moderna para a página
 *                   de gerenciamento de módulos e lições.
 * =========================================================================
 */

/* --- Estilos Gerais da Página de Conteúdo --- */

/* Assegura que o container principal tenha um padding consistente */
.main-content .main-carregamento {
    padding-top: 1rem;
}

/* --- Botão Principal "Adicionar Módulo" --- */
#btn-add-new-module {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.15);
}

#btn-add-new-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Card de Módulo --- */
.module-card {
    background-color: #fff;
    border: 1px solid #e9ecef; /* Borda muito sutil */
    border-radius: 12px; /* Cantos mais arredondados */
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    overflow: hidden; /* Garante que os cantos arredondados sejam respeitados */
}

.module-card:hover {
    border-color: #d0dbe5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Cabeçalho do Módulo */
.module-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #1a1d24; /* Fundo levemente acinzentado */
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
}

.module-header.empty {
    border-bottom: none;
}

/* Alça para Arrastar (Drag Handle) */
.drag-handle {
    color: #adb5bd;
    cursor: grab;
    margin-right: 1rem;
    font-size: 1.3rem;
    transition: color 0.2s ease;
}

.module-card:hover .drag-handle {
    color: #495057;
}

/* Título do Módulo */
.module-title {
    flex-grow: 1;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    font-family: var(--heading-font);
}

/* Botões de Ação do Módulo */
.module-actions .btn {
    border-radius: 50px; /* Botões em formato de pílula */
    line-height: 1;
    transition: all 0.2s ease;
}

.module-actions .btn:hover {
    transform: scale(1.05);
}

.module-actions .btn-add-lesson {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.module-actions .btn-add-lesson:hover {
    background-color: #3a6a94; /* Tom mais escuro da cor primária */
    border-color: #3a6a94;
}


/* --- Lista de Lições --- */
.lesson-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f8f9fa; /* Fundo branco para contrastar com o header do módulo */
}

/* Item da Lição */
.lesson-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f1f3f5; /* Separador ainda mais sutil */
    transition: background-color 0.2s ease;
}

.lesson-item:last-child {
    border-bottom: none;
}

.lesson-item:hover {
    background-color: #FFFAF0;
}

/* Ícone da Lição */
.lesson-icon {
    margin-right: 1rem;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* Título da Lição */
.lesson-title {
    flex-grow: 1;
    color: #495057;
    font-weight: 500;
}

/* Link para ver arquivo (criado no JS) */
.lesson-item a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-right: 1rem;
}
.lesson-item a:hover {
    color: var(--primary-color);
}


/* --- Animação e Estilo para o "Fantasma" do SortableJS --- */
.sortable-ghost {
    opacity: 1 !important; /* Totalmente opaco para um feedback melhor */
    background: #eef4ff; /* Azul muito claro */
    border: 1px dashed var(--primary-color);
    box-shadow: none;
}
.sortable-ghost .module-title,
.sortable-ghost .lesson-title,
.sortable-ghost .drag-handle,
.sortable-ghost .lesson-icon {
    color: var(--primary-color);
}
.sortable-ghost .module-actions, 
.sortable-ghost .lesson-actions {
    opacity: 0; /* Esconde os botões no fantasma para focar no título */
}






/* =================================================================== */
/*  ESTILIZAÇÃO SOFISTICADA PARA GRADE CURRICULAR (ACCORDION)
/* =================================================================== */

/* --- A. Container Geral do Accordion --- */
.accordion#courseCurriculumAccordion {
    border: 1px solid var(--gold-color);
    border-radius: 16px;
    overflow: hidden; /* Garante que os cantos arredondados sejam aplicados aos filhos */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

/* --- B. Item do Módulo (Cada Bloco) --- */
.accordion#courseCurriculumAccordion .accordion-item {
    border: none; /* Remove as bordas individuais de cada item */
    border-bottom: 1px solid #d3d3d3; /* Adiciona um separador sutil entre os módulos */
    background-color: #fff;
}
.accordion#courseCurriculumAccordion .accordion-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

/* --- C. Cabeçalho do Módulo (A Parte Clicável) --- */
.accordion#courseCurriculumAccordion .accordion-header {
    margin-bottom: 0 !important;
}

.accordion#courseCurriculumAccordion .accordion-button {
    /* 1. Ativa o Flexbox e define o alinhamento */
    display: flex;
    justify-content: space-between; /* Mágica acontece aqui! */
    align-items: center;
    width: 100%; /* Garante que o botão ocupe todo o espaço */

    /* 2. Estilos visuais (os mesmos que já tínhamos) */
    background-color: #f8f9fa;
    color: var(--dark-text);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 1.25rem 1.5rem;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}

/* Remove a cor de fundo azulada quando o módulo está aberto */
.accordion#courseCurriculumAccordion .accordion-button:not(.collapsed) {
    background-color: #f1f3f5; /* Um cinza um pouco mais escuro quando aberto */
    color: var(--primary-color);
}

/* Efeito Hover no cabeçalho */
.accordion#courseCurriculumAccordion .accordion-button:hover {
    background-color: #e9ecef;
}

/* Título do Módulo dentro do botão */
.accordion#courseCurriculumAccordion .accordion-button strong {
    font-family: var(--heading-font);
    font-weight: 600;
    /* Permite que o título encolha se necessário, mas prioriza crescer */
    flex-grow: 1;
    flex-shrink: 1;
    /* Garante que títulos longos sejam cortados com "..." */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem; /* Espaço entre o título e a contagem */
}

/* Texto de contagem de aulas */
.accordion#courseCurriculumAccordion .accordion-button .small {
    font-weight: 400;
    /* Impede que a contagem de aulas encolha */
    flex-shrink: 0;
}

/* Seta do Accordion */
.accordion#courseCurriculumAccordion .accordion-button::after {
    /* Filtro para colorir a seta com sua cor primária */
    filter: brightness(0) saturate(100%) invert(26%) sepia(43%) saturate(1412%) hue-rotate(180deg) brightness(91%) contrast(93%);
}

.accordion#courseCurriculumAccordion .accordion-button:not(.collapsed)::before {
    transform: rotate(-180deg);
}

/* --- D. Corpo do Módulo (Conteúdo que Abre/Fecha) --- */
.accordion#courseCurriculumAccordion .accordion-body {
    padding: 1.5rem;
}

/* Descrição do Módulo */
.accordion#courseCurriculumAccordion .module-description {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #708090;
    font-size: 0.95rem;
}

/* --- E. Lista de Lições Dentro do Módulo --- */
.accordion#courseCurriculumAccordion .list-group-item {
    border: none !important; /* Remove qualquer borda da lista de lições */
    padding: 0.85rem 0.5rem;
    color: #495057;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 8px; /* Cantos arredondados para cada lição */
}

.accordion#courseCurriculumAccordion .list-group-item:hover {
    background-color: #eef4ff; /* Fundo azul bem claro no hover */
    transform: translateX(5px); /* Leve deslocamento para a direita no hover */
    color: var(--primary-color);
}
.accordion#courseCurriculumAccordion .list-group-item:hover i {
    color: var(--secondary-color) !important; /* Destaca o ícone no hover */
}


.course-description-section h2.no-border-bottom {
    border-bottom: none;
    padding-bottom: 0; /* Remove o padding que não é mais necessário */
}













/* =================================================================== */
/* ===   ASSISTIR CURSO: ESTILO HERO LUXURY (RECONSTRUÇÃO TOTAL)   === */
/* =================================================================== */

/* 1. Container Principal (Fundo Clean igual ao Perfil) */
.course-player-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: #f8faff; /* Fundo azul gelo suave */
    padding: 20px; /* Cria o efeito de cards "flutuantes" */
    gap: 20px;
}

/* 2. Sidebar (Transformada em Card Premium) */
.course-sidebar {
    width: 380px;
    flex-shrink: 0;
    background: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    box-shadow: 0 20px 60px rgba(0, 41, 155, 0.08); /* Sombra Hero */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - 40px); /* Altura fixa respeitando o padding */
    position: sticky;
    top: 20px;
}

.sidebar-header {
    padding: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sidebar-header .back-link {
    color: var(--gray-text);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}
.sidebar-header .back-link:hover { color: var(--primary-color); }

.sidebar-header .course-title {
    font-family: var(--heading-font);
    /* Texto Gradiente igual aos títulos do Perfil */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0;
}

/* 3. Navegação (Estilo Nav-Pills Luxury) */
.sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.course-sidebar .accordion-item {
    border: none !important;
    background: transparent;
    margin-bottom: 12px;
}

.course-sidebar .accordion-button {
    background-color: #f8faff !important;
    border: 2px solid #eef2f7 !important;
    border-radius: 15px !important;
    color: var(--secondary-color) !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease;
}

.course-sidebar .accordion-button:not(.collapsed) {
    border-color: var(--secondary-color) !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Lista de aulas dentro do Accordion */
.lesson-list {
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lesson-list li a {
    color: var(--gray-text) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 15px 12px 45px !important; /* Indentação */
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    text-decoration: none;
}

.lesson-list li a:hover {
    background-color: #f0f4f8;
    color: var(--primary-color) !important;
    transform: translateX(5px); /* Leve deslize igual ao menu do perfil */
}

/* LIÇÃO ATIVA: Gradiente e Sombra */
.lesson-list li.active a {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(70, 130, 180, 0.3);
    border: none;
}

/* 4. Área de Conteúdo (Card Principal) */
.course-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.main-card-player {
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 41, 155, 0.08);
    padding: 2.5rem;
    margin-bottom: 25px;
}

.lesson-title-main {
    font-family: var(--heading-font);
    font-weight: 800;
    color: var(--primary-color);
    font-size: 2.2rem;
    letter-spacing: -1px;
    margin-bottom: 2rem;
}

.video-responsive {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background-color: #000;
}

/* 5. Anotações (Estilo Input Cápsula do Perfil) */
#notes-section.card {
    border: none !important;
    border-radius: 30px !important;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 41, 155, 0.08);
    overflow: hidden;
}

#notes-section .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1.5rem 2.5rem;
}

#notes-section .card-header h5 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--primary-color);
}

/* O Textarea com visual do Editar Perfil */
#notes-textarea {
    background-color: #f8faff !important;
    border: 2px solid #eef2f7 !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.6;
    color: var(--dark-text) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#notes-textarea:focus {
    background-color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 10px 25px rgba(83, 158, 213, 0.15) !important;
    transform: translateY(-2px);
}

/* 6. Visualizadores (Estilo Luxury) */
.file-viewer-wrapper {
    border-radius: 25px !important;
    border: 2px solid #eef2f7 !important;
    background: #f8faff !important;
    margin-top: 2rem;
}

.file-viewer-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 1.2rem 2rem !important;
}

/* Ajustes Mobile */
@media (max-width: 991.98px) {
    .course-player-container {
        padding: 10px;
        flex-direction: column;
    }
    .course-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 300px;
        border-radius: 0 30px 30px 0 !important;
        z-index: 1060;
        transform: translateX(-100%);
    }
    .course-player-container.sidebar-visible .course-sidebar {
        transform: translateX(0);
    }
    .main-card-player {
        padding: 1.5rem;
        border-radius: 25px;
    }
    .lesson-title-main { font-size: 1.6rem; }
}

/* Botão Flutuante de Abrir Menu (Mobile) */
.btn-open-sidebar {
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
}




/* =================================================================== */
/* ===   SALA DE AULA: TOGGLE DESKTOP LUXURY (FIXO)               === */
/* =================================================================== */

/* 1. Estilização do Botão (Aba Vertical) */
#toggle-sidebar-desktop {
    position: fixed; /* Fica preso à tela, não à sidebar */
    left: 400px;    /* Alinhado exatamente onde a sidebar termina (380px) */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 80px;
    
    /* Gradiente Identitário do seu Projeto */
     /* Efeito Sprout: Começa quase transparente e brota para o Azul */
    background: linear-gradient(to right, rgba(70, 130, 180, 0.2) 0%, var(--primary-color) 100%);
    backdrop-filter: blur(4px); /* Suaviza a transição com o fundo */
    color: white;
    
    border: none;
    border-radius: 0 15px 15px 0; /* Arredondado só na direita */
    z-index: 1100; /* Acima de tudo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 4px 0 15px rgba(0, 41, 155, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#toggle-sidebar-desktop:hover {
    width: 30px; /* Expande levemente ao passar o mouse */
    filter: brightness(1.1);
}

/* 2. Comportamento quando a Sidebar está RECOLHIDA */
.sidebar-collapsed #toggle-sidebar-desktop {
    left: 0; /* O botão volta para o início da tela */
}

.sidebar-collapsed #toggle-sidebar-desktop i {
    transform: rotate(180deg); /* Inverte a seta */
}

/* 3. Ajuste da Sidebar e Conteúdo */
.course-sidebar {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.sidebar-collapsed .course-sidebar {
    margin-left: -400px; /* Move a coluna e puxa o conteúdo junto */
    opacity: 0;
    pointer-events: none;
}

/* Faz o conteúdo principal ocupar o espaço da sidebar */
.course-content {
     flex-grow: 1; /* Isso força ele a ocupar todo o espaço disponível */
    width: 100%;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sidebar-collapsed .course-content {
    margin-left: 0 !important;
    padding-left: 60px; /* Espaço para o botão não cobrir o texto */
}

/* Botão de Loja Sutil (Aprimorado) */
.btn-subtle-shopping {
    background: #f8faff;
    border: 1px solid #eef2f7;
    color: var(--gray-text);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-subtle-shopping:hover {
    background: white;
    color: var(--primary-color);
    border-color: var(--secondary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}


/* Transição suave de conteúdo */
.content-wrapper {
    transition: opacity 0.3s ease-in-out;
    min-height: 400px; /* Evita que o layout pule quando esvazia */
}

/* Spinner de carregamento (opcional) */
.content-wrapper.loading::after {
    content: "Carregando Aula...";
    display: block;
    text-align: center;
    padding: 50px;
    font-weight: 700;
    color: var(--primary-color);
}






/* =================================================================== */
/* ===   FIX: RENDERIZAÇÃO DE CONTEÚDO HTML (SUMMERNOTE/LMS)       === */
/* =================================================================== */

/* Classe que você deve usar na div que envolve o echo do conteúdo */
.render-html-content {
    width: 100%;
    overflow-wrap: break-word; /* Impede que textos longos sem espaço quebrem o layout */
    word-wrap: break-word;
    display: flow-root; /* Resolve o problema de container que não acompanha altura (Clearfix moderno) */
}

/* Força as imagens a NUNCA estourarem a largura da div */
.render-html-content img {
    max-width: 100% !important;
    height: auto !important; /* Mantém a proporção */
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Ajuste para Vídeos (YouTube/Vimeo) vindos do editor */
.render-html-content iframe, 
.render-html-content video, 
.render-html-content embed {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16 / 9; /* Mantém proporção de vídeo */
    border-radius: 12px;
}

/* Corrige tabelas que costumam quebrar o mobile */
.render-html-content table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    display: block; /* Permite scroll horizontal em tabelas gigantes */
    overflow-x: auto;
}

.render-html-content table td, 
.render-html-content table th {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
}

/* Corrige parágrafos e alinhamentos */
.render-html-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

/* Se o usuário usou float no Summernote, isso garante que o texto flua ao redor */
.render-html-content .note-float-left {
    float: left;
    margin-right: 15px;
}

.render-html-content .note-float-right {
    float: right;
    margin-left: 15px;
}

/* Limpa floats em dispositivos móveis para imagens não ficarem espremidas */
@media (max-width: 768px) {
    .render-html-content .note-float-left,
    .render-html-content .note-float-right {
        float: none !important;
        margin: 10px auto !important;
        display: block;
        text-align: center;
    }
}




/* =================================================================== */
/* ===   FIX: VISUALIZAÇÃO DE PDF (SALA DE AULA)                   === */
/* =================================================================== */

.pdf-viewer-container {
    width: 100%;
    /* Define uma altura baseada na altura da tela (80% da altura do navegador) */
    height: 80vh; 
    /* Define uma altura mínima para nunca ficar ilegível */
    min-height: 600px;
    background-color: #ebebeb;
    border-radius: 0 0 25px 25px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.pdf-viewer-container iframe {
    width: 100%;
    height: 100%; /* Agora ele herda os 80vh do pai */
    border: none;
}

/* Ajuste para Material Complementar (PDF/Áudio) */
.file-viewer-wrapper {
    margin-top: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 25px;
    overflow: hidden;
}

.file-viewer-header {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-viewer-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Ajuste para mobile: diminui um pouco a altura para caber melhor */
@media (max-width: 768px) {
    .pdf-viewer-container {
        height: 70vh;
        min-height: 450px;
    }
}


/* =================================================================== */
/* ===   FIX: PLAYER DE VÍDEO RESPONSIVO (SALA DE AULA)            === */
/* =================================================================== */

.video-responsive {
    position: relative;
    width: 100%;
    /* Truque para manter a proporção 16:9 */
    aspect-ratio: 16 / 9; 
    background-color: #000;
    border-radius: 25px; /* Arredondamento Luxury */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

/* Força o iframe (YouTube/Vimeo) a preencher 100% do container acima */
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Ajuste no container pai para garantir que ele permita o vídeo crescer */
.main-card-player {
    background: #ffffff;
    border-radius: 30px;
    padding: 2.5rem;
    width: 100%; /* Garante que o card ocupe o espaço total da área principal */
    max-width: 1200px; /* Limite de conforto para não esticar infinitamente em telas ultra-wide */
    margin-left: auto;
    margin-right: auto;
}

/* No mobile, reduzimos o padding do card para o vídeo ganhar mais tela */
@media (max-width: 768px) {
    .main-card-player {
        padding: 1rem;
        border-radius: 0; /* Remove arredondamento no mobile para "sangrar" na tela se desejar */
    }
    
    .video-responsive {
        border-radius: 12px; /* Arredondamento menor no celular */
        margin-bottom: 1.5rem;
    }
}











/* =================================================================== */
/* ===   EDITAR PERFIL: ESTILO HERO LUXURY (MODIFICAÇÃO VISUAL)    === */
/* =================================================================== */

/* 1. Container Principal (Fundo Clean) */
#editar_perfil_completo {
    background-color: #f8faff; /* Fundo azul gelo muito suave */
    min-height: 100vh;
}

/* 2. Transformação dos Cards (Sidebar e Conteúdo) */
#editar_perfil_completo .card {
    border: none !important;
    border-radius: 30px !important;
    background: #ffffff;
    /* Sombra Hero Premium */
    box-shadow: 0 20px 60px rgba(0, 41, 155, 0.1), 
                0 0 0 1px rgba(0, 41, 155, 0.02);
    overflow: visible; /* Necessário para efeitos de hover que saem da caixa */
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

/* 3. Headers dos Cards (Títulos das Abas) */
#editar_perfil_completo .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1.5rem 2rem;
}

#editar_perfil_completo .card-header h5 {
    font-family: var(--heading-font);
    /* Texto Gradiente */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.5px;
}

/* 4. Inputs e Selects (Estilo Hero) */
#editar_perfil_completo .form-control,
#editar_perfil_completo .form-select {
    background-color: #f8faff !important;
    border: 2px solid #eef2f7 !important;
    border-radius: 15px !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 0.95rem !important;
    color: var(--secondary-color) !important; /* Texto Azul Escuro */
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#editar_perfil_completo .form-control:focus,
#editar_perfil_completo .form-select:focus {
    background-color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 10px 20px rgba(83, 158, 213, 0.15) !important;
    transform: translateY(-2px);
}

/* Input Apenas Leitura (CPF, Email) */
#editar_perfil_completo .form-control[readonly],
#editar_perfil_completo .form-control:disabled {
    background-color: #eaeff5 !important;
    border-color: transparent !important;
    opacity: 0.7;
    cursor: not-allowed;
}

/* 5. Sidebar: Foto e Nome */
#editar_perfil_completo .card-body .text-center img.rounded-circle {
    /* Efeito de Borda Dupla (Branco + Dourado Sutil) */
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--gold-color), 
                0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

#editar_perfil_completo .card-body .text-center:hover img.rounded-circle {
    transform: scale(1.05) rotate(2deg);
}

#editar_perfil_completo h6.fw-bold {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 15px !important;
}

/* 6. Sidebar: Menu de Navegação (Pills) */
#editar_perfil_completo .nav-pills {
    gap: 8px; /* Espaço entre os itens */
}

#editar_perfil_completo .nav-pills .nav-link {
    color: var(--gray-text);
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-align: left; /* Garante alinhamento à esquerda */
}

#editar_perfil_completo .nav-pills .nav-link i {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-top: -2px;
}

#editar_perfil_completo .nav-pills .nav-link:hover {
    background-color: #f0f4f8;
    color: var(--primary-color);
    transform: translateX(5px); /* Move levemente para a direita */
}

/* Estado Ativo (O "Tchan" do Menu) */
#editar_perfil_completo .nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(70, 130, 180, 0.3);
    border: none;
}

/* 7. Área de Upload de Foto (Dentro da Aba Pessoais) */
#editar_perfil_completo label[for="profile_picture_input"] {
    background-color: #fff;
    color: var(--primary-color);
    border: 2px dashed var(--primary-color);
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    box-shadow: none;
}

#editar_perfil_completo label[for="profile_picture_input"]:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-style: solid;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* 8. Botão de Salvar (Sticky Bottom) */
#editar_perfil_completo .sticky-bottom {
    background: rgba(255, 255, 255, 0.9) !important; /* Efeito vidro */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.05) !important;
    border-radius: 0 0 30px 30px; /* Arredonda embaixo para casar com o design */
}

#update-profile-btn {
    /* Estilo Hero Button */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    border: none;
    border-radius: 50px;
    padding: 12px 40px;
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(0, 41, 155, 0.25);
    transition: all 0.3s ease;
}

#update-profile-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 41, 155, 0.35);
    filter: brightness(1.1);
}

#update-profile-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* 9. Labels dos Formulários */
#editar_perfil_completo .form-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =================================================================== */
/* === CORREÇÃO DE INPUT GROUPS (CÁPSULA UNIFICADA)               === */
/* =================================================================== */

/* 1. Estiliza o ÍCONE (lado esquerdo) para casar com o Input Hero */
#editar_perfil_completo .input-group-text {
    background-color: #f8faff;       /* Mesma cor de fundo do input */
    border: 2px solid #eef2f7;       /* Mesma borda grossa */
    border-right: none;              /* REMOVE a borda direita para colar */
    color: var(--primary-color);     /* Cor do ícone */
    
    /* Arredonda só a esquerda (15px) */
    border-radius: 15px 0 0 15px !important; 
    
    padding-left: 1.2rem;            /* Espaçamento generoso */
    padding-right: 0.5rem;           /* Aproxima o ícone do texto */
    transition: all 0.3s ease;
}

/* 2. Corrige o INPUT quando ele vem DEPOIS de um ícone (Ex: Email) */
#editar_perfil_completo .input-group .input-group-text + .form-control {
    border-left: none;               /* REMOVE a borda esquerda para colar */
    
    /* Arredonda só a direita (15px) */
    border-radius: 0 15px 15px 0 !important; 
    
    padding-left: 0;                 /* Texto começa logo após o ícone */
}

/* 3. Foco Unificado: Quando clica no input, acende a borda do ícone também */
#editar_perfil_completo .input-group:focus-within .input-group-text {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 10px 0 0 rgba(83, 158, 213, 0.15) inset; /* Sombra interna sutil */
}
#editar_perfil_completo .input-group:focus-within .form-control {
    box-shadow: none !important; /* Remove sombra duplicada na emenda */
    /* Mantemos a sombra externa definida anteriormente no .form-control:focus */
}


/* --- CASOS ESPECIAIS: BOTÕES À DIREITA (Busca CEP / Ver Senha) --- */

/* 4. O Input quando tem um botão depois dele */
#editar_perfil_completo .input-group:not(.has-validation) > .form-control:not(:last-child) {
    border-right: none;              /* Remove borda direita */
    border-radius: 15px 0 0 15px !important;
}

/* 5. O Botão anexado ao input (Ex: Olho da senha, Lupa do CEP) */
#editar_perfil_completo .input-group > .btn {
    border: 2px solid #eef2f7;       /* Borda igual ao input */
    border-left: none;               /* Remove borda esquerda */
    border-radius: 0 15px 15px 0 !important;
    background-color: #f8faff;
    color: var(--gray-text);
    padding-right: 1.2rem;
    z-index: 0; /* Evita sobrepor a borda do input no hover */
}

/* Hover no botão anexo */
#editar_perfil_completo .input-group > .btn:hover {
    background-color: #eef2f7;
    color: var(--primary-color);
    border-color: #eef2f7; /* Mantém a cor da borda fixa para não quebrar o visual */
}

/* 10. Ajustes Mobile */
@media (max-width: 991.98px) {
    #editar_perfil_completo .card {
        border-radius: 20px !important; /* Menos arredondado no mobile para ganhar espaço */
    }
    
    #editar_perfil_completo .sticky-top {
        position: static !important; /* Remove o sticky da sidebar no mobile */
        z-index: 0 !important;
    }
    
    #editar_perfil_completo .nav-pills {
        flex-direction: row !important; /* Transforma menu vertical em horizontal scrollável */
        overflow-x: auto;
        padding-bottom: 10px;
        flex-wrap: nowrap;
    }
    
    #editar_perfil_completo .nav-pills .nav-link {
        white-space: nowrap;
        font-size: 0.9rem;
        padding: 10px 15px;
    }
}





/* --- Seção Principal de Notícias --- */
.todas-noticias-section {
    background-color: #f8f9fa; /* Fundo levemente acinzentado */
}

/* --- Cabeçalho Simples da Página --- */
.page-header h1 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--dark-text);
}

.page-header p.lead {
    color: var(--gray-text);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Filtros de Categoria --- */
.news-filters .filter-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    margin: 0.25rem;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: var(--dark-text);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.news-filters .filter-btn:hover {
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: var(--primary-color);
}

.news-filters .filter-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(83, 158, 213, 0.3);
}

/* --- Container da Lista de Notícias --- */
.news-list-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Card de Notícia (Layout Horizontal) --- */
.news-card {
    display: flex;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0, 65, 155, 0.07);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 2rem;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 65, 155, 0.1);
}

/* Wrapper da Imagem (Esquerda) */
.news-card-image-link {
    flex-shrink: 0;
    width: 300px;
    position: relative;
    display: block;
    overflow: hidden;
}

.news-card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-card-image-link img {
    transform: scale(1.05);
}

/* Categoria sobre a imagem */
.news-card-category {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    background-color: rgba(0, 65, 155, 0.9);
    color: #fff;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Corpo do Card (Direita) */
.news-card-body {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.news-card-date {
    font-size: 0.8rem;
    color: var(--gray-text);
    margin-bottom: 0.5rem;
}

.news-card-title {
    font-family: var(--heading-font);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.news-card-title a {
    color: var(--dark-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-card-title a:hover {
    color: var(--primary-color);
}

.news-card-text {
    font-size: 0.95rem;
    color: var(--gray-text);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Máximo de 3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-readmore {
    margin-top: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
    align-self: flex-start;
}

.news-card-readmore:hover {
    color: var(--secondary-color);
}

.news-card-readmore i {
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.news-card-readmore:hover i {
    transform: translateX(5px);
}

/* --- Responsividade para Telas Pequenas --- */
@media (max-width: 767.98px) {
    .news-card {
        flex-direction: column; /* Empilha os itens verticalmente */
    }

    .news-card-image-link {
        width: 100%;
        height: 220px;
    }

    .news-card-body {
        padding: 1.5rem;
    }
}


.home-news-header.section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* Estilo para a "tag" pequena acima do título */
.home-news-header .section-tag {
    display: inline-block;
    padding: 5px 15px;
    background-color: var(--tertiary-color); /* Usando suas variáveis de cor */
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Estilo para o título principal da seção */
.home-news-header .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--dark-text); /* Garante a cor escura do texto */
    margin-top: 10px;
    margin-bottom: 0; /* Remove a margem inferior para não criar espaçamento duplo */
    padding-bottom: 0; /* Remove o padding para não interferir no layout */
}

/* Garante que a pseudo-classe ::after não seja herdada de outras regras genéricas */
.home-news-header .section-title::after {
    content: none;
}











/* Escopo principal para evitar conflitos */
.noticia-detalhe-page {
    background-color: #f8f9fa; /* Fundo geral da página */
}

/* --- Hero da Notícia --- */
.noticia-detalhe-page .noticia-hero {
    margin-top: -10px;
    padding: 8rem 0;
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: flex-end; /* Alinha o conteúdo na base */
}

/* Overlay para garantir a legibilidade do texto */
.noticia-detalhe-page .noticia-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.2) 80%);
}

.noticia-detalhe-page .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.noticia-detalhe-page .noticia-categoria {
    display: inline-block;
    padding: 5px 15px;
    background-color: var(--primary-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.noticia-detalhe-page .noticia-titulo {
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.noticia-detalhe-page .noticia-data-publicacao {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}

/* --- Conteúdo Principal do Artigo --- */
.noticia-detalhe-page .article-main-content {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.noticia-detalhe-page .article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #343a40;
}

/* Estilos para elementos dentro do conteúdo HTML */
.noticia-detalhe-page .article-body h2,
.noticia-detalhe-page .article-body h3,
.noticia-detalhe-page .article-body h4 {
    font-family: var(--heading-font);
    color: var(--dark-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.noticia-detalhe-page .article-body p {
    margin-bottom: 1.5rem;
}

.noticia-detalhe-page .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.5rem 0;
}

.noticia-detalhe-page .article-body a {
    color: var(--primary-color);
    text-decoration: underline;
}
.noticia-detalhe-page .article-body a:hover {
    color: var(--secondary-color);
}

.noticia-detalhe-page .article-body ul,
.noticia-detalhe-page .article-body ol {
    padding-left: 25px;
    margin-bottom: 1.5rem;
}

/* --- Barra Lateral (Sidebar) --- */
.noticia-detalhe-page .sidebar-widget {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    position: sticky; /* Efeito "grudento" ao rolar */
    top: 90px; /* Distância do topo (navbar + padding) */
}

.noticia-detalhe-page .widget-title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.noticia-detalhe-page .lista-noticias-recentes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.noticia-detalhe-page .lista-noticias-recentes li a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.noticia-detalhe-page .lista-noticias-recentes li:last-child a {
    border-bottom: none;
}

.noticia-detalhe-page .lista-noticias-recentes li a:hover {
    background-color: #f8f9fa;
}

.noticia-detalhe-page .recente-data {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-text);
    margin-bottom: 0.25rem;
}

.noticia-detalhe-page .recente-titulo {
    font-weight: 500;
    color: var(--dark-text);
    line-height: 1.4;
}

.noticia-detalhe-page .btn-outline-primary-custom {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-radius: 10px;
}
.noticia-detalhe-page .btn-outline-primary-custom:hover {
    background-color: var(--primary-color);
    color: #fff;
}


/* --- Responsividade --- */
@media (max-width: 991.98px) {
    .noticia-detalhe-page .noticia-titulo {
        font-size: 2.2rem;
    }
    .noticia-detalhe-page .article-sidebar {
        margin-top: 2rem;
    }
    .noticia-detalhe-page .sidebar-widget {
        position: static; /* Desativa o "grudento" no mobile */
    }
}



/* =================================================================== */
/* ===   PÁGINA DE DETALHES DO CURSO: ESTILO HERO LUXURY           === */
/* =================================================================== */

/* 1. Fundo da Página (Azul Gelo Suave) */
.course-details-page {
    background-color: #f8faff !important;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* 2. Breadcrumb (Navegação Superior) */
.course-breadcrumb {
    font-family: var(--body-font);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.course-breadcrumb a {
    color: var(--gray-text);
    font-weight: 700;
    transition: color 0.3s ease;
}
.course-breadcrumb a:hover {
    color: var(--primary-color);
}

/* 3. Título Principal */
.course-title-main {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 3rem;
    color: var(--dark-text);
    letter-spacing: -1.5px;
    line-height: 1.1;
}

/* 4. Imagem de Destaque */
.course-image-wrapper {
    position: relative;
    border-radius: 40px; /* Arredondamento ultra-luxury */
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 41, 155, 0.15); /* Sombra profunda e suave */
    border: 5px solid #fff; /* Moldura branca tipo Polaroid Premium */
}

.course-image-wrapper img {
    width: 100%;
    
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.course-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Badge de Desconto Flutuante */
.course-image-wrapper .discount-badge {
    background: #dc3545;
    color: #fff;
    font-weight: 800;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.3);
}

/* 5. Painel de Compra (Card à Direita) */
.course-info-panel {
    background: #ffffff !important;
    border-radius: 35px !important;
    padding: 3rem !important;
    box-shadow: 0 30px 70px rgba(0, 41, 155, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Seção de Preço no Painel */
.price-section {
    background-color: #f8faff !important; /* Fundo interno sutil */
    border-radius: 25px;
    padding: 2rem !important;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Formatação para o preço quando NÃO há promoção na página de detalhes */
.course-details-page .price-section .price {
    font-size: 3rem;
    font-weight: 900;
    font-family: var(--heading-font);
    color: var(--primary-color); /* Ou var(--dark-text) se preferir preto */
    text-align: center;
    line-height: 1;
    margin: 0;
}

/* Ajuste opcional para dispositivos móveis para não ficar grande demais */
@media (max-width: 991.98px) {
    .course-details-page .price-section .price {
        font-size: 2.5rem;
    }
}

.price-section .promotional-price {
    font-size: 3rem !important;
    background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

/* Ajuste específico para o preço riscado na seção de investimento do curso */
.course-details-page .price-section .price-wrapper .original-price {
    top: -16px;      /* Move para cima (estava 0) */
    left: 80%;         /* Move para dentro/esquerda (estava 100%) */
    margin-left: 0;  /* Remove a margem lateral */
    font-size: 0.9rem; /* Opcional: aumenta um pouco para ficar legível já que está acima */
}


/* Benefícios (Lista) */
.course-benefits {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid #eef2f7;
}
.course-benefits li {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.course-benefits li i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* 6. Seção de Descrição (Conteúdo) */
.course-description-section {
    background: #ffffff !important;
    border-radius: 35px !important;
    padding: 4rem !important;
    margin-top: 4rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

.course-description-section h2 {
    font-family: var(--heading-font);
    font-weight: 800;
    color: var(--primary-color);
    border-bottom: none !important;
    font-size: 2.2rem;
    margin-bottom: 2rem;
    
    /* Centralização Flexbox */
    display: flex;
    align-items: center;
    justify-content: center; /* Alinha o texto no centro horizontal */
    text-align: center;
    gap: 20px;
}

/* Linha da ESQUERDA */
.course-description-section h2::before {
    content: '';
    flex-grow: 1;
    height: 2px;
    /* Gradiente invertido para sumir para a esquerda */
    background: linear-gradient(to left, var(--secondary-color), transparent);
}

/* Linha da DIREITA */
.course-description-section h2::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    /* Gradiente para sumir para a direita */
    background: linear-gradient(to right, var(--secondary-color), transparent);
}

/* Ajuste para mobile para as linhas não espremerem o texto */
@media (max-width: 768px) {
    .course-description-section h2 {
        font-size: 1.8rem;
    }
    .course-description-section h2::before,
    .course-description-section h2::after {
        display: none; /* Esconde as linhas no mobile para priorizar o espaço do texto */
    }
}

/* 7. Accordion (Conteúdo do Curso) */
#courseCurriculumAccordion {
    border: none !important;
    gap: 15px;
    display: flex;
    flex-direction: column;
}

#courseCurriculumAccordion .accordion-item {
    border: 2px solid #eef2f7 !important;
    border-radius: 20px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

#courseCurriculumAccordion .accordion-button {
    background: #fff !important;
    font-weight: 700 !important;
    padding: 1.5rem !important;
    font-size: 1.2rem !important;
}

#courseCurriculumAccordion .accordion-button:not(.collapsed) {
    color: var(--primary-color) !important;
    background-color: #f8faff !important;
    border-bottom: 2px solid #eef2f7;
}

#courseCurriculumAccordion .list-group-item {
    border: none;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--gray-text);
    background: transparent;
    transition: all 0.2s ease;
}

#courseCurriculumAccordion .list-group-item:hover {
    background: #f0f4f8;
    color: var(--primary-color);
    padding-left: 2rem;
}

/* Ajustes Responsivos */
@media (max-width: 991.98px) {
    .course-title-main { font-size: 2.2rem; }
    .course-info-panel { margin-top: 2rem; padding: 2rem !important; }
    .course-description-section { padding: 2rem !important; }
    .price-section .promotional-price { font-size: 2.5rem !important; }
}


/* =================================================================== */
/* === PÁGINA DE DETALHES DO CURSO: BOTÕES E ALERTAS PREMIUM       === */
/* =================================================================== */

/* Container de Ações */
#course-actions-container {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 25px;
    /* Sombra Hero sutil para destacar o bloco de botões */
    box-shadow: 0 15px 40px rgba(0, 41, 155, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* 1. Botão "Comprar Agora" (O Principal - Estilo Gradiente Hero) */
.btn-buy-course {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--heading-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem 1.5rem !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(70, 130, 180, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-buy-course:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(70, 130, 180, 0.35) !important;
    filter: brightness(1.1);
}

/* 2. Botão "Adicionar ao Carrinho" (Secundário - Estilo Contorno/Outline) */
.btn-carrinho-course {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    font-family: var(--heading-font);
    font-weight: 700;
    padding: 0.8rem 1.5rem !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

.btn-carrinho-course:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(70, 130, 180, 0.15) !important;
}

/* 3. Botão "Continuar Comprando" (Link Discreto) */
.btn-link.text-muted {
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.btn-link.text-muted:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* 4. Alerta: "Curso já está no carrinho" (Estilo Cápsula Luxury) */
#already-in-cart-actions .alert-info {
    background-color: #f0f7ff !important;
    color: var(--primary-color) !important;
    border: 2px dashed var(--secondary-color) !important; /* Estilo tracejado do upload */
    font-weight: 700;
    font-size: 1rem;
}

/* 5. Botão "Finalizar Pedido" (Quando já está no carrinho - Estilo Sucesso) */
.btn-success.btn-lg.arredonda_25 {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    border: none !important;
    font-family: var(--heading-font);
    font-weight: 800;
    padding: 1rem !important;
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2) !important;
}

.btn-success.btn-lg.arredonda_25:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.3) !important;
}

/* Ajuste de Espaçamento para o Container em Mobile */
@media (max-width: 767.98px) {
    #course-actions-container {
        padding: 1.25rem;
        margin-top: 1rem;
        border-radius: 20px;
    }
    
    .btn-buy-course, .btn-carrinho-course {
        font-size: 0.95rem !important;
        padding: 0.75rem !important;
    }
}



.btn-comprado {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.55rem 0.80rem !important;
    border-radius: 25px !important;
    box-shadow: 0 10px 25px rgba(70, 130, 180, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-comprado:hover {
    
    box-shadow: 0 15px 30px rgba(70, 130, 180, 0.35) !important;
    filter: brightness(1.1);
}




/* 1. Botão "Comprar Agora" (O Principal - Estilo Gradiente Hero) */
.btn-comprado2 {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--heading-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem 1.5rem !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(70, 130, 180, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-comprado2:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(70, 130, 180, 0.35) !important;
    filter: brightness(1.1);
}




/* =================================================================== */
/* ===   PÁGINA MINHA BIBLIOTECA: ESTILO HERO LUXURY               === */
/* =================================================================== */

/* 1. Ajuste do Fundo e Cabeçalho */
body.pagina-biblioteca {
    padding-top: 0 !important;
    background: #f8faff;
    overflow-x: hidden;
}

body.pagina-biblioteca #main-navbar,
body.pagina-biblioteca #pagar-flutuante-btn,
body.pagina-biblioteca #cart-overlay,
body.pagina-biblioteca #cart-sidebar,
body.pagina-biblioteca footer {
    display: none !important;
}

.account-tabs { gap:.45rem; padding:.4rem; background:#fff; border:1px solid #e8eef5; border-radius:18px; box-shadow:0 10px 30px rgba(0,41,155,.05); }
.account-tabs .nav-link { display:flex; align-items:center; gap:.45rem; border-radius:13px; color:var(--gray-text); font-weight:700; white-space:nowrap; }
.account-tabs .nav-link.active { background:linear-gradient(135deg,var(--secondary-color),var(--primary-color)); color:#fff; }
.account-panel { padding:clamp(1rem,3vw,2rem); background:#fff; border:1px solid #e8eef5; border-radius:24px; box-shadow:0 15px 45px rgba(0,41,155,.06); }
.account-panel-heading { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; }
.account-panel-heading h2,.account-panel>h2 { margin:0; color:var(--dark-text); font-weight:800; }
.account-panel-heading p { margin:0; color:var(--gray-text); }
.account-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--secondary-color),var(--primary-color)); font-size:1.35rem; }
.account-status,.account-order-status { display:inline-flex; padding:.35rem .65rem; border-radius:999px; background:#eef3fb; color:var(--primary-color); font-size:.76rem; font-weight:800; white-space:nowrap; }
.account-status.is-ativa,.account-status.is-teste { background:#e8f7ef; color:#16794a; }
.account-status.is-inadimplente { background:#fff3d6; color:#956400; }
.account-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1.5rem 0; }
.account-facts>div { padding:1rem; border-radius:16px; background:#f8faff; border:1px solid #e8eef5; }
.account-facts small,.account-facts strong { display:block; }
.account-facts small { color:var(--gray-text); margin-bottom:.25rem; }
.account-panel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; padding-top:1rem; border-top:1px solid #edf1f6; }
.account-empty { text-align:center; padding:4rem 1rem; color:var(--gray-text); }
.account-empty>i { display:block; margin-bottom:1rem; font-size:3rem; color:#cbd7e7; }
.account-empty h2 { color:var(--dark-text); font-size:1.35rem; }
.account-empty.compact { padding:1.5rem; }
@media(max-width:767.98px){.account-panel-heading{grid-template-columns:auto 1fr}.account-status{grid-column:1/-1;width:max-content}.account-facts{grid-template-columns:1fr}.account-tabs{border-radius:14px}.account-tabs .nav-link{font-size:.82rem}.account-panel{border-radius:18px}.account-panel-actions .btn{width:100%}}

.library-page {
    max-width: 1320px;
    padding-top: 0 !important;
}

.header-biblioteca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100vw;
    min-height: 82px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 1rem max(1.15rem, calc((100vw - 1296px) / 2));
    background: #fff;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    box-shadow: none;
}

.header-biblioteca h1 {
    font-family: var(--heading-font);
    /* Texto Gradiente Identitário */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: .05rem 0 .15rem;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
}

.library-heading { min-width: 0; }
.library-eyebrow {
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.library-heading p {
    margin: 0;
    color: var(--gray-text);
    font-size: .84rem;
}
.library-header-actions,
.library-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.library-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: .28rem;
    padding: .4rem .65rem;
    color: var(--gray-text);
    background: #f8faff;
    border: 1px solid #e8eef5;
    border-radius: 999px;
    font-size: .72rem;
    white-space: nowrap;
}
.library-summary strong {
    color: var(--dark-text);
    font-size: .84rem;
}
.header-biblioteca .library-catalog-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: .4rem .85rem !important;
    border-width: 1px !important;
    border-radius: 999px !important;
    font-family: var(--heading-font);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.header-biblioteca .library-catalog-link i { line-height: 1; }
.library-action-buttons { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; }
.header-biblioteca .library-clear-button { min-height: 38px; border-radius: 999px; font-size: .78rem; font-weight: 750; }

/* 2. Filtros (Chips de Navegação Luxury) */
.filter-container {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 0;
    background: rgba(248, 250, 255, .94);
    backdrop-filter: blur(8px);
}

.btn-filter2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    background-color: #ffffff !important;
    border: 2px solid #eef2f7 !important;
    color: var(--gray-text) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.btn-filter2:hover {
    border-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
}

/* 3. Grid e Cards da Biblioteca */
#library-grid {
    margin-top: 2rem;
}

.item-biblioteca .product-card {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important; /* Arredondamento Luxury */
    box-shadow: 0 15px 45px rgba(0, 41, 155, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.item-biblioteca .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 41, 155, 0.12) !important;
}

/* Container da Imagem dentro do card */
.item-biblioteca .product-card-image-container {
    height: 160px; /* Um pouco mais baixo para grid denso */
    border-radius: 30px 30px 0 0 !important;
    position: relative;
    overflow: hidden;
}

/* Badge de Bônus / Combo */
.item-biblioteca .product-card-image-container .badge.bg-warning {
    background-color: var(--gold-color) !important;
    color: var(--dark-text) !important;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 50px 0 20px 50px; /* Forma orgânica */
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 4. Textos e Botões de Ação do Card */
.item-biblioteca .card-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem !important;
    line-height: 1.3;
    color: var(--dark-text);
    margin-top: 0.5rem;
}

/* Badge de Tipo de Produto (Curso, PDF, etc) */
.item-biblioteca .badge.bg-light {
    background-color: #f8faff !important;
    border: 1px solid #eef2f7 !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    border-radius: 8px;
    padding: 5px 10px;
}

/* Botão de Ação (Acessar/Assistir) */
.item-biblioteca .btn-primary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    border: none !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* Botão circular flutuante */
    box-shadow: 0 8px 15px rgba(70, 130, 180, 0.3) !important;
    transition: all 0.3s ease;
}

.item-biblioteca .btn-primary:hover {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.1);
}

/* 5. Estado Vazio */
.item-biblioteca .bi-folder-x {
    color: #eef2f7 !important;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.02));
}

/* 6. Responsividade Mobile */
@media (max-width: 767.98px) {
    .library-page { padding-top: 0 !important; }
    .header-biblioteca { align-items: flex-start; flex-direction: column; gap: .75rem; padding: .9rem; }
    .library-header-actions { justify-content: space-between; width: 100%; }
    .library-summary { gap: .3rem; }
    .library-summary span { padding: .32rem .48rem; font-size: .65rem; }
    .library-summary strong { font-size: .76rem; }
    .header-biblioteca h1 {
        font-size: 1.65rem;
    }
    
    .item-biblioteca .product-card-image-container {
        height: 130px;
    }
    
    .item-biblioteca .card-body {
        padding: 1rem !important;
    }

    /* Scroll horizontal de filtros mais elegante */
    .filter-container .d-flex {
        padding-bottom: 8px;
    }
}

@media (max-width: 479.98px) {
    .library-header-actions { align-items: stretch; flex-direction: column; }
    .library-summary { justify-content: space-between; }
    .library-action-buttons { width: 100%; }
    .header-biblioteca .library-catalog-link, .header-biblioteca .library-clear-button { width: 100%; }
}

/* =================================================================== */
/* ===   LIMPEZA DE POLUIÇÃO E RESETS DE FOCO (BOOTSTRAP CLEANUP)  === */
/* =================================================================== */

/* 1. Remove a sombra azul (glow) de todos os elementos de formulário e botões */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
.accordion-button:focus,
.btn-filter2:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* =================================================================== */
/* ===   ESTILIZAÇÃO DE ESTADO ATIVO: BOTÕES DE FILTRO LUXURY      === */
/* =================================================================== */

/* 1. Estado "Selecionado" (.active) e Estado "Sendo Clicado" (:active) */
.btn-filter2.active, 
.btn-filter2:active {
    border: 2px solid var(--primary-color) !important;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) padding-box !important;
    color: #ffffff !important;
    border-radius: 50px !important;
}



/* 3. Limpeza de links e elementos clicáveis */
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 4. Reset do Accordion (Muito comum ele "sujar" com fundo azul claro) */
.accordion-button:not(.collapsed) {
    /* Remove o azul padrão e usa a cor do seu tema ou transparente */
    background-color: transparent !important; 
    box-shadow: none !important;
}

/* 5. Customização do Focus (Opcional - Substitui o azul por um sutil do seu tema) */
/* Se você quiser que o usuário saiba onde está o foco (acessibilidade), 
   use uma sombra bem sutil da sua cor primária em vez do azul padrão */
.form-control:focus,
#notes-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(70, 130, 180, 0.15) !important; /* SteelBlue com 15% de opacidade */
}

/* 6. Remove o "azul de seleção" que o Bootstrap coloca em alguns navegadores no mobile */
.btn, .btn-filter2, .card {
    -webkit-tap-highlight-color: transparent;
}


/* =================================================================== */
/* ===   ESTILO LUXURY: BOTÃO CONTINUAR COMPRANDO (VOLTAR)        === */
/* =================================================================== */

.header-biblioteca .btn-outline-primary.arredonda_25 {
    /* 1. Base e Alinhamento */
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    
    /* 2. Forma Luxury (Pílula Perfeita) */
    border-radius: 50px !important; 
    padding: 10px 30px !important;
    
    /* 3. Tipografia Montserrat */
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    
    /* 4. Flexbox para ícone e texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 5. Transição Suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 12px rgba(70, 130, 180, 0.08);
}

/* Estado de Hover (Inversão com Elevação) */
.header-biblioteca .btn-outline-primary.arredonda_25:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(70, 130, 180, 0.25);
}

/* Estado de Clique (Active) - Resolve a poluição visual */
.header-biblioteca .btn-outline-primary.arredonda_25:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(70, 130, 180, 0.15) !important;
    outline: none !important;
}

/* Limpeza do foco do Bootstrap */
.header-biblioteca .btn-outline-primary.arredonda_25:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Estilo do Ícone Interno */
.header-biblioteca .btn-outline-primary.arredonda_25 i {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Pequena animação no ícone ao passar o mouse */
.header-biblioteca .btn-outline-primary.arredonda_25:hover i {
    transform: scale(1.2);
}

/* Ajuste Responsivo */
@media (max-width: 767.98px) {
    .header-biblioteca .btn-outline-primary.arredonda_25 {
        padding: 8px 20px !important;
        font-size: 0.75rem;
        width: auto; /* Garante que não estique na tela toda se não quiser */
    }
}

/* ===================================================================
   SALA DE AULA V2 — AMBIENTE DE ESTUDO EM TELA INTEIRA
   =================================================================== */
body.pagina-curso-acessar {
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
}

.pagina-curso-acessar .course-player-container {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    width: 100%;
    height: 100dvh !important;
    min-height: 0;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff;
    transition: grid-template-columns .25s ease;
}

.pagina-curso-acessar .course-sidebar {
    position: relative;
    top: auto !important;
    width: 320px;
    height: 100dvh !important;
    min-width: 0;
    border: 0 !important;
    border-right: 1px solid #e3e9f1 !important;
    border-radius: 0 !important;
    box-shadow: none;
    background: #f8fafc !important;
    overflow: hidden;
    z-index: 1045;
}

.pagina-curso-acessar .sidebar-header { padding: 18px; border-bottom: 1px solid #e3e9f1; background: #fff; }
.pagina-curso-acessar .sidebar-quick-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pagina-curso-acessar .sidebar-header .back-link { margin: 0; color: #536174; font-size: .72rem; letter-spacing: .04em; }
.pagina-curso-acessar .btn-close-sidebar { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: #edf2f7; color: #334155; }
.pagina-curso-acessar .sidebar-header .course-title { margin: 0; color: #172033; background: none; -webkit-text-fill-color: initial; font-size: 1.08rem; line-height: 1.3; }
.course-progress-summary { margin-top: 14px; }
.course-progress-summary > div:first-child { display: flex; justify-content: space-between; color: #64748b; font-size: .72rem; }
.course-progress-summary strong { color: var(--primary-color); }
.course-progress-summary .progress { height: 5px; margin: 7px 0 6px; background: #e4ebf2; }
.course-progress-summary .progress-bar { background: var(--primary-color); transition: width .3s ease; }
.course-progress-summary small { color: #7b8797; font-size: .67rem; }

.pagina-curso-acessar .sidebar-content { padding: 10px; background: #f8fafc; }
.course-module { border-bottom: 1px solid #e5ebf2; }
.course-module:last-child { border-bottom: 0; }
.course-module-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 10px; border: 0; background: transparent; color: #263549; text-align: left; }
.course-module-toggle > span { min-width: 0; overflow: hidden; font-size: .78rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.course-module-toggle small { display: block; margin-bottom: 2px; color: #8290a3; font-size: .62rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.course-module-toggle > i { flex: 0 0 auto; color: #8492a6; font-size: .75rem; transition: transform .2s ease; }
.course-module-toggle:not(.collapsed) > i { transform: rotate(180deg); }
.pagina-curso-acessar .lesson-list { gap: 2px; padding: 0 0 10px; background: transparent; }
.pagina-curso-acessar .lesson-list li a { gap: 10px; min-height: 44px; padding: 7px 9px !important; border: 0; border-radius: 8px; color: #576579 !important; font-size: .76rem; font-weight: 600; }
.pagina-curso-acessar .lesson-list li a:hover { transform: none; background: #eaf1f7; }
.pagina-curso-acessar .lesson-list li.active a { color: #17466e !important; background: #e1eff9 !important; box-shadow: none; }
.pagina-curso-acessar .lesson-list li.completed:not(.active) a { color: #386b4a !important; }
.lesson-list .lesson-status-icon { width: 18px; flex: 0 0 18px; color: #8290a3; text-align: center; }
.lesson-list li.completed .lesson-status-icon { color: #249454; }
.lesson-list li a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-list li a small { display: block; color: #8a96a6; font-size: .59rem; font-weight: 600; text-transform: uppercase; }

.pagina-curso-acessar .course-content { width: 100%; height: 100dvh; min-width: 0; padding: 0 !important; overflow: auto; background: #fff; }
.study-topbar { position: sticky; top: 0; z-index: 1020; display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 20px; border-bottom: 1px solid #e7ecf2; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.study-topbar-main { display: flex; min-width: 0; align-items: center; gap: 11px; }
.study-topbar-main > div { min-width: 0; display: flex; flex-direction: column; }
.study-topbar-main small { overflow: hidden; color: #718096; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.study-topbar-main strong { overflow: hidden; color: #1e293b; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
#toggle-sidebar-desktop,
.pagina-curso-acessar .btn-open-sidebar { position: static; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border: 1px solid #dce4ed; border-radius: 9px !important; background: #fff !important; color: #40536a; box-shadow: none !important; transform: none; }
#toggle-sidebar-desktop:hover,
.pagina-curso-acessar .btn-open-sidebar:hover { width: 36px; color: var(--primary-color); background: #eef6fc !important; }
.study-catalog-link { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #536174; font-size: .72rem; font-weight: 700; text-decoration: none; }
.study-catalog-link:hover { color: var(--primary-color); }

.lesson-stage { width: 100%; padding: 24px clamp(20px, 3vw, 48px) 32px; }
.lesson-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.lesson-kicker { color: var(--primary-color); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lesson-heading h1 { margin: 3px 0 0; color: #182235; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; }
.pagina-curso-acessar .content-wrapper { min-height: 0; }
.pagina-curso-acessar .video-responsive { width: 100%; margin: 0; border-radius: 10px; box-shadow: none; }
.pagina-curso-acessar .file-viewer-wrapper { margin: 0; border: 1px solid #dfe6ee !important; border-radius: 10px !important; box-shadow: none; background: #fff !important; }
.pagina-curso-acessar .file-viewer-header { min-height: 48px; padding: 8px 12px !important; background: #f8fafc !important; }
.pagina-curso-acessar .file-viewer-header > div { display: flex; align-items: center; gap: 7px; color: #30445c; font-size: .8rem; }
.pagina-curso-acessar .pdf-viewer-container { height: calc(100dvh - 190px); min-height: 520px; border: 0; border-radius: 0 0 9px 9px; }
.pagina-curso-acessar .render-html-content { width: 100%; padding: clamp(18px, 3vw, 40px); border: 1px solid #e4eaf1; background: #fbfcfe; }
.pagina-curso-acessar .render-html-content > :first-child { margin-top: 0; }
.audio-study-player { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; min-height: 150px; padding: clamp(18px, 4vw, 42px); border-block: 1px solid #e3e9f0; background: #f8fafc; }
.audio-study-player > i { color: var(--primary-color); font-size: 2rem; }
.audio-study-player > div { display: flex; flex-direction: column; gap: 10px; }
.audio-study-player audio { width: 100%; }

.lesson-about { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5eaf0; }
.lesson-about h2 { margin: 0 0 6px; font-size: .92rem; }
.lesson-about p { margin: 0; color: #627084; font-size: .83rem; line-height: 1.6; }
.lesson-actions { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; margin-top: 24px; padding-block: 18px; border-block: 1px solid #e5eaf0; }
.lesson-nav-link { display: inline-flex; max-width: 100%; align-items: center; gap: 9px; color: #34465c; text-decoration: none; }
.lesson-nav-link > span { min-width: 0; overflow: hidden; font-size: .75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lesson-nav-link small { display: block; color: #8793a3; font-size: .6rem; font-weight: 600; text-transform: uppercase; }
.lesson-nav-link:hover { color: var(--primary-color); }
.lesson-nav-link.is-next { justify-content: flex-end; text-align: right; }
#toggle-lesson-complete { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--primary-color); border-radius: 9px; color: var(--primary-color); background: #fff; font-size: .72rem; font-weight: 750; }
#toggle-lesson-complete.is-complete { border-color: #249454; color: #176b3b; background: #edf9f2; }

.study-notes { margin-top: 14px; border-bottom: 1px solid #e5eaf0; }
.study-notes summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px; cursor: pointer; color: #34465c; list-style: none; }
.study-notes summary::-webkit-details-marker { display: none; }
.study-notes summary > span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; }
.study-notes summary > small { color: #7d8998; font-size: .67rem; }
.study-notes summary > small.saved { color: #21844b; }
.study-notes summary > small.error { color: #b42318; }
.study-notes > div { padding-bottom: 16px; }
.pagina-curso-acessar #notes-textarea { min-height: 130px; padding: 13px !important; border: 1px solid #dce4ed !important; border-radius: 8px !important; background: #fbfcfe !important; font-size: .82rem !important; box-shadow: none !important; transform: none; resize: vertical; }

.pagina-curso-acessar .course-overlay { position: fixed; inset: 0; z-index: 1040; display: block; visibility: hidden; opacity: 0; background: rgba(15,23,42,.45); transition: opacity .2s ease,visibility .2s ease; }
.pagina-curso-acessar .sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr); }
.pagina-curso-acessar .sidebar-collapsed .course-sidebar { width: 320px; margin: 0; opacity: 0; transform: translateX(-100%); pointer-events: none; }
.pagina-curso-acessar .sidebar-collapsed .course-content { margin: 0 !important; padding: 0 !important; }
.study-state { display: grid; min-height: 100dvh; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: #f8fafc; }
.study-state > i { color: var(--primary-color); font-size: 2.5rem; }
.study-state h1 { margin: 0; font-size: 1.5rem; }
.study-state p { color: #64748b; }

@media (max-width: 991.98px) {
    body.pagina-curso-acessar { padding: 0 !important; }
    body.study-menu-open { overflow: hidden; }
    .pagina-curso-acessar .course-player-container { display: block; }
    .pagina-curso-acessar .course-sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); height: 100dvh !important; border-radius: 0 !important; transform: translateX(-100%); transition: transform .22s ease !important; }
    .pagina-curso-acessar .course-player-container.sidebar-visible .course-sidebar { transform: translateX(0); }
    .pagina-curso-acessar .course-player-container.sidebar-visible .course-overlay { visibility: visible; opacity: 1; }
    .pagina-curso-acessar .course-content { height: 100dvh; }
    .study-topbar { min-height: 58px; padding: 8px 12px; }
    .study-catalog-link span { display: none; }
    .lesson-stage { padding: 16px 12px 24px; }
    .lesson-heading { margin-bottom: 11px; }
    .lesson-heading h1 { font-size: 1.35rem; }
    .pagina-curso-acessar .video-responsive { width: calc(100% + 24px); margin-left: -12px; border-radius: 0; }
    .pagina-curso-acessar .pdf-viewer-container { height: calc(100dvh - 174px); min-height: 430px; }
    .pagina-curso-acessar .render-html-content { padding: 16px; }
    .audio-study-player { grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 20px 14px; }
    .audio-study-player > a { grid-column: 1 / -1; justify-self: start; }
    .lesson-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
    #toggle-lesson-complete { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .lesson-actions > div:first-child { grid-column: 1; }
    .lesson-actions > div:last-child { grid-column: 2; }
}

@media (max-width: 575.98px) {
    .study-topbar-main small { max-width: 58vw; }
    .study-topbar-main strong { max-width: 62vw; }
    .lesson-nav-link > span { max-width: 125px; }
    #toggle-lesson-complete { width: 100%; justify-content: center; }
    .study-notes summary { align-items: flex-start; }
}

/* Workspace administrativo do conteúdo do curso */
.main-carregamento:has(> .course-content-admin),.main-carregamento:has(> .course-text-admin){padding:0!important}
.course-content-admin,.course-text-admin{max-width:none;padding:0;background:#f6f8fb;color:#263447}.content-workspace-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.15rem;background:#fff;border-bottom:1px solid #dde4ec}.content-workspace-title h5{margin:.05rem 0;font-size:1.05rem;font-weight:750;color:#17243a}.content-workspace-title p{margin:0;color:#69778a;font-size:.82rem}.content-eyebrow{display:block;color:var(--primary-color);font-size:.67rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.content-workspace-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.content-workspace-actions .btn{display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap}
.course-readiness{display:grid;grid-template-columns:100px 100px 100px minmax(220px,1fr);align-items:center;background:#fff;border-bottom:1px solid #e3e8ef;padding:.65rem 1.15rem;gap:.6rem}.course-readiness>div:not(.course-readiness-progress){display:flex;align-items:baseline;gap:.35rem;border-right:1px solid #e5eaf0}.course-readiness strong{font-size:1rem;color:#17243a}.course-readiness span{font-size:.74rem;color:#758195}.course-readiness-progress{max-width:420px}.course-readiness-progress .progress{height:5px;margin-top:.3rem;background:#e8edf3}.course-readiness-progress .progress-bar{background:#198754}
.content-toolbar{display:flex;align-items:center;gap:.55rem;padding:.65rem 1.15rem;border-bottom:1px solid #e1e7ee}.content-search,.text-lessons-search{position:relative}.content-search{width:min(420px,45vw)}.content-search i,.text-lessons-search i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#8793a4}.content-search input,.text-lessons-search input{width:100%;height:34px;padding:0 .7rem 0 2rem;border:1px solid #d9e0e8;border-radius:7px;background:#fff;font-size:.82rem;outline:none}.content-search input:focus,.text-lessons-search input:focus{border-color:#86aee0;box-shadow:0 0 0 3px rgba(13,110,253,.1)}.content-toolbar .form-select{width:190px}.content-toolbar .save-state{margin-left:auto}.save-state{font-size:.75rem;color:#778499}.save-state.is-saving{color:#0d6efd}.save-state.is-saved{color:#198754}.save-state.is-dirty{color:#a86400}.save-state.is-error{color:#dc3545}.content-loading,.content-error{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:180px;color:#68768a}.content-error{flex-direction:column;color:#b02a37}
.course-content-admin #module-list{padding:.75rem 1.15rem}.course-content-admin .module-card{margin:0 0 .55rem;border:1px solid #dce3eb;border-radius:8px;box-shadow:none;overflow:visible;background:#fff}.course-content-admin .module-card:hover{box-shadow:0 2px 8px rgba(31,45,61,.06);border-color:#cbd6e2}.course-content-admin .module-header{min-height:48px;padding:.4rem .55rem;background:#fff;border:0;border-radius:8px;color:#24344b;cursor:default}.course-content-admin .drag-handle,.course-content-admin .drag-handle-lesson{display:grid;place-items:center;flex:0 0 28px;height:30px;padding:0;border:0;background:transparent;color:#9aa6b5;cursor:grab}.course-content-admin .module-collapse{display:grid;place-items:center;width:26px;height:28px;border:0;background:transparent;color:#6b7787;transition:transform .18s}.course-content-admin .module-card.is-collapsed .module-collapse{transform:rotate(-90deg)}.course-content-admin .module-number{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:6px;background:#eaf2fc;color:#17599f;font-size:.72rem;font-weight:750;margin:0 .5rem 0 .2rem}.course-content-admin .module-heading{min-width:0;flex:1;display:flex;align-items:baseline;gap:.55rem}.course-content-admin .module-title{font:700 .9rem/1.2 var(--heading-font);color:#26364c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.course-content-admin .module-heading small{font-size:.7rem;color:#8490a0}.course-content-admin .module-header>.dropdown .btn{color:#667489}.course-content-admin .btn-add-lesson{display:inline-flex;align-items:center;gap:.25rem;margin-right:.2rem;padding:.25rem .55rem;font-size:.74rem}
.course-content-admin .lesson-list{margin:0;padding:0;background:#fbfcfe;border-top:1px solid #e6ebf1;border-radius:0 0 8px 8px;overflow:hidden}.course-content-admin .module-card.is-collapsed .lesson-list{display:none}.course-content-admin .lesson-item{display:flex;align-items:center;min-height:43px;padding:.28rem .55rem .28rem 1rem;border:0;border-top:1px solid #edf1f5;background:#fbfcfe}.course-content-admin .lesson-item:first-child{border-top:0}.course-content-admin .lesson-item:hover{background:#f3f7fc}.course-content-admin .drag-handle-lesson{margin-right:.15rem}.course-content-admin .lesson-number{width:38px;color:#8793a4;font-size:.7rem;font-variant-numeric:tabular-nums}.course-content-admin .lesson-type-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#edf3f9;color:#2368a8;margin-right:.55rem;font-size:.78rem}.course-content-admin .lesson-main{display:flex;align-items:baseline;gap:.55rem;min-width:0;flex:1}.course-content-admin .lesson-title{font-size:.82rem;font-weight:600;color:#37475d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.course-content-admin .lesson-main small{font-size:.68rem;color:#8a95a4}.course-content-admin .content-status{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .42rem;border-radius:999px;font-size:.65rem;font-weight:650}.course-content-admin .content-status.is-ready{color:#137044;background:#e8f6ee}.course-content-admin .content-status.is-incomplete{color:#9b5d00;background:#fff3da}.course-content-admin .lesson-open-file{margin:0 .25rem;color:#68778b}.course-content-admin .module-empty{padding:.7rem 1rem;text-align:center;color:#8793a4;font-size:.78rem;list-style:none}.course-content-admin .dropdown-item{display:flex;align-items:center;gap:.55rem;font-size:.8rem}
.content-empty-state{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:2rem;color:#718096}.content-empty-state>i{font-size:2rem;color:#9fb1c5}.content-empty-state h6{margin:.7rem 0 .25rem;color:#33445a;font-weight:700}.content-empty-state p{font-size:.82rem}.editor-side-dialog{width:min(540px,100%);max-width:540px;min-height:100%;margin:0 0 0 auto}.editor-side-dialog .modal-content{min-height:100vh;border:0;border-radius:0}.editor-side-dialog .modal-header,.editor-side-dialog .modal-footer{padding:.85rem 1rem}.current-content-file{display:flex;align-items:center;gap:.5rem;padding:.5rem .65rem;margin-bottom:.5rem;border:1px solid #dfe6ed;border-radius:7px;background:#f8fafc}.current-content-file span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.text-lesson-callout{display:flex;gap:.7rem;padding:.75rem;border:1px solid #cfe1f5;border-radius:8px;background:#f0f7ff;color:#315a82}.text-lesson-callout>i{font-size:1.35rem}.text-lesson-callout p{margin:.15rem 0 0;font-size:.78rem}
.text-editor-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);height:calc(100vh - 205px);min-height:540px;background:#fff}.text-lessons-panel{border-right:1px solid #dfe5ec;background:#f8fafc;overflow:auto}.text-lessons-search{margin:.7rem}.text-lessons-count{padding:0 .8rem .45rem;color:#7a8798;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}.text-module-label{position:sticky;top:0;padding:.48rem .75rem;background:#eef2f6;color:#657286;font-size:.67rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em;z-index:1}.text-lesson-button{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.58rem .75rem;border:0;border-bottom:1px solid #edf1f4;background:transparent;text-align:left;color:#334258}.text-lesson-button:hover{background:#eef5fc}.text-lesson-button.active{background:#e4f0fd;box-shadow:inset 3px 0 #1769aa}.text-lesson-button>span{font-size:.79rem;font-weight:650}.text-lesson-button small{display:flex;align-items:center;gap:.25rem;color:#a36a13;font-size:.65rem}.text-lesson-button small.is-ready{color:#198754}
.text-editor-panel{min-width:0;overflow:auto;background:#fff}.editor-placeholder{display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;color:#8290a2;text-align:center}.editor-placeholder i{font-size:2.2rem;color:#b0bdcb}.editor-placeholder h6{margin:.7rem 0 .2rem;color:#4b5a6e}.editor-placeholder p{font-size:.8rem}.editor-document-header{display:flex;justify-content:space-between;align-items:center;padding:.65rem .85rem;border-bottom:1px solid #e3e8ee}.editor-document-header h6{margin:.05rem 0 0;color:#26374d;font-weight:700}.course-text-admin .note-editor.note-frame{margin:0;border:0;border-radius:0}.course-text-admin .note-editor .note-toolbar{position:sticky;top:0;z-index:3;padding:.35rem .55rem;background:#f7f9fb;border-bottom:1px solid #dfe5ec}.course-text-admin .note-editable{padding:1.2rem max(1.2rem,calc((100% - 820px)/2));font-size:.95rem;line-height:1.65}.editor-statusbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.45rem .8rem;border-top:1px solid #e3e8ee;background:#fafbfd;color:#8490a0;font-size:.68rem}.editor-statusbar>div{display:flex;gap:.8rem}.history-item{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;border-bottom:1px solid #edf0f3}.history-item strong,.history-item small{display:block}.history-item strong{font-size:.8rem}.history-item small{color:#7c8898;font-size:.68rem}
@media(max-width:991.98px){.content-workspace-header{align-items:flex-start}.content-workspace-actions .btn span{display:none}.course-readiness{grid-template-columns:repeat(3,1fr)}.course-readiness-progress{grid-column:1/-1;max-width:none}.course-readiness>div:not(.course-readiness-progress){border:0}.text-editor-workspace{grid-template-columns:1fr;height:calc(100vh - 220px)}.text-editor-panel{display:none}.course-text-admin.editor-active .text-lessons-panel{display:none}.course-text-admin.editor-active .text-editor-panel{display:block}.course-content-admin .module-heading small,.course-content-admin .lesson-main small{display:none}}
@media(max-width:575.98px){.content-workspace-header{padding:.7rem}.content-workspace-title p{display:none}.course-readiness,.content-toolbar{padding:.55rem .7rem}.content-toolbar{flex-wrap:wrap}.content-search{width:100%}.content-toolbar .form-select{width:calc(100% - 90px)}.course-content-admin #module-list{padding:.55rem}.course-content-admin .content-status{font-size:0;padding:.28rem}.course-content-admin .content-status i{font-size:.7rem}.course-content-admin .btn-add-lesson span{display:none}.course-content-admin .module-number{margin-right:.3rem}.editor-side-dialog{margin:0;max-width:none}.editor-side-dialog .modal-content{min-height:100%}.editor-statusbar>span{display:none}}

/* Proteção de interface para materiais exibidos na sala de aula */
.pagina-curso-acessar [data-copy-protected],.pagina-curso-acessar [data-copy-protected] *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none}.protected-text-shell{position:relative;isolation:isolate}.protected-readable-content{position:relative;z-index:1}.protected-text-shell>.content-watermark{position:sticky;display:block;top:45vh;height:0;z-index:2;text-align:center;transform:rotate(-24deg);color:rgba(43,74,106,.105);font-size:clamp(1rem,2.2vw,1.8rem);font-weight:750;letter-spacing:.05em;white-space:nowrap;pointer-events:none}
.pagina-curso-acessar .protected-pdf .file-viewer-header{gap:1rem;flex-wrap:wrap}.pdf-page-tools{display:flex;align-items:center;justify-content:flex-end;gap:.32rem}.pdf-page-tools .btn{display:grid;place-items:center;width:32px;height:30px;padding:0}.pdf-page-indicator{min-width:92px;text-align:center;color:#677589;font-size:.72rem;font-variant-numeric:tabular-nums}.pagina-curso-acessar .protected-pdf .pdf-viewer-container{display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:14px;background:#dfe4e9}.pdf-loading{display:flex;min-height:220px;align-items:center;justify-content:center;gap:.5rem;color:#657386}.pdf-page-surface{position:relative;flex:0 0 auto;line-height:0;background:#fff;box-shadow:0 3px 18px rgba(20,32,45,.18)}.pdf-page-surface canvas{display:block;max-width:none}.pdf-page-surface .content-watermark{position:absolute;left:50%;top:50%;z-index:2;max-width:80%;transform:translate(-50%,-50%) rotate(-28deg);color:rgba(34,65,97,.14);font-size:clamp(1rem,3vw,2rem);font-weight:800;line-height:1.2;letter-spacing:.055em;text-align:center;white-space:nowrap;pointer-events:none}
@media(max-width:575.98px){.pagina-curso-acessar .protected-pdf .file-viewer-header>div:first-child{width:100%}.pdf-page-tools{width:100%;justify-content:center}.pagina-curso-acessar .protected-pdf .pdf-viewer-container{padding:8px}}
@media print{body:has(.pagina-curso-acessar [data-copy-protected]) *{visibility:hidden!important}body:has(.pagina-curso-acessar [data-copy-protected])::before{content:'Este material está disponível somente no ambiente do curso.';visibility:visible!important;display:block;padding:3rem;text-align:center;font:600 16px/1.5 sans-serif;color:#334155}}

/* Capa de carregamento consciente para vídeos do YouTube */
.pagina-curso-acessar .youtube-facade{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#102a43 0%,#1c4d73 52%,#2e6f9f 100%);isolation:isolate}.youtube-facade-pattern{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.08);font-size:clamp(7rem,20vw,17rem);transform:rotate(-10deg)}.youtube-facade::before,.youtube-facade::after{content:'';position:absolute;width:42%;aspect-ratio:1;border:1px solid rgba(255,255,255,.09);border-radius:50%}.youtube-facade::before{left:-12%;top:-42%}.youtube-facade::after{right:-14%;bottom:-48%}.youtube-play-button{position:relative;z-index:2;display:flex;align-items:center;gap:.85rem;padding:.7rem 1.05rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(5,20,35,.62);box-shadow:0 8px 28px rgba(0,0,0,.24);color:#fff;text-align:left;backdrop-filter:blur(7px);transition:transform .18s ease,background .18s ease}.youtube-play-button:hover{transform:translateY(-2px);background:rgba(5,20,35,.78)}.youtube-play-button:focus-visible{outline:3px solid #fff;outline-offset:3px}.youtube-play-button:disabled{cursor:wait}.youtube-play-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e62117;font-size:1.85rem}.youtube-play-icon i{margin-left:3px}.youtube-play-button strong,.youtube-play-button small{display:block}.youtube-play-button strong{font-size:.95rem}.youtube-play-button small{margin-top:.08rem;color:#d7e5f1;font-size:.7rem}.youtube-player-host{position:absolute;inset:0;z-index:3;display:none}.youtube-player-host iframe{width:100%!important;height:100%!important}.youtube-facade.is-active .youtube-player-host{display:block}.youtube-facade.is-active .youtube-play-button,.youtube-facade.is-active .youtube-facade-pattern{display:none}.youtube-facade.is-loading .youtube-play-icon i{display:none}.youtube-facade.is-loading .youtube-play-icon::after{content:'';width:20px;height:20px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spinner-border .7s linear infinite}.youtube-player-message{position:absolute;left:50%;bottom:14px;z-index:5;max-width:calc(100% - 28px);transform:translateX(-50%);padding:.48rem .72rem;border-radius:7px;background:rgba(13,29,45,.9);color:#fff;font-size:.75rem;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.2)}
@media(max-width:575.98px){.youtube-play-button{padding:.55rem .75rem}.youtube-play-icon{width:40px;height:40px;font-size:1.55rem}.youtube-play-button small{display:none}}

/* Menus das aulas precisam ultrapassar os limites visuais do módulo. */
.course-content-admin .lesson-list{overflow:visible}
.course-content-admin .module-card{position:relative}
.course-content-admin .module-card:has(.dropdown-menu.show){z-index:30}
.course-content-admin .lesson-item{position:relative}
.course-content-admin .lesson-item:last-child{border-radius:0 0 8px 8px}
.course-content-admin .dropdown-menu{z-index:1080;min-width:190px}
.home-pdf-promo{padding:1.1rem 0 .35rem}.home-pdf-promo-panel{position:relative;display:grid;grid-template-columns:94px minmax(0,1fr) auto auto;align-items:center;gap:1.15rem;overflow:hidden;padding:1rem 1.2rem;border:1px solid #d8e3ec;border-radius:16px;background:linear-gradient(118deg,#f9fbfd 0%,#f2f7fb 58%,#eaf3f9 100%);box-shadow:0 9px 28px rgba(28,55,79,.07)}.home-pdf-promo-panel:after{position:absolute;right:-65px;top:-105px;width:220px;height:220px;border:1px solid rgba(41,108,153,.1);border-radius:50%;content:""}.home-pdf-promo-art{position:relative;width:82px;height:78px}.home-pdf-sheet{position:absolute;display:grid;width:52px;height:68px;place-items:center;border:1px solid #c8d8e4;border-radius:7px;background:#fff;color:#3678a5;box-shadow:0 6px 13px rgba(31,62,88,.1);font-size:1.3rem}.home-pdf-sheet.is-back{left:7px;top:1px;transform:rotate(-7deg)}.home-pdf-sheet.is-front{left:25px;top:8px;z-index:2;transform:rotate(4deg)}.home-pdf-promo-copy{min-width:0}.home-pdf-promo-label{display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.3rem;color:#32739f;font-size:.66rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase}.home-pdf-promo-copy h2{margin:0;color:#20364b;font:750 clamp(1rem,1.7vw,1.3rem)/1.25 Montserrat,sans-serif}.home-pdf-promo-copy p{max-width:650px;margin:.3rem 0 0;color:#66788a;font-size:.75rem;line-height:1.5}.home-pdf-promo-features{display:grid;gap:.32rem;color:#536b7f;font-size:.68rem;font-weight:700;white-space:nowrap}.home-pdf-promo-features i{margin-right:.25rem;color:#39815a}.home-pdf-promo-action{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.68rem .9rem;border-radius:9px;background:#234c6d;color:#fff;text-decoration:none;font-size:.72rem;font-weight:800;white-space:nowrap;transition:.16s ease}.home-pdf-promo-action:hover{background:#183b58;color:#fff;transform:translateY(-1px)}
@media(max-width:991.98px){.home-pdf-promo-panel{grid-template-columns:76px minmax(0,1fr) auto}.home-pdf-promo-features{display:none}.home-pdf-promo-art{transform:scale(.88);transform-origin:left center}}
@media(max-width:767.98px){.home-pdf-promo{padding:.8rem 0 .2rem}.home-pdf-promo-panel{grid-template-columns:56px minmax(0,1fr);gap:.75rem;padding:.85rem;border-radius:13px}.home-pdf-promo-art{width:55px;height:60px;transform:scale(.7);transform-origin:left top}.home-pdf-promo-copy h2{font-size:.94rem}.home-pdf-promo-copy p{font-size:.68rem}.home-pdf-promo-action{grid-column:1/-1;width:100%;padding:.58rem}.home-pdf-promo-label{font-size:.58rem}}

/* Faixa promocional horizontal das ferramentas PDF. */
.home-pdf-promo{padding:1.4rem 0 .65rem}.home-pdf-promo>.container{width:100%;max-width:none;padding-right:0;padding-left:0}.home-pdf-promo-panel{grid-template-columns:150px minmax(0,1fr) auto auto;gap:clamp(1.4rem,3vw,3rem);min-height:205px;padding:2rem clamp(2rem,6vw,6.5rem);border-right:0;border-left:0;border-radius:0}.home-pdf-promo-art{width:130px;height:125px}.home-pdf-sheet{width:82px;height:108px;border-radius:10px;font-size:2rem}.home-pdf-sheet.is-back{left:10px;top:0}.home-pdf-sheet.is-front{left:40px;top:12px}.home-pdf-promo-label{margin-bottom:.55rem;font-size:.76rem}.home-pdf-promo-copy h2{font-size:clamp(1.35rem,2.25vw,1.9rem)}.home-pdf-promo-copy p{max-width:760px;margin-top:.55rem;font-size:.9rem}.home-pdf-promo-features{gap:.55rem;font-size:.78rem}.home-pdf-promo-action{padding:.9rem 1.2rem;font-size:.8rem}
.home-pdf-promo.is-launch-page{padding-bottom:4rem}
@media(max-width:991.98px){.home-pdf-promo-panel{grid-template-columns:115px minmax(0,1fr) auto;min-height:185px;padding:1.7rem clamp(1.25rem,4vw,3rem)}.home-pdf-promo-art{width:105px;height:105px;transform:scale(.85);transform-origin:left center}}
@media(max-width:767.98px){.home-pdf-promo{padding:1rem 0 .35rem}.home-pdf-promo.is-launch-page{padding-bottom:2.7rem}.home-pdf-promo-panel{grid-template-columns:82px minmax(0,1fr);gap:1rem;min-height:230px;padding:1.35rem 1rem;border-radius:0}.home-pdf-promo-art{width:82px;height:90px;transform:scale(.68);transform-origin:left top}.home-pdf-promo-copy h2{font-size:1.12rem}.home-pdf-promo-copy p{font-size:.76rem}.home-pdf-promo-label{font-size:.62rem}.home-pdf-promo-action{padding:.75rem;font-size:.76rem}}

/* Home pública de pré-lançamento e navegação reservada ao administrador. */
.navbar-preview-locked>.container>.d-flex,.navbar-preview-locked .navbar-collapse{display:none!important}.navbar-preview-access{display:flex;align-items:center;gap:.55rem;margin-left:auto}.navbar-preview-status{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .7rem;color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:999px;font-size:.68rem;font-weight:750;letter-spacing:.02em}.navbar-preview-status i{color:#b9def2}.navbar-preview-login{display:inline-flex;align-items:center;gap:.38rem;padding:.42rem .72rem;color:#254e69;background:#fff;border:1px solid #fff;border-radius:8px;font-size:.68rem;font-weight:800;text-decoration:none;transition:.16s}.navbar-preview-login:hover{color:#173b53;background:#eef7fc;transform:translateY(-1px)}
#hero.home-launch-hero{position:relative;min-height:590px;margin-top:0!important;padding-top:72px;overflow:hidden;background:radial-gradient(circle at 78% 32%,rgba(117,192,231,.28),transparent 28%),radial-gradient(circle at 14% 78%,rgba(93,158,203,.2),transparent 24%),linear-gradient(125deg,#142d42 0%,#245d7e 55%,#173b55 100%)}#hero.home-launch-hero:before{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent);content:""}#hero.home-launch-hero:after{position:absolute;right:-8vw;bottom:-210px;width:520px;height:520px;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018);content:""}.home-launch-copy{position:relative;z-index:1;max-width:850px;margin:0 auto}.home-launch-eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.1rem;padding:.4rem .75rem;color:#d8eef9;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.home-launch-copy h1{margin:0 auto;color:#fff;font:800 clamp(2.45rem,5.3vw,4.65rem)/1.02 Montserrat,sans-serif;letter-spacing:-.045em}.home-launch-copy h1 em{display:block;color:#a9d9f1;font-style:normal}.home-launch-copy>p{max-width:720px;margin:1.35rem auto 0;color:rgba(255,255,255,.78);font-size:clamp(.98rem,1.5vw,1.16rem);line-height:1.7}.home-launch-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}.home-launch-actions .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.15rem;border:0;border-radius:10px;color:#214e6c;font-size:.8rem;font-weight:800;box-shadow:0 12px 30px rgba(4,22,36,.2)}.home-launch-actions>span{display:inline-flex;align-items:center;gap:.42rem;color:rgba(255,255,255,.72);font-size:.72rem}.home-launch-actions>span i{color:#8fddb3}.home-launch-intro{padding:4.1rem 0 2rem;background:#fff}.home-launch-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.75fr);align-items:end;gap:3rem;margin-bottom:2rem}.home-launch-heading span{color:#397ba5;font-size:.7rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.home-launch-heading h2{max-width:650px;margin:.4rem 0 0;color:#20384d;font:780 clamp(1.7rem,3vw,2.45rem)/1.16 Montserrat,sans-serif;letter-spacing:-.025em}.home-launch-heading>p{margin:0;color:#6c7e8d;font-size:.88rem;line-height:1.7}.home-launch-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.home-launch-features article{display:flex;align-items:flex-start;gap:.9rem;padding:1.25rem;background:#f9fbfd;border:1px solid #e0e8ee;border-radius:14px;transition:.18s ease}.home-launch-features article:hover{border-color:#c4d8e5;box-shadow:0 12px 28px rgba(31,63,87,.08);transform:translateY(-2px)}.home-launch-features article>span{display:grid;width:43px;height:43px;flex:0 0 43px;place-items:center;color:#347aa7;background:#e8f3f9;border-radius:11px;font-size:1.15rem}.home-launch-features small{color:#4d89ae;font-size:.58rem;font-weight:850;letter-spacing:.09em}.home-launch-features h3{margin:.15rem 0 .35rem;color:#263e52;font-size:.93rem;font-weight:780}.home-launch-features p{margin:0;color:#70808e;font-size:.73rem;line-height:1.55}.home-launch-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;margin-top:1rem;padding:1rem 1.15rem;color:#eaf4f9;background:linear-gradient(120deg,#234b68,#316f94);border-radius:14px}.home-launch-note>span{display:grid;width:42px;height:42px;place-items:center;background:rgba(255,255,255,.1);border-radius:10px;font-size:1.1rem}.home-launch-note strong{display:block;font-size:.82rem}.home-launch-note p{margin:.15rem 0 0;color:rgba(255,255,255,.72);font-size:.68rem}.home-launch-note>a{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem .8rem;color:#244f6b;background:#fff;border-radius:8px;font-size:.7rem;font-weight:800;text-decoration:none;white-space:nowrap}
@media(max-width:991.98px){#hero.home-launch-hero{min-height:530px}.home-launch-heading{grid-template-columns:1fr;gap:.8rem}.home-launch-features{grid-template-columns:1fr}.home-launch-features article{align-items:center}.home-launch-note{grid-template-columns:auto 1fr}.home-launch-note>a{grid-column:1/-1;justify-content:center}}@media(max-width:575.98px){.navbar-preview-status{display:none}.navbar-preview-login{padding:.38rem .62rem;font-size:.64rem}#hero.home-launch-hero{min-height:500px;margin-top:0!important;padding:5.8rem .25rem 3rem}.home-launch-eyebrow{font-size:.58rem}.home-launch-copy h1{font-size:2.25rem}.home-launch-copy>p{font-size:.87rem;line-height:1.55}.home-launch-actions{align-items:stretch;flex-direction:column}.home-launch-actions .btn{justify-content:center}.home-launch-intro{padding:2.8rem 0 1.2rem}.home-launch-heading{margin-bottom:1.3rem}.home-launch-heading h2{font-size:1.55rem}.home-launch-heading>p{font-size:.78rem}.home-launch-features article{align-items:flex-start;padding:1rem}.home-launch-note{padding:.9rem}.home-launch-note>span{display:none}.home-launch-note p{font-size:.64rem}}

#hero.home-ocr-hero{position:relative;min-height:440px;margin-top:0!important;overflow:hidden;background:radial-gradient(circle at 82% 24%,rgba(237,190,79,.2),transparent 27%),radial-gradient(circle at 15% 82%,rgba(81,151,190,.2),transparent 25%),linear-gradient(125deg,#18364d 0%,#245d7d 58%,#193c54 100%)}#hero.home-ocr-hero:before{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent);content:""}.home-ocr-promo-copy{position:relative;z-index:1;max-width:900px;margin:0 auto}.home-ocr-promo-eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1rem;padding:.4rem .72rem;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.09);color:#ffe5a6;font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.home-ocr-promo-copy h1{margin:0;color:#fff;font:800 clamp(2.3rem,4.6vw,4.15rem)/1.04 Montserrat,sans-serif;letter-spacing:-.04em}.home-ocr-promo-copy h1 em{color:#f0c766;font-style:normal}.home-ocr-promo-copy>p{max-width:730px;margin:1.1rem auto 0;color:rgba(255,255,255,.78);font-size:clamp(.92rem,1.35vw,1.08rem);line-height:1.65}.home-ocr-promo-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:1.45rem}.home-ocr-promo-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;font-size:.76rem;font-weight:800}.home-ocr-primary{border-color:#e0ad37;background:#e0ad37;color:#243d4e}.home-ocr-primary:hover{border-color:#f1c65c;background:#f1c65c;color:#1e3546}.home-ocr-secondary{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff}.home-ocr-secondary:hover{border-color:#fff;background:#fff;color:#254e69}.home-ocr-promo-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem 1.15rem;margin-top:1rem;color:rgba(255,255,255,.7);font-size:.65rem}.home-ocr-promo-benefits i{margin-right:.25rem;color:#91ddb3}@media(max-width:575.98px){#hero.home-ocr-hero{min-height:470px;padding:5rem .25rem 2.5rem}.home-ocr-promo-copy h1{font-size:2.15rem}.home-ocr-promo-copy>p{font-size:.84rem}.home-ocr-promo-actions{align-items:stretch;flex-direction:column}.home-ocr-promo-actions .btn{width:100%}.home-ocr-promo-benefits{gap:.45rem .75rem}}

.home-ocr-public{padding:2rem 0;background:#fff}.home-ocr-public-panel{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:1.5rem;overflow:hidden;padding:1.45rem 1.6rem;border:1px solid #d7e4eb;border-radius:18px;background:linear-gradient(120deg,#f6fafc 0%,#eef6fa 58%,#fff9e8 100%);box-shadow:0 14px 38px rgba(31,65,88,.08)}.home-ocr-public-panel:after{position:absolute;right:-90px;top:-120px;width:260px;height:260px;border:1px solid rgba(192,139,24,.12);border-radius:50%;box-shadow:0 0 0 42px rgba(192,139,24,.035);content:""}.home-ocr-public-art{position:relative;width:132px;height:124px}.home-ocr-public-sheet{position:absolute;left:20px;top:4px;display:block;width:90px;height:112px;padding:17px 13px;border:1px solid #ccd9e1;border-radius:9px;background:#fff;box-shadow:0 13px 26px rgba(28,59,80,.13);transform:rotate(-3deg)}.home-ocr-public-sheet>i{display:block;margin-bottom:12px;color:#337da8;font-size:1.3rem}.home-ocr-public-sheet>b{display:block;width:100%;height:5px;margin-top:7px;border-radius:4px;background:#dbe5eb}.home-ocr-public-sheet>b:nth-of-type(2){width:78%}.home-ocr-public-sheet>b:nth-of-type(3){width:90%}.home-ocr-public-sheet>b:nth-of-type(4){width:62%}.home-ocr-scan-line{position:absolute;left:9px;top:58px;z-index:2;width:112px;height:2px;background:#dfaa35;box-shadow:0 0 9px rgba(221,164,42,.7)}.home-ocr-public-check{position:absolute;right:3px;bottom:2px;z-index:3;display:grid;width:35px;height:35px;place-items:center;border:4px solid #f2f8fa;border-radius:50%;background:#438b67;color:#fff}.home-ocr-public-copy{position:relative;z-index:1}.home-ocr-public-label{color:#a3710c;font-size:.61rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.home-ocr-public-copy h2{max-width:680px;margin:.3rem 0 .45rem;color:#223d51;font:790 clamp(1.35rem,2.4vw,2rem)/1.18 Montserrat,sans-serif;letter-spacing:-.025em}.home-ocr-public-copy>p{max-width:720px;margin:0;color:#6d7e8b;font-size:.76rem;line-height:1.6}.home-ocr-public-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;color:#697d8b;font-size:.59rem}.home-ocr-public-meta i{margin-right:.25rem;color:#438b67}.home-ocr-public-actions{position:relative;z-index:1;display:flex;min-width:190px;align-items:stretch;flex-direction:column;gap:.5rem}.home-ocr-public-actions a{display:flex;align-items:center;justify-content:center;gap:.42rem;padding:.7rem .85rem;border-radius:9px;font-size:.68rem;font-weight:800;text-decoration:none;white-space:nowrap}.home-ocr-public-primary{background:#b77d0e;color:#fff}.home-ocr-public-primary:hover{background:#9d6908;color:#fff}.home-ocr-public-secondary{border:1px solid #cbd9e1;background:#fff;color:#476479}.home-ocr-public-secondary:hover{border-color:#9eb9c9;color:#245f84}@media(max-width:991.98px){.home-ocr-public-panel{grid-template-columns:110px minmax(0,1fr)}.home-ocr-public-art{width:105px;transform:scale(.82);transform-origin:left center}.home-ocr-public-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}}@media(max-width:575.98px){.home-ocr-public{padding:1.2rem 0}.home-ocr-public-panel{grid-template-columns:1fr;gap:.8rem;padding:1.15rem}.home-ocr-public-art{display:none}.home-ocr-public-copy h2{font-size:1.35rem}.home-ocr-public-copy>p{font-size:.7rem}.home-ocr-public-meta{gap:.35rem .65rem}.home-ocr-public-actions{grid-column:auto;grid-template-columns:1fr}.home-ocr-public-actions a{white-space:normal}}

/* Publicidade da ferramenta pública de prática musical. */
.home-audio-public{padding:.35rem 0 1.4rem;background:#fff}.home-audio-public-panel{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:1.5rem;overflow:hidden;padding:1.45rem 1.6rem;border:1px solid #ddd7ef;border-radius:18px;background:radial-gradient(circle at 90% 0,rgba(128,91,199,.13),transparent 17rem),linear-gradient(120deg,#faf9fd 0%,#f2effb 56%,#edf6fb 100%);box-shadow:0 14px 38px rgba(54,42,91,.08)}.home-audio-public-panel:after{position:absolute;right:-85px;bottom:-145px;width:280px;height:280px;border:1px solid rgba(104,73,175,.12);border-radius:50%;box-shadow:0 0 0 44px rgba(104,73,175,.03);content:""}.home-audio-public-art{position:relative;width:132px;height:124px}.home-audio-disc{position:absolute;left:4px;top:5px;display:grid;width:108px;height:108px;place-items:center;border:8px solid #25223a;border-radius:50%;background:repeating-radial-gradient(circle,#4b4568 0 3px,#29263d 4px 7px);color:#fff;box-shadow:0 13px 27px rgba(38,31,61,.2);font-size:1.45rem}.home-audio-disc:before{position:absolute;width:35px;height:35px;border:7px solid #b4a1e1;border-radius:50%;background:#f7f4fc;content:""}.home-audio-disc i{position:relative;z-index:1;color:#7255b8;font-size:.8rem}.home-audio-wave{position:absolute;right:0;bottom:10px;z-index:2;display:flex;height:42px;align-items:center;gap:3px;padding:6px 8px;border-radius:9px;background:#fff;box-shadow:0 7px 17px rgba(54,42,91,.14)}.home-audio-wave b{display:block;width:3px;height:12px;border-radius:3px;background:#7559bc}.home-audio-wave b:nth-child(2),.home-audio-wave b:nth-child(6){height:24px}.home-audio-wave b:nth-child(3),.home-audio-wave b:nth-child(5){height:32px}.home-audio-wave b:nth-child(4){height:20px}.home-audio-control{position:absolute;right:5px;top:2px;z-index:3;display:grid;width:34px;height:34px;place-items:center;border:4px solid #f5f1fc;border-radius:50%;background:#2d78a6;color:#fff}.home-audio-public-copy{position:relative;z-index:1}.home-audio-public-label{color:#6d50b1;font-size:.61rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.home-audio-public-copy h2{max-width:720px;margin:.3rem 0 .45rem;color:#29344d;font:790 clamp(1.35rem,2.4vw,2rem)/1.18 Montserrat,sans-serif;letter-spacing:-.025em}.home-audio-public-copy>p{max-width:740px;margin:0;color:#6d788b;font-size:.76rem;line-height:1.6}.home-audio-public-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;color:#69778a;font-size:.59rem}.home-audio-public-meta i{margin-right:.25rem;color:#6d50b1}.home-audio-public-actions{position:relative;z-index:1;display:flex;min-width:205px;align-items:center;flex-direction:column;gap:.55rem}.home-audio-public-actions>a{display:flex;width:100%;align-items:center;justify-content:center;gap:.45rem;padding:.78rem .95rem;border-radius:9px;background:linear-gradient(135deg,#287ba8,#7456bd);color:#fff;text-decoration:none;font-size:.7rem;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(85,67,148,.18)}.home-audio-public-actions>a:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)}.home-audio-public-actions small{color:#778397;font-size:.59rem}.home-audio-public-actions small i{margin-right:.25rem;color:#6d50b1}@media(max-width:991.98px){.home-audio-public-panel{grid-template-columns:110px minmax(0,1fr)}.home-audio-public-art{width:105px;transform:scale(.82);transform-origin:left center}.home-audio-public-actions{grid-column:1/-1;width:100%}}@media(max-width:575.98px){.home-audio-public{padding:.2rem 0 1.2rem}.home-audio-public-panel{grid-template-columns:1fr;gap:.8rem;padding:1.15rem}.home-audio-public-art{display:none}.home-audio-public-copy h2{font-size:1.35rem}.home-audio-public-copy>p{font-size:.7rem}.home-audio-public-meta{gap:.35rem .65rem}.home-audio-public-actions{grid-column:auto}.home-audio-public-actions>a{white-space:normal}}

.home-launch-direct{position:relative;z-index:1;margin-top:1rem}.home-launch-direct>small{display:block;margin-bottom:.48rem;color:rgba(255,255,255,.58);font-size:.61rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.home-launch-shortcuts{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}.home-launch-shortcuts a{display:inline-flex;min-width:132px;min-height:42px;align-items:center;justify-content:center;gap:.42rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.075);color:#edf7fc;font-size:.69rem;font-weight:780;text-decoration:none;backdrop-filter:blur(5px);transition:background-color .16s ease,border-color .16s ease,transform .16s ease}.home-launch-shortcuts a:hover{border-color:rgba(255,255,255,.48);background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}.home-launch-shortcuts i{color:#a9d9f1;font-size:.85rem}#hero.home-launch-hero{min-height:700px;padding-top:28px;padding-bottom:28px}@media(max-width:991.98px){#hero.home-launch-hero{min-height:640px;padding-top:28px;padding-bottom:28px}}@media(max-width:575.98px){#hero.home-launch-hero{min-height:610px;padding:5.8rem .25rem 3rem}.home-launch-main-action{width:100%}.home-launch-access-note{justify-content:center}.home-launch-direct{margin-top:.85rem}.home-launch-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.home-launch-shortcuts a{min-width:0;min-height:54px;padding:.4rem .25rem;flex-direction:column;gap:.18rem;font-size:.59rem}.home-launch-shortcuts i{font-size:.9rem}}

/* Página institucional do portal. */
.about-portal-page{color:#263b4d;background:#fff}.about-portal-hero{position:relative;overflow:hidden;padding:9rem 0 5.4rem;color:#fff;background:radial-gradient(circle at 82% 35%,rgba(126,201,238,.24),transparent 25%),linear-gradient(125deg,#152d40,#285f80)}.about-portal-hero:after{position:absolute;right:-180px;bottom:-310px;width:570px;height:570px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 75px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018);content:""}.about-portal-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:center;gap:4rem}.about-portal-copy{max-width:760px}.about-portal-eyebrow{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;color:#b9def1;font-size:.7rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.about-portal-copy h1{margin:0;font:800 clamp(2.3rem,4.7vw,4.25rem)/1.06 Montserrat,sans-serif;letter-spacing:-.04em}.about-portal-copy h1 em{color:#a8d8ef;font-style:normal}.about-portal-copy p{max-width:670px;margin:1.3rem 0 0;color:rgba(255,255,255,.76);font-size:1rem;line-height:1.75}.about-portal-mark{position:relative;display:grid;width:250px;height:250px;place-items:center;justify-self:center}.about-mark-ring{position:absolute;border:1px solid rgba(255,255,255,.17);border-radius:50%}.about-mark-ring.is-outer{inset:0}.about-mark-ring.is-inner{inset:32px;border-style:dashed}.about-portal-mark>span{display:grid;width:105px;height:105px;place-items:center;color:#285d7d;background:#fff;border-radius:50%;box-shadow:0 18px 45px rgba(5,25,39,.24);font-size:2.5rem}.about-portal-mark>small{position:absolute;bottom:18px;color:rgba(255,255,255,.7);font-size:.56rem;font-weight:800;letter-spacing:.14em}.about-portal-purpose{padding:5rem 0 2.5rem}.about-purpose-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);gap:.75rem 3rem;align-items:end;margin-bottom:2rem}.about-purpose-heading>span{grid-column:1/-1;color:#397ca5;font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.about-purpose-heading h2{margin:0;color:#21394c;font:780 clamp(1.7rem,3vw,2.5rem)/1.18 Montserrat,sans-serif;letter-spacing:-.025em}.about-purpose-heading p{margin:0;color:#6b7d8b;font-size:.86rem;line-height:1.72}.about-purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.about-purpose-grid article{display:flex;align-items:flex-start;gap:.9rem;padding:1.35rem;background:#f9fbfc;border:1px solid #e0e8ee;border-radius:14px}.about-purpose-grid article>span{display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;color:#3379a5;background:#e7f2f8;border-radius:11px;font-size:1.15rem}.about-purpose-grid small{color:#4584aa;font-size:.57rem;font-weight:850;letter-spacing:.09em}.about-purpose-grid h3{margin:.15rem 0 .4rem;font-size:.94rem;font-weight:780}.about-purpose-grid p{margin:0;color:#70808e;font-size:.73rem;line-height:1.58}.about-portal-values{padding:2.5rem 0 4.5rem}.about-values-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.85fr);gap:3.5rem;padding:2.4rem;border:1px solid #dce6ed;border-radius:18px;background:linear-gradient(130deg,#f9fbfd,#f1f7fa)}.about-values-copy>span{color:#397ca5;font-size:.65rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.about-values-copy h2{margin:.4rem 0 .8rem;font:780 clamp(1.5rem,2.5vw,2rem)/1.2 Montserrat,sans-serif}.about-values-copy>p{margin:0;color:#687b8b;font-size:.83rem;line-height:1.7}.about-values-status{display:flex;align-items:center;gap:.65rem;margin-top:1.2rem;padding:.75rem;color:#315f7d;background:#e5f1f7;border-radius:10px}.about-values-status>i{font-size:1.15rem}.about-values-status div{display:flex;flex-direction:column}.about-values-status strong{font-size:.74rem}.about-values-status small{color:#6b8291;font-size:.62rem}.about-values-list{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.about-values-list>div{display:flex;align-items:flex-start;gap:.55rem;padding:.75rem;background:#fff;border:1px solid #e1e8ed;border-radius:10px}.about-values-list i{margin-top:.05rem;color:#37825c}.about-values-list span{display:flex;flex-direction:column}.about-values-list strong{font-size:.74rem}.about-values-list small{margin-top:.15rem;color:#748391;font-size:.62rem;line-height:1.45}.about-portal-cta{padding:0 0 4.5rem}.about-cta-panel{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 2.2rem;color:#fff;background:linear-gradient(120deg,#214964,#31749a);border-radius:17px;box-shadow:0 15px 35px rgba(30,68,93,.14)}.about-cta-panel span{color:#a8d5eb;font-size:.62rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.about-cta-panel h2{margin:.3rem 0;font-size:1.45rem;font-weight:780}.about-cta-panel p{margin:0;color:rgba(255,255,255,.72);font-size:.76rem}.about-cta-panel>a{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1rem;color:#24516d;background:#fff;border-radius:9px;font-size:.74rem;font-weight:800;text-decoration:none;white-space:nowrap}
@media(max-width:991.98px){.about-portal-hero-grid,.about-purpose-heading,.about-values-grid{grid-template-columns:1fr}.about-portal-mark{display:none}.about-purpose-grid{grid-template-columns:1fr}.about-values-grid{gap:1.5rem}.about-cta-panel{align-items:flex-start;flex-direction:column}.about-cta-panel>a{align-self:stretch;justify-content:center}}@media(max-width:575.98px){.about-portal-hero{padding:7.5rem 0 3.5rem}.about-portal-copy h1{font-size:2.25rem}.about-portal-copy p{font-size:.86rem}.about-portal-purpose{padding:3rem 0 1.5rem}.about-purpose-heading h2{font-size:1.55rem}.about-purpose-heading p{font-size:.77rem}.about-purpose-grid article{padding:1rem}.about-portal-values{padding:1.5rem 0 3rem}.about-values-grid{padding:1.1rem;border-radius:13px}.about-values-list{grid-template-columns:1fr}.about-portal-cta{padding-bottom:3rem}.about-cta-panel{padding:1.35rem}.about-cta-panel h2{font-size:1.2rem}}

/* FAQ institucional do portal. */
.portal-faq-page{color:#263b4d;background:#f7f9fb}.portal-faq-hero{padding:8.5rem 0 4.3rem;color:#fff;background:radial-gradient(circle at 82% 34%,rgba(132,205,240,.23),transparent 26%),linear-gradient(125deg,#152d40,#285f80)}.portal-faq-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,.5fr);align-items:center;gap:3rem}.portal-faq-hero-grid>div:first-child>span{display:inline-flex;align-items:center;gap:.4rem;color:#b9def1;font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.portal-faq-hero h1{max-width:760px;margin:.8rem 0 1rem;font:800 clamp(2.2rem,4.5vw,4rem)/1.08 Montserrat,sans-serif;letter-spacing:-.04em}.portal-faq-hero p{max-width:690px;margin:0;color:rgba(255,255,255,.75);font-size:.94rem;line-height:1.72}.portal-faq-hero-mark{display:flex;width:210px;height:210px;align-items:center;justify-content:center;justify-self:center;flex-direction:column;gap:.65rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);border-radius:50%;box-shadow:0 0 0 26px rgba(255,255,255,.025)}.portal-faq-hero-mark i{font-size:2.5rem}.portal-faq-hero-mark span{font-size:.65rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.portal-faq-content{padding:3.2rem 0 4.5rem}.portal-faq-layout{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:1.3rem}.portal-faq-index{position:sticky;top:90px;display:grid;gap:.3rem;padding:.8rem;background:#fff;border:1px solid #e0e7ed;border-radius:12px}.portal-faq-index>span{padding:.25rem .4rem .45rem;color:#83909b;font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.portal-faq-index a{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;color:#536a7c;border-radius:8px;font-size:.68rem;font-weight:750;text-decoration:none}.portal-faq-index a:hover{color:#276d99;background:#edf6fb}.portal-faq-index i{width:18px;color:#4b87ac}.portal-faq-groups{display:grid;gap:1rem}.portal-faq-group{overflow:hidden;background:#fff;border:1px solid #dfe7ed;border-radius:14px}.portal-faq-group>header{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:#fbfcfd;border-bottom:1px solid #e5eaee}.portal-faq-group>header>span{display:grid;width:38px;height:38px;place-items:center;color:#357ba6;background:#e7f2f8;border-radius:10px}.portal-faq-group>header small,.portal-faq-contact small{display:block;color:#5287a7;font-size:.53rem;font-weight:850;letter-spacing:.09em}.portal-faq-group>header h2{margin:.1rem 0 0;font-size:.9rem;font-weight:780}.portal-faq-accordion .accordion-item{border:0;border-bottom:1px solid #e8edf1;border-radius:0!important;box-shadow:none}.portal-faq-accordion .accordion-item:last-child{border-bottom:0}.portal-faq-accordion .accordion-button{padding:.9rem 1rem;color:#354b5d;background:#fff;box-shadow:none;font-size:.76rem;font-weight:750}.portal-faq-accordion .accordion-button:not(.collapsed){color:#276b96;background:#f4f9fc}.portal-faq-accordion .accordion-button:focus{box-shadow:none}.portal-faq-accordion .accordion-body{padding:.85rem 1rem 1rem;color:#647685;background:#fbfdfe;font-size:.75rem;line-height:1.7}.portal-faq-contact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:1.2rem;color:#fff;background:linear-gradient(120deg,#224b67,#31759b);border-radius:14px}.portal-faq-contact>span{display:grid;width:46px;height:46px;place-items:center;background:rgba(255,255,255,.1);border-radius:11px;font-size:1.2rem}.portal-faq-contact h2{margin:.15rem 0;font-size:.95rem}.portal-faq-contact p{margin:0;color:rgba(255,255,255,.7);font-size:.66rem}.portal-faq-contact>a{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem .8rem;color:#28536f;background:#fff;border-radius:8px;font-size:.68rem;font-weight:800;text-decoration:none;white-space:nowrap}
@media(max-width:991.98px){.portal-faq-hero-grid{grid-template-columns:1fr}.portal-faq-hero-mark{display:none}.portal-faq-layout{grid-template-columns:1fr}.portal-faq-index{position:static;display:flex;overflow-x:auto}.portal-faq-index>span{display:none}.portal-faq-index a{flex:0 0 auto;white-space:nowrap}}@media(max-width:575.98px){.portal-faq-hero{padding:7.3rem 0 3.4rem}.portal-faq-hero h1{font-size:2.2rem}.portal-faq-hero p{font-size:.84rem}.portal-faq-content{padding:1.5rem 0 3rem}.portal-faq-group>header{padding:.75rem}.portal-faq-accordion .accordion-button{padding:.8rem .75rem;font-size:.7rem}.portal-faq-accordion .accordion-body{padding:.75rem;font-size:.7rem}.portal-faq-contact{grid-template-columns:1fr;padding:1rem}.portal-faq-contact>span{display:none}.portal-faq-contact>a{justify-content:center}}

/* Termos de uso do portal. */
.portal-terms-page{color:#2c4052;background:#f6f8fa}.portal-terms-hero{padding:8.5rem 0 4.2rem;color:#fff;background:radial-gradient(circle at 82% 34%,rgba(132,205,240,.22),transparent 25%),linear-gradient(125deg,#152d40,#285f80)}.portal-terms-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.45fr);align-items:center;gap:3rem}.portal-terms-hero-grid>div:first-child>span{display:inline-flex;align-items:center;gap:.4rem;color:#b9def1;font-size:.66rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.portal-terms-hero h1{margin:.65rem 0 .65rem;font:800 clamp(2.4rem,4.8vw,4.1rem)/1 Montserrat,sans-serif;letter-spacing:-.04em}.portal-terms-hero p{max-width:690px;margin:0;color:rgba(255,255,255,.75);font-size:.92rem;line-height:1.7}.portal-terms-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}.portal-terms-meta span{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .6rem;color:#dcecf4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:7px;font-size:.62rem}.portal-terms-symbol{display:flex;width:190px;height:190px;align-items:center;justify-content:center;justify-self:center;flex-direction:column;gap:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.025)}.portal-terms-symbol i{font-size:2.5rem}.portal-terms-symbol small{font-size:.52rem;font-weight:850;letter-spacing:.11em}.portal-terms-content{padding:2.2rem 0 4.5rem}.portal-terms-layout{display:grid;grid-template-columns:245px minmax(0,1fr);align-items:start;gap:1rem}.portal-terms-summary{position:sticky;top:88px;display:grid;gap:.7rem}.portal-terms-summary>div{display:flex;align-items:flex-start;gap:.55rem;padding:.75rem;color:#315f7c;background:#e5f1f7;border-radius:10px}.portal-terms-summary>div>i{margin-top:.08rem}.portal-terms-summary>div span{display:flex;flex-direction:column}.portal-terms-summary strong{font-size:.7rem}.portal-terms-summary small{margin-top:.12rem;color:#6b8190;font-size:.59rem;line-height:1.4}.portal-terms-summary nav{display:grid;max-height:58vh;gap:.1rem;overflow:auto;padding:.65rem;background:#fff;border:1px solid #e0e7ed;border-radius:10px}.portal-terms-summary nav>span{padding:.25rem .4rem .4rem;color:#84909c;font-size:.55rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.portal-terms-summary nav a{padding:.4rem;color:#607487;border-radius:6px;font-size:.61rem;font-weight:700;text-decoration:none}.portal-terms-summary nav a:hover{color:#286f9b;background:#eef6fa}.portal-terms-document{overflow:hidden;background:#fff;border:1px solid #dfe6eb;border-radius:14px}.portal-terms-document>header{padding:1.35rem 1.5rem;background:#fbfcfd;border-bottom:1px solid #e6ebef}.portal-terms-document>header>span{color:#4f87a9;font-size:.55rem;font-weight:850;letter-spacing:.1em}.portal-terms-document>header h2{margin:.25rem 0 .35rem;font-size:1.25rem;font-weight:780}.portal-terms-document>header p{margin:0;color:#71808d;font-size:.7rem}.portal-terms-sections{padding:0 1.5rem}.portal-terms-sections>section{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.75rem;padding:1.15rem 0;border-bottom:1px solid #e8edf1;scroll-margin-top:90px}.portal-terms-sections>section:last-child{border-bottom:0}.portal-terms-sections>section>span{display:grid;width:30px;height:30px;place-items:center;color:#397ca5;background:#e8f3f9;border-radius:8px;font-size:.62rem;font-weight:850}.portal-terms-sections h3{margin:.2rem 0 .45rem;color:#31485a;font-size:.84rem;font-weight:780}.portal-terms-sections p{margin:0;color:#647583;font-size:.74rem;line-height:1.72;text-align:justify}.portal-terms-document>footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:1rem 1.5rem;color:#eaf4f9;background:#285e7f}.portal-terms-document>footer>i{font-size:1.15rem}.portal-terms-document>footer div{display:flex;flex-direction:column}.portal-terms-document>footer strong{font-size:.72rem}.portal-terms-document>footer span{color:rgba(255,255,255,.7);font-size:.6rem}.portal-terms-document>footer a{padding:.48rem .65rem;color:#285c7b;background:#fff;border-radius:7px;font-size:.62rem;font-weight:800;text-decoration:none}
@media(max-width:991.98px){.portal-terms-hero-grid{grid-template-columns:1fr}.portal-terms-symbol{display:none}.portal-terms-layout{grid-template-columns:1fr}.portal-terms-summary{position:static}.portal-terms-summary nav{display:flex;max-height:none;overflow-x:auto}.portal-terms-summary nav>span{display:none}.portal-terms-summary nav a{flex:0 0 auto;white-space:nowrap}}@media(max-width:575.98px){.portal-terms-hero{padding:7.3rem 0 3.2rem}.portal-terms-hero h1{font-size:2.35rem}.portal-terms-hero p{font-size:.82rem}.portal-terms-content{padding:1.2rem 0 3rem}.portal-terms-document>header{padding:1rem}.portal-terms-sections{padding:0 1rem}.portal-terms-sections>section{grid-template-columns:28px minmax(0,1fr);gap:.55rem;padding:.9rem 0}.portal-terms-sections>section>span{width:26px;height:26px}.portal-terms-sections p{font-size:.69rem;text-align:left}.portal-terms-document>footer{grid-template-columns:1fr;padding:1rem}.portal-terms-document>footer>i{display:none}.portal-terms-document>footer a{text-align:center}}