/* Condiciones generales */
* {
    margin: 0;
    padding: 0;
}

html { /* Igualdad en unidades de medida 1rem = 10px */
    font-size: 62.5%;
}

/* Fuente - tipo de letra */
@font-face {
    font-family: 'Hand';
    src: url(/fonts/The\ Hand\ Regular.otf);
}

@font-face {
    font-family: 'Hand-Bold';
    src: url(/fonts/The\ Hand\ Bold.otf);
}

@font-face {
    font-family: 'Hand-Black';
    src: url(/fonts/The\ Hand\ Extra\ Black.otf);
    font-display: var(--shadow-elevation-high);
}

::-webkit-scrollbar {
    display: none;
}

p {
    color: white;
    font-family: 'Hand-Black';
    font-size: 20px;
    font-weight: bolder;
    text-shadow: 1px 1px 2px #000000 ;
}

.textoTitulo {
    color: whitesmoke;
    font-size: 42px;
    font-style: oblique;
    font-weight: bolder;
    text-shadow: 1px 5px 2px #4f4e4e ;
}

.textoTituloCentral {
    color: whitesmoke;
    font-size: 52px;
    font-style: oblique;
    font-weight: bolder;
    text-shadow: 1px 5px 5px #4f4e4e ;
}

.textoSubtitulo {
    color: whitesmoke;
    font-size: 22px;
    font-style: oblique;
    font-weight: bolder;
    text-shadow: 1px 1px 2px #4f4e4e ;
}

/* ------ */

/* Diseño body-header-section-div  */

.bodyStyles {
    /* Imagen + gradiente */
    background: #9cdfef;
    background: -webkit-linear-gradient(to right, rgba(31, 151, 199, 0.725), #406e8bf3), url(/img/ofttalmoDesenfoque.jpg);      
    background: linear-gradient(to right, #4091bcc3, #edf4f5d1), url(/img/ofttalmoDesenfoque.jpg); 
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

    /* Estructura body */
    padding: 10px;
    display: grid;
    grid-template-areas: 
        "header"
        "section"
        "footer";
    grid-template-columns: 100%;
    grid-row: 2fr 1fr 1fr;
    grid-row-gap: 10rem;
}

.headerStyle {
    grid-area: header;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px 0 22px;

    /* Fondo de Color Claro */
    background: #033945d4;
    background: -webkit-linear-gradient(to left, #b5dfe8d4, #46a5bad4, #033945d4);
    background: linear-gradient(to left, #b5dfe8d4, #46a5bad4, #033945d4);
}

.sectionStyle {
    grid-area: section;
    display: grid;
    grid-template-areas: "imgHome borderDiv navList";
    grid-template-columns: 32% 22% 40%;
}

.contornoRedondo {
    grid-area: borderDiv;

    /* Borde */
    border-right-color: solid rgb(0, 4, 122);
    border-radius: 85%;

    /* Sombra */
    -webkit-box-shadow: 38px 10px 15px -23px rgba(0,0,0,0.75);
    -moz-box-shadow: 38px 10px 15px -23px rgba(0,0,0,0.75);
    box-shadow: 38px 10px 15px -23px rgba(0,0,0,0.75);
}

.carousel {
    grid-area: imgHome;
    display: flex;  
    justify-content:flex-start;
}

.imagenCentral {
    width: 600px;
    height: 900px;
    margin-left: 120px;

    /* Borde con estilo */
    border-radius: 81px 170px 170px 52px;
    -moz-border-radius: 81px 0px 0px 52px;
    -webkit-border-radius: 81px 170px 170px 52px;

    border-top-right-radius: 55%;
    border-bottom-right-radius: 55%;
}

#carouselExampleFade {
    display: flex;
    align-items: center;
}

.navList {
    grid-area: navList;
    display: flex;
    align-items: center;
}

.navListStyle {
    list-style: none;
    font-family: 'Hand-Black';
    font-weight: bolder;
}

.divLista{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    padding: 15px;
}

.estiloLetrasListas {
    font-size: 46px;
    cursor: pointer;
    text-shadow: 5px 2px 5px #000000 ;
    font-family: 'Hand-Black';
    font-weight: bolder;
    transition: all 0.2s ease-out;
}

.estiloLetrasListas:hover,
.estiloLetrasListas:focus {
    color: rgb(34, 83, 120);
    text-shadow: 5px 2px 5px rgba(34, 83, 120, 0.833) ;
}

li {
    transition: transform 750ms, opacity 70ms;
}

li:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* ------ */

/* Estilo modal */

.modal-body {
    /* Fondo */
    background: #5e8ecd;
    background: -webkit-linear-gradient(to right, hwb(192 58% 5% / 0.725), #417ea4a3), url(/img/ofttalmoDesenfoque.jpg);      
    background: linear-gradient(to right, #28709775, #2b879398), url(/img/ofttalmoDesenfoque.jpg); 
    background-position: center;
    background-size: cover;

    border-top: solid #6184a6;
    border-bottom: solid #6184a6;
}

.pModalBody {
    font-size: 30px;
    text-shadow: 1px 1px 1px #000820 ;
}

.pModalHeader {
    font-size: 40px;
    color: #2e96a8;

}

#contenidoModal {
    border: 2px solid #6184a6;
}

.imagenPublicaciones {
    width: 350px;
    height: 420px;

    /* Borde con estilo */
    border-radius: 111px 78px 150px 79px;
    -moz-border-radius: 111px 78px 150px 79px;
    -webkit-border-radius: 111px 78px 150px 79px;
    border: 1px solid #000000;
}

#navAnte {
    position: relative;
    left: 7%;
}

#navMembr{
    position: relative;
    left: 12%;
}

#navLibros {
    position: relative;
    left: 15%;
}

#navCirugia {
    position: relative;
    left: 12%;
}

