/* ======================================

   VARIÁVEIS CSS

====================================== */

:root {

    --primary-blue: #326ce5;

    --primary-blue-dark: #2861d1;

    --primary-blue-light: #4d7ee8;

    --secondary-blue: #45a8ff;

    --white: #ffffff;

    --text-dark: #2c3e50;

    --text-light: #ffffff;

    --border-radius: 15px;

    --border-radius-sm: 5px;

    --shadow: 0 10px 30px rgba(50, 108, 229, 0.1);

    --shadow-hover: 0 15px 40px rgba(50, 108, 229, 0.2);

    --transition: all 0.3s ease;

}



/* ======================================

   SEÇÃO HERO (TOPO)

====================================== */

#divheadimg {

    min-height: 720px;

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: flex-end; /* Texto embaixo */

}



#slideshow-curso .container {

    position: relative;

    z-index: 10;

    width: 100%;

}



/* ======================================

   FUNDO ESCURO EMBAIXO (COMO NA IMAGEM)

====================================== */

#divheadimg::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 350px; /* Altura do fundo escuro */

    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);

    z-index: 1;

    pointer-events: none;

}



/* ======================================

   CAPTION (TEXTO EMBAIXO)

====================================== */

#slideshow-curso .carousel-caption {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-end;

    width: 100%;

    padding-bottom: 3rem; /* Espaço da borda inferior */

    padding-left: 0;

    text-align: left;

    position: relative;

    bottom: 0;

    left: 0;

    right: auto;

    transform: none;

    z-index: 2;

}



/* ======================================

   TÍTULOS

====================================== */

#slideshow-curso h1 {

    font-size: 2.5rem;

    font-weight: 900;

    color: var(--white);

    text-transform: none !important;

    line-height: 1.1;

    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);

    margin-bottom: 0.3rem;

}



.header-title .highlight-text {

    background-color: #0055c8;

    padding: 0.25rem 0.7rem;

    border-radius: 5px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

    display: inline-block;

}



/* ======================================

   SUBTÍTULO (AUMENTADO)

====================================== */

.header-subtitle,

#slideshow-curso h2 {

    color: var(--white);

    font-size: 1.5rem;

    line-height: 1.1;

    font-weight: 600;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);

    margin: 1rem 0 2rem 0;

    max-width: 600px;

}



/* ======================================

   BOTÃO

====================================== */

.btn-header-cta {

    background: var(--white);

    color: var(--primary-blue-dark);

    border: none;

    border-radius: 50px;

    padding: 1rem 2.4rem;

    font-size: 1.1rem;

    font-weight: 900;

    text-transform: none !important;

    letter-spacing: 1px;

    transition: var(--transition);

    text-decoration: none;

    display: inline-block;

    line-height: 1.2;

    position: relative;

    z-index: 10;

    text-align: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

}



.btn-header-cta:hover {

    background: #f5f5f5;

    color: var(--primary-blue-dark);

    transform: translateY(-3px);

    text-decoration: none;

}



/* ======================================

   RESPONSIVIDADE

====================================== */

@media (max-width: 768px) {

    /* Aumenta MUITO a altura do banner */

    #divheadimg {

        min-height: 700px !important;

        background-position: center top !important; /* Mostra do TOPO */

        background-size: cover !important;

        display: flex !important;

        align-items: flex-end !important;

    }



    /* Container do texto */

    .mobile-render-center {

        display: flex !important;

        align-items: flex-end !important;

        min-height: 700px !important;

        padding-bottom: 0 !important;

    }



    /* DEGRADÊ ESCURO MUITO GRANDE EMBAIXO */

    #divheadimg::after {

        height: 500px !important; /* Metade do banner escuro */

        background: linear-gradient(

                to top,

                rgba(0, 0, 0, 0.98) 0%,

                rgba(0, 0, 0, 0.85) 30%,

                rgba(0, 0, 0, 0.5) 60%,

                rgba(0, 0, 0, 0.2) 80%,

                transparent 100%

        ) !important;

        z-index: 1 !important;

    }



    /* FORÇA o texto para o FUNDO do banner */

    #slideshow-curso .carousel-caption {

        position: absolute !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        padding: 0 1rem 2rem 1rem !important;

        margin: 0 !important;

        z-index: 2 !important;

        justify-content: flex-end !important;

        align-items: flex-start !important;

    }



    /* Textos menores e compactos */

    #slideshow-curso h1 {

        font-size: 1.7rem !important;

        margin-bottom: 0.1rem !important;

        line-height: 1.1 !important;

    }



    .header-title .highlight-text {

        padding: 0.2rem 0.5rem !important;

        font-size: 1.7rem !important;

    }



    /* Subtítulo compacto */

    .header-subtitle,

    #slideshow-curso h2 {

        font-size: 1rem !important;

        margin: 0.8rem 0 1.2rem 0 !important;

        line-height: 1.25 !important;

        max-width: 100% !important;

    }



    /* Botão menor */

    .btn-header-cta {

        padding: 0.8rem 1.8rem !important;

        font-size: 0.95rem !important;

        display: inline-block !important;

    }

}



