@font-face {
    font-family:"Redhatdisplay";
    src:url(../fuentes/RedHatDisplay-Medium.ttf) format("truetype");
    font-weight:500;
    font-style:normal
}
@font-face {
    font-family:"Redhatdisplay";
    src:url(../fuentes/RedHatDisplay-Regular.ttf) format("truetype");
    font-weight:400;
    font-style:normal
}
@font-face {
    font-family:"Redhatdisplay";
    src:url(../fuentes/RedHatDisplay-Black.ttf) format("truetype");
    font-weight:900;
    font-style:normal
}
@font-face {
    font-family:"Redhatdisplay";
    src:url(../fuentes/RedHatDisplay-Bold.ttf) format("truetype");
    font-weight:700;
    font-style:normal
}
::selection {
    background:none
}
* {
    --azul-menta:#7888D9;
    --rojo-menta:#E47979;
    --naranja-menta:#FBC096;
    --verde-menta:#99DCDB;
    --morado-menta:#C5B3F2;
    --blanco:#FFF;
    --gris:#757575;
    --gris-claro:#a3a5b7;
    --negro-fuerte:#080F34;
    --negro-claro:#494B53;
    --fondo-gris:#E7E8F0;
    --azul-fuerte:#001689;
    --azul-segundo:#3750D4;
    --azul-tercero:#D7DBF1;
    --azul-cuarto:#C4C8EE;
    --azul-quinto:#D6DCFD;
    --azul-submenu:#d5dbf1;
    --naranja-oscuro:#FF6B00;
    --naranja-fuerte:#E8833A;
    --naranja-segundo:#CA5500;
    --naranja-tercero:#EDB68E;
    --naranja-cuarto:#F3DDCE;
    --morado-fuerte:#380499;
    --morado-segundo:#2C0771;
    --morado-tercero:#D6C9EE;
    --morado-cuarto:#E7E3FE;
    --rojo-fuerte:#EA0029;
    --rosa-fuerte:#680C61;
    --celeste:#3d5cc1;
    --celeste-claro:#4aa3ff;
    --negro-texto:#323232;
    margin: 0;
}
body {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    background:none;
    line-height:20px;
    font-weight:500;
    font-family:Redhatdisplay,sans-serif;
    margin: 0;
}
#contenedor-carga {
    width:100%;
    height:100vh;
    background:rgb(255,255,255);
    position:fixed;
    z-index:100000;
    transition:all .1s ease
}
#contenedor-carga>div {
    border:3.5px solid #ccc;
    border-top-color:var(--azul-segundo);
    border-top-style:groove;
    height:50px;
    width:50px;
    border-radius:100%;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    animation:girar 1.5s linear infinite
}
header {
    width:94%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2vh 3%;
    position:fixed;
    z-index:5000;
    top:0;
    left:0;
    background:#fff
}
header>a {
    width:12%
}
header>a>img {
    width:100%
}
footer {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    padding-bottom:12vh;
    position:relative;
    background:#f6f6f6;
    background:url(../imagenes/footer-fondo.webp);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center
}
footer>span {
    display:flex;
    position:absolute;
    top:-4vh;
    right:43%;
    justify-content:space-between;
    align-items:center;
    padding:1.5vh 3vh;
    border-radius:20px;
    border:1px solid #001689;
    color:#001689;
    background:var(--blanco);
    font-weight:500;
    font-size:.85em;
    cursor:pointer
}
footer>span>i {
    width:2.75vh;
    height:2.75vh;
    background-image:url(https://idesaa.edu.mx/iconos/flecha-arriba-footer.svg);
    background-size:90%;
    background-position:center;
    background-repeat:no-repeat;
    margin-right:5px
}
footer>div {
    width:100%;
    display:flex;
    justify-content:center;
    padding:8vh 0 6vh;
    align-items:center
}
footer>div>img {
    aspect-ratio:1/1;
    margin-right:10%
}
footer>div>div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:25%;
    height:auto;
    padding:1vh
}
footer>div>div>span {
    color:#3f3f3f;
    font-weight:700;
    font-size:.85em;
    text-align:left;
    margin-bottom:2vh
}
footer>div>div>p {
    font-size:.75em;
    color:#3f3f3f;
    font-weight:400
}
footer>div>div>li {
    width:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center
}
footer>div>div>li>i {
    width:2vh;
    height:2vh;
    background-image:url(../iconos/flecha-derecha-footer.svg);
    background-size:95%;
    background-repeat:no-repeat;
    background-position:center;
    margin-right:1vh
}
footer>p {
    position:absolute;
    bottom:0;
    width:85%;
    padding:3vh 7.5%;
    background:linear-gradient(45deg,rgba(46,62,141,1) 50%,rgba(72,113,196,1) 100%);
    color:var(--blanco);
    font-weight:400;
    font-size:.65em;
    text-align:center;
    line-height:1.1
}
footer>p>a {
    color:var(--blanco);
    text-decoration:none;
    transition:all .2s ease
}
footer>p>a:hover {
    opacity:.75
}
#UNO {
    width:100%;
    margin-top:10vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-end;
    background-image:url(../imagenes/banner-landing-membresias.webp);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative
}
#UNO>img {
    display:none
}
#UNO>div {
    width:92%;
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    position:absolute;
    margin-left:8%;
    top:18vh
}
#UNO>div>h1 {
    font-weight:700;
    line-height:1;
    font-size:2.5em;
    color: var(--negro-texto);
    margin-bottom:3vh;
    text-align:left;
    width:34%;
}
#UNO>div>p {
    color:var(--negro-texto);
    line-height:1.25;
    font-size:1em;
    font-weight:500;
    text-align:left;
    width: 25%;
    margin: 0 0 3vh;
}
#UNO>div>p>span{
    font-size: 1.5em;
    line-height: 1.25;
    font-weight: 700;
    color: #4969ff;
    text-align: left;
}
#UNO>aside {
    width:32.5%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    z-index:1000;
    margin:12vh 30% 6vh 3%;
    position:relative;
    bottom:0
}
#UNO>aside>div {
    width:90%;
    background:var(--blanco);
    padding:4vh 5%;
    border-radius:25px;
    box-shadow:0 0px 20px -10px rgba(0,0,0,.75)
}
#UNO>aside>div>span {
    color:#203170;
    font-size:2em;
    font-weight:700;
    margin-bottom:2vh
}
#UNO>aside>div>p {
    font-size:.9em;
    color:#323232
}
#UNO>aside>div>form {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:3vh
}
#UNO>aside>div>form>input,#UNO>aside>div>form>div>input {
    height:25px;
    margin-bottom:10px;
    border:1px solid var(--blanco);
    border-radius:20px;
    background-color:var(--fondo-gris);
    color:var(--negro-claro);
    letter-spacing:1px;
    width:83%;
    padding:8px 8.5%;
    font-size:.85em;
    line-height:1;
    outline:none
}
#UNO>aside>div>form>input:focus,#UNO>aside>div>form>div>input:focus {
    border:1px solid var(--azul-tercero)
}
#UNO>aside>div>form>div>input {
    width:31%;
    padding:8px 8.5%
}
#UNO>aside>div>form>div {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center
}
#UNO>aside>div>form>aside {
    background:var(--fondo-gris);
    width:90%;
    height:30px;
    padding:6px 5%;
    border-radius:20px;
    border:1px solid var(--blanco);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    transition:all .2s ease;
    position:relative
}
#UNO>aside>div>form>.selectabierto {
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
#UNO>aside>div>form>aside:hover {
    border:1px solid var(--azul-tercero)
}
#UNO>aside>div>form>aside>ul {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    background:var(--blanco);
    list-style:none;
    overflow:scroll;
    position:absolute;
    top:100%;
    left:0;
    height:200px;
    padding:0;
    z-index:1100;
    overflow-x:hidden
}
#UNO>aside>div>form>aside>ul::-webkit-scrollbar {
    display:none
}
#UNO>aside>div>form>aside>ul>li {
    cursor:pointer;
    transition:all .2s ease;
    padding:10px 10.5%;
    width:79%;
    font-size:.85em;
    text-align:left;
    color:var(--gris)
}
#UNO>aside>div>form>aside>ul>li:hover {
    background:var(--gris);
    color:var(--blanco)
}
#UNO>aside>div>form>aside>p {
    font-size:.85em;
    color:var(--gris);
    text-align:left;
    padding-left:4.5%;
    cursor:pointer;
    width:85%;
    font-weight:500
}
#UNO>aside>div>form>aside>div {
    display:flex;
    justify-content:center;
    align-items:center;
    width:10%;
    transform:rotate(90deg);
    cursor:pointer
}
#UNO>aside>div>form>aside>div>object {
    width:40%;
    transition:all .2s ease;
    margin:0
}
#UNO>aside>div>form>aside>div>object:nth-of-type(1) {
    transform:rotate(90deg)
}
#UNO>aside>div>form>aside>div>object:nth-of-type(2) {
    transform:rotate(270deg)
}
#UNO>aside>div>form>aside>div:hover>object {
    color:var(--azul-segundo)
}
#UNO>aside>div>form>.radio-check {
    margin-bottom:3vh;
    flex-direction:column
}
#UNO>aside>div>form>.radio-check>p {
    font-size:.7em;
    width:90%;
    padding-right:5px;
    color:var(--negro-cursos)
}
#UNO>aside>div>form>.radio-check>p>span {
    color:var(--rojo-fuerte)
}
#UNO>aside>div>form>.radio-check>div {
    display:flex;
    justify-content:flex-start;
    width:94%;
    align-items:flex-start;
    flex-direction:row
}
#UNO>aside>div>form>.radio-check>div>input {
    display:none
}
#UNO>aside>div>form>.radio-check>div>label {
    color:var(--negro-cursos);
    padding:5px 5px 5px 5px;
    position:relative;
    font-size:.7em;
    border-radius:3px;
    white-space:nowrap;
    cursor:pointer;
    transition:all .3s ease;
    display:flex;
    align-items:center
}
#UNO>aside>div>form>.radio-check>div>label::before {
    content:"";
    width:15px;
    height:15px;
    border-radius:50%;
    background:none;
    border:3px solid #747475;
    display:inline-block;
    margin-right:.5vh
}
#UNO>aside>div>form>.radio-check>div>input:checked+label::before {
    background:#747475
}
#UNO>aside>div>form>span {
    font-weight:500;
    font-size:.65em;
    color:var(--rojo-fuerte);
    align-self:flex-start;
    margin-left:5%;
    margin-bottom:2vh
}
#UNO>aside>div>form>#checkbox {
    justify-content:center;
    align-items:flex-start;
    margin:35px 0
}
#UNO>aside>div>form>#checkbox>input {
    display:none
}
#UNO>aside>div>form>#checkbox>p {
    font-size:.85em;
    color:var(--negro-claro);
    font-weight:500;
    text-align:left;
    width:80%;
    margin-left:5%
}
#UNO>aside>div>form>#checkbox>label {
    content:"";
    width:15px;
    height:15px;
    border-radius:50%;
    background:none;
    border:3px solid var(--gris);
    display:flex;
    cursor:pointer
}
#UNO>aside>div>form>#checkbox>label:hover {
    border:5px solid var(--gris)
}
#UNO>aside>div>form>#checkbox>input:checked+label {
    background:var(--gris)
}
#UNO>aside>div>form>#checkbox>p>a {
    text-decoration:none;
    transition:all .2s ease;
    border-bottom:1px solid var(--negro-claro);
    color:var(--negro-claro)
}
#UNO>aside>div>form>#checkbox>p>a:hover {
    color:var(--negro-cursos);
    border-bottom:1px solid var(--negro-cursos)
}
#UNO>aside>div>form>#envio>input[type="submit"] {
    position:relative;
    margin-bottom:0;
    width:30%;
    padding:1.5vh 0;
    border:2px solid #3684e5;
    border-radius:100px;
    transition:all .2s ease;
    color:var(--blanco);
    background:#3684e5;
    font-weight:500;
    font-size:.85em;
    letter-spacing:2px;
    height:auto;
    text-transform:uppercase
}
#UNO>aside>div>form>#envio>input[type="submit"]:hover {
    background:var(--blanco);
    color:#3684e5
}
#UNO>aside>div>form>#envio>p {
    width:60%;
    text-align:left;
    font-weight:500;
    font-size:.7em;
    color:var(--negro-cursos)
}
#UNO>aside>div>form>#envio>p>a {
    color:var(--negro-cursos);
    font-weight:700
}
#blog-home{
    width: 100%;
    background: url(../imagenes/fondo-landing-membresias-soft-skills.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 15vh 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#blog-home>div{
    display: flex;
    flex-direction: column;
    width: 35%;
    margin-right: 15%;
}

