@charset "UTF-8";
/*Importacion de fuentes*/
@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
/*colores principales*/
/*Colores de textos*/
/*Color whatsapp para botones o iconos*/
/*colores de box-shadows*/
/*color de la bandera*/
/*color de bordes*/
/*Reset CSS*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #000000;
  background-color: #ffffff;
  line-height: 1.6;
}
body a {
  text-decoration: none;
  color: inherit;
}

/*reset para elementos*/
.reset-elemento {
  margin: 0;
  padding: 0;
}

/*MIXINS*/
/*@include*/
/*EXTENDS*/
/*@extend*/
.card-servicios, .tamaño-card, .card-sobre-nosotros, main img {
  border-radius: 10px;
}

.distribucion-main, .conjunto-servicios, .grid-contacto, .orden-sucursales, .orden-cards {
  display: grid;
  grid-template-columns: 1fr;
}

.iconos-navegacion, .icono-negativo, .boton-contacto, .botones-servicios, .boton-whatsapp, .boton-enviar, .boton-rrhh {
  transition: all 0.8s ease;
}

/*"Inter", sans-serif;*/
h1 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 3rem;
  white-space: pre-line;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.5rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  white-space: pre-line;
}

figcaption {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  white-space: pre-line;
}

/*centrador de textos varios*/
.centrador-texto {
  text-align: center;
}

header {
  /*Keyframes de la imagen de header*/
}
@keyframes slide-right {
  0% {
    opacity: 0%;
    transform: translate(-150px, 0px);
  }
  75% {
    opacity: 50%;
    translate: -112.5px, 0px;
  }
  100% {
    opacity: 100%;
    transform: translate(0px, 0px);
  }
}
header img {
  animation-name: slide-right;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 0.8s;
  width: 150px;
  height: auto;
}

/*container de header*/
.container-header {
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  /*padding de elementos*/
  .container-header {
    padding: 0.5rem 1.5rem;
  }
}
main {
  background-color: #ffffff;
  padding-bottom: 1rem;
}
main img {
  max-width: 100%;
}
main p {
  margin-bottom: 0.5rem;
}
main label {
  margin-top: 0.75rem;
}

/*fondo de parte superior de la pagina de contacto*/
.top-main {
  background-color: #345995;
  color: #ffffff;
  padding: 1rem;
  margin-bottom: 1rem;
}