/* Telas muito pequenas */

@media (max-width: 576px) {

    #divheadimg {

        min-height: 650px !important;

    }



    .mobile-render-center {

        min-height: 650px !important;

    }



    #divheadimg::after {

        height: 450px !important;

    }



    #slideshow-curso h1 {

        font-size: 1.5rem !important;

    }



    .header-title .highlight-text {

        font-size: 1.5rem !important;

        padding: 0.15rem 0.45rem !important;

    }



    .header-subtitle,

    #slideshow-curso h2 {

        font-size: 0.9rem !important;

        margin: 0.6rem 0 1rem 0 !important;

    }



    #slideshow-curso h2 br {

        display: none; /* Remove quebras de linha */

    }



    .btn-header-cta {

        padding: 0.75rem 1.6rem !important;

        font-size: 0.9rem !important;

    }

}



/* ========================================

   SEÇÃO 2 - BOLSAS ILIMITADAS (VERSÃO 2x2 FIXA)

   ======================================== */

.bolsas-section {

    background: #153a78;

    color: #fff;

    font-family: 'Inter', sans-serif;

    padding: 90px 0 100px;

}



.bolsas-section .container {

    width: 100%;

    max-width: 1680px; /* 🔹 aumenta a largura geral */

    margin: 0 auto;

    padding: 0 40px; /* 🔹 pequeno respiro lateral interno */

}



@media (min-width: 1900px) {

    .bolsas-section .container {

        max-width: 1780px; /* 🔹 mais espaço para monitores grandes */

        padding: 0 60px;

    }

}



.bolsas-title {

    font-size: 1.9rem;

    font-weight: 700;

    margin-bottom: 24px;

    text-align: left;

    color: #fff;

}



.bolsas-description {

    font-size: 1rem;

    line-height: 1.7;

    margin-bottom: 40px;

    color: #fff;

    text-align: left;

}



.bolsas-description strong {

    font-weight: 700;

}



.btn-porque {

    background: #00c8e8;

    color: #fff;

    font-size: 1rem;

    font-weight: 700;

    padding: 16px 40px;

    border: none;

    border-radius: 20px!important;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 6px 20px rgba(0, 200, 232, 0.25);

    margin-bottom: 60px;

    width: 100%;

    max-width: 100%;

}



.btn-porque:hover {

    background: #00b5d4;

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 200, 232, 0.35);

}



.cards-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px 32px;

    align-items: stretch;

}



.card-vantagem {

    background: #fff;

    border-radius: 14px;

    padding: 24px 20px;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    height: 100%;

    transition: all 0.3s ease;

    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);

}



.card-vantagem:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

}



/* ÍCONE CIRCULAR - COM IMAGENS PNG */

.card-icon {

    width: 70px;

    height: 70px;

    min-width: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

}



/* Ícones usando as imagens PNG */

.card-icon.icon-1 {

    background-image: url('../img/page-ico-processo-seletivo/icones-1.png');

}



.card-icon.icon-5 {

    background-image: url('../img/page-ico-processo-seletivo/icones-5.png');

}



.card-icon.icon-3 {

    background-image: url('../img/page-ico-processo-seletivo/icones-3.png');

}



.card-icon.icon-4 {

    background-image: url('../img/page-ico-processo-seletivo/icones-4.png');

}





.card-icon.icon-6 {

    background-image: url('../img/page-ico-processo-seletivo/Vector.png');

}





.card-text {

    flex: 1;

}



.card-text h4 {

    font-size: 1rem;

    font-weight: 700;

    color: #153a78;

    margin-bottom: 6px;

    line-height: 1.4;

}



.card-text p {

    font-size: 0.9rem;

    color: #153a78;

    margin: 0;

    line-height: 1.5;

}



.btn-quero-bolsa {

    background: #00c8e8;

    color: #fff !important;

    font-size: 1rem;

    font-weight: 800;

    padding: 15px 52px;

    border-radius: 50px;

    text-decoration: none;

    display: inline-block;

    transition: all 0.3s ease;

    text-transform: none !important;

    letter-spacing: 0.4px;

    margin-top: 50px;

}



