@font-face {
  font-family: Principal;
  src: url(../tipografia/Anta-Regular.ttf);
}

@font-face {
  font-family: Secundaria;
  src: url(../tipografia/Helvetica-CE-55-Roman-Bold.ttf);
}

@font-face {
  font-family: footerr;
  src: url(../tipografia/Helvetica-CE-55-Roman-Regular.ttf);
}

* {
  font-family: Secundaria;
}

body {
  background: #000;
}

b {
  color: #05f283;
}

body h2 {
  font-family: Principal;
  color: #05f283;
  text-align: center;
  font-size: 30pt;
  /* Aplica rellenos superior */
  padding-top: 80px;
  /* Aplica rellenos inferior */
  padding-bottom: 50px;
}
body p {
  text-align: justify;
  font-size: 14pt;
}
.Mas {
  font-family: Principal;
  text-decoration: none;
  color: #05f283;
  font-size: 14pt;
  text-align: left;
}
.Mas:hover {
  font-family: Principal;
  text-decoration: none;
  color: #00ffce;
  font-size: 14pt;
  text-align: left;
}
.btn {
  color: #000;
  background: #05f283;
}
.btn:hover {
  color: #000;
  background: #00ffce;
}

.form-control {
  color: #000;
  background: #05f283;
  border-radius: 45x;
  border-color: #05f283;
}

#mensaje {
  color: #000;
  background: #05f283;
  border-radius: 10px;
  border-color: #05f283;
}

#mensaje:focus {
  color: #000;
  background: #00ffce;
  border-radius: 10px;
  border-color: #05f283;
}

.row {
  text-align: center;
  padding-left: 10px;
  padding-right: -110px;
}

/* -------------------------------------------------BARRA DE NAVEGACION---------------------------------------------------- */

/* Contenedor principal */
.containerNav {
  max-width: 1300px; /* Aumenta el tamaño máximo del contenedor */
  margin: 0 auto;
  padding: 0 30px; /* Aumenta el padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Agrega el tamaño al contenedor */
  background-color: transparent; /* Hace el contenedor transparente */
}

/* Barra de navegación */
.BarraNavegacion {
  background-color: #000; /* Hace el nav transparente */
  color: #fff;
  padding: 20px 0;
  position: fixed; /* Hace el nav estático */
  width: 100%; /* Asegura que el nav ocupe todo el ancho */
  top: 0; /* Posiciona el nav en la parte superior */
  z-index: 1000; /* Asegura que el nav esté por encima de otros elementos */
}

/* Logo de navegación */
.logo-nav {
  margin-right: 10px; /* Reduce el espacio entre el logo y los elementos de la lista */
  top: 40px; /* Ajusta la posición superior */
  /* Desplaza el elemento 20px a la derecha */
  /*   */
  margin-left: 0;
}

.logo-nav img {
  height: 40px; /* Ajusta el tamaño del logo */
}

/* Lista de navegación */
.nav-links {
  border: 2px solid #05f283; /* Agrega bordes de color */
  border-radius: 10px; /* Redondea los bordes */
  padding: 18px; /* Agrega padding */
  width: 100%; /* Agrega el tamaño al contenedor */
  max-width: 880px; /* Aumenta el tamaño máximo del contenedor */
}

.nav-links ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.nav-links ul li {
  margin: 0 10px; /* Reduce el espacio entre los elementos de la lista */
}

.nav-links ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: Principal;
}

.nav-links ul li a:hover {
  text-decoration: underline;
  /* text-decoration: none; */
  counter-reset: none;
  color: #05f283;
  font-size: 16px;
  font-family: Principal;
}

/* Botón para dispositivos móviles */
.paraCelar {
  position: absolute;
  top: 30px; /* Ajusta la posición superior */
  right: 20px; /* Ajusta la posición derecha */
  display: none; /* Oculta el botón por defecto */
}

