body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:

    linear-gradient(
        rgba(17,24,39,0.15),
        rgba(17,24,39,0.15)
    ),

    url("fondo.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

    position: relative;

}


.contenedor {

    text-align: center;

    padding: 40px;

    width: 100%;

    box-sizing: border-box;

}


.logo {

    width: 520px;

    max-width: 90vw;

    margin: auto;

    padding: 20px 0;

    border-top:

    2px solid rgba(255,255,255,0.75);

    border-bottom:

    2px solid rgba(255,255,255,0.75);

    margin-bottom: 45px;

    text-shadow:
    0 2px 10px rgba(0,0,0,0.9);

}


h1 {


    margin: 0;

    font-size: 58px;

    letter-spacing: 8px;

    font-weight: bold;

    color: #ffffff;

    text-shadow:
        -1px -1px 0 #000000,
         1px -1px 0 #000000,
        -1px  1px 0 #000000,
         1px  1px 0 #000000,
         0 0 8px rgba(255,255,255,.70),
         0 0 18px rgba(14,165,255,.65),
         0 0 38px rgba(37,99,235,.45),
         0 0 55px rgba(30,64,175,.25),
         0 2px 8px rgba(0,0,0,.95);

}



.sublogo {

    margin-top: 8px;

    font-size: 32px;

    letter-spacing: 8px;

    font-weight: bold;

    color: #ffffff;

    text-shadow:
        -1px -1px 0 #000000,
         1px -1px 0 #000000,
        -1px  1px 0 #000000,
         1px  1px 0 #000000,
         0 0 8px rgba(255,255,255,.70),
         0 0 18px rgba(14,165,255,.65),
         0 0 38px rgba(37,99,235,.45),
         0 0 55px rgba(30,64,175,.25),
         0 2px 8px rgba(0,0,0,.95);

}


.lema {


    font-size: 28px;

    font-weight: bold;

    margin-bottom: 45px;

    color: #ffffff;

    text-shadow:
        -1px -1px 0 #000000,
         1px -1px 0 #000000,
        -1px  1px 0 #000000,
         1px  1px 0 #000000,
         0 0 8px rgba(255,255,255,.70),
         0 0 18px rgba(14,165,255,.65),
         0 0 38px rgba(37,99,235,.45),
         0 0 55px rgba(30,64,175,.25),
         0 2px 8px rgba(0,0,0,.95);
}


.areas {

    white-space: nowrap;

    font-size: 20px;

    margin-bottom: 55px;

}


.areas a {

    color:#ffffff;

    text-decoration:none;

    margin:0 8px;

    padding:5px;

    font-weight:bold;

    background:transparent;

    text-shadow:

    -0.5px -0.5px 0 rgba(0,20,60,.85),
     0.5px -0.5px 0 rgba(0,20,60,.85),
    -0.5px  0.5px 0 rgba(0,20,60,.85),
     0.5px  0.5px 0 rgba(0,20,60,.85),

    0 0 4px rgba(56,189,248,.55),
    0 0 10px rgba(37,99,235,.30),
    0 2px 8px rgba(0,0,0,.95);

    transition:

    color .25s ease,

    text-shadow .25s ease;
}


.areas a:hover {

    color:#ffffff;

    text-shadow:

    -0.5px -0.5px 0 rgba(0,20,60,.9),
     0.5px -0.5px 0 rgba(0,20,60,.9),
    -0.5px  0.5px 0 rgba(0,20,60,.9),
     0.5px  0.5px 0 rgba(0,20,60,.9),

    0 0 2px rgba(255,255,255,1),
    0 0 6px rgba(96,165,250,1),
    0 0 12px rgba(37,99,235,1),
    0 0 22px rgba(29,78,216,1),
    0 0 45px rgba(37,99,235,1),
    0 0 100px rgba(59,130,246,.95),

    0 2px 8px rgba(0,0,0,.95);

}


.plataforma {

    display: inline-block;

    padding: 16px 55px;

    background:

    rgba(37,99,235,0.90);

    border-radius: 10px;

    color: white;

    text-decoration: none;

    font-size: 23px;

    font-weight: bold;

    box-shadow:

    0 4px 15px rgba(0,0,0,0.5);

}


.plataforma:hover {

    background:

    rgba(29,78,216,1);

}


.descripcion {

    margin-top: 10px;

    font-size: 14px;

    color: #f3f4f6;

}


.pie {

    position: absolute;

    bottom: 25px;

    left: 0;

    width: 100%;

    text-align: center;

    font-size: 14px;

    color: #e5e7eb;

    text-shadow:

    0 2px 8px rgba(0,0,0,0.9);

}

@media (max-width: 600px) {

body {

        min-height: 100dvh;

        padding: 0;

        align-items: center;

}


    .contenedor {

        padding: 15px;
	transform: translateY(-60px);

    }


    .logo {

        width: 100%;

        max-width: 100%;

        padding: 15px 0;

        margin-bottom: 30px;

    }


    h1 {

        font-size: 34px;

        letter-spacing: 4px;

    }


    .sublogo {

        font-size: 20px;

        letter-spacing: 3px;

    }


    .lema {

        font-size: 20px;

        margin-bottom: 30px;

    }


    .areas {

        white-space: normal;

        font-size: 16px;

        line-height: 2;

        margin-bottom: 35px;

    }


    .areas a {

        margin: 0 4px;

    }


    .plataforma {

        padding: 14px 40px;

        font-size: 20px;

    }


    .descripcion {

        font-size: 13px;

    }


 .pie {

        position: absolute;

        bottom: 25px;

        font-size: 12px;

}

}

@media (max-height: 500px) and (orientation: landscape) {

    .contenedor {

        transform: translateY(-20px);

    }


    .logo {

        margin-bottom: 20px;

    }


    h1 {

        font-size: 32px;

    }


    .sublogo {

        font-size: 20px;

    }


    .lema {

        font-size: 18px;

        margin-bottom: 20px;

    }


    .areas {

    white-space: normal;

    max-width: 95vw;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 20px;

    line-height: 1.8;

    }


    .plataforma {

        padding: 10px 40px;

    }


    .pie {

        bottom: 15px;

    }

}