/* Media queries */
@media (max-width: 500px) {
    .modal-overlay .info-item strong,
    .modal-overlay .info-item-media strong{
      font-size: 1.3rem;
    }
 }
@media (max-width: 768px) {
  .nosotros-section .card-group .card {
    width: 100% !important;
  }

  .banner .inner .content-detail {
    justify-content: center !important ;
  }
  .banner .inner .content-detail .detail {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    text-align: center !important;
  }

  
  .banner .inner .content-detail  h3 {
    font-size: 3rem !important;
  }

  .banner .inner .content-detail  p {
   display: none !important;
  }

  .banner .inner .content-detail .btn {
    padding: 8px 1rem !important;
    font-size: 1.2rem !important;
   }

   .banner .inner .content-detail  .actions {
    justify-content: center !important ;
   }

  .collage_div2 {
    grid-area: 1 / 3 / 3 / 6; 
  }

  .collage_div3 {
    grid-area: 3 / 3 / 5 / 6; 
  }
 .collage_div4 {
   display: none; 
  }
 .collage_div5 {
    grid-area: 5 / 1 / 6 / 6; 
  }

    .modal-overlay .modal-info{
      margin-top: 0;
      margin-bottom: 0;
    }

    .modal-overlay .arrows {
      margin-bottom: 0;
    }
}

@media (max-width: 850px) {
  /* Header */
    h2 {
      font-size: 2.1rem !important;
    }   
    header .nav-contact {
        display: none !important;
    }

    header .brand .bran-name span {
      text-align: center;
    }
    header .navbar-toggler {
      display: flex !important;
    }
    header .nav-container {
      position: relative;
      height: 100%;
    }

    header .active {
      display: flex !important;
    }

    .collage_div5 .logo-name {
        font-size: 1.5rem;
    }

    .modal-overlay  .modal-content {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 1400px) {
  .banner .inner .content-detail  h3 {
    font-size: 3rem !important;
  }

 }
/* Menu Nav modal */

    /* Modal del menú */
    .menu-modal {
      position: fixed;
      top: 0;
      right: -100%; /* fuera de la pantalla */
      width: 100%;
      height: 100%;
      color: #fff;
      /* --background-color: var(--primary); */
      transition: right 0.4s ease-in-out;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      padding: 20px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .menu-modal::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(45, 49, 125, 0.9);
    }
    /* Cuando está activo */
    .menu-modal.active {
      right: 0;
    }

    /* Botón cerrar */
    .menu-close {
      font-size: 30px;
      font-weight:900;
      color: var(--primary-text);
      cursor: pointer;
      align-self: flex-end;
      border: none;
      background: none;
      z-index: 2;
    }

    /* Logo */
    .menu-logo {
      margin: 20px 0;
      font-size: 1.5rem;
      font-weight: 700;
      font-family: var(--font-secondary);
      text-align: center;
          z-index: 2;
    }

    /* Enlaces */
    .menu-links {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 30px;
      z-index: 2;
      text-align: center;
    }

    .menu-links a {
      text-decoration: none;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      transition: color 0.3s;
    }

    .menu-links a:hover {
      color: var(--bgcolor-gris);
    }

    /* Redes sociales */
    .menu-social {
      margin-top: auto;
      display: flex;
      gap: 15px;
          z-index: 2;
    }

    .menu-social a {
      font-size: 22px;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
    }

    .menu-social a:hover {
      color: var(--bgcolor-gris);
    }