.btn-quero-bolsa:hover {

    background: #00b5d4;

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 200, 232, 0.35);

    text-decoration: none;

}



.nota-regras {

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.85);

    margin-top: 12px;

}



@media (max-width: 991px) {

    .bolsas-section {

        padding: 60px 20px 80px;

    }



    .cards-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .card-vantagem {

        padding: 20px 16px;

    }



    .card-icon {

        width: 60px;

        height: 60px;

        min-width: 60px;

        background-size: contain;

    }



    .card-text h4 {

        font-size: 0.95rem;

    }



    .card-text p {

        font-size: 0.85rem;

    }



    .btn-quero-bolsa {

        font-size: 0.9rem;

        padding: 12px 36px;

        margin-top: 40px;

    }

}

/* ========================================

   SEÇÃO CONHEÇA NOSSOS CURSOS

   ======================================== */



:root {

    --primary-blue: #326ce5;

    --primary-blue-dark: #2861d1;

    --secondary-blue: #45a8ff;

    --white: #ffffff;

    --border-radius: 15px;

    --transition: all 0.3s ease;

}



/* ========================================

   SEÇÃO CURSOS

   ======================================== */

.cursos-section {

    color: var(--white);

    padding: 1rem 0 2.5rem;

    background: #153a78;

}



.cursos-section .container {

    max-width: 1250px; /* Limita a largura máxima */

    padding-left: 60px; /* Espaçamento reduzido */

    padding-right: 60px;

    margin: 0 auto; /* Centraliza */

}



.section-title-white {

    font-size: 2.5rem!important;

    font-weight: 700;

    color: var(--white);

    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);

    margin-bottom: 1.5rem;

}



/* Grid de cursos */

.cursos-grid {

    position: relative;

}



/* Dropdown do curso - */

.curso-dropdown {

    margin: 0;

}



/* Botão do curso -  */

.curso-btn {

    background: rgba(255, 255, 255, 0.9);

    color: var(--primary-blue);

    border: none;

    border-radius: 15px;

    padding: 0.8rem 1.8rem;

    font-size: 1rem;

    font-weight: 600;

    width: 100%;

    text-align: left;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: var(--transition);

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);

    cursor: pointer;

    margin-bottom: 0.5rem;

}



.curso-btn:hover,