#navInfoMedica {
    position: relative;
    left: 7%;
}

#divPublicaciones {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.divEstrabismo {
    display: flex;
    align-content: center;
    justify-content: space-around;
}

.divEstrabismoParrafo {
    width: 700px;
}

.divEstrabismoImgGeneral {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
}

.divEstrabismoImgGeneral img{
    width: 250px;
    height: 160px;
}

.divEstrabismoImg {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.imgTextoEstrabismo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.espacioConstruccion {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pConstruccion {
    font-size: 50px;
}

/* ------ */

/* Diseño footer */

.barraSeparadora {
    border: groove black;
    border-radius: 2rem;

    /* Sombra */
    -webkit-box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.75);
}

.footerStyle {
    grid-area: footer;
}

.divfooter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 15px;
}

.footerP {
    display: flex;
    align-items: center;
    gap: 10px;
}

.divMap {
    display: flex;
    align-items: center;
    justify-content: center;
}

#divLogo {
    height: 15rem;
    width: 30rem;
}

/* ------ */

/* Medidas bajo 480px */

@media screen and (max-width: 480px) {
    .bodyStyles {
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
    
    .headerStyle {
        display: flex;
        flex-direction: column;
        align-content: center;
    }

    .navbar-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .textoTitulo {
        font-size: 22px;
    }
    
    .textoTituloCentral {
        font-size: 22px;
    }
    
    .textoSubtitulo {
        font-size: 12px;
    }

    #divLogo {
        height: 5rem;
        width: 10rem;
    }
    
    .sectionStyle {
        display: flex;
        flex-direction: column;
        width: 360px;    
    }
    
    .imagenCentral {
        width: 350px;
        height: 350px;
        margin-left: 0px;
    
        /* Borde con estilo */
        border-radius: 200px 200px 200px 200px;
        -moz-border-radius: 200px 200px 200px 200px;
        -webkit-border-radius: 200px 200px 200px 200px;
        border: 0px solid #000000;    
    }

    .contornoRedondo {
        display: none;
    }
    
    .navList {
        display: flex;
        flex-direction: row;
    }

    .navListStyle {
        list-style: none;
        font-family: 'Hand-Black';
        font-weight: bolder;
    }
    
    .divLista{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        padding: 15px;
    }

    .estiloLetrasListas {
        font-size: 26px;
    }

    #navAnte {
        position: none;
        left: 0;
    }
    
    #navMembr{
        position: none;
        left: 0;
    }
    
    #navLibros {
        position: none;
        left: 0;
    }

    #divPublicaciones {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    #navCirugia {
        position: none;
        left: 0;
    }

    .divEstrabismo {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-around;
    }
    
    .divEstrabismoParrafo {
        width: 360px;
    }
    
    .divEstrabismoImgGeneral {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
    }
    
    .divEstrabismoImgGeneral img{
        width: 250px;
        height: 160px;
    }
    
    .divEstrabismoImg {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-between;
    }
    
    .imgTextoEstrabismo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
    }
    
    #navInfoMedica {
        position: none;
        left: 0;
    }
    
    .footerStyle {
        grid-area: footer;
    }
    
    .divfooter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-top: 15px;
    }
    
    .footerP {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    iframe {
        width: 250px;
    }
}

/* ------ */
/* ------ */
/* ------ */