.lab-banner {
    height: 500px;
    width: 100%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
    position: absolute;
    z-index: -1;
    filter: blur(2px) opacity(0.25);
    }

    /* Imagen de fondo */
    .lab-banner--image {
        background-size: cover;
        background-position: center;
    }

    /* Patrón decorativo */
    .lab-banner--pattern {
        --s: 63px;
        --c1: #b2b2b2;
        --c2: #ffffff;
        --c3: #d9d9d9;
        --_g: var(--c3) 0 120deg,#0000 0;

        background:
            conic-gradient(from -60deg at 50% calc(100%/3), var(--_g)),
            conic-gradient(from 120deg at 50% calc(200%/3), var(--_g)),
            conic-gradient(from 60deg at calc(200%/3), var(--c3) 60deg, var(--c2) 0 120deg, #0000 0),
            conic-gradient(from 180deg at calc(100%/3), var(--c1) 60deg, var(--_g)),
            linear-gradient(90deg, var(--c1) calc(100%/6), var(--c2) 0 50%, var(--c1) 0 calc(500%/6), var(--c2) 0);
        background-size: calc(1.732 * var(--s)) var(--s);
    }

    

    

   
    html {
        scroll-behavior: smooth;
    }

    .dynamic-pill {
        font-size: 16px;
        color: white !important;
        border-radius: 50rem;
        background: linear-gradient(270deg, #16be5c, #52c450, #55af1d, #52c450, #16be5c);
        background-size: 400% 400%;
        animation: pillGradient 10s ease infinite;
        transition: transform 0.3s ease;
        box-shadow: 0 0 5px rgba(0, 200, 83, 0.4);
    }

    .dynamic-pill2 {
        padding: 10px 15px;
        font-size: 16px;
        color: white !important;
        border-radius: 5rem;
        background: linear-gradient(270deg, #dbae1e, #f2b700, #e5a800);
        background-size: 400% 400%;
        animation: pillGradient 10s ease infinite;
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        transition: transform 0.3s ease;
    }

    .dynamic-pill3 {
        padding: 10px 15px;
        font-size: 16px;
        color: white !important;
        border-radius: 5rem;
        background: linear-gradient(270deg, #1eafdb, #36a1c2, #1eafdb);
        background-size: 400% 400%;
        animation: pillGradient 10s ease infinite;
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
        transition: transform 0.3s ease;
    }

    @keyframes pillGradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .dynamic-pill:hover {
        transform: scale(1.02);
    }

    h4 {
        position: relative;
        padding-left: 12px;
        font-weight: bold;
        color: #222;
    }

    h4::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        bottom: 0px;
        width: 4px;
        background: #0d6efd; /* azul institucional */
        border-radius: 2px;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        padding-left: 12px;
        border-left: 6px solid #0d6efd;
        margin-bottom: 1rem;
    }

    .card-title {
        color: #1272c7;
        font-weight: 700;
    }

    /*
        .card:hover {
            transform: scale(1.02);
            transition: transform 0.3s ease;
        }
    */

    .card{
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
    }




  



    .offcanvas .btn-close {
    filter: invert(1) brightness(200%);
    }

  .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      margin: 0 4px;
      position: relative;
      overflow: hidden;
  }

  .swiper-pagination-bullet-active {
      width: 32px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.3);
  }

  .swiper-pagination-bullet-active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: #fff;
      animation: fillProgress 3s linear forwards;
  }
  
  @keyframes fillProgress {
      from { width: 0%; }
      to { width: 100%; }
  }

  .swiper-pagination {
      text-align: left;
      padding: 0 0 20px 20px; /* ajusta según necesites */
  }

    
        .hero-container{
            display: flex;
        }

        .hero-cover {
            background-position:50% 50%; /* inicia arriba */
            display:flex; 
            padding:20px; 
            height: 250px; 
            width:100%; 
            background-size:cover; 
            border-radius: 20px;
            margin: 0 0 10px 0;
            background-repeat: no-repeat; 
            animation: panY 50s linear infinite alternate;
        }

        @keyframes panY {
            0%   { background-position:50% 50%;   }
            100% { background-position:50% 100%; }
        }

        /* Respeto a usuarios con motion reducido */
        @media (prefers-reduced-motion: reduce) {
            .hero-cover { animation:none; }
        }
        
        #lab-map{
            height: 400px; 
            border-radius: 8px;
        }

        #info > .card{
            width: fit-content;
        }

        .hero-pc{
            margin-left:10px; 
            display:flex; 
            flex-direction:column;
        }

        .hero-pc > h1{
            background: #797979dd; 
            padding: 2px 14px; 
            border-radius: 15px; 
            color: white;
        }


        
        .hero-mobile{
            display: none;
        }


        .hero_img{
            height:100px;
            width:100px;
            object-fit:contain;
            background:#fff;
            padding:6px;
            border-radius:5px;
            border:1px solid #eee"
        }

        @media screen and (max-width: 768px) {
            #lab-map{
                height: 250px;
                border-radius: 8px;
            }

            .hero-cover {
                background-position:50% 50%; /* inicia arriba */
                display:flex; 
                padding:5px; 
                height: 150px; 
                width:100%; 
                background-size:cover; 
                border-radius: 10px;
                margin: 0 0 5px 0;
                background-repeat: no-repeat; 
                animation: panY 50s linear infinite alternate;
            }

            .hero-container{
                display: flex;
                flex-direction: column
            }
            
            #info > .card{
                width: 100%;
            }

            .hero-pc{
                display: none;
            }

            .hero-mobile{
                display:flex; 
                margin-left:0px; 
                flex-direction:column;
                width: 100%;
            }

            .hero-mobile h1{
                padding: 2px 2px; 
                color: black;
                font-size: 22px;
                text-align: left;
                margin: 0;
                padding: 3px 0;
            }

            .hero_img{
                width: 70px;
                height: 70px;
                object-fit:contain;
                background:#ffffff33;
                padding:6px;
                border-radius:5px;
                border:1px solid #eee"
            }

            .hero-mobile > .dept{
                background:  #7995b3; width: fit-content; padding: 2px 5px; 
                margin: 2px 0; 
                border-radius: 5px; 
                color:white;
                font-size: 14px;        
            }

            h3{
                font-size: 17px;
            }

            h4{
                font-size: 17px;
            }

            .section-title{
                font-size: 17px;
            }


            #btn-copy-link{
                display: none;
            }


        }

    


