@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}

header {
    background-color: #d9ddf4;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1;
}

header #logo {
    width: 18em;
    padding: 1em;
    float: left;
    margin-left: 1em;
}

header nav ul {
    margin: 0;
    padding: 0;
}

header nav li {
    display: block;
    margin-left: 27em;
    margin-top: 1em;
}


header nav a {
    text-decoration: none;
    display: block;
    float: left;
    margin: 0.7em;
    padding: 0.5em 2em;
    color: black;
    font-weight: bold;
    
}

header #navbarrafija {
   color: #0943ff;
}

header nav li a {
    transition: 0.5s;
}

header nav li:hover a {
    transform: scale(1.2);
}

header .icon {
    float: right;
    padding: 0.5em 2em;
    margin-top: 0.3em;
    display: none;
}

header .btncontacto {
    background-color: #0943ff;
    color: white;
    border: 2px solid #0000;
    border-radius: 6px;
    transition: 0.4s;
}

header .btncontacto:hover {
    background-color: #d9ddf4;
    border: 2px solid #0943ff;
    color: black;
}

.tabla {
    display: table;
    width: 100%;
    background-color: #d9ddf4;
    
}

.linea {
    display: table-row;
    margin: auto;
}

.celda {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    padding: 1em;
    width: 23%;
    margin: auto;
   
}

footer .bloque2 img {
    width: 40%;
    padding: 1em;
}

.fa-brands {
    text-decoration: none;
    padding: 0.2em 0.5em; 
    color: #0943ff;
    font-size: 1.5em;
    transition: 0.3s;
}

.fa-brands:hover {
    transform: scale(1.2);
}

footer .bloque1 a {
    display: block;
    text-decoration: none;
    margin: 0.5em auto;
    color: black;
}






/* Pagina 1: Home Page */




#titulohomepage {
    text-align: center;
    margin: 0 auto;
    height: 26em;
    background-image: url(../imagenes/Fondo2-pag1.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#titulohomepage h1 {
    margin: 0;
    padding-top: 4em;
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 20px black;
}

#fondobienvenida {
    background-color: #f4f2f3;
    margin: 0 auto;
    padding: 0.5em;
}

.bienvenida {
    display: table;
    width: 80%;
    border-radius: 5px;
    margin:3em auto;
    box-shadow: 3px 5px 15px #ccc;
    background-color: white;
}

.bienvenida .primerocelda {
    display: table-cell;
}

.prim1 {
    width: 60%;
    padding: 2em;
    vertical-align: middle;
    text-align: justify;
}

.prim2 {
    width: 40%;
    border-left: 3px solid #0943ff;
    vertical-align: middle;
    padding: 0.5em 2em;
    background-image: url(../imagenes/fondo-pag2.png);
    background-repeat: no-repeat;
    background-size:cover;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.prim2 p {
    margin: 0 auto;
    font-size: 3.5em;
    font-weight: bold;
    text-shadow: 0px 0px 20px black;
    color: white;
}

#titulobloque1 {
    text-align: center;
}

#landing1 {
    text-align: left;
    margin: 5em auto;
    padding-left: 20%;
    font-size: 17px;
    width: 80%;
}

#landing1 #botoncontacto {
    text-decoration: none;
    color: white;
    padding: 1em;
    background-color: #0943ff;
    border-radius: 8px;
    font-weight: bold;
    display: block;
    width: 17%;
    text-align: center;
    border: 2px solid #0000;
    transition: 0.4s;
    }

#landing1 #botoncontacto:hover {
    background-color: white;
    color: black;
    border: 2px solid #0943ff;
}

.formtabla {
    display: table;
    width: 70%;
    box-shadow: 3px 5px 15px #ccc;   
    margin: 2em auto 7em auto;
    border-radius: 10px;
    
    
}

.formcelda {
    display: table-cell;
    width:50%;
    vertical-align: middle;
    text-align: center;
    padding: 1em;
    background-color:#f4f2f3;
    margin: auto;
}

.celdaconimagen {
    background-image: url(../imagenes/Servicios/Serv6.jpg);
    background-size: cover;
    border-right: 3px solid #0943ff;
    border-radius: 4px 0px 0px 4px;
}

.formcelda h2 {
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    text-shadow: 0px 0px 20px black;
    color: white;
}

.formularioderecha {
    border-radius: 0px 4px 4px 0px;
}

.formconsulta {
    text-align: center;
    padding: 1em;

}

