:root {
    --rojo: #FF0000;
    --blanco: #ffffff;
    --oscuro: #212121;
    --negroMedio: #555555;
    --primario: #FFC107;
    --secundario: #0097A7;
    --gris: #757575;
    --grisClaro: #DFE9F3;
}
.fade-in {
    opacity: 0;
    transition: opacity 0.7s ease-in;
  }
.visible {
    opacity: 1;
  }
   
  .whatsapp-container {
    position: fixed;
    top: 20px; /* Ajusta la distancia desde la parte superior */
    right: 20px; /* Ajusta la distancia desde la derecha */
    z-index: 1000; /* Ajusta la posición en la que se superpone a otros elementos */  
  }

  /* Agrega este código a tu archivo de hojas de estilo CSS */
.imagen-con-margenes {
    padding-top: 4rem; /* Agrega un margen superior de 20 píxeles */
    padding-bottom: 4rem; /* Agrega un margen inferior de 20 píxeles */
    margin-left: 2rem; /* Margen izquierdo de 10 píxeles */
    margin-right: 2rem; /* Margen derecho de 10 píxeles */
  }
  
  /* .turnos-text {
    background-color: var(--primario);
    color: var(--oscuro); /* Cambia el color del texto a rojo */ /* Cambia el tamaño de fuente a 16 píxeles */
    /* font-size: 2.8rem; */
    /* font-family: Arial, sans-serif; Cambia la familia de fuentes */
    /* text-decoration: none; */
    /* font-size: 2rem; */
    /* font-weight: 700; */
    
/* }  


  

 /*La paleta de colores no existe en el html y por eso lo definimos aca,root es un pseudoselector*/

html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
}

.nav-bg,.hero, .contenedor-sobremi img,p,img,img,img,iframe,
 .servicio,.formulario{ 
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


*, *:before,  *:after{
    box-sizing: inherit;
}

/* Modo claro */
body{
    font-size: 16px; /* 1rem = 10px */
    font-family: 'krub', sans-serif;
      background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100% ); 


}

 /* .centro{
    
    display: flex;
   justify-content: center;
   align-items: center;
   } */

/* @media(min-width: 768px) {
   .dark-mode-boton{
    
    align-items: center;
   }
} */
/* .dark-mode-boton{
    width: 3rem;
    margin-bottom: 2rem;
    cursor: pointer;
    }   */

    /* .dark-mode-boton{
        filter: 100%;
        }
     */

     
      

.contenido p{
        text-align: center;
        
    }


 h1{
font-size: 3.8rem;

}
h2{
font-size: 2.8rem;

}
h3{
font-size: 1.8rem;

}
h1,h2,h3 {
    text-align: center;
    
}

 span{
    font-size: 2rem;
}
.contenedor{
   max-width: 120rem;
    margin: 0 auto;
    text-align: center;
}
.boton{
background-color: var(--rojo);
color: var(--blanco);
padding: 1rem 3rem;
margin-top: 3rem;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border-radius: .5rem;
width: 100%;
text-align: center;
border: none;
}
@media(min-width: 768px){
    .boton{
        width: auto;
        
    }
}
.boton:hover{
    cursor:pointer;
}

 .sombra {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
    box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54); 
box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
background-color: var(--blanco);
padding: 2rem;
border-radius: 1rem;
} 
.w_100{
    width: 100%;
}
@media(min-width: 768px){
    .w_100{
        width: auto;
    }
}
.flex{
    display: flex;
}
.alinear-derecha{
justify-content: flex-end;
}
 .nav-bg{
    background-color: var(--rojo);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    
 } 
 

.navegacion-principal{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
}
@media(min-width: 768px){
        .navegacion-principal{
            flex-direction: row;
        }
}



.navegacion-principal a {
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem; 
}

