/* ══════════════════════════════════════
   ESTILOS ADICIONAIS: HERO DYNAMIC
   ══════════════════════════════════════ */

/* Forçar os textos principais por cima dos fundos */
.z-index-2 {
    position: relative;
    z-index: 2;
}
.z-index-n1 {
    z-index: -1 !important;
}

/* Nova cor personalizada para os SVGs decorativos */
.fill-dark-red {
    fill: #6B0000 !important;
}

/* 1. MARCA D'ÁGUA DOS OBJETOS (Pote, Lápis, Caderno) */
.marca-agua-ilustrada-bg {
    position: absolute;
    top: 10%;
    left: -5%;
    width: 110%;
    height: auto;
    color: #8B0000; /* Cor vermelha escura base */
    opacity: 0.04;  /* Efeito fantasma super leve para não atrapalhar leitura */
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.h1h{
    color: #02052c;
}

.bg-success1{
    background-color: #5a0707 !important;
}
/* 2. SISTEMA DE ESTRELAS ANIMADAS COM LINHAS */
.container-estrelas-magicas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* As linhas invisíveis que ganham brilho sutil */
.linha-invisivel-1, .linha-invisivel-2 {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(139,0,0,0.15), transparent);
    height: 2px;
    width: 80%;
    left: 10%;
}
.linha-invisivel-1 { top: 30%; transform: rotate(-5deg); }
.linha-invisivel-2 { top: 65%; transform: rotate(5deg); }

/* Configuração base das Estrelas */
.estrela-cadente {
    position: absolute;
    width: 25px;
    height: 25px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
    opacity: 0.8;
}

/* Animação Estrela 1 (Move-se da esquerda para a direita na linha 1) */
.e-1 {
    animation: trocaLugarUm 6s infinite ease-in-out;
}

/* Animação Estrela 2 (Move-se da direita para a esquerda na linha 2) */
.e-2 {
    animation: trocaLugarDois 6s infinite ease-in-out;
}

/* ══════════════════════════════════════
   KEYFRAMES (ANIMAÇÕES TIME-LOOP)
   ══════════════════════════════════════ */