.paraCelar button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.paraCelar a {
  color: #fff;
  text-decoration: none;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .BarraNavegacion {
    position: fixed; /* Hace el nav estático */
  }

  .containerNav {
    flex-direction: column;
    align-items: center;
    margin-bottom: -15px; /* Espacio en la parte inferior */
  }

  .nav-links {
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    border: 2px solid transparent; /* Oculta el borde por defecto en móviles */
    margin-top: 15px; /* Espacio en la parte superior */
    margin-bottom: 5px; /* Espacio en la parte inferior */
  }

  .nav-links ul {
    display: none; /* Oculta la lista de navegación en móviles */
    flex-direction: column;
    width: 100%;
  }

  .nav-links ul li {
    margin: 5px 0;
    width: 100%;
    text-align: center;
  }

  .nav-links ul li a {
    display: block;
    width: 100%;
  }

  .paraCelar {
    display: block; /* Muestra el botón en dispositivos móviles */
    align-self: flex-end; /* Alinea el botón a la derecha */
  }

  .nav-links.active {
    border: 2px solid #05f283; /* Muestra el borde cuando la lista está activa */
  }

  .nav-links.active ul {
    display: flex; /* Muestra la lista de navegación cuando el botón es clicado */
    flex-direction: column;
    width: 100%;
  }
}

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

/* ----------------------------------------------informacion section ---------------------------------- */
#info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  margin-top: 250px; /* Espacio en la parte superior */
  margin-bottom: 230px; /* Espacio en la parte inferior */
}

.info .containerInfo {
  display: flex;
  justify-content: center; /* Centra los elementos dentro del contenedor */
  align-items: center;
  max-width: 1100px; /* Tamaño máximo del contenedor */
  width: 100%; /* Asegura que el contenedor ocupe el 100% del espacio disponible */
}

#row-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.info-img {
  justify-content: center; /* Centra la imagen */
  align-items: center;
  /* margin-right: 40px;  Espacio entre la imagen y el texto */
  width: 400px; /* Ajusta el tamaño según tus necesidades */
  height: 400px; /* Asegura que el contenedor interno sea un cuadrado */
}

.info-img img {
  width: 100%; /* Ajusta el tamaño de la imagen al 100% del contenedor */
  max-width: 800px; /* Tamaño máximo de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
}

.info-text {
  display: flex;
  justify-content: center; /* Centra el texto */
  align-items: center;
  margin-left: 40px; /* Espacio entre la imagen y el texto */
  text-align: center; /* Alinea el texto al centro */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  #row-1 {
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
  }

  .info-img {
    margin-right: 0; /* Elimina el margen derecho en dispositivos móviles */
    margin-bottom: 20px; /* Agrega margen inferior para separar los elementos */
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho disponible */
    height: auto; /* Ajusta la altura automáticamente */
  }

  .info-text {
    margin-left: 0; /* Elimina el margen izquierdo en dispositivos móviles */
    margin-top: 20px; /* Agrega margen superior para separar los elementos */
    width: 100%; /* Asegura que el texto ocupe el 100% del ancho disponible */
  }
}
/* ----------------------------------------------------------------------------------------------------- */

/* -----------------------------stilos de banner para movil--------------------------------------- */

@media only screen and (max-width: 768px) {
  .CompanyBanner {
    width: 100%;
    padding: 10px;
  }

  .banner img {
    width: 100%;
    max-height: 500px; /* Ajusta este valor según tus necesidades */
    height: auto;
  }
}

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

/* --------------------------------------carrusel de clientes---------------------------- */
.containerCarrusel {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.titulo-cliente {
  text-align: center;
  margin-bottom: 20px;

  margin-bottom: 60px; /* Espacio en la parte inferior */
}

.carrusel {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center; /* Centra los elementos verticalmente */
}

.carrusel-track {
  display: flex;
  align-items: center; /* Centra los elementos verticalmente */
  animation: scroll 20s linear infinite;
}

.carrusel-item {
  flex: 0 0 auto;
  width: 250px; /* Ajusta el ancho para que las imágenes se vean más grandes */
  margin: 0 50px; /* Agrega espacio entre las imágenes */
  display: flex;
  align-items: center; /* Centra las imágenes verticalmente */
}

.carrusel-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* Mantiene las proporciones sin distorsionar */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(-270px * 10)
    ); /* Ajusta el valor para mostrar todas las imágenes */
  }
}

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

/* -----------------------------------estilos para seccion nosotros------------------------- */
#nosotros {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  margin-top: 60px; /* Espacio en la parte superior */
  margin-bottom: 10px; /* Espacio en la parte inferior */
}