#blog-home>div>i{
    height: 10px;
    background: #5063a9;
    width: 8%;
    margin-bottom: 4vh;
}

#blog-home>div>span{
    font-size: 1em;
    color: #2cb9ff;
    font-weight: 600;
    margin-bottom: 2vh;
}

#blog-home>div>h2{
    font-size: 2em;
    font-weight: 700;
    color: var(--negro-texto);
    line-height: 1.2;
    margin: 0 0 4vh 0;
    width: 100%;
    text-align: left;
}

#blog-home>div>p{
    font-size: 0.9em;
    color: var(--negro-texto);
    font-weight: 500;
    margin: 0 0 4vh 0;
    width: 100%;
}

#blog-home>div>ul{
    padding: 0;
    margin-top: 0;
    margin-bottom: 6vh;
}

#blog-home>div>ul>li{
    font-size: 0.9em;
    font-weight: 500;
    color: var(--negro-texto);
    margin-left: 17px;
    margin-bottom: 1vh;
}

#blog-home>div>ul>li::marker {
    color: #5063a9;
}

#blog-home>div>a{
    font-size: 0.9em;
    font-weight: 500;
    color: var(--blanco);
    padding: 1vh 8vh;
    background: #5063a9;
    cursor: pointer;
    text-decoration: none;
    width: fit-content;
    border-radius: 30px;
}