.formconsulta ul {
    padding: 0;
    text-align: center;
}

.formconsulta li {
    list-style: none;
    padding: 0.3em;
}

.formconsulta input {
    padding: 0.7em;
    border-radius: 3px;
    width: 50%; 
    border: 2px solid #68d400;
}

.formconsulta #btnform {
    width: 57%;
    background-color: #0943ff;
    border: 2px solid #0943ff ;
    cursor: pointer;
    transition: 0.3s;
    color: white;
    font-weight: bold;
    padding: 0.7em;
    border-radius: 3px;
     
}

.formconsulta #btnform:hover {
    background-color: white;
    border: 2px solid #0943ff;
    color: black;
}

.formconsulta #comentario {
    margin: 0.5em auto;
    padding: 0.7em;
    border-radius: 3px;
    width: 55%;
    border: 2px solid #68d400;
    min-height: 3em;
    max-height: 6em;
    max-width: 55%;
    min-width: 40%;
}

.formconsulta .labelcomenta {
    display: block;
}

.honeypot {
    position: absolute;
    left: -9999px; 
  }

.bloquemaps {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-image: url(../imagenes/Fondo-doctora-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6em 0em;
}

.bloquemaps h2 {
    font-size: 2em;
    margin: 0.5em auto;
}

.bloquemaps p {
    width: 50%;
    margin: auto;
    text-align: center;
}

#mapagoogle {
    width: 100%; 
    height: 20em; 
}




/* Pagina 2: Sobre Nosotros */




#titulopag2 {
    text-align: center;
    margin: 0 auto;
    height:  26em;
    background-image: url(../imagenes/fondo-pag2.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#titulopag2 h1 {
    margin: 0em;
    padding-top: 4em;
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 20px black;
}

#fondogris {
    background-color: white;
    padding: 3em;
}

#objetivotabla {
    display: table;
    margin: 3em auto 1em auto;
    width: 80%;
    text-align: center;
    border-radius: 5px;
    box-shadow: 3px 5px 15px #ccc;
    background-color: #d9ddf4;
    
}

.objetivocelda {
    display: table-cell;
    width: 50%;
    padding: 3em 2em;
    vertical-align: middle;
}

#imagenobjetivo {
    width: 100%;
    border-radius: 3px;
}


#misionvision {
    display: table;
    width: 70%;
    margin: 2em auto;
    text-align: center;
}

#mision {
    display: table-cell;
    width: 50%;
    padding: 2em;
}

#vision {
    display: table-cell;
    width: 50%;
    padding: 2em;
    border-left: 2px solid #0943ff;
}

#titulovalores {
    margin: 1em auto 1em auto;
    text-align: center;
    color: white;
    font-size: 1.7em;
    text-shadow: 0px 0px 20px black;
    width: 80%;
}

.fondovalores {
    background-image: url(../imagenes/Fondo-alto.png);
    background-size: cover;
    padding: 2em;
}

#valorestabla {
    display: table;
    width: 90%;
    margin: 3em auto 5em auto;
    text-align: center;
    border-radius: 7px;
    background-color: white;
    
}

.valoreslinea {
    display: table-row;
}

.valorescelda {
    display: table-cell;
    width: 20%;
    padding: 1.3em;
    border-left: 2px solid #0943ff;
}

.caja1 {
    border-left: none;
}



/* Pagina 3: Servicios */ 




#titulopag3 {
    text-align: center;
    margin: 0 auto;
    height:  26em;
    background-image: url(../imagenes/fondo-pag3.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#titulopag3 h1 {
    margin: 0em;
    padding-top: 4em;
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 20px black;
}


.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
}


.cajajava {
    width: 30%;
    background-color: white;
    border-radius: 6px;
    padding: 1em;
    text-align: left;
    border: 2px solid #0943ff;
}


.cajajava a {
    display: block;
    text-align: center;
    margin: 1em auto;
    color: black;
    transition: 0.2s;
    text-decoration: none;
    padding: 0.4em;
    width: 5em;
    border: 2px solid #68d400;
    border-radius: 7px;
    transition: 0.3s;
    font-size: 13px;
    
}

.cajajava a:hover {
    background-color: #68d400;
    color: white;
    font-weight: bold;
}


.cajajava h2 {
    text-align: center;
    margin: 1em auto;
}

.cajajava ul {
    margin: 0;
    padding: 0;
}

.cajajava ul li {
    list-style: none;
    padding: 0em 2em;
}


