/* Color references */

:root {
  --naranja: #F58025;
  --naranja-claro: #f1b98f;
  --amarillo: #EFB106;
  --amarillo-oscuro: #d39c30;
  --turquesa: #00ADD2;
  --gris: #909090;
  --gris-claro: #fefefe;
  --gris-line: #D2D3D5;
  --rosado: #fffdfb;
  --sombra: #fef5ee;  
  --blanco: #fff;
}

/* General */

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding-top: 0;
  font-family: 'Roboto', sans-serif !important;
  color: var(--gris);
  overflow-x: hidden;
}
a[type='button'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Animations */

.animate-left {
  animation-duration: 1s;
  animation-name: slideleft;
}
.animate-right {
  animation-duration: 1.5s;
  animation-name: slideright;
}
.animate-right-2 {
  animation-duration: 1s;
  animation-name: slideright;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-direction: normal;
  animation-iteration-count: 1;  
}
.animate-vertical {
  animation-name: slidebottom;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-direction: normal;
  animation-iteration-count: 1;
}
#Funcion-1 {
  animation-duration: 750ms;
  animation-delay: 0;
}
#Funcion-2 {
  animation-duration: 1s;
  animation-delay: 150ms;
}
#Funcion-3 {
  animation-duration: 1250ms;
  animation-delay: 300ms;
}
#Nosotros-1 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 0;
}
#Nosotros-2-1 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 200ms;
}
#Nosotros-2-2 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 300ms;
}
#Nosotros-3-1 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 400ms;
}
#Nosotros-3-2 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 500ms;
}
#Sistemas-list {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 0;
}
#Sistemas-1 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 200ms;
}
#Sistemas-2 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 300ms;
}
#Sistemas-3 {
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 400ms;
}
.function-box {
  opacity: 0;
  padding-top: 100px;
}

/* Navigation */

.top-bar {
  display: none;
}
.top-bar .nav {
  height: 4rem;
  background-color: var(--gris);
}
.top-bar .nav a {
  color: var(--blanco);
}
.top-bar .nav span {
  color: var(--blanco);
}
.top-bar .nav a:hover {
  color: var(--amarillo);
}
.top-bar .separador {
  border-left: 1px solid var(--blanco);
}
.top-bar .contacto {
  border-bottom: 1px solid var(--blanco);
}
.top-bar .contacto:hover {
  border-bottom: 1px solid var(--amarillo);
}
.navbar {
  /* height: 74px; */
  background-color: var(--gris-claro)!important;
}
.navbar-brand {
  padding-top: 0;
}
.navbar-brand img {
  width: 190px;
  height: 50px;
}
.navbar-collapse ul {
  font-size: 1rem;
}
.navbar-nav li {
  padding: 0 11px;
}
.navbar-nav a {
  margin: 1px 0 4px;
  padding-top: 8px;
  padding-bottom: 2px;
}
.navbar-nav .nav-item.active a.nav-link {
  color: var(--naranja)!important;
  border-bottom: 2px solid var(--naranja);
}
.navbar-toggler {
  border-color: var(--gris-line)!important;
}
.navbar-toggler-icon {
  font-size: 1.25rem;
}
.nav-link.dropdown-toggle::after {
  margin-left: 7px;
}
.dropdown-menu {
  border: 0;
}
.dropdown-item {
  color: var(--gris);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--naranja);
}

/* Hero */

#Hero {
  background-image: linear-gradient(var(--rosado),var(--blanco));
}
#Hero .container-md {
  position: relative;
  height: 100%;
  text-align: center;
}
.centered-overflow {
  display: flex;
  justify-content: center;
}
.main-text {
  padding-top: 36px;
  padding-bottom: 20px;
  z-index: 2;
}
.main-text p.h1 {
  font-size: 2.5em;
  color: var(--naranja);
}
.main-text h4 {
  padding-top: 6px;
  padding-bottom: 10px;
  color: var(--gris);
  /* font-weight: 500; */
}
.text-wrapper p {
  line-height: 130%;
  font-size: 1rem;
}
.button-start {
  width: 155px;
  margin: 30px auto;
  padding-bottom: 25px;
  padding-top: 10px;
}
.action-button {
  color: white!important;
  background-color: var(--amarillo)!important;
  border-color: var(--amarillo)!important;
}
.action-button:hover {
  background-color: goldenrod!important;
  border-color: goldenrod!important;
}
.circle-float {
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 0;
  padding-top: 100%;
  position: absolute;
  z-index: -1;
}
.circle-bottom {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: var(--sombra);
}

/* Carousel */

#Carousel {
  padding: 0;
}
.carousel-indicators li {
  background-color: var(--gris-line);
  height: 5px;
}
.carousel-indicators li.active {
  background-color: var(--naranja);
}
.carousel-inner {
  position: relative;
  width: 100%;
  padding: 0 44px;
  overflow: hidden;
}
.carousel-control-prev,
.carousel-control-next {
  width: 100px;
  z-index: 3;
}
.carousel-control-prev {
  left: -30px;
}
.carousel-control-next {
  right: -30px;
}
.carousel-control-prev i,
.carousel-control-next i {
  position: absolute;
  font-size: 2.3rem;
  color: var(--gris-line);
}
.carousel-item {
  height: 100%;
  z-index: 1;
}
.bd-placeholder-img {
  background-size: contain;
}
.pop-image img {
  width: 95%;
}

