body {
    background-color: #FFFFFF;
}

p {
    padding: 8px 8px 0px 8px;
}

/* CABECERA */

#cabecera {
    width: 100%;
    height: 170px;
    background-color: #99c3d1;
    /* Sacar color*/
}

#cabeceraCentral {
    width: 950px;
    height: 170px;
    background-color: #99c3d1;
    /* Sacar color*/
    margin-left: auto;
    margin-right: auto;
}

#logo {
    width: 150px;
    height: 150px;
    background-color: #7692ed;
    /* Sacar color*/
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 25px;
    margin-right: 10px;
    float: left;
    border-radius: 20px;
    background-image: url("Logo.jpeg");
    background-size: cover;
    background-position: top;
}

#titulo {
    width: 730px;
    height: 110px;
    /* Sacar color*/
    background-color: #66b3d1;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    float: left;
    border-radius: 20px;
}

#guia {
    width: 730px;
    height: 44px;
    /* Sacar color*/
    margin-top: 5px;
    margin-left: 10px;
    float: left;
    border-radius: 30px;
}

.cajacabeceraypie {
    background-color: #66b3d1;
}

.cajacabeceraypie:hover {
    background-color: #c4d5e1;
}

.LogoITC {
    transition: transform 0.2s ease;
}

.LogoITC:hover {
    transform: scale(1.2);
}

.formatoListaH {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    /* coloca los li en fila */
    justify-content: center;
    /* centra horizontalmente el conjunto */
    align-items: center;
}

.formatoListaH li {
    display: inline;

}

.formatoListaH li a {
    display: flex;
    align-items: center;
    /* centra el texto verticalmente */
    justify-content: center;
    width: 170px;
    height: 40px;
    background-color: #7692ed;
    color: #00658F;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    border-radius: 30px;
    text-align: center;
    margin-right: 15px;
    transition: transform 0.3s ease;
    border-color: #00658F;
    border-width: 2px;
    border-style: solid;
}

.formatoListaH li a:hover {
    background-color: #00658F;
    color: #7692ed;
    border-color: #7692ed;
    transform: scale(1.05);
    border-width: 4px;
    box-shadow: 2px 2px 0px 0px #033656;
}


/* Cuerpo pagina 1 */

#cuerpo {
    width: 1000px;
    height: 2350px;
    background-color: #BBDAEE;
    margin-left: auto;
    margin-right: auto;
}

#cuerpo1 {
    width: 900px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo2 {
    width: 300px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 1.webp);
    background-size: cover;
}

#cuerpo3 {
    width: 550px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo4 {
    width: 900px;
    height: 100px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo5 {
    width: 900px;
    height: 350px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 8.avif);
    background-size: cover;
    background-position: bottom;
}

#cuerpo6 {
    width: 900px;
    height: 300px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo7 {
    width: 250px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 9.webp);
    background-size: cover;
}

#cuerpo8 {
    width: 300px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 10.webp);
    background-size: cover;
}

#cuerpo9 {
    width: 250px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 11.webp);
    background-size: cover;
}

#cuerpo10 {
    width: 900px;
    height: 225px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo11 {
    width: 400px;
    height: 525px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo12 {
    width: 450px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(imagen\ 12.webp);
    background-size: cover;
}

#cuerpo13 {
    width: 450px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 13.webp);
    background-size: cover;
}

/* Cuerpo pagina 2 */
#cuerpoa {
    width: 1000px;
    height: 1400px;
    background-color: #BBDAEE;
    margin-left: auto;
    margin-right: auto;
}

#cuerpo1a {
    width: 900px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo2a {
    width: 425px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo3a {
    width: 425px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 14.webp);
    background-size: cover;
}

#cuerpo4a {
    width: 425px;
    height: 400px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo5a {
    width: 425px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 15.jpg);
    background-size: cover;
}

#cuerpo6a {
    width: 425px;
    height: 125px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 16.jpg);
    background-size: cover;
    background-position: center;
}

#cuerpo7a {
    width: 425px;
    height: 400px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo8a {
    width: 425px;
    height: 400px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}