#DOS{
    width: 100%;
    padding: 10vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#DOS>h3{
    font-size: 2em;
    color: var(--negro-texto);
    font-weight: 700;
    margin-bottom: 5vh;
    text-align: center;
}
#DOS>div{
    width: 80%;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#DOS>div>div{
    display: flex;
}
#DOS>div>div>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1vh 4vh;
}
#DOS>div>div>div:nth-of-type(1){
    background: #475da2;
}
#DOS>div>div>div:nth-of-type(2){
    background: var(--blanco);
}
#DOS>div>div>div:nth-of-type(3){
    background: #e1f1ff;
}
#DOS>div>div>div>p{
    font-size: 0.9em;
    font-weight: 500;
    color: #6077cc;
    padding: 0 1vh 0.5vh;
    margin-bottom: 1vh;
    border-bottom: 1px solid #e0e0e0;
}
#DOS>div>div>div:first-of-type>p{
    color: #8bcafd;
    border-bottom: 1px solid #596ead;
}
#DOS>div>div>div:last-of-type>p{
    border-bottom: 1px solid #b6d0e7;
}
#DOS>div>div>div>span{
    font-size: 0.9em;
    font-weight: 500
    color var(--negro-cursos);
    margin-bottom: 0.5vh;
}
#DOS>div>div>div:first-of-type>span{
    color: var(--blanco);
}

