html {
  scroll-behavior: smooth;
}


/* Estilos para la sección de contacto SECCION 1*/


/*estilo para la separacion entre secciones*/
.separador {
    background-color: #0973e475; /* Color de fondo para la separación */
  height: 40px; /* Ajusta la altura según tus necesidades */
}



section#seccion1 {
    width: 100%;/* Asegura que la sección ocupe todo el ancho */
    height: 60vh; /* Ajusta según tus necesidades */
    position: relative; /* Para posicionar elementos dentro de la sección */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */ 
}

/*acomodar elementos de card en colimna y al costado la imagen*/
.contenedor-seccion1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ajusta según tus necesidades */
  text-align: center;
}

/*estilo para card*/
#card-seccion1 {
  background-color: #a7a6a63c ; /* Fondo blanco para la tarjeta */
  border-radius: 10px; /* Bordes redondeados */
  padding: 20px; /* Espaciado interno */
  max-width: 500px; /* Ancho máximo para la tarjeta */
  margin: 20px; /* Espaciado externo */
}

/* Estilos para el título de la tarjeta */
.card-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  color: rgb(0, 0, 0); /* Color del texto del título */
}

/* Estilos para el texto de la tarjeta */
.card-text {
  font-size: 16px;
  color: rgb(61, 59, 59); /* Color del texto de la tarjeta */
  margin-bottom: 20px;
}

.imagen-seccion1 {
  flex: 1; /* La imagen ocupará el espacio restante */
  display: flex;
  justify-content: center;
}

/* estilo contenedor txt imagen para que los div se alinen en columna*/
.contenedor-txt-imagen {
  position: relative; /* Posición relativa para contener la superposición */
  display: inline-block; /* Permite que el contenedor se ajuste al tamaño de la imagen */
}   

.imagen-seccion1 img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* Bordes redondeados para la imagen */
}

/*acomodar elementos de formulario en columna*/
#formulario-seccion1 {
  background-color: rgb(56, 127, 209); /* Fondo para la formulario */
  padding: 20px 20px ; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
}

.form-columns {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre los campos del formulario */
}

/*cambiar tamaño de los campos del formulario*/
.form-control {
  padding: 10px; /* Espaciado interno para los campos del formulario */
  font-size: 18px; /* Tamaño de fuente para los campos del formulario */
  border: 1px solid #ccc; /* Borde para los campos del formulario */
  border-radius: 10px; /* Bordes redondeados para los campos del formulario */
  width: 100%; /* Asegura que los campos del formulario ocupen todo el ancho disponible */
  box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total de los campos del formulario */
}

/* Estilos para el botón de envío */
#seccion1 .btn {
  padding: 10px 20px; /* Espaciado interno para el botón */
  font-size: 18px; /* Tamaño de fuente para el botón */
  border: none; /* Sin borde para el botón */
  border-radius: 10px; /* Bordes redondeados para el botón */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  background-color: black; /* Color de fondo para el botón */
  color: white; /* Color del texto para el botón */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color del botón */
}
#seccion1 .btn:hover {
  background-color: #ffffff; /* Cambia el color de fondo al pasar el mouse sobre el botón */
  color: rgb(0, 0, 0); /* Cambia el color del texto al pasar el mouse sobre el botón */
}

/* cuando la pantalla sea menor a 768px acomodara la seccion bajo el separador*/
@media (max-width: 768px) {
  section#seccion1 {
    flex-direction: column;
    height: auto; /* Permite que la altura se ajuste al contenido en dispositivos móviles */
  }
}
/*cuando la pantalla sea menor a 768px, acomodar los elementos en columna*/
@media (max-width: 768px) {
  .contenedor-seccion1 {
    flex-direction: column;
  }
  .imagen-seccion1 {
    margin-top: 20px; /* Espacio entre la tarjeta y la imagen en dispositivos móviles */
  }
}  



/* Estilos para la sección de contacto SECCION 2*/

/* estilo seccion 2 para que ocupe todo el ancho de la pantalla y alinear los elementos en columna*/
section#seccion2 {
  width: 100%; /* Asegura que la sección ocupe todo el ancho */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0%; /* Espaciado interno para la sección */
}