/* Cuerpo pagina 3 */
#cuerpob {
    width: 1000px;
    height: 1150px;
    background-color: #BBDAEE;
    margin-left: auto;
    margin-right: auto;
}

#cuerpo1b {
    width: 900px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo2b {
    width: 250px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 5.jpg);
    background-size: cover;
    background-position: center;
}

#cuerpo3b {
    width: 300px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 6.jpg);
    background-size: cover;
    background-position: center;
}

#cuerpo4b {
    width: 250px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 7.png);
    background-size: cover;
    background-position: center;
}

#cuerpo5b {
    width: 900px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo6b {
    width: 425px;
    height: 300px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 17.jpeg);
    background-size: cover;
    background-position: center;
}

#cuerpo7b {
    width: 425px;
    height: 300px;
    background-color: #00658F;
    margin-top: 25px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 18.jpeg);
    background-size: cover;
    background-position: center;
}

/* Cuerpo pagina 4 */
#cuerpoc {
    width: 1000px;
    height: 1000px;
    background-color: #BBDAEE;
    margin-left: auto;
    margin-right: auto;
}

#cuerpo1c {
    width: 900px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo2c {
    width: 425px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
}

#cuerpo3c {
    width: 425px;
    height: 250px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 2.png);
    background-size: cover;
}

#cuerpo4c {
    width: 425px;
    height: 425px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    margin-left: 50px;
    float: left;
    border-radius: 15px;
    background-image: url(Imagen\ 3.webp);
    background-size: cover;
    background-position: center;
}

#cuerpo5c {
    width: 425px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: right;
    border-radius: 15px;
}

#cuerpo6c {
    width: 425px;
    height: 200px;
    background-color: #00658F;
    margin-top: 25px;
    margin-right: 50px;
    float: right;
    border-radius: 15px;
}



/* PIE */

#pie {
    width: 100%;
    height: 390px;
    background-color: #99c3d1;
    /* Sacar color*/
}

#pieCentral {
    width: 1000px;
    height: 390px;
    background-color: #99c3d1;
    /* Sacar color*/
    margin-left: auto;
    margin-right: auto;
}

#pie1 {
    width: 400px;
    height: 150px;
    margin-top: 10px;
    margin-left: 50px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
}

#pie2 {
    width: 450px;
    height: 150px;
    margin-top: 10px;
    margin-right: 50px;
    float: left;
    border-radius: 15px;
}

#pie3 {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    margin-right: 425px;
    margin-left: 375px;
    float: left;
    border-radius: 150px;
    background-image: url(ITC.png);
    background-size: cover;
}

/* CLASES */

.zoomImagen {
    transition: transform 0.3s ease;
}

.zoomImagen:hover {
    transform: scale(1.1);
}

.sombra {
    transition: transform 0.2s ease;
}

.sombra:hover {
    box-shadow: 8px 8px 12px #033656;
    transform: scale(1.05);

}

.textoTituloCentrado {
    text-align: center;
    margin-bottom: auto;
    margin-top: 10px;
    font-size: 75px;
    font-family: 'Franklin Gothic Medium';
    font-style: bold;
}

.textoTitulo2Centrado {
    text-align: center;
    margin-bottom: auto;
    margin-top: auto;
    font-size: 35px;
    font-family: 'Franklin Gothic Medium';
}

.textoTitulo3Centrado {
    text-align: center;
    margin-bottom: auto;
    margin-top: auto;
    font-size: 30px;
    font-family: 'Franklin Gothic Medium';
}

.textoCentrado {
    text-align: center;
    font-size: large;
}

.textoIzquierda {
    text-align: left;
    font-size: large;
    margin-left: 5px;
}

.textoJustificado {
    text-align: justify;
    font-size: large;
}

/*A partir de esta sección, vamos a comenzar a programar y configurar la adaptación de la página web a las diferentes pantallas estándares */