#DOS>div>p>span:first-of-type{
    background: #bedbff;
}
#DOS>div>p>span:last-of-type{
    background: #d7f5ff;
}
#DOS>div>aside{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 3vh 0 0;
}
#DOS>div>aside>p{
    font-size: 0.8em;
    font-weight: 500;
    color: var(--negro-texto);
    margin-bottom: 0.5vh;
    display: flex;
    align-items: center;
    line-height: 1.2;
}
#DOS>div>aside>p>span{
    background: #8bcafd;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    margin-right: 1vh;
}

#TRES{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vh 0 8vh;
    position: relative;
    margin-bottom: 8vh;
}

#TRES::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 25%;           /* o 25% si quieres centrarlo */
    width: 50%;
    height: 2px;
    background-color: #c8c8c8;
}

#TRES>h3{
    font-size: 2em;
    font-weight: 700;
    color: var(--negro-texto);
}

#TRES>div{
    width: 75%;
    align-self: flex-start;
    margin-top: 5vh;
}
#TRES>div>div.esc-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#TRES>div>div>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 14.27%;
    height: auto;
    padding: 2vh 0;
    border-bottom: 1px solid #e8e8e8;
}
#TRES>div>div>div:nth-of-type(15),
#TRES>div>div>div:nth-of-type(16),
#TRES>div>div>div:nth-of-type(17),
#TRES>div>div>div:nth-of-type(18),
#TRES>div>div>div:nth-of-type(19),
#TRES>div>div>div:nth-of-type(20){
    border-bottom: none;
}
#TRES>div>div>div:hover{
    background: #f7f9ff;
}
#TRES>div>div>div>img{
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
#TRES>div>div>div>p{
    font-size: 0.8em;
    font-weight: 500;
    color: var(--negro-cursos);
    text-align: center;
    width: 80%;
    line-height: 1.2;
}

