:root {
    --neutroblanco: #FFFFFC;
    --naranjap: #FF5600;
    --dodgerblue: #0091FF;
    --jetblack: #383838;
    --savoyblue: #5362D9;
    --nonphotoblue: #9ED9EC;
    --lapislazuli: #00659F;
    --isabelline: #F6F2EB;
    --vistablue: #798DCD;
    --pigmentgreen: #00B256;
    --taupegray: #9F9E9E;
    --grisneutro2: #EFEAE6;
    --silver: #C6C1BD;
    --mindaro: #E6ED6F;
    --rawblue: #1621EC;
    --mossgreen: #869337;
    --darkgolden: #AD7B0B;
    --h6: 18px;
    --h1: 52px;
    --h4: 25px;
    --b1: 17px;
    --h2: 45px;
    --h3: 35px;
    --h5-bold: 20px;
    --b2: 16px;
    --h4bold: 25px;
    --b1bold: 17px;
    --h1m: 35px;
    --h2m: 32px;
    --h3m: 28px;
}
.neutroblanco { color: var(--neutroblanco); }
.naranjap { color: var(--naranjap); }
.dodgerblue { color: var(--dodgerblue); }
.jetblack { color: var(--jetblack); }
.savoyblue { color: var(--savoyblue); }
.nonphotoblue { color: var(--nonphotoblue); }
.lapislazuli { color: var(--lapislazuli); }
.isabelline { color: var(--isabelline); }
.vistablue { color: var(--vistablue); }
.pigmentgreen { color: var(--pigmentgreen); }
.taupegray { color: var(--taupegray); }
.grisneutro2 { color: var(--grisneutro2); }
.silver { color: var(--silver); }
.mindaro { color: var(--mindaro); }
.rawblue { color: var(--rawblue); }
.mossgreen { color: var(--mossgreen); }
.darkgolden { color: var(--darkgolden); }
.h6 { font-size: var(--h6); line-height: 1.555556; font-weight: 600; }
.h1 { font-size: var(--h1); line-height: 1.230769; font-weight: 700; }
.h4 { font-size: var(--h4); line-height: 1.28; font-weight: 500; }
.b1 { font-size: var(--b1); line-height: 1.411765; font-weight: 500; }
.h2 { font-size: var(--h2); line-height: 1.422222; font-weight: 700; }
.h3 { font-size: var(--h3); line-height: 1.371429; font-weight: 700; }
.h5-bold { font-size: var(--h5-bold); line-height: 1.4; font-weight: 700; }
.b2 { font-size: var(--b2); line-height: 1.5; font-weight: 500; }
.h4bold { font-size: var(--h4bold); line-height: 1.28; font-weight: 700; }
.b1bold { font-size: var(--b1bold); line-height: 1.411765; font-weight: 700; }
.h1m { font-size: var(--h1m); line-height: 1.371429; font-weight: 700; }
.h2m { font-size: var(--h2m); line-height: 1.375; font-weight: 700; }
.h3m { font-size: var(--h3m); line-height: 1.285714; font-weight: 700; }

/*** Generales ***/
html, body {
    overflow-x: hidden;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.btnBordeAzul{
    color: var(--dodgerblue);
    text-decoration: none;
    border-radius: 21px;
    border: solid 3px var(--dodgerblue);
    padding: 16px 51px;
    min-width: 437px;
}

.nav_liga{
    color: var(--neutroblanco);
    font-size: 18px;
}

.progress {
    height: 30px;
    width: 75%;
    background-color: #e9ecef; /* Color gris claro del fondo */
    border-radius: 50px; /* Bordes redondeados */
}

.progress-bar {
    background: linear-gradient(90deg, #e74c3c, #e67e22); /* Gradiente de color */
    border-radius: 50px; /* Mantiene los bordes redondeados en la barra de progreso */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 2px;
}

.headerImagen{
    background: no-repeat url('https://www.evangelizacion.org.mx/donativos/assets/LCE24_Header3.jpg');
    background-size: cover;
    min-height: 85vh;
    background-position: center;
}

.headerTitulo{
    color: var(--neutroblanco);
    font-size: 51px ;
}

.headerSubtitulo{
    color: var(--neutroblanco);
    margin-top: 16px;
    margin-bottom: 32px;
    font-size: 25px;
}

.colorAzulSavoy{
    color: var(--savoyblue);
}

.colorLapislazuli{
    color: var(--lapislazuli);
}

.colorVerde{
   color: var(--pigmentgreen);
}


.b_titulo{
    color: var(--jetblack);
}

.b_textoNegro{
    color: var(--jetblack);
}

.b_tituloAzul{
    color: var(--rawblue);
}


.divSeparador52px{
    height: 52px !important;
}

.divSeparador72px{
    height: 72px !important;
}


.d_paddingTop{
    padding-top: 93px;
}

.d_paddingBottom{
    padding-bottom: 104px;
}

.colorTaupeGray{
    color: var(--taupegray);
}

.seccion_t{
    background: var(--isabelline);
    background-size: cover;
    min-height: 50vh;
    margin-top: -70px;
    padding-top: 40px;
    position: relative;
    z-index: 993;
    border-radius: 76px;
    margin-bottom: 72px;
}

footer{
    background: url(https://www.evangelizacion.org.mx/donativos/assets/LCE24_FOOTER.png);
    background-size: cover;
    min-height: 50vh;
    margin-top: -240px;
    position: relative;
    z-index: 994;
    padding-top: 150px !important;
}

footer a {
    text-decoration: none;
    color: var(--jetblack);
}

.iconFooter{
    font-size: 20px;
    padding: 9px;
    border-radius: 90px;
    background: var(--savoyblue);
    width: 40px;
}

.divAnclaFooter{
    padding-bottom: 20px;
}


.round76px{
    border-radius: 76px;
}

.round30px{
    border-radius: 30px;
}

.btnNaranja{
    color: white;
    background: var(--naranjap);
    border: none;
    border-radius: 21px;
    /*padding: 11px 51px;*/
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    cursor: pointer;
    width: 171px;
    /*height: 42px;*/
}

#btnInscripcionNav {
    position: relative;
    overflow: hidden;
    color: white;
    background: var(--naranjap);
    border: none;
    border-radius: 21px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    cursor: pointer;
    width: 171px;
}

#btnInscripcionNav .fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff7d50;
    clip-path: circle(0% at 0% 100%);
    z-index: 0;
    transition: clip-path 0.5s ease;
}

#btnInscripcionNav:hover .fill {
    clip-path: circle(150% at 0% 100%);
}