.nosotros-img {
  /* display: flex; */
  justify-content: center; /* Centra el texto */
  align-items: center;
  margin-left: 40px; /* Espacio entre la imagen y el texto */
  text-align: center; /* Alinea el texto al centro */
  width: 500px; /* Ajusta el tamaño según tus necesidades */
  height: 500px; /* Asegura que el contenedor interno sea un cuadrado */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .nosotros-img {
    margin: 0 auto; /* Centra la imagen automáticamente */
    margin-bottom: 20px; /* Espacio inferior entre elementos */
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantiene las proporciones de la imagen */
  }

  .nosotros-text {
    margin: 0; /* Elimina márgenes */
    padding: 15px; /* Agrega espacio interior para mejor legibilidad */
    text-align: justify; /* Alinea el texto para una lectura más cómoda */
  }

  h2 {
    font-size: 24px; /* Ajusta el tamaño del encabezado para pantallas pequeñas */
    text-align: center; /* Centra el título */
  }

  p {
    font-size: 16px; /* Aumenta la legibilidad del texto */
    line-height: 1.5; /* Mejor separación entre líneas */
  }
}

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

/* ----------------------------------- CALL section------------------------------------------ */
#contacto {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  margin-top: 20px; /* Espacio en la parte superior */
  margin-bottom: 70px; /* Espacio en la parte inferior */
}

.Call-img {
  width: 650px; /* Ajusta el tamaño según tus necesidades */
  height: 650px; /* Asegura que el contenedor sea un cuadrado */
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #05f283 0%, #000 75.5%);
  margin-bottom: 0; /* Elimina el margen inferior */
}

.Call1 {
  width: 450px; /* Ajusta el tamaño según tus necesidades */
  height: 450px; /* Asegura que el contenedor interno sea un cuadrado */
}

.mb-3 input:focus {
  border-color: #05f283; /* Color de borde al enfocar */
  background-color: #00ffce;
  outline: none;
}

.mensaje:focus {
  border-color: #05f283; /* Color de borde al enfocar */
  background-color: #00ffce;
  outline: none;
}

.formulario-cont {
  max-width: 410px; /* Ajusta el ancho del formulario */
  margin: auto;
  padding-top: 0; /* Elimina el padding superior */
  padding-left: -10px;
}

.mensaje {
  height: 340px; /* Ajusta el alto del textarea */
  max-height: 350px; /* Ajusta el alto del textarea */
}

.form-control {
  margin-bottom: 5px; /* Reduce aún más el espacio de separación entre los input */
}

.form-control:not(.mensaje) {
  height: 50px; /* Ajusta la altura de los input */
}

.form-control::placeholder {
  font-weight: bold; /* Pone en negrita los textos de los input */
}

@media (max-width: 768px) {
  .Call-img {
    width: 100%; /* Ajusta el tamaño para pantallas pequeñas */
    height: auto; /* Ajusta la altura automáticamente */
    margin-bottom: 20px; /* Agrega margen inferior */
    display: flex;
    justify-content: center; /* Centra el contenido */
  }
  .Call1 {
    width: 100%; /* Ajusta el tamaño para pantallas pequeñas */
    height: auto; /* Ajusta la altura automáticamente */
  }
  .formulario-cont {
    max-width: 100%; /* Ajusta el ancho del formulario */
    padding: 20px; /* Agrega padding */
    text-align: center; /* Centra el contenido */
    padding-right: 10px; /* Disminuye el espacio en la derecha */
  }
  .form-control {
    height: auto; /* Ajusta la altura de los input */
    margin-bottom: 10px; /* Agrega espacio de separación entre los input */
  }
  .mensaje {
    height: 160px; /* Ajusta el alto del textarea */
    max-height: 170px; /* Ajusta el alto del textarea */
  }
  .d-grid {
    width: 100%; /* Ajusta el ancho del botón */
  }
}

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

/* --------------------------------------footer-------------------------------------------- */

.footerLinks,
.footerContacto {
  margin-bottom: 40px;
}

.footerTitulo {
  font-family: Principal;
  color: #05f283;
  letter-spacing: 1px;
}

.footerLi {
  color: #fff;
  font-family: footerr;
  letter-spacing: 1px;
}

.footerContacto {
  transform: translateX(100px);
}

.parteUno {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  width: 100%;
  padding: 15px 20px;
}

.footerLogo {
  align-self: flex-end;
  margin-bottom: 15px;
}

.footerLogo,
.footerLinks,
.footerContacto,
.libroReclamos {
  flex: 1;
  text-align: left;
}

.footerLogo img {
  width: 150px;
  display: block;
  margin: 0 auto;
}

.footerLinks ul,
.footerContacto ul {
  padding: 0;
  list-style: none;
}

.footerLinks li,
.footerContacto li {
  margin-bottom: 10px;
}

