@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins&display=swap');
* {
    /* Colores */
    --color-marfil: #FFFFF0;
    --oliva-oscuro: #403F3A;
    --oliva-oscuro-alpha: #403F3A93;
    --gris-oscuro: #807F74;
    --gris-claro: #BFBEAE;
    /* --indigo-oscuro: #284B63; */
    --indigo-oscuro: #3B4EC5;
    --indigo-oscuro-alpha: #3B4EC593;
}

html{
    scroll-behavior: smooth;
}

a {
    color: black;
}


/* *******************************
    Estilos de fuentes al sitio
******************************* */

.uppercase {
    text-transform: uppercase !important;
}

.title-publication{
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    text-align: justify;
    padding: 10px 10px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.texto-logo {
    font-family: 'Bebas Neue', cursive;
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    text-align: center;
    padding: 20px 0 20px 0;
}

.texto-principal-logo-footer{
    font-family: 'Bebas Neue', cursive;
    text-align: center;
    color: var(--color-marfil);
    font-size: 2.55em;
}

.texto-secundario-logo-footer{
    font-family: 'Poppins', sans-serif;
    text-align: center;
    color: var(--color-marfil);
    font-size: 1.5em;
    margin-top: -0.75em;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-marfil);
}

nav {
    font-family: 'Bebas Neue', cursive;
}

nav li a {
    font-size: 1.3em;
}


/* *******************************
    Estilos del nav
******************************* */

nav {
    background-color: var(--oliva-oscuro);
    height: 5em;
}

nav li a:hover {
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    padding: 0em 2em 0 2em;
}

.sidenav {
    background-color: var(--color-marfil);
}

.sidenav li a:hover {
    font-weight: 400;
}

.sidenav li a:hover {
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    font-weight: bold;
    padding: 0em 1em 0em 1em;
}

nav .brand-logo {
    margin: 0 0.5em 0 0.5em;
    font-size: 1.8em;
}

nav .nav-logo{
    width: 230px;
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    align-content: space-between;
}

.nav-logo-mp{
    /* align-self: flex-end; */
    margin-top: 2.5px !important;
}

nav .nav-logo-item{
    margin-right: 10px;
    margin-top: 10px;
    margin-left: -5px;
}

nav .nav-logo-titulo{
    margin-left: 5px;
}

nav .nav-logo-slogan{
    position: absolute;
    margin: 1.3em 0 0 3.3em;
    font-family: 'Poppins', sans-serif;
    font-size: 0.6em;
}

#ultimo-li {
    margin-right: 1em;
}

.div-logo {
    background-color: var(--oliva-oscuro);
    padding: 20px;
}

.contacto-submenu {
    margin-left: 2em;
    background-color: var(--color-marfil) !important;
}

.icons-subsidenav {
    margin-right: 0.5em !important;
}

.margin-collapsible-sidenav {
    margin-left: 1em !important;
}

.span-margin-sidenav {
    margin-left: 2.5em;
}


/* *******************************
    Estilos del footer
******************************* */

.page-footer {
    background-color: var(--oliva-oscuro);
}

.footer-copyright {
    background-color: var(--indigo-oscuro) !important;
}

.page-footer div ul li a:hover {
    color: var(--color-marfil) !important;
    background-color: var(--indigo-oscuro);
    /* padding: 0 1em 0 1em; */
}

.flexbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-item {
    align-self: center;
    padding-left: 1em;
}

.texto-logo-footer{
    font-size: 3em;
}

/* *******************************
    Estilos de prueba
******************************* */

.container-custom {
    padding: 2.5em 2em 2.5em 2em;
}

.espacio {
    height: 500px;
}

.a-link {
    display: block;
    height: 2em;
    background-color: var(--indigo-oscuro);
    /* padding-bottom: 10em !important; */
}

.card-color img {
    width: 20em;
}

.card-color {
    background-color: var(--oliva-oscuro);
}

.card-color:hover {
    background-color: var(--indigo-oscuro);
}


/* *******************************
    Colores de los input y los labels 
******************************* */

.input-field .prefix.active{
    color: var(--indigo-oscuro);
}

