:root {
    --fteHeadings: "Saira", sans-serif;
    --fteParrafos: "Open Sans", sans-serif;
    --rojo: #d62b26;
    --azul: #00053b;
    --celeste: #0096e0;
    --celestebck: rgba(0, 150, 224, 0.1);
    --celeste2: #85d4ff;
    --celeste3: #d6f2ff;
    --claro: #f5f5f5;
    --gris: #d9d9d9;
}

html {font-size: 62.5%;/* 1 rem = 10px */box-sizing: border-box;scroll-snap-type:y mandatory;}

*,*:before,*:after {box-sizing: inherit;}
body {font-family:var(--fteParrafos);}

h1,h2,a {font-family: var(--fteHeadings);line-height: 1.2;font-size: 2rem;font-weight: 500;color: var(--claro)}

a {text-decoration: none;font-size: 1.5rem;}

h3 {font-family: var(--fteParrafos);line-height: 1.2;font-size: 2rem;font-weight: 200;}

.head {display:flex;flex-direction:column; align-items:center;max-width:95%;padding:1rem;background-color: var(--azul);margin:1rem 1rem 0 1rem;}

.logo__img {width: 10rem;height:10rem; padding:1rem;}
.nombre{display: flex;flex-direction:column;align-items:center;text-align:center;}
@media(min-width:768px){.nombre{display:flex;flex-direction:row;justify-content:space-between;align-items:center;}.logo { width: 200px; height:92px;padding:1rem;}}


@media(min-width:768px){.head {max-width: 100%;margin: 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;}}

.navegacion{display:flex;flex-direction:column;width:max-content;width:100%;display:none;}
@media(min-width:768px){.navegacion {display:ruby;  flex-direction:row;justify-content:space-between;width:auto;}}
.navegacion a{display:block;text-align:center;text-decoration:none;padding:1rem;border-radius:5rem}
.navegacion a:hover{background-color:var(--celeste3);color:var(--azul);cursor:pointer;}