#CUATRO{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#CUATRO>h3{
    font-size: 2em;
    font-weight: 700;
    color: var(--negro-texto);
    text-align: center;
    margin-bottom: 5vh;
}
#CUATRO>div{
    width: 70%;
    display: flex;
    padding-bottom: 5vh;
}
#CUATRO>div>div{
    display: flex;
    flex-wrap: wrap;
}
#CUATRO>div>div>div{
    width: 48%;
    height: auto;
    padding: 5vh 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 2px solid #ededed;
}
#CUATRO>div>div>div:nth-of-type(1),
#CUATRO>div>div>div:nth-of-type(3),
#CUATRO>div>div>div:nth-of-type(5){
    padding-right: 2%;
}
#CUATRO>div>div>div:nth-of-type(2),
#CUATRO>div>div>div:nth-of-type(4),
#CUATRO>div>div>div:nth-of-type(6){
    padding-left: 2%;
}
#CUATRO>div>div>div:nth-of-type(5),
#CUATRO>div>div>div:nth-of-type(6){
    border-bottom: none;
}
#CUATRO>div>div>div>img{
    width: 25%;
}
#CUATRO>div>div>div>div{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#CUATRO>div>div>div>div>span{
    font-size: 1em;
    color: #3d5cc1;
    font-weight: 700;
    margin-bottom: 2vh;
}
#CUATRO>div>div>div>div>p{
    font-size: 0.9em;
    color: var(--negro-texto);
    font-weight: 500;
    line-height: 1.3;
}
#CUATRO>div>div>div:nth-of-type(4)>div>p,
#CUATRO>div>div>div:nth-of-type(6)>div>p{
    margin-bottom: 1vh;
}
#CUATRO>div>div>div:nth-of-type(5)>div>p{
    margin-bottom: 2vh;
}
#CUATRO>div>div>div>div>ul{
    margin: 2vh 0;
    list-style: none;
    padding-left: 1.5em;
}
#CUATRO>div>div>div>div>ul>li{
    font-size: 0.9em;
    font-weight: 500;
    color: var(--negro-texto);
    line-height: 1.3;
    position: relative;
    margin-bottom: 1vh;
}
#CUATRO>div>div>div>div>ul>li>span{
    color: #3d5cc1;
    font-weight: 700;
}
#CUATRO>div>div>div>div>ul li::before {
    content: "";
    position: absolute;
    left: -1.65em;
    top: 0.55em;
    width: 12px;
    height: 2px;
    background: #323232;
}

#CINCO {
    width: 100%;
    height: auto;
    background: url('../imagenes/fondo-landing-membresias-porque.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

#CINCO>img {
    display: none
}

#CINCO>div {
    display: flex;
    width: 40%;
    flex-direction: column;
    margin-top: 9vh
}

#CINCO>div>h3 {
    font-size: 2em;
    color: var(--negro-texto);
    font-weight: 700;
    width: 80%;
    line-height: 1;
    margin-bottom: 3vh
}

#CINCO>div>p {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--negro-texto);
    line-height: 1.3;
    width: 70%
}