/*distorcionar video para que ocupe todo el ancho de la pantalla y se adapte a diferentes tamaños de pantalla*/
.video-seccion2 {
  position: relative;  
    width: inherit; /* Asegura que el contenedor ocupe todo el ancho disponible */
    height: 45vh; /* Ajusta según tus necesidades */
    overflow: hidden; /* Oculta lo que está fuera del contenedor */
    z-index: 0; /* Asegura que el video esté detrás de otros elementos */
 }

.video-seccion2 video {
    background-color: rgba(131, 124, 124, 0.104); /* Fondo para el video en caso de que no se cargue o haya áreas transparentes */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Asegura que el video cubra todo el contenedor sin distorsionarse */
}

/*cubrir #video-fondo al video para que se adapte a diferentes tamaños de pantalla y ocupe todo el ancho del contenedor*/
#video-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que el video cubra todo el contenedor sin distorsionarse */
  z-index: 1; /* Asegura que el video esté detrás de otros elementos */
  background-color: rgba(0, 0, 0, 0.476);
}

/*ajustar ovelay para que este sobre el la capa  video-fondo mostrado en la seccion 2*/
.overlay-video {
  position: absolute; /* Posición absoluta para colocarla sobre el video */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta la posición para centrarla */
  color: rgb(0, 0, 0); /* Color del texto */
  background: rgba(255, 248, 248, 0.639); /* Fondo semitransparente para mejorar la legibilidad */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  text-align: center; /* Centra el texto dentro del overlay */ 
  z-index: 2; /* Asegura que el overlay esté por encima del video */

}

/*estilo para la informacion-seccion2 de la seccion 2*/
.contenedor-info-seccion2 {
  background-color: rgb(0, 0, 0); /* Fondo para la información de la sección 2 */
  padding: 20px; /* Espaciado interno */
}

/*estilo para la informacion-seccion2 de la seccion 2 y centra en el div*/
.info-seccion2 {
  background-color: rgb(0, 0, 0); /* Fondo para la información de la sección 2 */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  width: 80%; /* Ancho para la información de la sección 2 */
  margin: 0 auto; /* Centra el div horizontalmente */
    text-align: center; /* Centra el texto dentro del div */
}

/* Estilos para el título de la información de la sección 2 */
.info-seccion2 h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: rgb(255, 255, 255); /* Color del texto del título de la información de la sección 2 */
}

/* Estilos para el párrafo de la información de la sección 2  acomodar y justificar*/
.info-seccion2 p {
  font-size: 20px;
  color: rgb(255, 255, 255) !important; /* Color del texto del párrafo de la información de la sección 2 */
  margin-bottom: 10px;
}


/*estilo para seccion 2*/
#seccion2 {
  padding: 40px 20px; /* Espaciado interno para la sección */
  background-color: #f5f5f5; /* Color de fondo para la sección */
  text-align: center; /* Centra el texto dentro de la sección */
}   

/* Estilos para el título de la sección 2 */
#seccion2 h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: rgb(0, 0, 0); /* Color del texto del título de la sección 2 */
}

/*estilo para parrafo de seccion 2*/
#seccion2 p {
  font-size: 16px;
  color: rgb(61, 59, 59); /* Color del texto del párrafo de la sección 2 */
  margin-bottom: 20px;
}       

/*estilo y tamaño para estrellas de seccion 2 con bordes azules para cada estrella*/
.estrellas-calificacion {
  font-size: 40px; /* Tamaño de las estrellas */
  color: #ffffff; /* Color de las estrellas */
  margin: 0 5px; /* Espacio entre las estrellas */
  border-radius: 50%; /* Bordes redondeados para las estrellas */
  padding: 5px; /* Espaciado interno para las estrellas */
  display: inline-block; /* Permite que las estrellas se alineen horizontalmente */
  transition: transform 0.3s ease; /* Transición suave para el efecto de hover */

}   
/* efecto de hover para las estrellas de seccion 2  ir rellenando las estrellas segun pasa el mouse*/
.estrellas-calificacion:hover {
  transform: scale(1.2); /* Aumenta el tamaño de las estrellas al pasar el mouse */
  color: #847f01; /* Cambia el color de las estrellas al pasar el mouse */
}   

/*efecto rellenar las estrellas de la seccion 2 clase bi-star*/
.estrellas-calificacion .bi-star:hover,
.estrellas-calificacion .bi-star:hover ~ .bi-star {
  color: #847f01; /* Cambia el color de las estrellas al pasar el mouse */
}

/*estilo  seccion3*/
#seccion3 {
  padding: 40px 20px; /* Espaciado interno para la sección */
  background-color: #ffffff; /* Color de fondo para la sección */
  text-align: center; /* Centra el texto dentro de la sección */
}