.curso-btn:focus {

    background: var(--white);

    color: var(--primary-blue-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    text-decoration: none;

    outline: none;

}



/* Curso ativo (alternância de cores) */

.curso-dropdown.active .curso-btn {

    background: var(--secondary-blue);

    color: var(--white);

}



.curso-dropdown.active .curso-btn:hover {

    background: #3d96e6;

    color: var(--white);

}



/* Seta do botão */

.curso-btn span {

    transition: transform 0.3s ease;

    font-size: 0.9rem;

}



.curso-btn[aria-expanded="true"] span {

    transform: rotate(180deg);

}



/* Conteúdo flutuante do curso */

.curso-content-floating {

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 1000 !important;

    margin-top: 0.2rem;

}



.curso-content-floating .card {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

    border: 1px solid #ddd !important;

    border-radius: 12px;

    background: var(--white);

}



.curso-content-floating .card-body {

    color: var(--primary-blue) !important;

    padding: 1.2rem; /* Reduzido */

}



.curso-content-floating .card-body p {

    color: var(--primary-blue) !important;

    margin: 0;

    line-height: 1.6;

    font-size: 0.95rem;

}



/* Botão CTA - ARREDONDADO AZUL */

.btn-cta-cursos {

    background: #00c8e8;

    color: var(--white);

    border: none;

    border-radius: 50px;

    padding: 1rem 2.5rem;

    font-size: 1rem;

    font-weight: 800;

    text-transform: none !important;

    letter-spacing: 0.5px;

    transition: var(--transition);

    box-shadow: 0 4px 15px rgba(0, 200, 232, 0.3);

    text-decoration: none;

    display: inline-block;

    text-align: center;

}



.btn-cta-cursos:hover,

.btn-cta-cursos:focus {

    background: #00b5d4;

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(0, 200, 232, 0.4);

    text-decoration: none;

}



/* Links de editais */

.links-container {

    margin-top: 2rem;

}



.link-edital {

    color: var(--white);

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 4px;

    transition: var(--transition);

    display: inline-block;

    margin: 0.5rem 0;

    font-size: 1rem;

}



.link-edital:hover {

    color: var(--secondary-blue);

    text-shadow: 0 0 10px rgba(69, 168, 255, 0.5);

    transform: translateY(-2px);

    text-decoration: underline;

}



/* ========================================

   RESPONSIVIDADE

   ======================================== */

@media (max-width: 991px) {

    .cursos-section {

        padding: 3rem 0;

    }



    .section-title-white {

        font-size: 2rem;

        margin-bottom: 2rem;

    }



    .curso-btn {

        font-size: 1rem;

        padding: 0.5rem 1.2rem;

    }



    .btn-cta-cursos {

        font-size: 1rem;

        padding: 1rem 2rem;

    }



    .link-edital {

        font-size: 0.9rem;

    }

}



@media (max-width: 576px) {

    .section-title-white {

        font-size: 1.5rem;

    }



    .curso-btn {

        font-size: 0.95rem;

    }



    .btn-cta-cursos {

        width: 100%;

        padding: 0.9rem 1.5rem;

    }

}

/* ========================================

   SEÇÃO OUTROS PROCESSOS SELETIVOS

   ======================================== */

.outros-processos-section {

    color: var(--white);

    padding: 2rem 0 4rem 0;

}



.processo-header {

    margin-bottom: 3rem;

}



.processo-icon {

    width: 60px;

    height: 60px;

    background: rgba(69, 168, 255, 0.3);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.processo-icon i {

    font-size: 1.8rem;

    color: var(--white);

}



.processo-title {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--white);

    margin-bottom: 1rem;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.processo-description {

    font-size: 1.1rem;

    line-height: 1.6;

    opacity: 0.9;

    margin-bottom: 2rem;

}



.processo-opcoes {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin: 0 auto;

}



.processo-opcao {

    background: #57aff6;

    color: var(--white);

    border-radius: var(--border-radius);

    padding: 1.2rem 1.5rem;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 1rem;

    transition: var(--transition);

    backdrop-filter: blur(10px);

    text-underline-offset: 4px;

}



.processo-opcao:hover {

    background: rgba(69, 168, 255, 0.4);

    border-color: rgba(69, 168, 255, 0.6);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    color: var(--white);

    text-decoration: none;

}



.opcao-icon {

    font-size: 1.2rem;

    font-weight: bold;

    color: var(--white);

    flex-shrink: 0;

}



.opcao-texto {

    font-size: 1.4rem;

    font-weight: bold;

    line-height: 1.4;

    flex: 1;

}



.dropdown-menu {

    background: var(--white);

    border: none;

    border-radius: var(--border-radius-sm);

    box-shadow: var(--shadow);

    margin-top: 0.5rem;

}



.dropdown-item {

    color: var(--primary-blue);

    font-weight: 500;

    padding: 0.8rem 1.5rem;

    transition: var(--transition);

}



.dropdown-item:hover {

    background: rgba(50, 108, 229, 0.1);

    color: var(--primary-blue-dark);

}



.links-container {

    margin-top: 2rem;

}



.link-edital {

    color: var(--white);

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 4px;

    transition: var(--transition);

    display: inline-block;

    margin: 3px;

}



.link-edital:hover {

    color: var(--secondary-blue);

    text-shadow: 0 0 10px rgba(69, 168, 255, 0.5);

    transform: translateY(-2px);

}



/* ========================================

   SEÇÃO DEPOIMENTO

   ======================================== */

.depoimento-section {

    background: #1f4cbf;

    color: var(--white);

    padding: 4rem 0;

}



/* TÍTULO REDUZIDO */

.depoimento-section .section-title-white {

    font-size: 1.8rem;

    font-weight: 700;

    color: #fff;

    margin-bottom: 30px;

}



/* VÍDEO SEM HOVER */

.video-container {

    position: relative;

    border-radius: 50px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* REMOVIDO transition */

}



/* REMOVIDO hover do video-container */



.video-thumbnail {

    width: 100%;

    height: 415px;

    object-fit: cover;

    display: block;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(50, 108, 229, 0.3) 0%, rgba(69, 168, 255, 0.3) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}



.video-play-btn {

    width: 80px;

    height: 80px;

    background: rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* REMOVIDO transition */

}



/* REMOVIDO hover do video-play-btn */



.video-play-btn i {

    font-size: 2rem;

    color: var(--primary-blue);

    margin-left: 5px;

}



.linkassiste {

    width: 80px;

    height: 80px;

    border: 2px solid rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    text-decoration: none;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    /* REMOVIDO transition */

}



/* REMOVIDO hover do linkassiste */



.linkassiste i {

    font-size: 2rem;

    color: var(--white);

    margin-left: 5px;

}



.video-info {

    position: absolute;

    bottom: 20px;

    left: 20px;

    right: 20px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    z-index: 3;

}



.student-info strong {

    font-size: 1.3rem;

    font-weight: 700;

    display: block;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}



.student-info .course {

    font-size: 1rem;

    color: var(--secondary-blue);

    font-weight: 600;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}



.enem-badge {

    background: var(--secondary-blue);

    padding: 0.8rem 1.2rem;

    border-radius: var(--border-radius-sm);

    text-align: center;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(10px);

}



.enem-text {

    font-weight: 700;

    font-size: 0.9rem;

    line-height: 1.2;

    display: block;

}



.year {

    font-size: 0.8rem;

    font-weight: 600;

    opacity: 0.9;

}



.video-quote {

    position: absolute;

    bottom: 60px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.7);

    color: var(--white);

    padding: 0.8rem 1.5rem;

    border-radius: var(--border-radius);

    font-size: 1rem;

    font-weight: 500;

    text-align: center;

    z-index: 3;

    backdrop-filter: blur(10px);

}



.depoimento-text {

    font-size: 1.3rem;

    line-height: 1.6;

    margin-bottom: 2.5rem;

    opacity: 0.95;

    font-weight: 400;

}



/* BOTÃO COM COR #12c0e8 E ARREDONDADO */

.btn-cta-secondary {

    background: #12c0e8; /* COR CORRIGIDA */

    color: var(--white);

    border: none;

    border-radius: 50px; /* ARREDONDADO */

    padding: 1rem 2.5rem;

    font-size: 1.1rem;

    font-weight: 700;

    text-transform: none !important;

    letter-spacing: 0.5px;

    transition: var(--transition);

    box-shadow: 0 5px 20px rgba(18, 192, 232, 0.3);

    position: relative;

    overflow: hidden;

}



.btn-cta-secondary:hover {

    background: #0fadd1;

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: 0 8px 30px rgba(18, 192, 232, 0.4);

}



.btn-cta-secondary::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.6s ease;

}