/* Banner */

#Banner {
  background-color: var(--naranja);
  z-index: 10;
}
#Banner article {
  padding: 35px 1.5rem 15px 1.5rem;
  color: var(--blanco);
}
.banner-title {
  line-height: 120%;
}
.banner-title span{
  font-size: 0.8em;
}
#Banner .button-start {
  padding-bottom: 0;
  padding-top: 0;
  margin: 15px auto;
}
.banner-text p {
  font-size: 1.3rem;
}
/* Funciones */

#Funciones {
  background-color: var(--gris);
  z-index: 10;
}
#Funciones article {
  padding: 15px 1.5rem 15px 1.5rem;
  color: var(--blanco);
}
.box-feature {
  width: 100%;
  margin: 5px auto;
}
.feature-leyend {
  margin: 5%;
}
.feature-title {
  width: 100%;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--blanco);
}
.feature-image {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 80%;
  margin: 15px 0;
}
.feature-image img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.feature-text {
  font-size: 0.9rem;
  line-height: 150%;
  color: var(--blanco);
  margin-bottom: 10px;
}
.ver-mas {
  padding-left: 15px;
  border-left: 1px solid var(--blanco);
  color: var(--amarillo);
}
.ver-mas:hover {
  color: var(--amarillo-oscuro);
}
.ver-mas i {
  margin-left: 10px;
}

/* Modal */
#envio-mensaje {
  resize: none;
}

.breadcrumb-icons .breadcrumb-item + .breadcrumb-item::before {
  content: none;
}

/* Nosotros */
#Nosotros h4 {
  color: var(--naranja);
}
#Nosotros img {
  width: 100%;
}

/* Sistemas */
#Sistemas a {
  color: var(--gris)!important;
}
#Sistemas a:hover {
  color: var(--naranja)!important;
  text-decoration: none;
}
#Sistemas i {
  color: var(--naranja)!important;
}
#Sistemas h2 {
  color: var(--naranja);
}

/* Productos */
.breadcrumb {
  background-color: white;
}
article {
  scroll-margin-top: 120px;
}
.product-image {
  width: 100%;
}
.main-image {
  width: 100%;
  position: relative;
  padding-top: 100%!important;
}
.main-image img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto 0;
}
.photo-thumbs {
  width: 100%;
}
.photo-thumbs li {
  display: block;
  position: relative;
  width: calc(100%/4 - 6%);
  padding-top: calc(100%/4 - 6%);
  margin: calc(2%);
}
.photo-thumbs li div:hover {
  border: 1px solid var(--turquesa);
}
.photo-thumbs li div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.photo-thumbs img {
  width: 100%;
}
ul.product-bullets {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 20px;
}

/* Footer */

.site-footer {
  font-size: 0.85rem;
}
.footer-widgets {
  color: var(--blanco);
  background-color: var(--naranja);
  padding-top: 30px;
  padding-bottom: 40px;
}
.footer-icon {
  font-size: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 25px 25px 15px 25px;
}
.icon-block {
  color: var(--naranja-claro);
}
.whatsapp {
  display: block;
  width: 150px;
  margin: 0 auto;
  color: var(--blanco)
}
.whatsapp:hover {
  color: var(--gris-line)
}
.creditos {
  padding: 2.5rem;
  font-size: 1rem;
  color: var(--blanco);
  background-color: var(--naranja-claro);
}

/* Responsive */

@media (min-width: 300px) {
}

@media (min-width: 576px) {

  .top-bar {
    display: block;
  }
  .menu-contacto {
    display: none;
  }

  /* Hero */

  /* Carousel */

  #Carousel {
    padding: 0 15px;
  }
}

@media (min-width: 768px) {

  .navbar {
    height: 110px;
  }
  .navbar-brand img {
    width: 90%;
    height: 90%;
  }
  .dropdown-menu {
    border: 1px solid rgba(0,0,0,.15);
  }

  /* Hero */

  .centered-overflow {
    width: 110%;
  }
  .button-start {
    padding-bottom: 0;
    margin: 0;
  }

  /* Carousel */

  #Carousel {
    padding: 0 10px 0 0;
  }
  .carousel-inner {
    margin: 0 auto;
    padding-bottom: 35px;
  }
  .main-text {
    text-align: left;
  }
  .carousel-control-prev {
    left: -45px;
  }
  .carousel-control-next {
    right: -35px;
  }
  .pop-image {
    margin: auto 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Funciones */

  .box-feature {
    margin: 15px auto;
  }
  .feature-title {
    font-size: 1.2rem;
  }
  .feature-text {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px) {

  /* Hero */

  .main-text {
    padding-top: 58px;
    padding-left: 28px;
    padding-bottom: 0;
  }
  .main-text h2 {
    padding-top: 14px;
    padding-bottom: 16px;
    font-size: 1.95rem;
  }
  .text-wrapper {
    width: 70%;
  }
  .text-wrapper p {
    font-size: 1rem;
  }
  .button-start {
    margin: 30px 0 65px;
  }

  /* Carousel */

  .circle-float {
    top: 45px;
  }
}

@media (min-width: 1200px) {

  .main-text {
    margin: auto 0;
  }
  .pop-image {
    margin-top: 20px;
    padding: 40px 30px 20px 30px;
  }
}

/**
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@keyframes slideleft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideright {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slidebottom {
  from {
    padding-top: 100px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
}