#primerbloqueserv {
    text-align: center;
    margin:3em auto;
    width: 70%;
    background-color: #f4f2f3;
    border-radius: 4px;
    padding: 2em;
    box-shadow: 3px 5px 15px #ccc;
        
}

.fondoserv {
    background-color: #f4f2f3;
    padding: 1em 0em;
}

.tablaservflex {
    width: 70%;
    margin: 3em auto;
    text-align: center;
    background-color: #f4f2f3;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}


.bloquefoto #imagenservicios {
    width: 100%;
    border-radius: 4px;
    box-shadow: 3px 5px 15px #ccc;
}

#contenedorserv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.celdaserv {
    text-align:center;
    border-radius: 6px;
    box-shadow: 3px 5px 15px #ccc;
    transition: 0.5s;
    background-color: white;
    display: grid;
    place-content: center;
    

}

.celdaserv:hover {
    background: #d9ddf4;
    transition: 0.5s;
}

.celdaserv h2 {
    font-size: 17px;

}

.celdaserv .fa-solid {
    color: #0943ff;
    font-size: 2em;
}

.celdaserv a {
    text-decoration: none;
    color: black;
    padding: 0.3em;
    border: 2px solid #68d400;
    border-radius: 7px;
    width: 6em;
    margin: 0.5em auto;
    transition: 0.3s;
    font-size: 0.8em;
}

.celdaserv a:hover {
    background-color: #68d400;
    color: white;
}

.celdaserv #labmargen {
    margin-bottom: 1.8em;
}






/* Pag 4: Blog */




#titulopag4 {
    text-align: center;
    margin: 0 auto;
    height:  26em;
    background-image: url(../imagenes/fondo-pag4.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#titulopag4 h1 {
    margin: 0em;
    padding-top: 4em;
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 20px black;
}

#listadeblogs {
    margin: 6em auto;
    width: 70%;
}

#listadeblogs a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    display: block;
    margin: 2em auto;
}




/* Pag 5: Contacto */




#titulopag5 {
    text-align: center;
    margin: 0 auto;
    height:  26em;
    background-image: url(../imagenes/fondo-pag5.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#titulopag5 h1 {
    margin: 0em;
    padding-top: 4em;
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 20px black;
}

.gridfondo {
    background-color: aqua;
    padding: 0.5em 0em;
    background-color: #f4f2f3;
}

.gridprincipal {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4em auto 4em auto;
    background-color: white;
    border-radius: 4px;
    box-shadow: 3px 5px 15px #ccc;
}

.gridcolumnas {
    width: 80%;
    display: block;
    text-align: center;
    padding: 1.5em 0em 2em 0em;
    margin: auto; 
}

.gridcolumnas #mapacontacto {
    width: 100%;
    height: 17em;
    border-radius: 5px;
    box-shadow: 3px 5px 15px #ccc;
    margin: 1em auto;
}

.grid1 {
    margin-top: 1em;
}

.grid1 h3 {
    margin-top: 2em;
}

.grid1 #correo {
    color: black;
    text-decoration: none;
}

.grid1 #btnllamar {
    display: block;
    text-decoration: none;
    background-color: #0943ff;
    color: white;
    border: 2px solid #0000;
    border-radius: 6px;
    transition: 0.6s;
    padding: 0.7em;
    font-weight: bold;
    width: 30%;
    margin: 0em auto;
}

.grid1 #btnllamar:hover {
    background-color: white;
    border: 2px solid #0943ff;
    color: black;
}

.formpagcontacto {
    margin: 3em auto;
}






/* Contenido URLs blog */





.estiloscontenidoblog {
    margin: 6em auto;
    width: 50%;
    text-align: justify;
}

.estiloscontenidoblog p {
    margin: 3em auto;
}


#btncontactoblog {
   text-align: center;
    margin: 7em auto;
}

#btncontactoblog a {
    text-decoration: none;
    color: black;
    border: 2px solid #0943ff;
    padding: 0.7em 2em;
    font-weight: bold;
    border-radius: 6px;
    transition: 0.5s;
}

#btncontactoblog a:hover {
    background-color: #0943ff;
    color: white;
}







/* Responsive */