.btn-cta-secondary:hover::before {

    left: 100%;

}



/* MODAL */

.modal-content {

    border-radius: var(--border-radius);

    border: none;

    overflow: hidden;

}



.modal-header {

    border: none;

    padding: 1rem;

}



.modal-body {

    padding: 0;

}



.btn-close {

    background: var(--white);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 1;

}



/* Mobile */

@media (max-width: 768px) {

    .depoimento-section .section-title-white {

        font-size: 1.5rem;

    }



    .video-thumbnail {

        height: auto;

        aspect-ratio: 9/16;

    }

}

/* ========================================

   SEÇÃO RANKING

   ======================================== */

/*  */



.ranking-section {

    background: #001E47;

    color: var(--white);

    padding: 4rem 0;

    position: relative;

    overflow: hidden;

}



/* Limita apenas o conteúdo interno */



.ranking-section .container {

    max-width: 940px;

    margin: 0 auto;

}



.ranking-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.03"><circle cx="30" cy="30" r="1"/></g></svg>');

    pointer-events: none;

}



.ranking-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 2rem;

}



.ranking-number {

    font-size: clamp(8rem, 15vw, 12rem);

    font-weight: 900;

    line-height: 0.8;

    color: var(--white);

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    position: relative;

}



.ranking-number::after {

    content: '';

    position: absolute;

    top: -10px;

    right: -20px;

    width: 30px;

    height: 30px;

    background: var(--secondary-blue);

    border-radius: 50%;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

}



.ranking-text {

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

}



.ranking-text .melhor {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    color: var(--white);

    line-height: 1;

}



.ranking-text .centro {

    font-size: clamp(1.8rem, 3.5vw, 2.5rem);

    font-weight: 300;

    color: var(--secondary-blue);

    font-style: italic;

    line-height: 1;

}



.ranking-text .universitario {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    color: var(--white);

    line-height: 1;

}



.ranking-text .do-brasil {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    color: var(--white);

    line-height: 1;

}



.melhor-image {

    position: relative;

    text-align: center;

    z-index: 1;

}



.melhor-image img {

    transition: var(--transition);

    object-fit: cover;

    width: 100%;

}



.melhor-image img:hover {

    transform: scale(1.02);

}



.campus-image {

    position: relative;

    text-align: center;

    z-index: 0;

    left: -80px;

}



.campus-image img {

    border-radius: 50px;

    transition: var(--transition);

    object-fit: cover;

    width: 100%;

}



.campus-image img:hover {

    transform: scale(1.02);

}



.pillar-card {

    text-align: center;

    padding: 2rem 1rem;

    transition: var(--transition);

    height: 100%;

    position: relative;

    z-index: 2;

}



.pillar-card:hover {

    transform: translateY(-10px);

}