input[type=text]:not(.browser-default):focus:not([readonly])+label {
    color: var(--indigo-oscuro);
}

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid var(--indigo-oscuro);
    -webkit-box-shadow: 0 1px 0 0 var(--indigo-oscuro);
}

/* *******************************
    Animación del botón de enviar formulario.
******************************* */

.button-primary-color{
    background-color: var(--oliva-oscuro);
    color: var(--color-marfil);
    padding: 0 30px 0 30px;
}

.button-primary-color:hover{
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    margin: 0 10px 0 0;
    padding: 0 60px 0 60px;
}

.tareas {
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
}

.tareas-numero {
    /* background-color: red; */
    font-size: 3em;
    font-weight: bold;
    color: var(--color-marfil);
}

.tareas-texto { 
    /* background-color: blueviolet; */
    text-align: left !important;
    color: var(--color-marfil);
}

.tareas-divisor {
    margin: 10px !important;
}

.row-tareas{
    margin-top: -1em;
}


.equipo-img{
    width: 150px !important;
}

@media only screen and (min-width: 993px) and (max-width: 1999px){
    .r1{
        height: 215px;
    }

    .r2{
        height: 175px;
    }

    .r3{
        height: 70px;
    }

    .r4{
        height: 90px;
    }

    .card-custom-main {
        margin-left: 30px;
        height: 500px;
        width: 450px;
    }

    .card-custom {
        height: 380px;
        width: 250px;
        margin-left: -25px;
    }
}

.descripcion-tareas{
    background-color: var(--indigo-oscuro);
    color: var(--color-marfil);
    font-size: 1.3em;
    padding: 2em;
    font-weight: bold;
    border: 10px solid var(--color-marfil);
}

.texto-resaltado{
    font-weight: bold;
    font-size: 1.1em;
}


td {
    text-align: center;
}

td a { 
    color: var(--indigo-oscuro);
}

.card-content a {
    color: var(--indigo-oscuro);
}



/* *******************************
    Tamaño de las imágenes dentro de los cards
******************************* */

.carousel-item{
    background-color: var(--color-marfil);
}

.carousel .carousel-item>img{
    height: inherit;
    width: inherit;
}

.img-vertical{
    /* width: 300px !important; */
    object-fit: scale-down !important;
}

.position-abolute {
    position: absolute;
    top: 1em;
    padding: 10px 0 10px 0;
    width: 100%;
    background-color: var(--indigo-oscuro-alpha);
    color: var(--color-marfil);
    font-size: 2em;
}

.carousel .carousel-item>img{
    object-fit: contain;
}

.carousel .indicators {
    background-color: var(--oliva-oscuro);
}

/* *******************************
    Medios de Pagos 
******************************* */

.medio-pagos-titulo{
    font-size: 3em;
    font-family: 'Bebas Neue', cursive;
    text-align: center;
    color: var(--oliva-oscuro)
}

.medio-pagos-descripcion {
    font-size: 1.3em;
    text-align: center;
    color: var(--oliva-oscuro)
}

#ticketera-img{
    width: 80% !important;
}

.simplificamos-pagos {
    /* font-size: 2em; */
    background-color: var(--gris-claro);
    /* color: var(--color-marfil); */

}

@media only screen and (min-width: 993px) and (max-width: 1400px){
    #ticketera-img{
        margin-top: 2em;
        width: 80% !important;
    }

    .container-2{
        padding: 0 10% 0 10% !important;
    }

    .medio-pagos-descripcion {
        font-size: 1.3em;
        padding: 0 1em 0 1em;
    }

    .card-medios-pagos{
        height: 32em !important;
    }
}

@media only screen and (min-width: 1401px){
    .container-2{
        padding: 0 10% 0 10% !important;
    }

    .card-medios-pagos{
        height: 40em !important;
    }
}

.mobile-logo-texto-principal{
    font-family: 'Bebas Neue', cursive;
    color: var(--color-marfil);
    text-align: center;
    font-size: 2em;
}

.mobile-logo-texto-secundario{
    font-family: 'Poppins', sans-serif;
    color: var(--color-marfil);
    text-align: center;
    font-size: 1.2em;
    margin-top: -0.6em;
}

.full-width {
    width: 100% !important;
}