.footerLinks h3,
.footerContacto h3 {
  margin-bottom: 20px;
}

.footerLinks a,
.footerContacto a {
  color: white;
  text-decoration: none;
}

.footerLinks a:hover,
.footerContacto a:hover {
  text-decoration: underline;
}

.footerLinks li:hover,
.footerContacto li:hover {
  transform: translateX(10px);
  transition: transform 0.3s ease;
  color: #05f283;
}

.libroReclamos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  margin: 0;
  align-self: flex-end;
}

.libroReclamos a {
  text-decoration: none;
  color: #05f283;
  font-size: 10pt;
}

.libroReclamos img {
  width: 100px;
}

.libroReclamos p {
  text-align: center;
  font-size: 1em;
  line-height: 1.2em;
}

.parteDos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 40px;
}

.parteDos p {
  text-decoration: none;
  color: #05f283;
}

.copy a {
  text-decoration: none;
  color: #05f283;
}

.copy,
.eslogan,
.redesSociales {
  margin: 0 10px;
  text-align: left;
}

.redesSociales {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

.redesSociales p {
  margin-bottom: 0;
}

.redesSociales a {
  color: #05f283;
  font-size: 1.2em;
}

.redesSociales a:hover {
  color: #ddd;
}

.footerContacto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footerContacto p {
  color: white;
  margin: 0;
  text-align: left;
  font-size: 0.9em;
}

.footerContacto p:nth-child(4),
.footerContacto p:nth-child(5),
.footerContacto p:nth-child(6) {
  font-weight: bold;
  font-size: 1em;
}

.footerLinks,
.footerContacto {
  margin-left: 0;
}
#Loogo {
  width: 180px;
  transform: translateY(-40px);
}

@media (max-width: 768px) {
  .parteUno {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px; /* Aumentado el espacio en la parte superior e inferior */
  }

  #Loogo {
    width: 120px;
  }

  /* .footerLogo {
    text-align: center;
  } */

  /* .footerLogo img {
      transform: translateX(-115px); 
      margin-left: 0;
      text-align: center;
      argin-bottom: 20px;
  } */

  .footerContacto {
    transform: translateX(-30px);
  }

  .footerLinks,
  .libroReclamos {
    text-align: center;
    margin-bottom: 20px;
  }

  .footerLinks ul,
  .footerContacto ul {
    text-align: left;
  }

  .libroReclamos {
    width: 100%;
  }

  .libroReclamos img {
    width: 80px;
  }

  .parteDos {
    flex-direction: column;
    align-items: center;
  }

  .copy,
  .eslogan,
  .redesSociales {
    text-align: center;
    margin: 10px 0;
  }

  .redesSociales {
    flex-direction: row;
    gap: 10px;
  }

  .redesSociales a {
    font-size: 1em;
  }
}

/* -----------------------------------fin footer------------------------------------------- */

/* ----------------------estilos para pagina nosotros.php------------------------------ */

/* Estilo para el contenedor */
/* #cont-img {
  justify-content: center;
  align-items: center;
} */
/* Estilo para la imagen */
.info-text img {
  width: 100%; /* Ajusta el tamaño de la imagen al 100% del contenedor */
  min-width: 450px; /* Tamaño máximo de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
  transform: translateY(-115px);
}

#Nos {
  width: 100%; /* Ajusta el tamaño de la imagen al 100% del contenedor */
  min-width: 450px; /* Tamaño máximo de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
  transform: translateY(-20px);
}

#val {
  width: 100%; /* Ajusta el tamaño de la imagen al 100% del contenedor */
  min-width: 450px; /* Tamaño máximo de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
  transform: translateY(-10px);
}

#valores p {
  /* line-height: 1.2em; */
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .info-text img {
    width: 100%;
    max-width: 200px;
    /* transform: translateY(-50px); */
  }

  #Nos, #val {
    min-width: 200px;
    transform: translateY(0);
  }

  .nosotros-text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px; /* Reduce el margen inferior */
  }
  #vision{
    margin: 0;
    padding: 0;
  }

}

/* ----------------------------------fin----------------------------------------------- */

/* ------------------estilos aplicados para WhatsApp flotante ----------------------- */
.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 120px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}
.float:hover {
  text-decoration: none;
  color: #25d366;
  background-color: #fff;
}

.my-float {
  margin-top: 16px;
}
/* ---------------------------------------------------------------------------------- */