.pillar-icon {

    width: 80px;

    height: 80px;

    background: rgba(69, 168, 255, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    transition: var(--transition);

    backdrop-filter: blur(10px);

    border: 2px solid rgba(69, 168, 255, 0.3);

}



.pillar-card:hover .pillar-icon {

    background: rgba(69, 168, 255, 0.4);

    border-color: rgba(69, 168, 255, 0.6);

    transform: scale(1.1);

}



.pillar-icon i {

    font-size: 2rem;

    color: var(--secondary-blue);

}



.pillar-card h4 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--white);

    line-height: 1.4;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    margin: 0;

}



@media (max-width: 768px) {



    .melhor-image {

        display: block !important;

        position: relative;

        max-width: 100%;

        margin: 1.5rem auto;

        padding: 0 15px;

        overflow: visible !important;

    }



    .melhor-image img {

        width: 100%;

        height: auto;

        max-width: 400px;

        margin: 0 auto;

        display: block;

        object-fit: contain;

    }



    /* CAMPUS - Imagem em formato de GOTA/LOSANGO COMPLETA */

    .campus-image {

        display: block !important;

        position: relative;

        left: 0;

        max-width: 100%;

        width: 100%;

        margin: 1.5rem auto;

        padding: 0 15px;

        overflow: visible !important;

    }



    .campus-image img {

        width: 100%;

        height: auto;

        max-width: 400px;

        margin: 0 auto;

        display: block;

        border-radius: 0 !important;

        object-fit: contain !important; /* MOSTRA A IMAGEM INTEIRA */

        object-position: center;

    }

}



@media (max-width: 576px) {

    .melhor-image,

    .campus-image {

        padding: 0 10px;

    }



    .melhor-image img,

    .campus-image img {

        max-width: 100%;

    }

}















/* ========================================

  SEÇÃO 4 PASSOS

   ======================================== */

.steps-section {

    background: #4169E1;

    color: var(--white);

    padding: 2.5rem 0;

    position: relative;

}



.steps-timeline {

    position: relative;

    padding: 1.5rem 0;

}



.steps-timeline::before {

    content: '';

    position: absolute;

    left: 22px; /* AJUSTADO para ícones menores */

    top: 60px;

    bottom: 70px;

    width: 2px; /* MAIS FINO */

    background: linear-gradient(135deg, #56B3FF 0%, #2BA0FF 33%, #1B69DB 66%, #1E4CBF 100%);

    border-radius: 2px;

}



.step-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 2rem; /* REDUZIDO de 3rem */

    position: relative;

    animation: fadeInUp 0.6s ease forwards;

}



.step-item:nth-child(1) { animation-delay: 0.1s; }

.step-item:nth-child(2) { animation-delay: 0.2s; }

.step-item:nth-child(3) { animation-delay: 0.3s; }

.step-item:nth-child(4) { animation-delay: 0.4s; }



/* ÍCONES MENORES */

