.tema2 {color:#fff !important; background-color:#1970c2 !important}
.color2 {color:#1970c2 !important}
.tema4 {color:#fff !important; background-color:#1970c2 !important}
.color4 {color:#1970c2 !important}
.hover-color4:hover {color:#00046b !important}
.tema1 {color:#fff !important; background-color:#00033b !important}
.color1 {color:#00033b !important}
.tema3 {color:#fff !important; background-color:#062f6d !important}
.color3 {color:#0d4496 !important}

.tema5 {color:#fff !important; background-color:#00033b !important; transition: all .4s ease;}
.tema5:hover {color:#fff !important; background-color:#062f6d !important}

.tema6 {color:#062f6d !important; background-color:#ffffff !important; transition: all .5s ease;}
.tema6:hover {color:#062f6d !important; background-color:#dadada !important}

.w3-theme-l5 {color:#000 !important; background-color:#e2e3ff !important}
.w3-theme-l4 {color:#000 !important; background-color:#9ea1ff !important}
.w3-theme-l3 {color:#fff !important; background-color:#3d44ff !important}
.w3-theme-l2 {color:#fff !important; background-color:#0007db !important}
.w3-theme-l1 {color:#fff !important; background-color:#00046b !important}
.w3-theme-d1 {color:#fff !important; background-color:#00033b !important}
.w3-theme-d2 {color:#fff !important; background-color:#000114 !important}
.w3-theme-d3 {color:#fff !important; background-color:#000112 !important}
.w3-theme-d4 {color:#fff !important; background-color:#00010f !important}
.w3-theme-d5 {color:#fff !important; background-color:#00000d !important}

.w3-theme-light {color:#000 !important; background-color:#e2e3ff !important}
.w3-theme-dark {color:#fff !important; background-color:#00000d !important}
.w3-theme-action {color:#fff !important; background-color:#00000d !important}

.w3-theme {color:#fff !important; background-color:#000119 !important}
.w3-text-theme {color:#000119 !important}
.w3-border-theme {border-color:#000119 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#000119 !important}
.w3-hover-text-theme:hover {color:#000119 !important}
.w3-hover-border-theme:hover {border-color:#000119 !important}

html {
  scroll-behavior: smooth;
}

div::-webkit-scrollbar {
  width: 12px;
  height: 12px; 
  display: inline-block;             /* width of the entire scrollbar */
}

div::-webkit-scrollbar-track {
  background: rgba(233, 233, 233, 1);        /* color of the tracking area */
}

div::-webkit-scrollbar-thumb {
  background-color: #bbbbbb;    /* color of the scroll thumb */
  border-radius: 0px;       /* roundness of the scroll thumb */
  border: 2px solid #bbbbbb;  /* creates padding around scroll thumb */
}

  .btn-whats {
    width: 60px;
    height: 60px;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #1970c2;
    color:#fff;
    font-size: 35px !important;
    padding: 2px;
    font-weight: 600;
    transition: all .2s;
    }

  .btn-whats:hover {
    width: 150px;
    height: 60px;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #00046b;
    color:#fff;
    font-weight: 600;
  }

  .btn-whats-icon {
    color: #fff;
    position: relative;
    margin: 9px 10px 10px 11px;
  }

  .btn-whats-content {
    color: rgba(0,0,0,0);
    visibility: hidden;
    position: relative;
    bottom: 42px;
    left: 30px;  
    transition: color .5s;
  }

  .btn-whats:hover .btn-whats-content {
    color:#fff;
    margin-left: 10px;
    visibility: visible;
  }

  .preguntas {
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    margin: 10px 0px 10px 0px; /* arriba, derecha, abajo, izquierda */
    padding-bottom: 5px;
    font-weight: 600;
    transition-property: all;
    transition-duration: 0.5s;
  }
  
  .descuento {
      position: absolute;
      font-weight: 600;
      top: 0px;
      right: 0px;
      margin-right:10px;
      background-color: #ff0000;
      color: #fff;
      padding: 2px;
      border-radius: 0px 0px 5px 5px;
    }

  .heada {
    border-radius: 15px 15px 0px 0px !important;
  }

  .bodya {
    min-height: min-content;
  }

  .foota {
    border-radius: 0px 0px 15px 15px !important;
  }

  .asistente {
    max-width: 100%;
    border: 0px solid #e0e0e0;
    border-radius: 15px 15px 15px 15px !important;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    margin-bottom: 25px;
    background-color: #fff;
    color:#000;
    font-size: 25px;  
    font-weight: 600;
    box-shadow: 0px 0px 25px 5px #cfcfcf;
    transition: width 3s;
  }

  .bot {
    background-color: #fff;
    margin: 15px 15px 0px 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    text-align: left;
    border-radius: 0px 10px 10px 10px;
    max-width: 80%;
    min-width: min-content;
    max-height: max-content;
    box-shadow: 2px 2px 2px #d8d9c9;
}

.cliente {
  background-color: #c8d0ff;
  margin: 15px 15px 0px 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  text-align: left;
  border-radius: 10px 0px 10px 10px;
  max-width: 80%;
  min-width: min-content;
  max-height: max-content;
  box-shadow: 2px 2px 2px #d8d9c9;

}

.btn-asistente {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #00046b;
  margin-top: 6px;
  border-radius: 10px 10px 10px 10px;
  padding: 0px 20px 0px 20px;
  background-color: #00046b;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
  transition: background-color .5s;
}

.btn-asistente:hover {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #1970c2;
  border-radius: 10px 10px 10px 10px;
  padding: 0px 20px 0px 20px;
  background-color: #1970c2;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
}

.btn-asistente2 {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #00046b;
  margin-top: 6px;
  border-radius: 10px 10px 10px 10px;
  padding: 0px 20px 0px 20px;
  background-color: #00046b;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
  transition: background-color .5s;
}

.btn-asistente2:hover {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #1970c2;
  border-radius: 10px 10px 10px 10px;
  padding: 0px 20px 0px 20px;
  background-color: #1970c2;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
}

  @media (min-width: 768px) {
    .card {
      display: flex;
      justify-content: space-between;
    }

    .precios {
      width: 330px;
      border-radius: 10px 10px 10px 10px;
      margin: 10px 20px 10px 20px; /* arriba, derecha, abajo, izquierda */
      background-color: #ffffff;
      background-image:url('../img/LogoFondo.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-y: center;
      color:#333333;
      font-size: 25px;  
      font-weight: 600;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.4s ease !important;

    }

    .precios:hover {
      width: 350px;
      border: 0px solid #00046b;
      border-radius: 10px 10px 10px 10px;
      margin: 10px 20px 10px 20px; /* arriba, derecha, abajo, izquierda */
      font-size: 25px;
      font-weight: 600;
    }

    .oferta{
      border-radius: 15px; margin: none !important; 
      padding: 0px 15px 0px 15px !important; 
      margin: none;
      background-color:#FFE0E0; 
      position: absolute;
      top: 100px; right: 100px; 
      border:none; color:#d31d1d; 
      font-size: 12px; 
      /* transform: rotate(25deg); */
    }
  }

  @media (max-width: 767px) { 
    .precios {
      width: 340px;
      border-radius: 10px;
      margin: auto;
      margin-bottom: 25px;
      background-color: #fff;
      background-image:url('../img/LogoFondo.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-y: center;
      color:#333333;
      font-size: 25px;  
      font-weight: 600;
      transition: all 0.4s ease !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .precios:hover {
      width: 350px;
    }

    .oferta{
      border-radius: 15px; margin: none !important; 
      padding: 0px 20px 0px 20px !important; 
      margin: none;
      background-color:#FFE0E0; 
      position: absolute;
      top: 90px; right: 130px; 
      border:none; color:#d31d1d; 
      font-size: 12px; 
      /* transform: rotate(25deg); */
    }
  }

  .precio {
    border-bottom: 2px solid #e0e0e0;
    margin: 10px 25px 10px 25px;
    font-size: 15px;  
    font-weight: 600;
  }

  .calculadora {
    border: solid 2px #ccc;
    width: 350px;
    max-height: min-content;
    border-radius: 20px 20px 20px 20px;
    margin: auto;
    background-color: #fff;
    color:#000;
    font-size: 25px;  
    font-weight: 600;
  }

  .botoninicio {
    width: 180px;
    height: 190px;
    border-radius: 10px;
    margin: 30px 10px 10px 10px;
    background-color: #fff;
    background-image: "../img/Logo.png";
    color:#222222;
    font-size: 25px;  
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  .botoninicio:hover {
    width: 190px;
    height: 200px;
    margin: 25px 5px 0px 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #f2f2ff;
  }

.botoncontenido {
  color: #1970c2;
  font-size: 90px !important;
  padding-bottom: 20px;
  margin: 20px 0px 0px 0px;
}

.botongeneral {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #00046b;
  border-radius: 10px 10px 10px 10px;
  margin: 15px 0px 15px 0px;
  padding: 0px 20px 0px 20px;
  background-color: #00046b;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
  transition: background-color .5s;
}

.botongeneral:hover {
  min-width: max-content;
  min-height: max-content;
  border: 0px solid #1970c2;
  border-radius: 10px 10px 10px 10px;
  margin: 15px 0px 15px 0px;
  padding: 0px 20px 0px 20px;
  background-color: #1970c2;
  color:#fff;
  font-size: 20px;
  font-weight: 300;
}

.enlacegeneral {
  color:#fff !important;
  text-decoration: none !important;
  transition: all .5s ease;
}

.enlacegeneral:hover {
  color:#1970c2 !important;
  text-decoration: none !important;
}

#linea2 {
  position: relative;
  bottom: 16px;
  margin-top: 2px;
  color: #fff;
  border-radius: 15px;
  background: #1970c2;
}

a:link { 
  text-decoration:none !important;
}

footer {
  background:url('../img/Collage.png');
  background-size: 30%;
}