/*estilo contenedor-seccion3 para alinear los elementos en fila añadiendo espacion ente los div internos*/
.contenedor-seccion3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ajusta según tus necesidades */
  text-align: center;
  gap: 30px; /* Espacio entre los div internos */

} 

/*estilo para formilario-seccion3 para mejorar la apariencia del formulario de la sección 3*/
#formulario-seccion3 {
  background-color: rgba(47, 45, 45, 0.382); /* Fondo para el formulario de la sección 3 */
  padding: 20px; /* Espaciado interno para el formulario de la sección 3 */
  border-radius: 10px; /* Bordes redondeados para el formulario de la sección 3 */
  width: 80%; /* Ancho para el formulario de la sección 3 */
  margin: 0 auto; /* Centra el formulario horizontalmente */
  text-align: center; /* Centra el texto dentro del formulario de la sección 3 */
  margin-top: 10px; /* Espacio superior para el formulario de la sección 3 */
}



/*estilo para el titulo h1 de la seccion 3 y mejora apariencia*/
#seccion3 h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: rgb(0, 0, 0); /* Color del texto del título de la sección 3 */
}

/*estilo para span de la seccion 3 para mejorar apariencia y resaltar el texto*/
#seccion3 span {
  color: rgb(0, 0, 0); /* Color del texto del span de la sección 3 */
  font-weight: bold; /* Negrita para resaltar el texto del span de la sección 3 */
}
/*estilo para botones dentro del espan de la seccion 3 para mejorar apariencia y resaltar el texto*/
#seccion3 span .btn {
  padding: 10px 20px; /* Espaciado interno para los botones dentro del span de la sección 3 */
  font-size: 18px; /* Tamaño de fuente para los botones dentro del span de la sección 3 */
  border: none; /* Sin borde para los botones dentro del span de la sección 3 */
  border-radius: 10px; /* Bordes redondeados para los botones dentro del span de la sección 3 */
  cursor: pointer; /* Cambia el cursor al pasar sobre los botones dentro del span de la sección 3 */
  background-color: black; /* Color de fondo para los botones dentro del span de la sección 3 */
  color: white; /* Color del texto para los botones dentro del span de la sección 3 */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color de los botones dentro del span de la sección 3 */
}
#seccion3 span .btn:hover {
  background-color: #ffffff; /* Cambia el color de fondo al pasar el mouse sobre los botones dentro del span de la sección 3 */
  color: rgb(0, 0, 0); /* Cambia el color del texto al pasar el mouse sobre los botones dentro del span de la sección 3 */
}

/*estilo para btn dentro del formulario de la seccion 3 para mejorar apariencia y resaltar el texto*/
#seccion3 #formulario-seccion3 .btn {
  padding: 10px 20px; /* Espaciado interno para el botón dentro del formulario de la sección 3 */
  font-size: 18px; /* Tamaño de fuente para el botón dentro del formulario de la sección 3 */
  border: none; /* Sin borde para el botón dentro del formulario de la sección 3 */
  border-radius: 10px; /* Bordes redondeados para el botón dentro del formulario de la sección 3 */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón dentro del formulario de la sección 3 */
  background-color: #346342; /* Color de fondo para el botón dentro del formulario de la sección 3 */
  color: white; /* Color del texto para el botón dentro del formulario de la sección 3 */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color del botón dentro del formulario de la sección 3 */
}

/*efecto hover para el botón dentro del formulario de la sección 3 para mejorar apariencia y resaltar el texto*/  
#seccion3 #formulario-seccion3 .btn:hover {
  background-color: #176b30; /* Cambia el color de fondo al pasar el mouse sobre el botón dentro del formulario de la sección 3 */
  color: rgb(226, 220, 220); /* Cambia el color del texto al pasar el mouse sobre el botón dentro del formulario de la sección 3 */
}



/*estilo para el parrafo de la seccion 3 mejorar apariencia limitando el estacio al usa*/
#seccion3 p {
  line-height: 1.5; /* Ajusta el espacio entre líneas para mejorar la legibilidad */
  font-size: 16px;
  color: rgb(61, 59, 59); /* Color del texto del párrafo de la sección 3 */
  margin-bottom: 20px;
}