@keyframes trocaLugarUm {
    0% { top: 30%; left: 10%; transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { top: 65%; left: 80%; transform: scale(1.3) rotate(180deg); opacity: 0.9; }
    100% { top: 30%; left: 10%; transform: scale(1) rotate(360deg); opacity: 0.3; }
}

@keyframes trocaLugarDois {
    0% { top: 65%; left: 80%; transform: scale(1.3) rotate(180deg); opacity: 0.9; }
    50% { top: 30%; left: 10%; transform: scale(1) rotate(360deg); opacity: 0.3; }
    100% { top: 65%; left: 80%; transform: scale(1.3) rotate(540deg); opacity: 0.9; }
}

/* Responsividade simples para ecrãs pequenos */
@media (max-width: 991.98px) {
    .container-estrelas-magicas {
        display: none; /* Remove a animação no telemóvel para poupar processamento */
    }
    .marca-agua-ilustrada-bg {
        opacity: 0.02;
    }
}

/* --- CONFIGURAÇÃO DO BANNER FORMATO ONDA --- */
.banner-onda-container {
    position: absolute;
    top: 0;
    width: 1200px;
    height: 400px;
    display: block;
    opacity: 1 !important; /* Força o elemento pai a ficar 100% visível */
}

.onda-recortada-conteudo {
    position: relative;
    width: 1200px;
    height: 400px;
    background-color: #a194ee3f !important; /* O fundo vermelho vivo de base */
    clip-path: url(#recorteOnda); /* Executa o corte matemático da onda */
    -webkit-clip-path: url(#recorteOnda); /* Compatibilidade Safari/Chrome antigo */
    overflow: hidden;
}

/* Garante que a imagem preencha toda a onda e fique visível */
.imagem-fundo-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Altera para 'screen' para o padrão geométrico cinza se destacar sobre o vermelho */
    mix-blend-mode: screen; 
    opacity: 0.3; /* Controle de opacidade exclusivo do padrão para não atrapalhar os logos */
    display: block;
}

/* --- POSICIONAMENTO DOS LOGOS INTERNOS --- */
.logos-espalhados {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.logo-item {
    position: absolute;
    width: 60px; /* Tamanho dos logos */
    height: auto;
    opacity: 0.85; /* Logos bem nítidos e visíveis */
}

/* Coordenadas para espalhar os logos em qualquer lugar dentro da onda */
.logo-item.l-1 {
    top: 40px;
    left: 200px;
}

.logo-item.l-2 {
    top: 100px;
    left: 550px;
}

.logo-item.l-3 {
    top: 50px;
    left: 920px;
}

/* Responsividade Básica */
@media (max-width: 1199.98px) {
    .banner-onda-container,
    .onda-recortada-conteudo {
        width: 100vw;
        height: 400px;
    }
}


.scroll-horizontal-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}
.scroll-horizontal-container::-webkit-scrollbar { display: none; }
.scroll-item-horizontal {
    flex: 0 0 calc(33.333% - 6px);
    scroll-snap-align: start;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
}
.grid-item-insta {
    position: relative;
    width: 33.333%;
    padding: 2px !important;
}
.grid-square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.grid-square img, .scroll-item-horizontal img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s ease;
}
.grid-square:hover img, .scroll-item-horizontal:hover img { transform: scale(1.06); }

.logo-img{
    width: 90px !important;
    height: 50px !important;
}


        /* ── MOLDURA DO DISPOSITIVO (RESPONSIVO) ── */
        .window-mockup {
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
            border-radius: 36px;
            background: #1e293b;
            padding: 10px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
            border: 4px solid #0f172a;
        }

        /* ── ECRÃ DO SMARTPHONE ── */
        .window-body {
            position: relative;
            height: 580px; /* Altura visível padrão */
            background: #ffffff;
            border-radius: 26px;
            overflow: hidden;
        }

        /* ── CONTAINER COLETIVO DAS 10 TELAS ── */
        .scrolling-track {
            display: flex;
            flex-direction: column;
            width: 100%;
            /* 45 segundos para dar tempo de passar, pausar e fazer o charme em todas as 10 telas */
            animation: advancedAppTour 45s cubic-bezier(0.25, 1, 0.5, 1) infinite;
        }

        /* Pausa a animação caso o usuário ponha o rato em cima */
        .window-body:hover .scrolling-track {
            animation-play-state: paused;
        }

        /* Cada ecrã individual */
        .app-screen {
            width: 100%;
            height: 580px; /* Alinhado com a altura do ecrã */
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            flex-shrink: 0;
        }

        /* ── MAPEAMENTO DOS 10 PRINTS ANEXADOS ── */
        .img-1  { background-image: url('Screenshot (81).png'); }
        .img-2  { background-image: url('Screenshot (83).png'); }
        .img-3  { background-image: url('Screenshot (86).png'); }
        .img-4  { background-image: url('Screenshot (69).png'); }
        .img-5  { background-image: url('Screenshot (91).png'); }
        .img-6  { background-image: url('Screenshot (92).png'); }
        .img-7  { background-image: url('Screenshot (93).png'); }
        .img-8  { background-image: url('Screenshot conta.png'); }
        .img-9  { background-image: url('Screenshot home.png'); }
        .img-10 { background-image: url('Screenshot login.png'); }

        /* ── TIMELINE PROFISSIONAL: SCROLL -> PAUSA -> LEVE SUBIDA -> TROCA ── */
        /* Cada bloco de 10% representa uma imagem. Exemplo de ciclo interno:
           0% a 7% (Fica estático na tela) -> 7% a 9% (Dá uma subidinha de 30px charmosa) -> 9% a 10% (Desliza para a próxima) */
        @keyframes advancedAppTour {
            /* TELA 1 */
            0%, 7% { transform: translateY(0); }
            8.5% { transform: translateY(-30px); }
            
            /* TELA 2 (-580px) */
            10%, 17% { transform: translateY(-580px); }
            18.5% { transform: translateY(-610px); }
            
            /* TELA 3 (-1160px) */
            20%, 27% { transform: translateY(-1160px); }
            28.5% { transform: translateY(-1190px); }
            
            /* TELA 4 (-1740px) */
            30%, 37% { transform: translateY(-1740px); }
            38.5% { transform: translateY(-1770px); }
            
            /* TELA 5 (-2320px) */
            40%, 47% { transform: translateY(-2320px); }
            48.5% { transform: translateY(-2350px); }
            
            /* TELA 6 (-2900px) */
            50%, 57% { transform: translateY(-2900px); }
            58.5% { transform: translateY(-2930px); }
            
            /* TELA 7 (-3480px) */
            60%, 67% { transform: translateY(-3480px); }
            68.5% { transform: translateY(-3510px); }
            
            /* TELA 8 (-4060px) */
            70%, 77% { transform: translateY(-4060px); }
            78.5% { transform: translateY(-4090px); }
            
            /* TELA 9 (-4640px) */
            80%, 87% { transform: translateY(-4640px); }
            88.5% { transform: translateY(-4670px); }
            
            /* TELA 10 (-5220px) */
            90%, 97% { transform: translateY(-5220px); }
            99% { transform: translateY(-5250px); }
            
            /* FIM E VOLTA FLUIDA AO TOPO */
            100% { transform: translateY(-5800px); }
        }

        /* ── INTERFACE LATERAL (ESTILO TECH STARTUP) ── */
        .access-card {
            background: #ffffff;
            border-radius: 24px;
            padding: 35px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        .category-btn {
            background: rgba(13, 110, 253, 0.08);
            color: #0d6efd;
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            font-weight: 500;
        }

        .web-link {
            text-decoration: none;
            color: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            transition: all 0.2s ease-in-out;
        }
        .web-link:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-2px);
        }

        .icon-square {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .app-btn {
            background: #0f172a;
            color: #fff;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px;
            border-radius: 12px;
            transition: background 0.2s;
        }
        .app-btn:hover { background: #1e293b; color: #fff; }
        .app-btn i { font-size: 1.6rem; margin-bottom: 4px; }
        .app-btn span { font-size: 0.75rem; opacity: 0.7; }

        /* ── RESPONSIVIDADE PARA ECRÃS PEQUENOS (TABLETS/MOBILES) ── */
        @media (max-width: 991px) {
            .window-mockup {
                margin-top: 40px;
                max-width: 290px; /* Reduz ligeiramente a largura do celular */
            }
            .window-body, .app-screen {
                height: 500px; /* Nova proporção de altura adaptativa */
            }
            
            /* Recalculando a timeline baseando-se em blocos de 500px */
            @keyframes advancedAppTour {
                0%, 7% { transform: translateY(0); }
                8.5% { transform: translateY(-25px); }
                
                10%, 17% { transform: translateY(-500px); }
                18.5% { transform: translateY(-525px); }
                
                20%, 27% { transform: translateY(-1000px); }
                28.5% { transform: translateY(-1025px); }
                
                30%, 37% { transform: translateY(-1500px); }
                38.5% { transform: translateY(-1525px); }
                
                40%, 47% { transform: translateY(-2000px); }
                48.5% { transform: translateY(-2025px); }
                
                50%, 57% { transform: translateY(-2500px); }
                58.5% { transform: translateY(-2525px); }
                
                60%, 67% { transform: translateY(-3000px); }
                68.5% { transform: translateY(-3025px); }
                
                70%, 77% { transform: translateY(-3500px); }
                78.5% { transform: translateY(-3525px); }
                
                80%, 87% { transform: translateY(-4000px); }
                88.5% { transform: translateY(-4025px); }
                
                90%, 97% { transform: translateY(-4500px); }
                99% { transform: translateY(-4525px); }
                
                100% { transform: translateY(-5000px); }
            }
        }



        /* ==========================================
   ESTILOS COMPONENTE REELS TIPO FACEBOOK
   ========================================== */

/* --- CONTAINER BASE REELS --- */
.reels-horizontal-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Oculta no Firefox */
}
.reels-horizontal-scroll::-webkit-scrollbar {
    display: none; /* Oculta no Chrome/Safari */
}

.reel-card {
    flex: 0 0 210px;
    width: 210px;
    height: 360px;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #000;
}
.reel-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}
.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 12px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    z-index: 2;
}