#CINCO>div>p>span {
    color: #4969ff;
    font-size: 1rem;
    font-weight: 700;
}

#CINCO>aside {
    width: 35%;
    margin-right: 10%;
    background: #1c3654;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20vh 0 15vh
}

#CINCO>aside>div {
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 5% 7.5%;
    border-radius: 100px;
    transition: all 0.2s ease;
    margin-bottom: 3vh;
}

#CINCO>aside>.tres-hover {
    background: var(--blanco)
}

#CINCO>aside>div>p {
    font-size: 0.9em;
    color: #809bbb;
    font-weight: 500;
    width: 100%;
    text-align: left;
}
#CINCO>aside>div>p>span{
    font-size: 1rem;
    font-weight: 700;
}

#CINCO>aside>.tres-hover>p {
    color: var(--negro-cursos)
}
#CINCO>aside>.tres-hover>p>span{
    color: #4969ff;
}

#CINCO>aside>div>div {
    width: 60%;
    padding-left: 5%;
    border-left: 3px solid #597191;
    display: flex;
    align-items: center
}

#CINCO>aside>div>div>p {
    font-size: 0.9em;
    color: #597191;
    font-weight: 500;
    width: 60%
}

#CINCO>aside>.tres-hover>div>p {
    color: var(--negro-cursos)
}