/* Pantalla de Tablet*/

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* CABECERA */

    #cabecera {
        height: calc(0.75*170px);
    }

    #cabeceraCentral {
        width: calc(0.75*950px);
        height: calc(0.75*170px);
        /* Sacar color*/
    }

    #logo {
        width: calc(0.75*150px);
        height: calc(0.75*150px);

        /* Sacar color*/
        margin-top: calc(0.75*10px);
        margin-bottom: calc(0.75*10px);
        margin-left: calc(0.75*25px);
        margin-right: calc(0.75*10px);
        float: left;
        border-radius: calc(0.75*100px);
        background-size: cover;
    }

    #titulo {
        width: calc(0.75*730px);
        height: calc(0.75*110px);
        /* Sacar color*/
        margin-top: calc(0.75*10px);
        margin-right: calc(0.75*10px);
        margin-left: calc(0.75*10px);
        float: left;
        border-radius: calc(0.75*20px);
    }

    #guia {
        width: calc(0.75*730px);
        height: calc(0.75*40px);
        /* Sacar color*/
        margin-top: calc(0.75*5px);
        margin-left: calc(0.75*10px);
        float: left;
        border-radius: calc(0.75*30px);
    }

    .formatoListaH {
        list-style-type: none;
        display: flex;
        /* coloca los li en fila */
        justify-content: center;
        /* centra horizontalmente el conjunto */
        align-items: center;
    }

    .formatoListaH li {
        display: inline;

    }

    .formatoListaH li a {
        display: flex;
        align-items: center;
        /* centra el texto verticalmente */
        justify-content: center;
        width: calc(0.75*170px);
        height: calc(0.75*40px);
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        border-radius: calc(0.75*30px);
        text-align: center;
        margin-right: calc(0.75*15px);
        transition: transform 0.3s ease;
        border-width: calc(0.75*2px);
        border-style: solid;
    }

    .formatoListaH li a:hover {
        transform: scale(1.05);
        border-width: calc(0.75*4px);
    }

    /* Cuerpo pagina 1 */

    #cuerpo {
        width: calc(0.75*1000px);
        height: calc(0.75*3200px);
        margin-left: auto;
        margin-right: auto;
    }

    #cuerpo1 {
        width: calc(0.75*900px);
        height: calc(0.75*240px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo2 {
        width: calc(0.75*300px);
        height: calc(0.75*285px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: center;
    }

    #cuerpo3 {
        width: calc(0.75*550px);
        height: calc(0.75*285px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo4 {
        width: calc(0.75*900px);
        height: calc(0.75*150px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo5 {
        width: calc(0.75*900px);
        height: calc(0.75*350px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: bottom;
    }

    #cuerpo6 {
        width: calc(0.75*900px);
        height: calc(0.75*500px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo7 {
        width: calc(0.75*250px);
        height: calc(0.75*200px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    #cuerpo8 {
        width: calc(0.75*300px);
        height: calc(0.75*200px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    #cuerpo9 {
        width: calc(0.75*250px);
        height: calc(0.75*200px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    #cuerpo10 {
        width: calc(0.75*900px);
        height: calc(0.75*350px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo11 {
        width: calc(0.75*400px);
        height: calc(0.75*890px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo12 {
        width: calc(0.75*450px);
        height: calc(0.75*434px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        background-position: center;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    #cuerpo13 {
        width: calc(0.75*450px);
        height: calc(0.75*434px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        background-position: center;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    /* Cuerpo pagina 2 */
    /* Cuerpo pagina 2 */
    #cuerpoa {
        width: calc(0.75*1000px);
        height: calc(0.75*2150px);
    }

    #cuerpo1a {
        width: calc(0.75*900px);
        height: calc(0.75*350px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    #cuerpo2a {
        width: calc(0.75*425px);
        height: calc(0.75*350px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    #cuerpo3a {
        width: calc(0.75*425px);
        height: calc(0.75*350px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);

    }

    #cuerpo4a {
        width: calc(0.75*425px);
        height: calc(0.75*650px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    #cuerpo5a {
        width: calc(0.75*425px);
        height: calc(0.75*400px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
        background-position: center;
    }

    #cuerpo6a {
        width: calc(0.75*425px);
        height: calc(0.75*225px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    #cuerpo7a {
        width: calc(0.75*425px);
        height: calc(0.75*650px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    #cuerpo8a {
        width: calc(0.75*425px);
        height: calc(0.75*650px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        border-radius: calc(0.75*15px);
    }

    /* Cuerpo pagina 3 */
    #cuerpob {
        width: calc(0.75*1000px);
        height: calc(0.75*1450px);
        margin-left: auto;
        margin-right: auto;
    }

    #cuerpo1b {
        width: calc(0.75*900px);
        height: calc(0.75*340px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo2b {
        width: calc(0.75*250px);
        height: calc(0.75*250px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: center;
    }

    #cuerpo3b {
        width: calc(0.75*300px);
        height: calc(0.75*250px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: center;
    }

    #cuerpo4b {
        width: calc(0.75*250px);
        height: calc(0.75*250px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: center;
    }

    #cuerpo5b {
        width: calc(0.75*900px);
        height: calc(0.75*400px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo6b {
        width: calc(0.75*425px);
        height: calc(0.75*300px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo7b {
        width: calc(0.75*425px);
        height: calc(0.75*300px);
        margin-top: calc(0.75*25px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    /* Cuerpo pagina 4 */
    #cuerpoc {
        width: calc(0.75*1000px);
        height: calc(0.75*1270px);
        margin-left: auto;
        margin-right: auto;
    }

    #cuerpo1c {
        width: calc(0.75*900px);
        height: calc(0.75*230px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo2c {
        width: calc(0.75*425px);
        height: calc(0.75*355px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #cuerpo3c {
        width: calc(0.75*425px);
        height: calc(0.75*355px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: left;
        background-position: center;
        border-radius: calc(0.75*15px);
        background-size: cover;
    }

    #cuerpo4c {
        width: calc(0.75*425px);
        height: calc(0.75*580px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        margin-left: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
        background-size: cover;
        background-position: center;
    }

    #cuerpo5c {
        width: calc(0.75*425px);
        height: calc(0.75*265px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: right;
        border-radius: calc(0.75*15px);
    }

    #cuerpo6c {
        width: calc(0.75*425px);
        height: calc(0.75*290px);
        margin-top: calc(0.75*25px);
        margin-right: calc(0.75*50px);
        float: right;
        border-radius: calc(0.75*15px);
    }



    /* PIE */

    #pie {
        height: calc(0.75*475px);
        /* Sacar color*/
    }

    #pieCentral {
        width: calc(0.75*1000px);
        height: calc(0.75*475px);
        /* Sacar color*/
        margin-left: auto;
        margin-right: auto;
    }

    #pie1 {
        width: calc(0.75*400px);
        height: calc(0.75*230px);
        margin-top: calc(0.75*10px);
        margin-left: calc(0.75*50px);
        margin-right: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #pie2 {
        width: calc(0.75*450px);
        height: calc(0.75*230px);
        margin-top: calc(0.75*10px);
        margin-right: calc(0.75*50px);
        float: left;
        border-radius: calc(0.75*15px);
    }

    #pie3 {
        width: calc(0.75*200px);
        height: calc(0.75*200px);
        margin-top: calc(0.75*10px);
        margin-right: calc(0.75*425px);
        margin-left: calc(0.75*375px);
        float: left;
        border-radius: 150px;
        background-image: url(ITC.png);
        background-size: cover;
    }

    /* CLASES */

    .zoomImagen {
        transition: transform 0.3s ease;
    }

    .zoomImagen:hover {
        transform: scale(1.1);
    }

    .sombra {
        transition: transform 0.2s ease;
    }

    .sombra:hover {
        transform: scale(1.05);

    }

    .textoTituloCentrado {
        text-align: center;
        margin-bottom: auto;
        margin-top: calc(0.75*00px);
        font-size: calc(0.75*100px);
        font-family: 'Franklin Gothic Medium';
        font-style: bold;
    }

    .textoTitulo2Centrado {
        text-align: center;
        margin-bottom: auto;
        margin-top: auto;
        font-size: calc(0.75*40px);
        font-family: 'Franklin Gothic Medium';
    }

    .textoTitulo3Centrado {
        text-align: center;
        margin-bottom: auto;
        margin-top: auto;
        font-size: calc(0.75*30px);
        font-family: 'Franklin Gothic Medium';
    }

    .textoCentrado {
        text-align: center;
        font-size: large;
    }

    .textoIzquierda {
        text-align: left;
        font-size: large;
        margin-left: calc(0.75*5px);
    }

    .textoJustificado {
        text-align: justify;
        font-size: 17px;
    }
}


/* Pantalla de Celular*/

@media only screen and (min-width: 320px) and (max-width: 767px) {

    /* CABECERA */
    #cabecera {
        overflow: auto;
        height: 120px;
    }

    #cabeceraCentral {
        width: 90%;
        height: 120px;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        /* permite que bajen de línea */
    }

    #logo {
        margin-top: 10px;
        margin-bottom: 0;
        width: 60px;
        height: 60px;
        margin-left: 20px;
        margin-right: 0;
        float: left;
    }

    #titulo {
        height: 60px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        float: left;
        border-radius: 15px;
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    #guia {
        height: 25px;
        margin-top: 5px;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5px;
        float: left;
        border-radius: 10px;
    }


    .formatoListaH li a {
        width: 90%;
        height: 25px;
        font-size: 8px;
        margin-bottom: 5px;
        flex: 1;
        margin-right: 0px;

    }


    .formatoListaH li {
        flex: 1;

        font-size: 15px;
        margin-right: 0px;
    }

    /* Cuerpo pagina 1 */



    #cuerpo {
        width: 90%;
        height: auto;
        overflow: auto;
    }

    #cuerpo1 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo2 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo3 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo4 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo5 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo6 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo7 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo8 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo9 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo10 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo11 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo12 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo13 {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 10px;
        background-position: center;
    }

    /* Cuerpo pagina 2 */
    #cuerpoa {
        width: 90%;
        height: auto;
        overflow: auto;
    }

    #cuerpo1a {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo2a {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo3a {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo4a {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo5a {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo6a {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo7a {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo8a {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 10px;
    }



    /* Cuerpo pagina 3 */
    #cuerpob {
        width: 90%;
        height: auto;
        overflow: auto;
    }

    #cuerpo1b {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo2b {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo3b {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo4b {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo5b {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;

    }

    #cuerpo6b {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;

    }

    #cuerpo7b {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 10px;
    }

    /* Cuerpo pagina 4 */
    #cuerpoc {
        width: 90%;
        height: auto;
        overflow: auto;
    }

    #cuerpo1c {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo2c {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo3c {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo4c {
        width: 90%;
        height: 200px;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        background-position: center;
    }

    #cuerpo5c {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #cuerpo6c {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 10px;
    }



    /* PIE */

    #pie {
        height: auto;
        overflow: auto;
    }

    #pieCentral {
        width: 90%;
        height: auto;
        overflow: auto;
    }

    #pie1 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #pie2 {
        width: 90%;
        height: auto;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
    }

    #pie3 {
        width: 40%;
        height: auto;
        margin-top: 10px;
        margin-right: 30%;
        margin-left: 30%;
        border-radius: 500px;
        aspect-ratio: 1 / 1;
        margin-bottom: 10px;
    }

    /* CLASES */

    .zoomImagen {
        transition: transform 0.3s ease;
    }

    .zoomImagen:hover {
        transform: scale(1.1);
    }

    .sombra {
        transition: transform 0.2s ease;
    }

    .sombra:hover {
        box-shadow: 8px 8px 12px #033656;
        transform: scale(1.05);

    }

    .textoTituloCentrado {
        position: absolute;
        inset: 0;
        /* top, right, bottom, left = 0 */
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9vw;
        text-align: center;

    }

    .textoTitulo2Centrado {
        text-align: center;
        margin-bottom: auto;
        margin-top: auto;
        font-size: 35px;
        font-family: 'Franklin Gothic Medium';
    }

    .textoTitulo3Centrado {
        text-align: center;
        margin-bottom: auto;
        margin-top: auto;
        font-size: 30px;
        font-family: 'Franklin Gothic Medium';
    }

    .textoCentrado {
        text-align: center;
        font-size: medium;
    }

    .textoIzquierda {
        text-align: left;
        font-size: medium;
        margin-left: 5px;
    }

    .textoJustificado {
        text-align: justify;
        font-size: medium;
    }

}