@media screen and (max-width: 1200px) {
    
    header nav a {
        display: none;
    }
    
    header .icon {
        display: block;
    }
    
    header nav li {
        margin: 1em auto;
        transition: 0.5s;
    }
    
    header:hover {
        height: 21em;
    }

    header:hover nav a {
        display: block;
        float: none;
        text-align: center;
        width: 30%;
        margin: auto;
        position: relative;
        top: 2em;
    }
    
    header:hover .icon,  header:hover #logo  {
        display: none;
    }
    
    header #btncontacto {
        width: 13%;
        margin: auto;
    }
}




@media screen and (max-width: 700px) {
    
    
    footer .tabla, footer .linea, footer .celda  {
        display: block;
        width: 85%;
        margin: auto;
    }
    
    
    
/* Pag1: Inicio */
    
    .bienvenida  {
        display: block;
        margin:auto;
    }
    
    .bienvenida .primerocelda {
        text-align: center;
    }
    
    .bienvenida .prim1 {
        display: block;
        margin: auto;
        width: 80%;
        padding: 1em;
    }
    
    .bienvenida .prim2 {
        width: 100%;
        display: block;
        padding: 3em 0;
        border-top: 3px solid #0943ff;
        border-radius: 0px 0px 5px 5px;
        border-left: none;
    }
    
    #landing1 {
        text-align: center;
        padding: 1em;
        margin: auto;
        font-size: 17px;
        width: 80%;
    }

    #landing1 #botoncontacto {
        width: 7em;
        margin: 2.5em auto 1em auto;
    }
     
    .formtabla {
        display: block;
        width: 80%;  
    }

    .formcelda {
        display: block;
        width: 100%;
    }

    .celdaconimagen {
        border-right: none;
        border-bottom: 3px solid #0943ff;
        border-radius: 4px 4px 0px 0px;
        padding: 2em 0;

    }
     
    .formularioderecha {
        border-radius: 0px 0px 4px 4px;
        padding: 1em 0;
    }
    
    .formcelda h2 {
        margin: 2em auto;
    }

    .formconsulta input {
        width: 55%; 
        margin: auto;
    }
    
    .bloquemaps {
        background-image: none;
        background-color: #f4f2f3;
    }
        
    
    
    
    
    /* Pag 2: Sobre nosotros */
    
    
    
    
    #fondogris {
        padding: 0em;
    }

    #objetivotabla {
        display: block;
    }

    .objetivocelda {
        display: block;
        width: 80%;
        padding: 2em;
        margin: auto;
    }

    #misionvision {
        display: block;
        width: 80%;
    }

    #mision {
        display: block;
        width: 80%;
        padding: 1em;
        margin: auto;
    }

    #vision {
        display: block;
        width: 80%;
        padding: 1em;
        margin: auto;
        border-top: 2px solid #0943ff;
        border-left: none;
    }

    .fondovalores {
        padding: 2em 0em;
    }

    #valorestabla {
        display: block;
        width: 80%;
    }

    .valoreslinea {
        display: block;
    }

    .valorescelda {
        display: block;
        width: 80%;
        padding: 1em;
        border-top: 2px solid #0943ff;
        border-left: none;
        margin: auto;
    }
    
    .caja1 {
        border-top: none;
    }

    
    
    
    
    /* Pag 3: Servicios */
    
    
    
    
    
    
    .cajajava {
        width: 70%;
        padding: 1em;
        top: 90%;
        left: 9%;
    }
    
    .cajajava h2 {
        text-align: center;
        margin: 1.5em auto 1em auto;
    }

    .tablaservflex {
        width: 80%;
        display: block;
        margin: auto;
    }


    .bloquefoto #imagenservicios {
        width: 80%;
        height: 22em;
    }

    #contenedorserv {
        display: block;
        margin: 1em auto;
        width: 80%;
    }

    .celdaserv {
        margin: 1em 0em;
        display: grid;
        place-content: center;
        padding: 1.5em;
    }
    
    .celdaserv #labmargen {
        margin-bottom: 1em;
    }

    
    
    
    
    
    /* Pag 5: Contacto */
    
    
    
    .gridprincipal {
        display: block;
    }
    
    .grid1 #btnllamar {
        width: 60%;
    }
    
    
    
    /* Contenido URLs blog */
    
    
    

    .estiloscontenidoblog {
        width: 70%;
    }
    
    .estiloscontenidoblog h2, .estiloscontenidoblog h3 {
        text-align: center;
    }

}



@media screen and (max-width: 460px) {
    header #logo {
        width: 12em;
    }
    
    header .icon {
    padding: 0em 1.5em;
    margin-top: 0.2em;
    }
}