/* --- BOTÃO VER MAIS FACEBOOK (COM HOVER DE IMPACTO) --- */
.btn-fb-reels {
    background-color: #1877f2;
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.2);
}
.btn-fb-reels:hover {
    background-color: #145dbf;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4);
}

/* --- BOTÕES DE CONTROLADORES DE LADO (SETAS) --- */
.ctrl-scroll-reel {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.2s ease;
    cursor: pointer;
}
.ctrl-scroll-reel:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.1);
    color: #1877f2;
}
.ctrl-scroll-reel.prev { left: -10px; }
.ctrl-scroll-reel.next { right: -10px; }

/* Ocultar as setas em telas Mobile para não atrapalhar o arrastar do dedo */
@media (max-width: 767.98px) {
    .ctrl-scroll-reel { display: none !important; }
    .reel-card { flex: 0 0 170px; width: 170px; height: 290px; }
    .btn-fb-reels { font-size: 0.75rem; padding: 6px 12px; }
}





/* Esconde a barra de rolagem nativa na área de categorias, mantendo o scroll funcional */
.container-scroll-categorias::-webkit-scrollbar {
    display: none;
}

/* ESTILOS DINÂMICOS PARA O MODO LISTA (Aba List Curso) */
.view-container-cursos.list-mode {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
}

.view-container-cursos.list-mode > div {
    width: 100% !important;
    max-width: 100% !important;
}

/* Modifica a estrutura interna do Card padrão para se comportar como linha */
.view-container-cursos.list-mode .card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Ajusta a imagem do curso no modo lista */
.view-container-cursos.list-mode .card img,
.view-container-cursos.list-mode .card .card-img-top-wrapper {
    width: 240px !important;
    min-width: 240px !important;
    height: 100% !important;
    object-fit: cover;
}

.view-container-cursos.list-mode .card-body {
    flex: 1;
    padding: 20px !important;
}