/*container general para main*/
.contenedor-general {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/*distribucion de elementos en main*/
.distribucion-main {
  gap: 2rem;
  align-items: start;
  width: 100%;
  height: 100%;
}

/*acomodar main servicios*/
.conjunto-servicios {
  gap: 1.5rem;
  align-items: center;
  margin: 0 1rem 1rem 1rem;
}

/*se centra el lado derecho de servicios*/
.center-servicios {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*acomodar seccion contacto*/
/*orden de imagenes de sucursales en sobre nosotros*/
.orden-sucursales {
  gap: 1.5rem;
}

/*orden de cards en sobre nosotros*/
.orden-cards {
  gap: 1rem;
}

/*medias de contenedor general para que se ajuste el main*/
@media (min-width: 768px) {
  .contenedor-general {
    max-width: 720px;
  }
  .distribucion-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .conjunto-servicios {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .orden-sucursales {
    grid-template-columns: repeat(3, 1fr);
  }
  .orden-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .contenedor-general {
    max-width: 960px;
  }
  .grid-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .contenedor-general {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .contenedor-general {
    max-width: 1320px;
  }
}
footer {
  padding: 1rem 0;
  background-color: #345995;
  color: #ffffff;
}
footer ul {
  list-style: none;
  text-decoration: none;
  padding: 0;
}
footer p {
  opacity: 80%;
  margin: 0;
  align-content: center;
}
footer small {
  display: block;
  margin: 1rem 1rem;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #ffffff;
}
footer img {
  width: 130px;
  height: auto;
}

/*orden de logo y frase de footer*/
.logo-frase {
  display: flex;
  gap: 1rem;
}

/*estilizado de boton de contacto en index*/
.boton-contacto {
  display: flex;
  flex-direction: column;
  background-color: #C1121F;
  color: #ffffff;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.75rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.5rem;
  border: 1px solid transparent;
}
.boton-contacto:hover {
  background-color: #FFF07C;
  color: #000000;
  border-radius: 20px;
  border: 1px solid #000000;
}

/*botones que estan en la pagina servicios*/
.botones-servicios {
  background-color: #C1121F;
  color: #ffffff;
  border-radius: 10px;
  border-style: none;
  padding: 0.75rem;
  font-size: 1.25rem;
  margin: 0rem auto 0.75rem auto;
  border: 1px solid transparent;
}
.botones-servicios:hover {
  background-color: #FFF07C;
  color: #000000;
  border-radius: 20px;
  border: 1px solid #000000;
}

/*boton que dirige a whatsapp en la pagina servicios*/
.boton-whatsapp {
  background-color: #25d366;
  color: #ffffff;
  border-radius: 10px;
  padding: 1rem;
}
.boton-whatsapp:hover {
  font-weight: 600;
}

/*boton de enviar en pagina de contacto*/
.boton-enviar {
  border-style: none;
  background-color: #C1121F;
  color: #ffffff;
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border: 1px solid transparent;
}
.boton-enviar:hover {
  background-color: #FFF07C;
  color: #000000;
  border-radius: 10px;
  border: 1px solid #000000;
}

/*estilizado de boton rrhh en pagina trabaja con nosotros*/
.boton-rrhh {
  display: inline-block;
  background-color: #C1121F;
  color: #ffffff;
  border-radius: 50px;
  padding: 1rem 1.5rem;
  margin: 0rem 1rem 1rem 1rem;
  border: 1px solid transparent;
}
.boton-rrhh:hover {
  background-color: #FFF07C;
  color: #000000;
  border-radius: 10px;
  border: 1px solid #000000;
}

/*estilizado de cards en la pagina servicios*/
.card-servicios {
  box-shadow: #C1121F 0px 0px 5px;
  padding: 1rem;
  margin-bottom: 1rem;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.card-servicios:hover {
  transform: scale(1.03);
}

/*tamaño de las cajas de contacto*/
.tamaño-card {
  width: 90%;
  justify-self: center;
  margin: 0 auto 1rem auto;
  box-shadow: #000000 0px 0px 5px;
  transition: all 0.3s ease;
}
.tamaño-card:hover {
  transform: scale(1.03);
}

/*tamaño imagen de index*/
.img-equipo {
  width: 99.8%;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/*body de cards*/
.body-card {
  padding: 1rem 0;
}

/*cards de abajo en pagina sobre nosotros*/
.card-sobre-nosotros {
  background-color: #C1121F;
  color: #ffffff;
  padding: 1rem;
  transition: all 0.6s ease;
}
.card-sobre-nosotros:hover {
  box-shadow: #C1121F 0px 0px 15px;
}

/*correccion de padding de contacto*/
.padding-servicios {
  padding-left: 0rem;
  padding-right: 0rem;
}

/*estructura dentro de cards de contacto*/
.estructura-card-contacto {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

/*margin card de sobre nosotros*/
.margin-card-nosotros {
  margin: 0;
}

/*padding top y bottom para cualquier elemento*/
.padding-card {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 992px) {
  .card-servicios {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
/*estilizar tamaño de carrusel de index*/
.tamañocarrusel {
  width: 90%;
  margin: 0 auto;
}

/*alineacion y tamaño de imagenes dentro de modales en pagina de servicios*/
.imagenes-modales {
  width: 90%;
  display: flex;
  align-items: center;
  margin: auto;
}

/*bandera de header*/
.bandera {
  height: 20px;
  background: linear-gradient(to bottom, #6cb4ee 0%, #6cb4ee 33.33%, #ffffff 33.33%, #ffffff 66.66%, #6cb4ee 66.66%, #6cb4ee 100%);
}

/*Estilizar iconos de navegacion activos*/
.iconos-navegacion {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background-color: #C1121F;
  color: #ffffff;
  font-weight: 600;
}
.iconos-navegacion:hover {
  box-shadow: #C1121F 0px 0px 6px;
}

/*estilizar iconos de navegacion que no estan activos*/
.icono-negativo {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  opacity: 75%;
}
.icono-negativo:hover {
  font-weight: 600;
  opacity: 100%;
}

/*ordena la posicion de todos los botones del navbar*/
.botones-header {
  margin: 0.75rem 2rem 0 auto;
}

@media (min-width: 992px) {
  .botones-header {
    gap: 1rem;
    margin-top: 0;
  }
}
/*Grosor y tamaño de titulos o textos especificos*/
.textos-gruesos {
  font-weight: 700;
}

.textos-medios {
  font-weight: 500;
}

.textos-finos {
  font-weight: 300;
}

.texto-altos {
  font-size: 2.5rem;
}

.texto-medianos {
  font-size: 1.75rem;
}

/*pintar de rojo con hover*/
.p-red {
  transition: all 0.3s ease;
}
.p-red:hover {
  color: #C1121F;
}

/*pintar de amarillo con hover*/
.p-yellow {
  transition: all 0.3s ease;
}
.p-yellow:hover {
  color: #FFF07C;
}

/*bajar la opacidad de p en footer e iluminar con hover*/
.p-opacity {
  transition: all 0.3s ease;
}
.p-opacity:hover {
  opacity: 100%;
}

/*estilizar iconos en pagina de contacto*/
.iconos-contacto {
  width: 60px;
  height: 60px;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  background-color: #C1121F;
}

/*sombreado en sucursales en la pagina sobre nosotros*/
.estilo-sucursal {
  margin-bottom: 0.5rem;
  box-shadow: #000000 0px 0px 5px;
  transition: all 0.3s ease;
}
.estilo-sucursal:hover {
  transform: scale(1.05);
}

/*tamaño imagen de rrhh en pagina trabaja con nosotros*/
.tamaño-rrhh {
  min-width: 200px;
  max-width: 300px;
  margin-bottom: 1rem;
}

/*margin bottom general*/
.margin-images {
  margin-bottom: 1rem;
}

.images-servicios {
  width: 300px;
  height: auto;
}

.image-whatsapp {
  width: 70px;
  height: auto;
}

/*# sourceMappingURL=styles.css.map */