.gallery-filter {
      text-align: center;
    }

    .filter-btn {
      margin: 5px;
      margin: 8px 16px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 800;
      color: #00313C;
    }

    .filter-btn.active {
      background: transparent;
      color: #78CACB;
      border-bottom: 3px solid #78CACB;
    }

    .gallery-grid {
      column-count: 2;
      column-gap: 10px;
      max-width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
    }

    @media (max-width: 1024px) {
      .gallery-grid {
        column-count: 2;
      }
    }

    @media (max-width: 600px) {
      .gallery-grid {
        column-count: 1;
      }
    }

    .gallery-item {
      background: transparent;
      width: 100%;
      break-inside: avoid;
      /*margin: 0 auto;*/
    }
    .gallery-item a {
      display: block;
      cursor: pointer;
      overflow: hidden;
    }
    .gallery-item img {
      max-width: 100%;
      height: auto;
      max-height: 350px;
      display: block;
      cursor: pointer;
      transition: transform 0.5s ease;
    }
    .gallery-item:hover img{
        transform: scale(1.2);
    }

    /* Modal */
    .gallery-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .gallery-modal-content {
      max-width: 75vw;
      background: transparent;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    .gallery-modal-image-container {
      width: 100%;
      /*overflow: hidden;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .gallery-modal-content img {
      max-width: 100%;
      max-height: 60vh;
      object-fit: contain;
      display: block;
      margin-bottom: 20px;
    }

    .modal-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }

    .modal-buttons a,
    .modal-buttons button{
      padding: 0 20px 0 5px;
      border: none;
      border-radius: 25px;
      background: #00313C;
      color: #FFFFFF;
      cursor: pointer;
      text-decoration: none;
      flex: 1;
      max-width: fit-content;
      text-align: center;
      animation-duration: 2s;
      /*border: 1px solid #78CACB!important;*/
      font-weight: normal;
      transition: color 0.3s ease;
    }
    
    .modal-buttons a .icono-flecha svg {
      color: #FFFFFF;
      transition: color 0.3s ease;
      padding-top: 6px;
    }
    

    .modal-buttons button.modal-close {
      padding: 4px 20px;
      border: none;
      border-radius: 25px;
      background: #00313C;
      color: #FFFFFF;
      cursor: pointer;
      text-decoration: none;
      flex: 1;
      width: 70px;
      height: 70px;
      text-align: center;
      animation-duration: 2s;
      /*border: 1px solid #78CACB!important;*/
      font-weight: normal;
    }
    
    .modal-buttons a:hover,
    .modal-buttons button:hover{
      background-color: #FBD800;
      color: #00313C!important;
      font-weight: bold;
    }
    .modal-buttons a:hover .icono-flecha svg{
      color: #00313C!important;
      font-weight: bold;
    }
    .gallery-modal-image-container{
        position: relative;
    }
    .gallery-modal-image-container button{    
        background: #00313C;
        width: 30px;
        height: 30px;
        color: #FFFFFF;
        position: absolute;
        top: -18px;
        right: -18px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        cursor: pointer;
    }
    .gallery-modal-image-container button:hover{    
      background-color: #FBD800;
      color: #00313C!important;
      font-weight: bold;
      border: 1px solid #00313C;
    }
    .gallery-modal-link{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
    }