/*acomodar elementos de la seccion 3 en columna cuando la pantalla sea menor a 768px*/
@media (max-width: 768px) {
  .contenedor-seccion3 {
    flex-direction: column;
  }
  #formulario-seccion3 {
    width: 100%; /* Asegura que el formulario ocupe todo el ancho disponible en dispositivos móviles */
    margin-top: 20px; /* Espacio superior para el formulario en dispositivos móviles */
  }
}


/* Estilos para la sección de contacto SECCION 4*/


/*estilo #seccion4 para mejorar apariencia y resaltar el texto*/
#seccion4 {
  padding: 40px 20px; /* Espaciado interno para la sección */
  background-color: #f5f5f5; /* Color de fondo para la sección */
  text-align: center; /* Centra el texto dentro de la sección */
}

/*estilo para contenedor-seccion4 para sobreponer div de politica de calidad en imagen-seccion4*/
.contenedor-seccion4 {
  position: relative; /* Posición relativa para contener la superposición */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ajusta según tus necesidades */
  text-align: center;
}
/*estilo para politica-calidad-seccion4 para sobreponer div de politica de calidad en imagen-seccion4*/
.politica-calidad-seccion4 {
  position: absolute; /* Posición absoluta para colocarla sobre la imagen */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */ 
  transform: translate(-50%, -50%); /* Ajusta la posición para centrarla */
  color: rgb(0, 0, 0); /* Color del texto */
  background: rgba(255, 248, 248, 0.817); /* Fondo semitransparente para mejorar la legibilidad */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  text-align: center; /* Centra el texto dentro del div */
  z-index: 2; /* Asegura que el div esté por encima de la imagen */
} 

/*estilo para el titulo de politica-calidad-seccion4 para mejorar apariencia y resaltar el texto*/
.politica-calidad-seccion4 h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: rgb(0, 0, 0); /* Color del texto del título de la política de calidad de la sección 4 */
}

/*Quitar puntos de ul de politica-calidad-seccion4 para mejorar apariencia*/
.politica-calidad-seccion4 ul {
  list-style-type: none; /* Elimina los puntos de la lista */
  padding-left: 0; /* Elimina el espacio a la izquierda de la lista */
  margin-bottom: 20px; /* Espacio inferior para la lista */
}


/*estilo para el parrafo de politica-calidad-seccion4 para mejorar apariencia y resaltar el texto*/
.politica-calidad-seccion4 p {
  line-height: 1.5; /* Ajusta el espacio entre líneas para mejorar la legibilidad */
  font-size: 16px;
  color: rgb(61, 59, 59); /* Color del texto del párrafo de la política de calidad de la sección 4 */
  margin-bottom: 20px;
} 
/*estilo para imagen-seccion4 para mejorar apariencia y resaltar el texto*/
.imagen-seccion4 {
  flex: 1; /* La imagen ocupará el espacio restante */
  display: flex;
  justify-content: center;
}
.imagen-seccion4 img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* Bordes redondeados para la imagen */
}
/*acoplar texto de politica-caidad-seccion4 para que se acople a la dimencion de la imagen el acambiar el tamaño de pantalla*/
@media (max-width: 768px) {
  .politica-calidad-seccion4 {
    width: 100%; /* Asegura que el div ocupe todo el ancho disponible en dispositivos móviles */
    padding: 10px; /* Reduce el espaciado interno para adaptarse a pantallas más pequeñas */
  }
}


/*acomodar elementos de la seccion 4 en columna cuando la pantalla sea menor a 768px*/
@media (max-width: 768px) {
  .contenedor-seccion4 {
    flex-direction: column;
  }
  .imagen-seccion4 {
    margin-top: 20px; /* Espacio entre la política de calidad y la imagen en dispositivos móviles */
  }
}


/* Estilos para la sección de contacto SECCION 5*/


/*estilo para seccion5 para mejorar apariencia y resaltar el texto*/
#seccion5 {
  padding: 40px 20px; /* Espaciado interno para la sección */
  background-color: #ffffff; /* Color de fondo para la sección */
  text-align: center; /* Centra el texto dentro de la sección */
  width: 70%; /* Ancho para la sección 5 */
  margin: 0 auto; /* Centra la sección horizontalmente */
}

/*estilo para el titulo de seccion5 para mejorar apariencia y resaltar el texto cambiar estilo de letra*/
#seccion5 .seccion-tilte h1 {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
  color: rgb(0, 0, 0); /* Color del texto del título de la sección 5 */
  font-style: italic; /* Estilo de letra oblicua para el título de la sección 5 */
} 