.navegacion-principal a:hover{
    background-color: var(--primario);
    color: var(--oscuro);
}

 /* .hero{
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    width: auto;
    position: relative;
    margin-bottom: 2rem;

    
}  */




    /* .hero {
        background-image: url(../img/hero.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 450px; /* Cambiado de 450px a auto */
        /* width: 450px; */
        /* position: relative; */
        /* margin-bottom: 2rem; */
    /* } */ 

  /* .contenido-hero { */
    /* position: absolute;  */
    /* background-color: rgba(0, 0, 0, 0.7); Cambiado el formato de color */
    /* width: 100%; */
    /* height: 100%; Cambiado de 450px a 100% */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center;  */
/* }  */


/* .contenido-hero{
     position: absolute; 
     background-color: rgb(0,0,0, .7); 
  width: 100%;
  height: 450px;

  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    
} */

.contenido-hero h2,
.contenido-hero p{
    color: var(--blanco);

}


/**servicios**/

@media(min-width: 768px){
    .servicios{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
    }
}


.servicio{
    
display: flex;
flex-direction: column;
align-items: center;

}
.servicio h3{
color: var(--secundario);
font-weight: 400;
}
.servicio ul{
    
    color: var(--oscuro);
    line-height: 2;
    text-align: left;
    margin: 0;
   font-weight: 400;
}
.servicio .iconos{
    height: 15rem;
    width: 15rem;
    background-color: var(--primario);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 
/**Contacto**/
.error {
    background-color: rgb(185, 0, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
}
.correcto {
    background-color: rgb(74, 185, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
}

.formulario{
background-color: var(--gris);
width: min(60rem, 100%); /**Utiliza el valor mas pequeño**/
margin: 0 auto;
padding: 2rem;
border-radius: 1rem;

}
.formulario fieldset{
    border: none;
}
.formulario legend{
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primario);
    margin: 0 auto;
}

@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(3),
        .campo:nth-child(4) {
            grid-column: 1 / 3;
        }
}
.campo{
margin-bottom: 1rem;
}
.campo label{
color: var(--blanco);
font-weight: bold;
margin-bottom: .5rem;
display: block;
}
.campo textarea{
    height: 20rem;
}
.input-text{
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}
.enviar .boton{
    width: 100%;
}

.barra-footer{
    max-width: 120rem;
    margin: 0 auto;
    background-color: var(--gris);
}
.footer{
    text-align: center;
    }
    
.imagen{
    max-width: 100%;
    height: auto;
    text-align: left;
    padding: 1rem;
}

p{
    
    font-weight: 400;
    line-height: 1.5;
    
}

    .contenedor-sobremi {
        max-width: 80rem;
         margin: 0 auto; 
        line-height: 1.5;
        color: var(--oscuro);
        font-weight: bold;
    } 

.footer{
    color: var(--blanco);
}

button{
    cursor: pointer;
}

body.dark-mode{
    background-image: linear-gradient(to top, var(--oscuro) 0%, var(--oscuro) 100% );
    color: var(--blanco);
    
    
}

main.dark-mode{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
    box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
background-color: var(--negroMedio);
padding: 2rem;
border-radius: 1rem; 


}

form.dark-mode {
    
  background-color: var(--oscuro);
  width: min(60rem, 100%); /**Utiliza el valor mas pequeño**/
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1rem;
        
     }
    .formulario fieldset{
         border: none;
    }
    .formulario legend{
     text-align: center;
     font-size: 1.8rem;
     text-transform: uppercase;
     font-weight: 700;
     margin-bottom: 2rem;
     color: var(--primario);
     margin: 0 auto;
    }

 .dark-mode .contenedor-sobremi{
    max-width: 80rem;
    margin: 0 auto; 
   line-height: 1.5;
    color: var(--blanco); 
   font-weight: bold;
} 

.dark-mode .servicio ul{
    color: var(--blanco);
    line-height: 2;
    text-align: left;
    margin: 0;
    font-weight: 400;
 }

.dark-mode .servicio h3{
    
 color: var(--blanco);
 font-weight: 400;
}

.dark-mode .barra-footer {
    max-width: 120rem;
    margin: 0 auto;
    background-color: var(--negroMedio);
}