/* =========================================================
   CEVINED
   Centro de Estudios Virtual de Innovación Educativa
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --azul-oscuro: #082B4C;

    --azul-principal: #0057A8;

    --azul-medio: #174F87;

    --azul-claro: #E8F7FB;

    --turquesa: #00A6C7;

    --blanco: #ffffff;

    --gris: #f4f6f9;

    --gris-texto: #555555;

    --dorado: #00A6C7;

    --sombra:
        0 8px 25px rgba(0, 0, 0, 0.10);

    --transicion:
        all 0.3s ease;
}


/* =========================================================
   RESETEO
   ========================================================= */

html {

    scroll-behavior: smooth;
}


body {

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--blanco);

    color:
        var(--azul-oscuro);

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.top-bar {

    width:
        100%;

    min-height:
        42px;

    background:
        linear-gradient(
            90deg,
            var(--azul-oscuro),
            #18365e
        );

    color:
        var(--blanco);

    display:
        flex;

    align-items:
        center;

    font-size:
        15px;

    font-weight:
        500;
}


.top-bar-left,
.top-bar-right {

    display:
        flex;

    align-items:
        center;
}


.top-bar i {

    margin-right:
        7px;

    font-size:
        15px;
}


/* =========================================================
   HEADER
   ========================================================= */

.main-header {

    width:
        100%;

    background:
        var(--blanco);

    box-shadow:
        var(--sombra);

    position:
        relative;

    z-index:
        1000;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {

    min-height:
        145px;

    padding-top:
        15px;

    padding-bottom:
        15px;
}


/* =========================================================
   MARCA / LOGO
   ========================================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    text-decoration:
        none;

    flex-shrink:
        0;
}


.brand-logo {

    width:
        125px;

    height:
        125px;

    object-fit:
        contain;

    border-radius:
        15px;
}


.brand-text {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.brand-text h1 {

    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        30px;

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        var(--azul-oscuro);

    line-height:
        1.1;
}


.brand-text p {

    margin:
        8px 0 0;

    font-size:
        15px;

    font-weight:
        500;

    color:
        var(--gris-texto);

    line-height:
        1.3;
}


/* =========================================================
   MENÚ
   ========================================================= */

.navbar-nav {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        nowrap;

    gap:
        24px;
}


.navbar-nav .nav-item {

    white-space:
        nowrap;
}


.navbar-nav .nav-link {

    position:
        relative;

    color:
        var(--azul-oscuro);

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        0.3px;

    padding:
        10px 0;

    white-space:
        nowrap;

    transition:
        var(--transicion);
}


.navbar-nav .nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        3px;

    background:
        var(--turquesa);

    transition:
        var(--transicion);
}


.navbar-nav .nav-link:hover {

    color:
        var(--azul-principal);
}


.navbar-nav .nav-link:hover::after {

    width:
        100%;
}


/* =========================================================
   BOTÓN ACCEDER
   ========================================================= */

.btn-acceso {

    background:
        linear-gradient(
            135deg,
            var(--azul-oscuro),
            var(--turquesa)
        );

    border:
        none;

    color:
        var(--blanco) !important;

    padding:
        14px 28px;

    border-radius:
        35px;

    font-size:
        15px;

    font-weight:
        700;

    box-shadow:
        0 8px 20px rgba(
            7,
            26,
            56,
            0.18
        );

    transition:
        var(--transicion);
}


.btn-acceso:hover {

    color:
        var(--blanco) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px rgba(
            7,
            26,
            56,
            0.25
        );
}


.btn-acceso i {

    margin-right:
        6px;
}


/* =========================================================
   BOTÓN HAMBURGUESA DE BOOTSTRAP
   ========================================================= */

.navbar-toggler {

    border:
        none;

    background:
        var(--azul-oscuro);

    padding:
        10px;

    border-radius:
        8px;
}


.navbar-toggler:focus {

    box-shadow:
        0 0 0 3px
        rgba(
            20,
            154,
            165,
            0.25
        );
}


