@media(max-width: 991px) {
  .header .logo img {
    max-width: 180px;
  }

  .main-text h1 {
    font-size: 9vw;
  }

  .product-card .card-title {
    font-size: 1.9em;
  }

  .product-card .card-link {
    font-size: 1.2em;
  }

  .pinScroll .left h2,
  .pinScroll .step {
    font-size: 12vw;
  }

  .el-poder-info .info {
    width: 75%;
  }

  .titulo-grande h2 {
    font-size: 5em;
  }

  .titulo-grande.whitLogo img {
    max-width: 280px;
  }

  .nav-bar {
    width: 60vw;
    padding: 0.6em 4em 0.6em 4em;
  }

}


@media (min-width: 768px) and (max-width: 991.98px) {
  .main-img img {
    width: 120%;
    position: absolute;
    right: 2vw;
  }
}


@media(max-width: 768px) {
  .main-text h1 {
    font-size: 11vw;
  }

  .main-content {
    flex-direction: column;
    justify-content: space-evenly;
  }

  .main-text {
    width: 100%;
    height: auto;
    padding-left: 0;
    align-items: center;
    padding-bottom: 0;
  }

  .main-img {
    width: 100%;
    height: auto;
  }

  .main-img img {
    max-width: 400px;
    margin: 0 auto;
  }

  .nav-bar {
    display: none;
  }

  .nav-bar.inMobile {
    width: 90%;
    max-width: 400px;
    min-width: auto;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    padding: 0.6em 4em 0.6em 4.5em;
  }

  #main {
    background-image: url(../img/portada-movil.jpg);
  }

  .flashAnim {
    -webkit-animation: relampago 0.3s 2s both;
    animation: relampago 0.3s 2s both;
    animation-iteration-count: 2;
  }

  @-webkit-keyframes relampago {
    0% {
      background-image: url(../img/portada-movil.jpg);
    }

    50% {
      background-image: url(../img/portada-movil-brillo.jpg);
    }

    100% {
      background-image: url(../img/portada-movil.jpg);
    }
  }

  @keyframes relampago {
    0% {
      background-image: url(../img/portada-movil.jpg);
    }

    50% {
      background-image: url(../img/portada-movil-brillo.jpg);
    }

    100% {
      background-image: url(../img/portada-movil.jpg);
    }
  }

  .product-card .card-title {
    font-size: 1.7em;
  }

  .product-card .card-link {
    font-size: 1em;
  }

  .product-card .card-body {
    padding: 1.2em 1.2em 1em 1.2em;
  }

  .feature-img img {
    max-width: 200px;
  }

  .feature-title {
    font-size: 2em;
    margin-top: 1em;
  }

  .feature-card {
    text-align: center;
  }

  .feature-text {
    font-size: 1.3em;
  }

  .titulo-grande h2 {
    font-size: 5em;
  }

  .titulo-grande.whitLogo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .titulo-grande.whitLogo h2 {
    text-align: center;
    margin-bottom: 25px;
  }

  .titulo-grande.whitLogo img {
    margin-left: 0;
    max-width: 220px;
  }

  .el-poder-info .info{
    border-radius: 0;
  }

  .el-poder-info .info {
    width: 100%;
    padding: 3em 3em;
  }

  .el-poder-info .info p {
    text-align: center;
    font-size: 1.3em;
  }

  .footer {
    padding-bottom: 5em;
  }

  .modal-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

  .modal-image img {
    max-height: 220px;
  }

  .info-box h4 {
    font-size: 2em;
  }

  .info-box p {
    font-size: 1.3em;
  }

  .form-box h4 {
    font-size: 1.3em;
  }

  .modal-content {
    margin-bottom: 4em;
  }

  .product-card .card-tag {
    font-size: 1em;
  }

  .info-card .info-box svg {
    width: 26px;
  }

  .social-first {
    display: none;
  }
}

@media(max-width: 576px) {
  .main-text h1 {
    font-size: 4em;
  }

  .nav-bar {
    padding: 0.6em 3em 0.6em 4em;
  }

  .main-img {
    padding: 1.5em 1.5em 4em 1.5em;
  }

  .voltage-button button {
    padding: 0.8em 1.8em 0.8em 1.8em;
    font-size: 1.1em;
  }

  .titulo-grande h2 {
    font-size: 4em;
  }

  .pinScroll .left h2,
  .pinScroll .step {
    font-size: 11vw;
  }

  .form-box {
    padding: 0;
  }

  .modal-body {
    padding: 1.5em;
  }

  .modal-title {
    font-size: 1.8em;
  }

  .modal-body h6 {
    font-size: 1.3em;
  }

  .header .logo img {
    max-width: 140px;
    margin-top: 8px;
  }
}