/* Responsividade para ecrãs pequenos (Mobile) voltarem a empilhar elegantemente */
@media (max-width: 575.98px) {
    .view-container-cursos.list-mode .card {
        flex-direction: column !important;
    }
    .view-container-cursos.list-mode .card img,
    .view-container-cursos.list-mode .card .card-img-top-wrapper {
        width: 100% !important;
        min-width: 100% !important;
        height: 180px !important;
    }
}


/* ============================================================
   ESTILIZAÇÃO PREMIUM ISOLADA: MCA ART GALLERY (ANTI-BOOTSTRAP)
   ============================================================ */

.mca-art-seccao-galeria {
    padding: 60px 0;
    background-color: #ffffff;
    width: 100% !important;
    box-sizing: border-box;
}

.mca-art-cabecalho-texto {
    text-align: center;
    margin-bottom: 40px;
    font-family: system-ui, -apple-system, sans-serif;
}

.mca-art-cabecalho-texto h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #02052c; /* Alinhado com a cor principal do teu hero */
    margin: 0 0 10px 0;
}

.mca-art-cabecalho-texto p {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
}

/* Palco de Rolagem com transbordo camuflado */
.mca-art-palco-rolagem {
    overflow: hidden; /* Corrigido o erro de sintaxe anterior */
    width: 100%;
    position: relative;
    padding: 15px 0;
    background: #fafafa;
    display: block;
}

/* Linhas horizontais (passadeiras) */
.mca-art-passadeira {
    display: flex !important;
    gap: 16px !important;
    width: max-content !important;
    padding: 2px;
}

.mca-art-passadeira-direita {
    margin-top: 16px;
}

/* Motores de animação contínua e suave */
.mca-art-passadeira-esquerda {
    animation: mcaMoverEsquerda 40s linear infinite;
}

.mca-art-passadeira-direita {
    animation: mcaMoverDireita 40s linear infinite;
}

/* Congela o movimento ao passar o rato */
.mca-art-palco-rolagem:hover .mca-art-passadeira {
    animation-play-state: paused !important;
}

/* GEOMETRIA DAS MOLDURAS (PC: 4 por tela | Mobile: 2 por tela) */
.mca-art-moldura {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(2, 5, 44, 0.06);
    background: #1e293b;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    
    /* Dispositivos Móveis (Padrão Base): 2 fotos por tela calculando os gaps */
    width: calc(50vw - 24px);
    height: 150px;
}

@media (min-width: 992px) {
    .mca-art-moldura {
        /* Computadores: Retém exatamente 4 fotos por ecrã de forma harmônica */
        width: calc(25vw - 28px);
        height: 220px;
    }
}

.mca-art-moldura img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Comportamento Hover do Card */
.mca-art-moldura:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(2, 5, 44, 0.15);
}

.mca-art-moldura:hover img {
    transform: scale(1.08);
}

/* Película Escura e Ícone Minimalista de Visualização */
.mca-art-pelicula-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 5, 44, 0.75); /* Azul escuro do seu ecossistema */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mca-art-moldura:hover .mca-art-pelicula-hover {
    opacity: 1;
}

.mca-art-pelicula-hover i {
    color: #ffffff;
    font-size: 26px;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mca-art-moldura:hover .mca-art-pelicula-hover i {
    transform: scale(1);
}

/* ============================================================
   ESTILOS ISOLADOS DO MODAL TEATRO (LIGHTBOX FULLSCREEN)
   ============================================================ */
.mca-art-teatro-modal {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(2, 5, 44, 0.98); /* Fundo opaco escuro luxuoso */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.mca-art-teatro-modal[aria-hidden="false"] {
    display: flex !important;
}

.mca-art-teatro-projeccao {
    max-width: 80%;
    max-height: 80%;
    position: relative;
    text-align: center;
}

.mca-art-teatro-projeccao img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Botão Fechar Isento de Estilos Nativos */
.mca-art-teatro-fechar {
    position: absolute;
    top: 30px; right: 40px;
    color: #ffffff;
    font-size: 46px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.mca-art-teatro-fechar:hover {
    color: #ff4a4a;
}

/* Setas de Navegação Autônomas */
.mca-art-teatro-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ffffff;
    width: 55px; height: 55px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.mca-art-teatro-seta:hover {
    background: #ffffff;
    color: #02052c;
}
.mca-art-teatro-ant { left: 30px; }
.mca-art-teatro-prox { right: 30px; }

.mca-art-teatro-legenda {
    color: #94a3b8;
    margin-top: 20px;
    font-size: 1.05rem;
    font-family: system-ui, sans-serif;
}

/* Keyframes Protegidos */
@keyframes mcaMoverEsquerda {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 32px)); }
}

@keyframes mcaMoverDireita {
    0% { transform: translateX(calc(-50% - 32px)); }
    100% { transform: translateX(0); }
}