.step-number {

    width: 45px; /* REDUZIDO de 60px */

    height: 45px;

    background: var(--secondary-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem; /* REDUZIDO de 1.5rem */

    font-weight: 700;

    color: var(--white);

    margin-right: 1.5rem; /* REDUZIDO de 2rem */

    flex-shrink: 0;

    box-shadow: 0 6px 20px rgba(69, 168, 255, 0.25); /* SOMBRA MAIS LEVE */

    position: relative;

    z-index: 2;

    transition: var(--transition);

}



.step-number1 { background: #56B3FF; }

.step-number2 { background: #2BA0FF; }

.step-number3 { background: #1B69DB; }

.step-number4 { background: #1E4CBF; }



.step-item:hover .step-number {

    transform: scale(1.1);

    box-shadow: 0 8px 25px rgba(69, 168, 255, 0.35);

}



.step-content {

    flex: 1;

    padding-top: 0.3rem; /* REDUZIDO */

}



.step-content h4 {

    font-size: 1.1rem; /* REDUZIDO de 1.3rem */

    font-weight: 600;

    color: var(--white);

    line-height: 1.4;

    margin: 0;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.btn-cta-steps {

    display: inline-block;

    background: #00C1EA;

    color: #fff;

    font-weight: 700;

    font-size: 0.9rem;

    text-transform: none !important;

    padding: 12px 36px; /* REDUZIDO */

    border: none;

    border-radius: 50px;

    text-decoration: none;

    letter-spacing: 0.5px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 193, 234, 0.3);

}



.btn-cta-steps:hover {

    background: #00A6C9;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 193, 234, 0.4);

    color: #fff;

    text-decoration: none;

}



.steps-section .steps-timeline {

    padding-bottom: 0.5rem !important; /* REDUZIDO */

}



.steps-section .steps-timeline .step-item:last-child {

    margin-bottom: 1rem !important; /* REDUZIDO */

}



.steps-section .row.mt-2 {

    margin-top: 0.8rem !important; /* REDUZIDO */

}



/* MOBILE */

@media (max-width: 768px) {

    .steps-section {

        padding: 2rem 0;

    }



    .steps-timeline::before {

        left: 18px;

        top: 50px;

        bottom: 60px;

    }



    .step-number {

        width: 38px;

        height: 38px;

        font-size: 1rem;

        margin-right: 1rem;

    }



    .step-content h4 {

        font-size: 1rem;

    }



    .step-item {

        margin-bottom: 1.5rem;

    }



    .btn-cta-steps {

        font-size: 0.85rem;

        padding: 10px 30px;

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}





/* ===============================

   SEÇÃO EXPERIÊNCIA UNILEÃO (IMAGEM)

   =============================== */

.experiencia-section {

    background: #4169E1;

    color: #fff;

    padding: 56px 0;

    position: relative;

    overflow: hidden;

    font-family: 'Inter', sans-serif;

}



/* Afina o CONTEÚDO (alinha com as outras sem cortar o fundo) */



.experiencia-section > .container {

    max-width: 900px;

    margin: 0 auto;

    padding-left: 16px;

    padding-right: 16px;

}



/* Título */



.experiencia-title {

    font-size: 2.4rem;

    font-weight: 400;

    text-transform: none !important;

    letter-spacing: .2px;

    text-align: center;

    margin: 0 0 14px;

}



.experiencia-title .viva,

.experiencia-title .unileao {

    font-weight: 900;

}



/* Frase com ícone */



.experiencia-intro {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 22px;

}



.experiencia-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: 2px solid #fff;

    background: rgba(255, 255, 255, .18);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.experiencia-icon i {

    font-size: 1.35rem;

    color: #fff;

}



.experiencia-description {

    margin: 0;

    font-size: 1.16rem;

    line-height: 1.55;

}



/* Carrossel de imagens */



.experiencia-carousel {

    position: relative;

}



.experiencia-carousel .carousel {

    width: 100%;

}



.experiencia-carousel .carousel-inner {

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 12px 36px rgba(0, 0, 0, .26);

}



/* Imagem: desktop em 16:9, cobre o quadro */



.experiencia-img {

    width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    display: block;

}



/* Indicadores e setas */



.experiencia-carousel .carousel-indicators {

    bottom: 14px;

    margin-bottom: 0;

}



.experiencia-carousel .carousel-indicators li {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .55);

    border: none;

    margin: 0 4px;

}



.experiencia-carousel .carousel-indicators li.active {

    background: #00C1EA;

}



.experiencia-carousel .carousel-control-prev,

.experiencia-carousel .carousel-control-next {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, .22);

    transition: .2s ease;

}



.experiencia-carousel .carousel-control-prev:hover,

.experiencia-carousel .carousel-control-next:hover {

    background: rgba(255, 255, 255, .32);

}



/* CTA */



.btn-experiencia-cta {

    display: inline-block;

    background: #00C1EA;

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    text-transform: none !important;

    letter-spacing: .4px;

    font-size: .95rem;

    line-height: 1.2;

    padding: 12px 36px;

    border-radius: 50px;

    border: none;

    box-shadow: 0 6px 20px rgba(0, 193, 234, .35);

    transition: .25s ease;

    margin-top: 14px;

}



.btn-experiencia-cta:hover {

    background: #00A6C9;

    transform: translateY(-2px);

    color: #fff;

    text-decoration: none;

}



/* RESPONSIVO */

@media (max-width: 992px) {

    .experiencia-section {

        padding: 48px 0;

    }



    .experiencia-section > .container {

        max-width: 100%;

    }

}



@media (max-width: 768px) {

    .experiencia-title {

        font-size: 2rem;

        margin-bottom: 10px;

    }



    .experiencia-intro {

        flex-direction: column;

        gap: 10px;

        text-align: center;

    }



    .experiencia-description {

        font-size: .98rem;

    }

}



/* MOBILE pequeno: deixa a IMAGEM em formato “retrato” 9:16 */

@media (max-width: 576px) {

    .experiencia-img {

        aspect-ratio: 9 / 16;

        object-fit: cover;

    }



    .experiencia-carousel .carousel-indicators {

        bottom: 10px;

    }



    .experiencia-carousel .carousel-indicators li {

        width: 8px;

        height: 8px;

    }



    .experiencia-carousel .carousel-control-prev,

    .experiencia-carousel .carousel-control-next {

        width: 40px;

        height: 40px;

    }

}





/* ===============================

  SEÇÃO DÚVIDAS FREQUENTES

   =============================== */



.faq-section {

    background: #4169E1;

    padding: 80px 0;

    color: #ffffff;

}



.faq-title {

    font-size: 2.5rem;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 40px;

    text-align: left;

    padding-left: 0;

}



.faq-accordion {

    width: 100%;

}



.faq-item {

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    margin-bottom: 0;

}



.faq-question {

    width: 100%;

    background: transparent;

    border: none;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 700;

    padding: 20px 50px 20px 0;

    text-align: left;

    cursor: pointer;

    position: relative;

    transition: all 0.3s ease;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.faq-question:hover {

    color: #00D4FF;

}



.faq-question:focus {

    outline: none;

}



.faq-icon {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.5rem;

    font-weight: 300;

    color: #ffffff;

    transition: transform 0.3s ease;

}



.faq-question[aria-expanded="true"] .faq-icon {

    transform: translateY(-50%) rotate(45deg);

}



.faq-answer {

    overflow: hidden;

}



.faq-answer-content {

    padding: 0 0 20px 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.95rem;

    line-height: 1.6;

}



@media (max-width: 768px) {

    .faq-title {

        font-size: 2rem;

    }



    .faq-question {

        font-size: 0.9rem;

        padding-right: 40px;

    }



    .faq-icon {

        font-size: 1.2rem;

    }

}





/* ==== FAQ — maior e alinhado com as outras ==== */

/* Altura geral da seção (mais respiro) */



.faq-section {

    padding: 80px 0;

}



/* Largura do conteúdo (mais largo no desktop) */



.faq-section > .container {

    max-width: 1040px;

    margin: 0 auto;

}



/* Título mais encorpado */



.faq-title {

    font-size: 2.6rem;

    margin: 0 0 32px 0;

    font-weight: 800;

}



/* Leve indent das perguntas */



.faq-accordion {

    margin-left: 12px;

}



/* Perguntas mais altas e legíveis */



.faq-question {

    font-size: 1.1rem;

    padding: 22px 52px 22px 10px;

}



/* Ícone ligeiramente maior */



.faq-icon {

    font-size: 1.6rem;

}



/* Respostas com mais corpo */



.faq-answer-content {

    font-size: 1.05rem;

    line-height: 1.7;

    padding: 0 0 22px 10px;

}



/* Opcional: deixar ainda mais largo em telas bem grandes */

@media (min-width: 1400px) {

    .faq-section > .container {

        max-width: 1140px;

    }

}



/* Mobile: mantém proporção confortável */

@media (max-width: 768px) {

    .faq-section {

        padding: 56px 0;

    }



    .faq-section > .container {

        max-width: 100%;

        padding: 0 18px;

    }



    .faq-title {

        font-size: 2rem;

        margin-bottom: 20px;

    }



    .faq-accordion {

        margin-left: 6px;

    }



    .faq-question {

        font-size: 1rem;

        padding: 18px 44px 18px 6px;

    }



    .faq-icon {

        font-size: 1.35rem;

    }



    .faq-answer-content {

        font-size: 1rem;

        padding-bottom: 18px;

    }

}





/* ========================================

   SEÇÃO CTA FINAL

   ======================================== */



.cta-final-section {

    background: #153a78;

    padding: 80px 20px;

    color: #fff;

    font-family: 'Inter', sans-serif;

}



.cta-final-section .container {

    max-width: 900px;

    margin: 0 auto;

}



.cta-final-title {

    font-size: 2.5rem;

    font-weight: 700;

    color: #fff;

    margin-bottom: 20px;

    line-height: 1.2;

    text-align: left;

}



.highlight-mega {

    background: #00c8e8;

    color: #fff;

    padding: 0 10px;

    font-weight: 700;

}



.cta-final-subtitle {

    font-size: 1.1rem;

    color: #fff;

    margin-bottom: 30px;

    text-align: left;

    font-weight: 400;

}



.btn-cta-final {

    background: #00c8e8;

    color: #fff !important;

    font-size: 1rem;

    font-weight: 700;

    padding: 16px 40px;

    border-radius: 50px;

    text-decoration: none;

    display: inline-block;

    transition: all 0.3s ease;

    text-transform: none !important;

    letter-spacing: 0.3px;

}



.btn-cta-final:hover {

    background: #00b5d4;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0, 200, 232, 0.3);

    color: #fff !important;

    text-decoration: none;

}



@media (max-width: 768px) {

    .cta-final-title {

        font-size: 1.8rem;

    }



    .cta-final-subtitle {

        font-size: 1rem;

    }



    .btn-cta-final {

        font-size: 0.9rem;

        padding: 14px 30px;

    }

}