/*estilo para contenedor-seccion5 para alinear los elementos en fila añadiendo espacion ente los div internos*/
.contenedor-seccion5 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ajusta según tus necesidades */
  text-align: center;
  gap: 30px; /* Espacio entre los div internos */
}

/*estilo para cada card seccion5 para mejorar apariencia con sombreado y resaltar el texto, agustar cada card de un solo tamaño*/
#seccion5 .contenedor-seccion5 .card {
  background-color: rgba(255, 255, 255, 0.382); /* Fondo para cada tarjeta de la sección 5 */
  padding: 20px; /* Espaciado interno para cada tarjeta de la sección 5 */
  border-radius: 10px; /* Bordes redondeados para cada tarjeta de la sección 5 */
  margin: 0 auto; /* Centra cada tarjeta horizontalmente */
  text-align: center; /* Centra el texto dentro de cada tarjeta de la sección 5 */
  margin-top: 10px; /* Espacio superior para cada tarjeta de la sección 5 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para mejorar la apariencia de cada tarjeta de la sección 5 */
  
}

/*ajustar cada card de un solo tamaño para mejorar apariencia*/
#seccion5 .contenedor-seccion5 .card {
  width: 80%; /* Ancho fijo para cada tarjeta de la sección 5 */
  height: 65vh; /* Altura fija para cada tarjeta de la sección 5 */
} 


/*estilo para el titulo de cada card seccion5 para mejorar apariencia y resaltar el texto*/
#seccion5 .contenedor-seccion5 .card .card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: rgb(0, 0, 0); /* Color del texto del título de cada tarjeta de la sección 5 */
} 
/*estilo para el parrafo de cada card seccion5 para mejorar apariencia y resaltar el texto*/
#seccion5 .contenedor-seccion5 .card .card-text {
  line-height: 1.5; /* Ajusta el espacio entre líneas para mejorar la legibilidad */
  font-size: 16px;
  color: rgb(61, 59, 59); /* Color del texto del párrafo de cada tarjeta de la sección 5 */
  margin-bottom: 20px;
} 


/*estilo para el btn de cada card seccion5 para mejorar apariencia y resaltar el texto*/
#seccion5 .contenedor-seccion5 .card .btn {
  padding: 10px 20px; /* Espaciado interno para el botón de cada tarjeta de la sección 5 */
  font-size: 18px; /* Tamaño de fuente para el botón de cada tarjeta de la sección 5 */
  border: none; /* Sin borde para el botón de cada tarjeta de la sección 5 */
  border-radius: 10px; /* Bordes redondeados para el botón de cada tarjeta de la sección 5 */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón de cada tarjeta de la sección 5 */
  background-color: #346342; /* Color de fondo para el botón de cada tarjeta de la sección 5 */
  color: white; /* Color del texto para el botón de cada tarjeta de la sección 5 */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color del botón de cada tarjeta de la sección 5 */
}
/*efecto hover para el botón de cada card seccion5 para mejorar apariencia y resaltar el texto*/  
#seccion5 .contenedor-seccion5 .card .btn:hover {
  background-color: #176b30; /* Cambia el color de fondo al pasar el mouse sobre el botón de cada tarjeta de la sección 5 */
  color: rgb(226, 220, 220); /* Cambia el color del texto al pasar el mouse sobre el botón de cada tarjeta de la sección 5 */
}

/*efecto agrandar img de card cuando el cursor se posiciona sobr cada card seccion5 para mejorar apariencia y resaltar el texto*/
#seccion5 .contenedor-seccion5 .card:hover {
  transform: scale(1.05); /* Aumenta el tamaño de la imagen al pasar el mouse sobre ella */
  transition: transform 0.3s ease; /* Transición suave para el efecto de hover en la imagen */
}   


/*acomodar elementos de la seccion 5 en columna cuando la pantalla sea menor a 768px*/
@media (max-width: 768px) {
  .contenedor-seccion5 {
    flex-direction: column;
  }
  #seccion5 .contenedor-seccion5 .card {
    width: 100%; /* Asegura que cada tarjeta ocupe todo el ancho disponible en dispositivos móviles */
    height: auto; /* Permite que la altura se ajuste al contenido en dispositivos móviles */
    margin-bottom: 20px; /* Espacio inferior entre las tarjetas en dispositivos móviles */
  }
}