.navbar-toggler-icon {

    filter:
        brightness(0)
        invert(1);
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.main-content {

    flex:
        1;

    background:
        var(--gris);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    width:
        100%;

    min-height:
        550px;

    background:
        linear-gradient(
            rgba(
                234,
                241,
                251,
                0.88
            ),
            rgba(
                255,
                255,
                255,
                0.96
            )
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.hero-content {

    width:
        100%;

    min-height:
        450px;
}


/* =========================================================
   CARRUSEL PRINCIPAL
   ========================================================= */

.cevined-carousel {

    width:
        100%;

    overflow:
        hidden;

    background:
        var(--gris);

    box-shadow:
        0 12px 35px rgba(
            7,
            26,
            56,
            0.12
        );
}


.cevined-carousel .carousel-item {

    height:
        550px;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--gris);
}


.cevined-carousel .carousel-item.active {

    display:
        flex;
}


.cevined-carousel .carousel-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    display:
        block;
}


.cevined-carousel .carousel-control-prev,
.cevined-carousel .carousel-control-next {

    width:
        8%;

    opacity:
        0.85;

    transition:
        var(--transicion);
}


.cevined-carousel .carousel-control-prev:hover,
.cevined-carousel .carousel-control-next:hover {

    opacity:
        1;
}


.cevined-carousel .carousel-control-prev-icon,
.cevined-carousel .carousel-control-next-icon {

    width:
        48px;

    height:
        48px;

    background-color:
        rgba(
            7,
            26,
            56,
            0.78
        );

    background-size:
        55%;

    border-radius:
        50%;

    padding:
        12px;
}


.cevined-carousel .carousel-indicators {

    margin-bottom:
        18px;
}


.cevined-carousel .carousel-indicators button {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    margin-left:
        5px;

    margin-right:
        5px;

    background-color:
        var(--blanco);

    opacity:
        0.65;

    border:
        2px solid rgba(
            7,
            26,
            56,
            0.35
        );
}


.cevined-carousel .carousel-indicators button.active {

    opacity:
        1;

    background-color:
        var(--turquesa);
}



/* =========================================================
   PRESENTACIÓN INSTITUCIONAL
   ========================================================= */

.presentacion-cevined {
    width: 100%;
    padding: 75px 20px;
    background: var(--blanco);
}

.presentacion-contenido {
    padding: 10px 20px 10px 0;
}

.presentacion-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    background: var(--azul-claro);
    color: var(--azul-principal);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.presentacion-contenido h2 {
    margin: 0 0 22px;
    color: var(--azul-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.08;
}

.presentacion-contenido h2 span {
    display: block;
    color: var(--turquesa);
}

.presentacion-intro {
    margin: 0 0 14px;
    color: var(--gris-texto);
    font-size: 20px;
    line-height: 1.65;
    font-weight: 500;
}

.presentacion-texto {
    margin: 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.7;
}

.presentacion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* =========================================================
   BOTÓN SOLICITAR INFORMACIÓN
   ========================================================= */

.presentacion-botones {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    margin-top:
        30px;
}


.btn-presentacion-principal {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        54px;

    padding:
        14px 30px;

    border-radius:
        12px;

    text-decoration:
        none;

    color:
        var(--blanco);

    background:
        linear-gradient(
            135deg,
            var(--azul-oscuro),
            var(--azul-principal)
        );

    border:
        1px solid
        rgba(
            0,
            166,
            199,
            0.35
        );

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        0.2px;

    box-shadow:
        0 8px 22px
        rgba(
            8,
            43,
            76,
            0.20
        );

    transition:
        var(--transicion);
}


.btn-presentacion-principal i {

    font-size:
        20px;

    color:
        var(--blanco);
}


.btn-presentacion-principal:hover {

    color:
        var(--blanco);

    background:
        linear-gradient(
            135deg,
            var(--azul-principal),
            var(--turquesa)
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(
            0,
            87,
            168,
            0.28
        );
}


.btn-presentacion-principal:active {

    transform:
        translateY(-1px);
}


.presentacion-tarjeta {
    padding: 32px;
    background: var(--blanco);
    border: 1px solid #e0e6ee;
    border-radius: 28px;
    box-shadow: 0 12px 35px rgba(7, 26, 56, 0.08);
}

.presentacion-tarjeta-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.presentacion-tarjeta-encabezado i {
    color: var(--turquesa);
    font-size: 25px;
}

.presentacion-tarjeta-encabezado h3 {
    margin: 0;
    color: var(--azul-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.2;
}

.presentacion-tarjeta > p {
    margin: 0 0 22px;
    color: #6a665f;
    font-size: 16px;
    line-height: 1.6;
}

.presentacion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.presentacion-item {
    min-height: 165px;
    padding: 22px 18px;
    text-align: center;
    background: #f8fafd;
    border: 1px solid #e0e6ee;
    border-radius: 20px;
}

.presentacion-item > i {
    display: block;
    margin-bottom: 12px;
    color: var(--turquesa);
    font-size: 25px;
}

.presentacion-item h4 {
    margin: 0 0 9px;
    color: var(--azul-oscuro);
    font-size: 17px;
    font-weight: 700;
}

.presentacion-item p {
    margin: 0;
    color: #6a665f;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   FOOTER
   ========================================================= */



.footer {

    background:
        var(--azul-oscuro);

    color:
        var(--blanco);

    padding:
        28px 20px 25px;
}


.footer-content {

    min-height:
        0;
}


.footer-contact {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;
}


.footer-info {

    margin:
        0;

    width:
        100%;
}


.footer-info p {

    margin:
        0 0 9px;

    font-size:
        14px;

    line-height:
        1.4;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;
}


.footer-info p:last-child {

    margin-bottom:
        0;
}


.footer-info i {

    margin:
        2px 0 0;

    font-size:
        15px;

    flex-shrink:
        0;
}


.footer-info a {

    color:
        var(--blanco);

    text-decoration:
        none;

    transition:
        var(--transicion);
}


.footer-info a:hover {

    color:
        var(--turquesa);
}


.footer-brand-area {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-left:
        1px solid rgba(
            255,
            255,
            255,
            0.15
        );

    min-height:
        150px;
}


.footer-logo {

    margin:
        0 0 12px;
}


.footer-logo-img {

    width:
        65px;

    height:
        65px;

    object-fit:
        contain;

    border-radius:
        8px;
}


.footer-social {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        10px;
}


.footer-social a {

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

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

    color:
        var(--blanco);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    font-size:
        18px;

    transition:
        var(--transicion);
}


.footer-social a:hover {

    background:
        var(--turquesa);

    color:
        var(--blanco);

    transform:
        translateY(-2px);
}


.footer-brand-area .copyright {

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.3;
}


.footer-brand-area .copyright i {

    margin-right:
        5px;
}



/* =========================================================
   PRESENTACIÓN RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .presentacion-cevined {
        padding: 60px 20px;
    }

    .presentacion-contenido h2 {
        font-size: 42px;
    }

    .presentacion-tarjeta {
        padding: 26px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */



@media (max-width: 1199px) {

    .brand-logo {

        width:
            85px;

        height:
            85px;
    }


    .brand-text h1 {

        font-size:
            26px;
    }


    .brand-text p {

        font-size:
            14px;
    }


    .navbar-nav {

        gap:
            16px;
    }


    .navbar-nav .nav-link {

        font-size:
            13px;
    }


    .btn-acceso {

        padding:
            12px 22px;

        font-size:
            14px;
    }
}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media (max-width: 991px) {

    .navbar {

        min-height:
            105px;
    }


    .navbar-collapse {

        margin-top:
            20px;

        padding:
            15px;

        background:
            var(--blanco);

        border-radius:
            12px;

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


    .navbar-nav {

        align-items:
            stretch !important;

        flex-wrap:
            wrap;

        gap:
            0 !important;
    }


    .navbar-nav .nav-item {

        width:
            100%;
    }


    .navbar-nav .nav-link {

        text-align:
            center;

        padding:
            13px 10px;

        font-size:
            15px;
    }


    .navbar-nav .nav-link::after {

        display:
            none;
    }


    .btn-acceso {

        display:
            block;

        width:
            100%;

        text-align:
            center;

        margin-top:
            10px;
    }


    .hero {

        min-height:
            auto;
    }


    .cevined-carousel .carousel-item {

        height:
            450px;
    }


    .cevined-carousel .carousel-item img {

        height:
            450px;
    }


    /* LOGO DEL FOOTER EN TABLET */

    .footer-logo-img {

        width:
            80px;

        height:
            80px;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .presentacion-botones {

        width:
            100%;

        margin-top:
            24px;
    }


    .btn-presentacion-principal {

        width:
            100%;

        min-height:
            52px;

        padding:
            13px 20px;

        font-size:
            15px;
    }


    .btn-presentacion-principal i {

        font-size:
            19px;
    }




    .presentacion-cevined {
        padding: 45px 15px;
    }

    .presentacion-contenido {
        padding: 0;
    }

    .presentacion-etiqueta {
        font-size: 12px;
        padding: 9px 15px;
    }

    .presentacion-contenido h2 {
        font-size: 32px;
    }

    .presentacion-intro {
        font-size: 17px;
    }

    .presentacion-texto {
        font-size: 15px;
    }

    .presentacion-botones {
        flex-direction: column;
    }

    .btn-presentacion-principal,
    .btn-presentacion-secundario {
        width: 100%;
    }

    .presentacion-grid {
        grid-template-columns: 1fr;
    }

    .presentacion-item {
        min-height: auto;
    }

    .top-bar {

        padding:
            8px 15px;

        font-size:
            12px;

        text-align:
            center;
    }


    .top-bar .container-fluid > div {

        flex-direction:
            column;

        gap:
            5px;
    }


    .navbar {

        min-height:
            90px;

        padding-top:
            10px;

        padding-bottom:
            10px;
    }


    .navbar .container-fluid {

        padding-left:
            15px;

        padding-right:
            15px;
    }


    .brand {

        gap:
            10px;

        max-width:
            calc(100% - 55px);
    }


    .brand-logo {

        width:
            60px;

        height:
            60px;
    }


    .brand-text {

        min-width:
            0;
    }


    .brand-text h1 {

        font-size:
            20px;

        letter-spacing:
            0.5px;
    }


    .brand-text p {

        font-size:
            9px;

        margin-top:
            4px;
    }


    .navbar-toggler {

        padding:
            8px;
    }


    .hero {

        min-height:
            auto;
    }


    .cevined-carousel .carousel-item {

        height:
            400px;
    }


    .cevined-carousel .carousel-item img {

        height:
            400px;
    }


    /* FOOTER */

    .footer {

        padding:
            40px 20px 35px;
    }


    .footer-logo {

        margin-bottom:
            15px;
    }


    .footer-logo-img {

        width:
            70px;

        height:
            70px;
    }


    .footer-info {

        margin-bottom:
            20px;
    }


    .footer-info p {

        font-size:
            14px;

        line-height:
            1.6;

        margin-bottom:
            10px;
    }


    .footer-info i {

        font-size:
            15px;

        margin-right:
            5px;
    }


    .footer-social {

        gap:
            14px;
    }


    .footer-social a {

        width:
            50px;

        height:
            50px;

        font-size:
            20px;
    }
}


/* =========================================================
   CARRUSEL EN CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .cevined-carousel .carousel-item {

        height:
            300px;
    }


    .cevined-carousel .carousel-item img {

        height:
            100%;
    }


    .cevined-carousel .carousel-control-prev-icon,
    .cevined-carousel .carousel-control-next-icon {

        width:
            38px;

        height:
            38px;
    }


    .cevined-carousel .carousel-indicators {

        margin-bottom:
            10px;
    }

}


/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */



@media (max-width: 400px) {

    .presentacion-botones {

        margin-top:
            20px;
    }


    .btn-presentacion-principal {

        min-height:
            50px;

        padding:
            12px 16px;

        font-size:
            14px;
    }




    .brand-logo {

        width:
            52px;

        height:
            52px;
    }


    .brand-text h1 {

        font-size:
            17px;
    }


    .brand-text p {

        font-size:
            8px;
    }


    /* FOOTER */

    .footer {

        padding:
            22px 12px 20px;
    }


    .footer-info p {

        font-size:
            12px;
    }


    .footer-social a {

        width:
            40px;

        height:
            40px;

        font-size:
            17px;
    }
}