@import url(plantilla.css);

main {
    margin: 1rem;
    display: flex;
    /* min-height: 100%; */
    flex-direction: column;
    align-items: end;
    overflow: auto;
    z-index: 1;
}

.contenedor-contenido-main {
    background-color: var(--color-rosa-principal);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    box-shadow: 0px 0px 50px 65px rgb(228, 0, 124, 1);
}

.texto-bienvenida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.texto-bienvenida h2 {
    max-width: 38rem;
    text-align: center;
}

.h3-triangulos {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.h3-triangulos h3 {
    max-width: 29rem;
    text-align: center;
}

.h3-triangulos img {
    max-width: 5rem;
}

.h3-triangulos img:last-of-type {
    transform: rotateY(180deg);
}

/* .botones-bienvenida {
    display: flex;
    flex-direction: row;
    gap: 4rem;
} */

.botones-bienvenida {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.botones-bienvenida button {
    padding: 2rem;
} 

@media (max-width: 499px) {
    .contorno-main {
        background-size: 60%;
    }

    main {
        align-items: center;
        overflow: hidden;
        min-height: unset;
    }

    .contenido-main {
        background-position: top, center;
    }

    .contenedor-contenido-main {
        opacity: .8;
        border: 3px solid rgba(255, 255, 255, 0.5);
        box-shadow: none;
        gap: 1rem;
    }

    .texto-bienvenida {
        gap: 1rem;
    }

    .texto-bienvenida h1 {
        text-align: center;
        font-size: 1rem;
    }

    .texto-bienvenida h2 {
        font-size: .8rem;
    }

    .texto-bienvenida h3 {
        font-size: .6rem;
    }

    .h3-triangulos img {
        max-width: 2rem;
    }

    .botones-bienvenida {
        grid-template-columns: 1fr;
        justify-content: center;
        gap: 1rem;
    }

    .botones-bienvenida button {
        border: 3px solid rgba(255, 255, 255, 0.5);
        padding: 1rem .5rem 1rem .5rem;
        font-size: .8rem;
    }
}

@media (min-width: 500px) and (max-width: 899px) {
    .contorno-main {
        background-size: 50%;
    }
    
    main {
        align-items: center;
        min-height: unset;
    }

    .contenido-main {
        background-position: top, center;
    }

    .contenedor-contenido-main {
        opacity: .8;
        border: 3px solid rgba(255, 255, 255, 0.5);
        box-shadow: none;
        gap: 3rem;
    }

    .texto-bienvenida {
        gap: 1rem;
    }

    .texto-bienvenida h1 {
        text-align: center;
    }

    .botones-bienvenida {
        gap: 3rem;
    }

    .botones-bienvenida button {
        border: 3px solid rgba(255, 255, 255, 0.5);
        padding: 2rem 1rem 2rem 1rem;
        font-size: var(--texto-13-arial);
    }

    h1 {
        font-size: var(--texto-22-arial);
    }

    h2 {
        font-size: var(--texto-19-arial);
    }

    h3 {
        font-size: var(--texto-16-arial);
    }
}

@media (min-width: 900px) and (max-width: 1350px){
    .contorno-main {
        background-size: 50%;
    }
    
    main {
        align-items: center;
    }

    .contenido-main {
		background-size: 90% 45%, cover;
        background-position: top center;
    }

    .contenedor-contenido-main {
        opacity: .8;
        border: 3px solid rgba(255, 255, 255, 0.5);
        box-shadow: none;
    }

    .botones-bienvenida button {
        border: 3px solid rgba(255, 255, 255, 0.5);
        padding: 3rem;
    } 
}

@media (min-width: 1351px) and (max-width: 1920px) {
    .contenedor-contenido-main {
        margin: 1rem 0 0rem 5rem;
        max-width: 35rem;
    }

    .texto-bienvenida h1 {
        font-size: var(--texto-25-arial);
    }
}

@media (min-width: 1921px) {
    .contenedor-contenido-main {
        margin: 10rem 0 10rem 10rem;
    }
}

/* ESTILOS PREDETERMINADOS */
h1, h2, h3 {
    color: var(--color-blanco);
    text-transform: uppercase;
}

.btnOpcionIndex {
    background: var(--color-rosa-oscuro);
    color: var(--color-negro);
}