:root {
    --red: #e50040;
    --purple: #892a92;
    --orange: orange;
    --baseColor: #c2e59c;
    --baseColor2: #004159;
    --white: white;
    --black: #010101;
  }

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
.contenido-proceso{
    background: var(--white);
    width: 100%;
    padding: 20px;
    text-align: center;
}
.contenido-proceso h2{
    color: var(--orange);
    font-family: Fredoka One;
    font-size: 35px
}
.contenido-proceso p{
    font-family: Concert One;
    font-size: 20px;
    color: var(--red);
}
.contenido-proceso span{
    font-family: Concert One;
    font-size: 25px;
    color: var(--black);
}
.contenido-proceso .lema{
    font-family: Patrick Hand;
    font-size: 38px;
    color: var(--black);
    margin: 10px;
    text-shadow: 2px 2px 2px var(--orange);
    font-weight: 600;
}
.opciones{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 10px auto;
    padding: 10px;
}
.opciones a{
    background: var(--purple);
    color: var(--white);
    font-weight: 300;
    font-family: Patrick Hand;
    padding: 10px;
    border: 3px solid var(--orange);
    transition: all 300ms ease;
}
.opciones a:hover{
    background: var(--white);
    color: var(--orange);
    font-weight: 600;
    font-family: Patrick Hand;
    padding: 18px;
    border: 3px solid var(--purple);
}
@media screen and (max-width:900px){
    .opciones{
        flex-direction: column;
    }
}


@media screen and (max-width:600px){
    .opciones{
        flex-direction: column;
    }
}

.proceso-requisitos img{
    width: auto;
}
 .requisitos-boton{
    margin: 6px;
    padding: 8px;
    font-family: Patrick Hand;
}
.requisitos-boton a{
    border: 3px solid var(--purple);
    background-color: var(--purple);
    border-radius: 10px;
    margin: 6px;
    padding: 8px;
    font-size: 20px;
    color: var(--white);
    transition: all 300ms ease;
}
 .requisitos-boton a:hover{
    border: 3px solid var(--purple);
    background-color: var(--white);
    border-radius: 12px;
    color: var(--purple);
}
/*Inicio Modal*/
.modalMensaje{
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}
.modalMensaje-show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity 0.6s;
    --transform: translateY(0);
    --transition: transform .8s .8s;
}
.modalMensaje-contenido{
    margin: auto;
    width: 90%;
    max-width:  600px;
    max-height: 90%;
    background-color:var(--white);
    border: 5px solid var(--red);
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}
.modalMensaje-img{
    width: 90%;
    max-width: 300px;
}
.modalMensaje-close{
    text-decoration: none;
    color: var(--white);
    background-color: var(--baseColor2);
    padding:1em 3em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}
.modalMensaje-close:hover{
    color: var(--baseColor2);
    background-color: var(--white);
}
/*Requisitos*/
.modalMensajeRequisitos{
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}
.modalMensajeRequisitos-show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity 0.6s;
    --transform: translateY(0);
    --transition: transform .8s .8s;
}
.modalMensajeRequisitos-contenido{
    margin: auto;
    width: 90%;
    max-width:  700px;
    max-height: 90%;
    background-color:var(--white);
    border: 5px solid var(--purple);
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}
.modalMensajeRequisitos-contenido p{
    font-family: Ingrid Darling;
    font-size: 24px;
    color: var(--black);
}

.modalMensajeRequisitos .requisitos-texto{
    font-family: Concert One;
    font-size: 26px;
    font-weight: 300;
}
.modalMensajeRequisitos-img{
    width: 90%;
    max-width: 300px;
}
.modalMensajeRequisitos-close{
    text-decoration: none;
    color: var(--white);
    background-color: var(--baseColor2);
    padding:1em 3em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}
.modalMensajeRequisitos-close:hover{
    color: var(--baseColor2);
    background-color: var(--white);
}
/*Inscripcion*/
.modalMensajeInscripcion{
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}
.modalMensajeInscripcion-show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity 0.6s;
    --transform: translateY(0);
    --transition: transform .8s .8s;
}
.modalMensajeInscripcion-contenido{
    margin: auto;
    width: 90%;
    max-width:  600px;
    max-height: 90%;
    background-color:var(--white);
    border: 5px solid var(--baseColor);
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}
.modalMensajeInscripcion p{
    font-size: 30px;
    color: var(--baseColor);
}

.modalMensajeInscripcion-close{
    text-decoration: none;
    color: var(--white);
    background-color: var(--baseColor2);
    padding:1em 3em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}
.modalMensajeInscripcion-close:hover{
    color: var(--baseColor2);
    background-color: var(--white);
}
/*Evaluacion*/
.modalMensajeEvaluacion{
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}
.modalMensajeEvaluacion-show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity 0.6s;
    --transform: translateY(0);
    --transition: transform .8s .8s;
}
.modalMensajeEvaluacion-contenido{
    margin: auto;
    width: 90%;
    max-width:  600px;
    max-height: 90%;
    background-color:var(--white);
    border: 5px solid var(--purple);
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition: var(--transition);
}
.modalMensajeEvaluacion p{
    font-size: 30px;
    color: var(--purple);
}
.modalMensajeEvaluacion span{
    font-size: 26px;
    color: var(--orange);
}

.modalMensajeEvaluacion-close{
    text-decoration: none;
    color: var(--white);
    background-color: var(--baseColor2);
    padding:1em 3em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}
.modalMensajeEvaluacion-close:hover{
    color: var(--baseColor2);
    background-color: var(--white);
}
/*Fin Modal*/