@media screen and (max-width:750px) {
    header {
        align-items:center;
        justify-content:center;
        padding:1vh 3%
    }
    header>a {
        width:233px;
        align-items:center;
        justify-content:center;
        display:flex;
        margin:0
    }
    header>a>img {
        object-fit:scale-down
    }
    footer {
        justify-content:center;
        background:rgb(246,246,246)
    }
    footer>div {
        flex-direction:column;
        align-items:flex-start;
        width:90%;
        padding:8vh 0 10vh
    }
    footer>div>img {
        width:45%;
        margin-left:27.5%
    }
    footer>div>div {
        width:100%
    }
    footer>div>div>h5 {
        color:#3f3f3f;
        font-weight:700;
        font-size:1em;
        text-align:left;
        margin-bottom:2vh
    }
    footer>div>div>p:last-of-type>br {
        display:none
    }
    #UNO {
        flex-direction:column;
        position:initial;
        align-items:center;
        background:none;
        margin-top:0;
        padding-top:0
    }
    #UNO>img {
        display:flex;
        margin-top:calc(92px + 2vh)
    }
    #UNO>div {
        width: 90%;
        position: initial;
        margin: 2vh 0;
    }
    #UNO>div>h1 {
        font-size: 2.5em;
        text-align:center;
        width:90%;
        margin-bottom:2vh;
        align-self:center
    }
    #UNO>div>h1>br {
        display:none
    }
    #UNO>div>p,
    #UNO>div>p>span{
        text-align:center;
        margin-left:0;
        width:unset
    }
    #UNO>div>p>br{
        display: none;
    }
    #UNO>aside {
        width:100%;
        padding:5vh 0 5vh;
        display:flex;
        justify-content:center;
        align-items:center;
        position:initial;
        background:url(https://idesaa.edu.mx/imagenes/patron-formulario-movil.webp);
        background-position:top;
        background-size:cover;
        background-repeat:no-repeat;
        margin: 0;
    }
    #UNO>aside>div {
        width:80%;
        background:var(--blanco);
        box-shadow:0 5px 10px 0 rgba(0,0,0,.29);
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        z-index:1000;
        border-radius:20px
    }
    #UNO>aside>div>form {
        width:100%;
        background:var(--blanco);
        justify-content:flex-start;
        z-index:1000;
        margin:0;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        border-radius:20px;
        position:initial;
        padding:3vh 0
    }
    #UNO>aside>div>form>h3 {
        color:#203170;
        font-size:2em;
        font-weight:700;
        margin-bottom:2vh
    }
    #UNO>aside>div>form>p {
        font-size:.9em;
        color:#323232;
        margin-bottom:1vh;
        text-align:left;
        line-height:1
    }
    #UNO>aside>div>form>p:last-of-type {
        margin-bottom:3vh
    }
    #UNO>aside>div>form>input {
        height:25px;
        margin-bottom:20px;
        border:1px solid var(--blanco);
        border-radius:15px;
        color:var(--negro-cursos);
        width:80%;
        padding:10px 8.5%;
        font-size:.9em;
        line-height:1;
        outline:none;
        font-family:Redhatdisplay,sans-serif;
        font-weight:500;
        background:var(--fondo-gris)
    }
    #UNO>aside>div>form>input:focus {
        border:1px solid var(--blanco)
    }
    #UNO>aside>div>form>aside {
        background:var(--fondo-gris);
        width:87%;
        height:42px;
        padding:2px 5%;
        border-radius:20px;
        border:1px solid var(--blanco);
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:15px;
        transition:all .2s ease;
        position:relative
    }
    #UNO>aside>div>form>.selectabierto {
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0
    }
    #UNO>aside>div>form>aside:hover {
        border:1px solid var(--azul-tercero)
    }
    #UNO>aside>div>form>aside>ul {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        width:100%;
        background:var(--blanco);
        list-style:none;
        overflow:scroll;
        position:absolute;
        top:100%;
        left:0;
        height:200px;
        padding:0;
        z-index:1100;
        overflow-x:hidden
    }
    #UNO>aside>div>form>aside>ul::-webkit-scrollbar {
        display:none
    }
    #UNO>aside>div>form>aside>ul>li {
        cursor:pointer;
        transition:all .2s ease;
        padding:10px 10.5%;
        width:79%;
        font-size:.8em;
        text-align:left;
        color:var(--gris)
    }
    #UNO>aside>div>form>aside>ul>li:hover {
        background:#45b8f3;
        color:var(--blanco)
    }
    #UNO>aside>div>form>aside>p {
        font-size:.9em;
        color:var(--gris);
        text-align:left;
        padding-left:4.5%;
        cursor:pointer;
        width:85%;
        font-weight:500
    }
    #UNO>aside>div>form>aside>div {
        display:flex;
        justify-content:center;
        align-items:center;
        width:10%;
        transform:rotate(90deg);
        cursor:pointer
    }
    #UNO>aside>div>form>aside>div>object {
        width:40%;
        transition:all .2s ease;
        margin:0
    }
    #UNO>aside>div>form>aside>div>object:nth-of-type(1) {
        transform:rotate(90deg)
    }
    #UNO>aside>div>form>aside>div>object:nth-of-type(2) {
        transform:rotate(270deg)
    }
    #UNO>aside>div>form>aside>div:hover>object {
        color:var(--azul-segundo)
    }
    #UNO>aside>div>form>.radio-check {
        flex-direction:column;
        display:flex;
        width:100%;
        align-items:center;
        margin:2vh 0;
        padding:0
    }
    #UNO>aside>div>form>.radio-check>p {
        font-size:.7em;
        width:100%;
        color:var(--negro-cursos);
        text-align:center
    }
    #UNO>aside>div>form>.radio-check>div {
        display:flex;
        justify-content:center;
        width:100%;
        align-items:center;
        flex-direction:row
    }
    #UNO>aside>div>form>.radio-check>div>input {
        display:none
    }
    #UNO>aside>div>form>.radio-check>div>label {
        color:var(--negro-cursos);
        padding:5px;
        position:relative;
        font-size:.7em;
        white-space:nowrap;
        cursor:pointer;
        transition:all .3s ease;
        display:flex;
        align-items:center
    }
    #UNO>aside>div>form>.radio-check>div>label::before {
        content:"";
        width:13px;
        height:13px;
        border-radius:50%;
        background:none;
        border:3px solid #747475;
        display:inline-block;
        margin-right:.5vh
    }
    #UNO>aside>div>form>.radio-check>div>input:checked+label::before {
        background:#747475
    }
    #UNO>aside>form>aside>span {
        font-weight:500;
        font-size:.65em;
        color:var(--rojo-fuerte);
        align-self:flex-start;
        margin-left:5%;
        margin-bottom:2vh
    }
    #UNO>aside>div>form>#envio {
        justify-content:center;
        align-items:center;
        display:flex;
        flex-direction:column
    }
    #UNO>aside>div>form>#envio>input[type="submit"] {
        position:relative;
        margin-bottom:0;
        width:auto;
        padding:1.5vh 2vh;
        border:2px solid var(--celeste);
        border-radius:100px;
        transition:all .2s ease;
        color:var(--blanco);
        font-weight:500;
        font-size:.7em;
        letter-spacing:2px;
        height:auto;
        text-transform:uppercase;
        cursor:pointer
    }
    #UNO>aside>div>form>#envio>input[type="submit"]:hover {
        background:var(--blanco);
        color:var(--celeste)
    }
    #UNO>aside>div>form>#envio>p {
        width:100%;
        text-align:center;
        font-weight:500;
        font-size:.7em;
        color:var(--negro-cursos);
        margin-bottom:2vh;
        line-height:1.2
    }
    #UNO>aside>div>form>#envio>p>a {
        color:var(--negro-cursos);
        font-weight:700
    }
    #DOS>div>div>div>span{
        height: 3em;
    }
    #blog-home{
        align-items: center;
        background: url(../imagenes/fondo-landing-membresias-soft-skills-movil.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 10vh;
        padding-bottom: 60vh;
        position: relative;
    }

    #blog-home>div{
        margin-right: 0;
        width: 90%;
        align-items: center;
    }

    #blog-home>div>i{
        width: 15%;
    }

    #blog-home>div>span,
    #blog-home>div>p,
    #blog-home>div>h2{
        text-align: center;
    }

    #blog-home>div>h2{
        width: 100%;
        font-size: 1.5em;
    }

    #blog-home>div>ul{
        column-count: 1;
        width: fit-content;
        margin-bottom: 5vh;
        width: 90%;
    }

    #TRES>div{
        width: 90%;
        height: 270px;
        display: flex;
        justify-content: center;
        padding-bottom: 5vh;
    }
    #TRES>div>div.swiper-pagination{
        justify-content: center;
    }
    #TRES>div>div>div{
        padding: 0;
        border-bottom: none;
    }
    #TRES>div>div>div:hover{
        background: none;
    }
    
    #CUATRO>h3{
        line-height: 1.3;
    }
    #CUATRO>div{
        width: 90%;
        padding-bottom: 10vh;
    }
    #CUATRO>div>div{
        flex-wrap: initial;
    }
    #CUATRO>div>div.beneficios-page{
        justify-content: center;
        bottom: 5vh;
    }
    #CUATRO>div>div>div:nth-of-type(1), 
    #CUATRO>div>div>div:nth-of-type(2), 
    #CUATRO>div>div>div:nth-of-type(3),
    #CUATRO>div>div>div:nth-of-type(4), 
    #CUATRO>div>div>div:nth-of-type(5), 
    #CUATRO>div>div>div:nth-of-type(6){
        padding: 0;
        border-bottom: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    #CUATRO>div>div>div>img{
        width: 30%;
    }
    #CUATRO>div>div>div>div{
        width: 90%;
        margin-top: 5vh;
        align-items: center;
    }
    #CUATRO>div>div>div>div>p,
    #CUATRO>div>div>div>div>span{
        text-align: center;
    }

    #CINCO {
        flex-direction: column;
        position: relative;
        align-items: center;
        background: none
    }

    #CINCO>div {
        width: 100%;
        align-items: center;
        margin-top: 0;
        padding: 5vh 0 50vh 0;
        background: url(../imagenes/fondo-landing-membresias-porque-movil.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom
    }

    #CINCO>div>h3 {
        font-size: 1.5em;
        text-align: center;
        width: 90%
    }

    #CINCO>div>p {
        width: 78%;
        font-size: 0.9em;
        text-align: center
    }

    #CINCO>aside {
        width: 100%;
        margin-right: 0;
        padding: 10vh 0
    }

    #CINCO>aside>p {
        text-align: center;
        line-height: 1;
        font-size: 1.5em;
        font-weight: 700;
        margin-bottom: 5vh
    }

    #CINCO>aside>div>div {
        padding-left: 2%
    }

}