/* Clean SaaS Styles for Lab Show */
.saas-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.saas-card:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.saas-hero-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 300px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
}

.saas-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 50%, rgba(15, 23, 42, 0) 100%);
}

.saas-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

.saas-hero-logo {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 4px solid #ffffff;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    object-fit: contain;
    padding: 0.5rem;
}

.saas-hero-text h1 {
    color: #ffffff;
    font-weight: 700;
    font-size: 2.25rem;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.saas-hero-text .dept {
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.saas-hero-actions {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.saas-nav-container {
    background: linear-gradient(90deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.saas-nav-link {
    color: #1e40af; /* Blue text */
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 0.95rem;
}

.saas-nav-link:hover {
    color: #1e3a8a;
    background: rgba(226, 232, 240, 0.5); /* Silver hover */
}

.saas-nav-link.active {
    color: #2563eb !important;
    border-bottom-color: #2563eb;
    background: transparent !important;
}

.saas-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.saas-btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
    border: none;
}

.saas-btn-light {
    background: rgba(255,255,255,0.2);
    color: white;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
}

.saas-btn-light:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

.saas-btn-primary {
    background: #2563eb;
    color: white;
}

.saas-btn-primary:hover {
    background: #1d4ed8;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37,99,235,0.3);
}

.saas-badge-success {
    background: #dcfce7;
    color: #166534;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #bbf7d0;
}

.saas-badge-warning {
    background: #fef3c7;
    color: #92400e;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #fde68a;
}

@media (max-width: 768px) {
    .saas-hero-banner {
        height: auto;
        min-height: 300px;
    }
    .saas-hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
    .saas-hero-actions {
        margin-left: 0;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    .saas-hero-text h1 {
        font-size: 1.75rem;
    }
}

    .saas-subnav-link {
        color: var(--text-muted);
        font-weight: 600;
        padding: 0.8rem 0.75rem;
        margin-right: 1.5rem;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
        text-decoration: none;
        box-sizing: border-box;
    }
    .saas-subnav-link:hover {
        color: var(--text-main);
        border-bottom-color: #cbd5e1;
    }
    .saas-subnav-link.active {
        color: #2563eb !important;
        border-bottom-color: #2563eb !important;
    }


/* Clean SaaS Background */
body {
    background-color: #f8fafc !important;
}