#btnInscripcionNav span {
    position: relative;
    z-index: 1;
}

#btnInscripcionNav span {
    position: relative;
    z-index: 1;
}

.animate__animated.animate__fadeInDown {
    animation-duration: 2s;
    animation-fill-mode: both;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Boton de WhatsApp */

.imgWhatsApp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999;
}

.divWhatsApp {
    position: fixed;
    width: 180px;
    height: 50px;
    bottom: 40px;
    right: 105px;
    background-color: rgba(0, 22.4, 5.1, .8);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 14px;
    z-index: 9999;
    padding: 3px;
}

.navbar-toggler {
    background-color: #007bff; /* Color de fondo */
    border-radius: 50%; /* Hacer que el botón sea redondeado */
    padding: 10px;
    color: var(--neutroblanco) !important;
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%28255,%20255,%20255,%201%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

/* Responsive */


/****** Estilos específicos para dispositivos pequeños (celulares) *******/
@media (max-width: 375px) {
    .divSeparadorPoliticas72px{
        padding: 72px !important;
    }

    .headerTitulo {
        font-size: 32px;
    }

    .progress {
        height: 40px;
        width: 75%;
        margin-top: 2px;
        padding: 2px;
    }

    .headerImagen{
        min-height: 65vh !important;
    }

    .liProgress{
        display: none;
    }
}

@media (min-width: 376px) and (max-width: 430px) {
    .divSeparadorPoliticas72px{
        padding: 72px !important;
    }

    .headerTitulo {
        font-size: 32px;
    }

    .progress {
        height: 32px;
        width: 250px;
        margin-top: 8px;
    }

    .liProgress{
        display: none;
    }

    .footer{
        padding-top: 130px !important;
    }

    .headerImagen {
        min-height: 50vh !important;
    }

    .divAnclaFooter{
        margin-top: 20px;
        padding-bottom: 2px;
    }

    .divAviso{
        margin-top: 20px;
        margin-bottom: 60px;
    }

    .divPoliticas{
        margin-top: 60px !important;
        max-width: 300px !important;
        margin: auto;
    }

    .navbar-toggler {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .navbar-collapse {
        text-align: center;
    }

    /* Asegura que el logo sea pequeño y centrado en móvil */
    img {
        max-width: 120px;
    }
}

/* Estilos específicos para dispositivos medianos a grandes (celulares) */
@media (min-width: 577px) and (max-width: 768px) {
    .headerImagen{
        min-height: 40vh !important;
    }

    .navbar-toggler {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .navbar-collapse {
        text-align: center;
    }

    /* Asegura que el logo sea pequeño y centrado en móvil */
    img {
        max-width: 120px;
    }

    .progress {
        width: 590px;
    }
}

/* Estilos específicos para tabletas y dispositivos pequeños en modo paisaje */
@media (min-width: 769px) and (max-width: 992px) {
    .headerImagen{
        min-height: 35vh !important;
    }

    .liProgress .progress{
        width: 220px;
    }
}

@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .divProgress {
        display: grid !important;
    }

    .headerImagen{
        min-height: 85vh;
    }

}

/* Estilos específicos para laptops pequeñas y tabletas en modo paisaje */
@media (min-width: 993px) and (max-width: 1200px) {
    .headerImagen{
        min-height: 90vh !important;
    }
}

/* Estilos específicos para laptops y monitores de escritorio */
@media (min-width: 1201px) and (max-width: 1600px) {
    .headerImagen{
        min-height: 62vh !important;
    }
}

/* Laptops estándar (1366px a 1920px) */
@media (min-width: 1366px) and (max-width: 1600px) {
    .divProgress{
        display: none;
    }

    .progress {
        width: 280px;
    }

}

/* Estilos específicos para monitores grandes */
@media (min-width: 1601px) {
    .headerImagen{
        min-height: 50vh !important;
    }

    .divProgress{
        display: none;
    }

    .progress {
        width: 280px;
    }

}