.presenta { display:flex;flex-direction:column;align-items:center;max-width:95%; background-image: linear-gradient(180deg, #0096e08c 50%, #0096e08c 50%), url(../Imagenes/Presenta.jpeg);background-repeat: no-repeat;background-size: cover;background-position:center center;height: 600px;position:relative;margin:0 1rem 0 1rem;}
.presenta__texto {display:flex;flex-direction:column;text-align:center;justify-content:space-between;margin: 15rem 5rem 15rem 5rem;align-items:center;a{margin-top:10rem;}}

.boton {font-family: var(--fteParrafos);font-size: 1.5rem;font-weight: 600;padding: 2rem;width: 30rem;background-color: var(--rojo);border-radius: 5rem;}

@media(min-width:768px){.presenta{max-width:100%;margin: 0 auto;}.presenta__texto{margin:20rem 10rem 1.5rem 10rem;display:flex;align-items:center;}h2{font-size:3.5rem;}}


.nosotros { background-color:var(--claro);max-width:95%; margin: 0 auto;/*height: 60rem*/;display:flex;flex-direction:column;align-items:center;text-align:center;}
 
.logo2 { display:flex;flex-direction:column;align-items:center;margin: 2rem auto;}

.imagen {width: 10rem;height: 10rem;padding:1rem;}

.nombre {color: var(--azul);width: 278px;font-weight: 600;font-size: 3rem;text-align: center;}

.valores {display:flex;flex-direction:column;max-width:95%;padding: 1rem;height: 45rem;align-content: center;}

.mision {color: var(--azul);font-size: 2rem;text-align: center;font-family: var(--fteParrafos);}
.vision {color: var(--azul);font-size: 2rem;text-align: center;font-family: var(--fteParrafos);}
.titulo {color: var(--azul);font-size: 3rem;font-weight: 600;text-align: center;}

@media(min-width:768px){.nosotros{max-width:100%;margin:0 auto;display:grid;grid-template-columns:50% 50%;height:60rem;}.imagen{width:30rem;height:30rem;}.valores{flex-direction:column;justify-content:center;align-items:center;}}
/**Servicios **/

.servicios {background-color:var(--gris);max-width:95%;margin:0 auto;display:flex;flex-direction:column;text-align:center;justify-content:space-between;}
.Services {display:flex;flex-direction:column;align-items:center;margin:1rem auto;padding:1rem;height:35rem;}
.Service__titulo{color: var(--azul);font-size: 2rem;font-weight: 600;text-align: center;}
.Service__texto{font-family: var(--fteParrafos);line-height: 1.2;font-size: 1.5rem;font-weight: 200;color:var(--azul);}
.Service__boton{font-family: var(--fteParrafos);font-size: 1.5rem;font-weight: 600;padding: 2rem;width: 30rem;background-color: var(--azul);border-radius: 5rem;color:var(--claro);margin:2rem;}


.gestion {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.levanta {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.desarrollo {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.construccion {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.mantencion {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.urgencias {display:flex;flex-direction:column;align-items:center;margin: 2rem auto;padding:1rem;}
.dibujo {width:8rem;height:8rem;background-color:var(--claro);border-radius:20rem;align-content:center;}
.iconos__titulo{color: var(--azul);font-size: 2rem;font-weight: 600;text-align: center;}
.iconos__texto{font-family: var(--fteParrafos);line-height: 1.2;font-size: 1.5rem;font-weight: 200;color:var(--azul);margin: 0;text-align:center;}
img {height:5rem;width:5rem;}
@media(min-width:768px){.servicios{max-width:100%;margin:0 auto;display:grid;grid-template-columns:40% 60%;align-items:center;}.arriba{display:grid;grid-template-columns: repeat(3, 1fr);}.abajo{display:grid;grid-template-columns: repeat(3, 1fr);}}

/** fotos **/
.galeria {max-width:95%;margin:0 auto;display:flex;flex-direction:column;text-align:center;}
.fotos {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:1rem;}
.fotos img{width:100%;height:20rem;border-radius:5px;cursor:pointer;transition:transform 0.3s ease;}
.fotos img:hover{transform:scale(1.05);}

.lightbox {display: none;position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);justify-content: center;align-items: center;}
.lightbox img {width:60rem;height:60rem;/**max-width:90%; max-height:80%**/;border-radius:5px;}
.lightbox:target {display:flex;}

.close {position:absolute;top:2rem;right:3rem;font-size:3rem;color:white;text-decoration:none;font-weight:bold;}

.leyenda__titulo { color: var(--azul);font-size: 3rem;font-weight: 600;text-align: center;}
.leyenda__texto {color: var(--azul);font-size: 2rem;text-align: center;font-family: var(--fteParrafos);}

@media(min-width:768px){.galeria{max-width:100%;align-items:center;}.fotos{display:grid;grid-template-columns:repeat(4,1fr);}.leyenda{max-width:50%;text-align:center;margin:3rem auto;}}


.contactos {background-color:#1E3896;max-width:95%; margin: 0 auto;display:flex;flex-direction:column;text-align:center;}
.ident{margin:2rem auto;}
.ident__titulo {font-size:2rem;font-family:var(--fteHeadings);}
span {font-size:1.0rem;}
.ident__texto {font-size:1.5rem;color:var(--claro);font-family:var(--fteParrafos);}

/** formulario **/
.formulario { background-color:#4363D9;width:min(60rem, 100%);margin:1.5rem auto;padding:2rem;border-radius:5%}
.formulario fieldset {border:none;max-width:95%;}
.formulario legend {font-family:var(--fteHeadings);text-align:center; font-size:1.8rem; text-transform:uppercase;font-weight:700;margin-bottom:2rem;color:var(--claro);}


@media(min-width:768px){.contactos{max-width:100%;display:grid;grid-template-columns:35% 65%;}.ident{text-align:left;margin:0 2rem;padding:1rem;}}
@media (min-width: 768px) {.contenedor-campos {display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto 20rem;column-gap:1rem;}}

.campo:nth-child(5){grid-column:1/3;}
.campo label {color: var(--claro);font-family:var(--fteHeadings);font-weight: bold;margin-top:1.5rem;display:block;text-align:left;font-size:2rem;}
.campo textarea {height: 15rem;}
.input-text { width:100%;border: none;padding:1.5rem;border-radius:.5rem;}

.botone{font-family: var(--fteParrafos);background-color:var(--rojo);color:var(--claro);padding:1rem 3rem;margin-top:1rem;font-size:2rem;text-decoration:none;
        text-transform:uppercase;font-weight:bold;border-radius:.5rem;width:90%;text-align:center;border:none;}

@media (min-width:768px){.botone {width:auto;}}

.botone:hover {cursor:pointer;}
.w-100 {width:100%;}

@media (min-width:768px) { .w-100{width:auto;}}

.flex {display:flex;}
.alinear-derecha{justify-content:flex-end;}

.sombra {-webkit-box-shadow: 0px 5px 15px 0px rgba(51,51,51,0.80);-moz-box-shadow: 0px 5px 15px 0px rgba(51,51,51,0.80); box-shadow: 0px 5px 15px 0px rgba(51,51,51,0.80); background-color: var(--blanco); padding: 2rem; border-radius: 1rem;}
/**
.gestion {
    color: var(--azul);
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
}
/**
.iconos {
    display: grid;
    grid-template-columns: repeat(3, 33rem);
    padding: 2rem;
}**/