/* Estilos adicionales para efectos sutiles */
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* --- START: Animated Testimonials Styles --- */
        .testimonials-container {
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
        
        .testimonials-track {
            animation: scroll 90s linear infinite;
        }

        .testimonials-container:hover .testimonials-track {
            animation-play-state: paused;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-332px * 8)); 
            }
        }
        /* --- END: Animated Testimonials Styles --- */

        /* --- START: Hero Word Animation --- */
        .h1-word {
            display: inline-block;
            margin-right: 0.25em;
            opacity: 0;
            filter: blur(4px);
            transform: translateY(10px);
            transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
        }
        .h1-word-animated {
            opacity: 1;
            filter: blur(0px);
            transform: translateY(0);
        }
        .fade-in-start {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .fade-in-animated {
            opacity: 1;
        }
        /* --- END: Hero Word Animation --- */
        
        /* --- START: Efecto sofisticado para tarjetas de proyecto --- */
        .project-card {
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        }
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        /* --- END: Efecto tarjetas de proyecto --- */

        /* --- START: Galería con filtros y Lightbox --- */
        .gallery-item {
            transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
        }
        .gallery-item:hover {
            transform: scale(1.03);
        }
        .gallery-item.hidden {
            display: none;
        }
        .filter-btn {
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            font-weight: 600;
            color: #4b5563; /* text-gray-600 */
            background-color: #e5e7eb; /* bg-gray-200 */
            transition: all 0.2s ease;
        }
        .filter-btn:hover {
            background-color: #d1d5db; /* bg-gray-300 */
        }
        .filter-btn.active {
            background-color: #005081; /* bg-procasa-blue */
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        #image-lightbox {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        #image-lightbox.visible {
            opacity: 1;
            visibility: visible;
        }
        #lightbox-image {
            max-width: 90vw;
            max-height: 90vh;
            transition: transform 0.3s ease;
            transform: scale(0.95);
        }
        #image-lightbox.visible #lightbox-image {
            transform: scale(1);
        }
        /* --- END: Galería con filtros y Lightbox --- */

        .footer-logo-white {
            filter: brightness(0) invert(1);
        }

        .aspect-ratio-9-16 {
            padding-bottom: 177.77%; /* 16:9 ratio for vertical shorts */
        }

        /* --- START: Botón flotante de WhatsApp --- */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
            z-index: 100;
            transition: all 0.3s ease;
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
        }
        /* --- END: Botón flotante de WhatsApp --- */

        /* --- START: Misión/Visión Modal --- */
        #company-modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        #company-modal.visible {
            opacity: 1;
            visibility: visible;
        }
        #company-modal > div { /* Target the inner content div */
           transition: transform 0.3s ease;
           transform: scale(0.95);
        }
        #company-modal.visible > div {
            transform: scale(1);
        }
        /* --- END: Misión/Visión Modal --- */

        /* --- START: Testimonial Lightbox --- */
        #testimonial-lightbox {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        #testimonial-lightbox.visible {
            opacity: 1;
            visibility: visible;
        }
        #testimonial-lightbox-image {
            transition: transform 0.3s ease;
            transform: scale(0.95);
        }
        #testimonial-lightbox.visible #testimonial-lightbox-image {
            transform: scale(1);
        }
        /* --- END: Testimonial Lightbox --- */

        /* --- START: Team Carousel --- */
        .team-carousel-container {
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .team-carousel-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .team-carousel-slide {
            flex: 0 0 100%;
            width: 100%;
        }

        .team-carousel-slide img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 4 / 3;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 80, 129, 0.7); /* procasa-blue with opacity */
            color: white;
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease;
        }
        .carousel-btn:hover {
            background-color: #005081; /* procasa-blue */
        }
        .carousel-btn.prev {
            left: 1rem;
        }
        .carousel-btn.next {
            right: 1rem;
        }
        /* --- END: Team Carousel --- */

        /* --- START: Certificación / confianza --- */
        .trust-card {
            background: linear-gradient(135deg, rgba(0,80,129,.04), rgba(245,155,23,.08));
        }
        .certificate-frame {
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
        }
        /* --- END: Certificación / confianza --- */

        /* --- START: Filtros de proyectos --- */
        .project-filter-btn {
            padding: .65rem 1.15rem;
            border-radius: 9999px;
            font-weight: 700;
            color: #4b5563;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            transition: all .2s ease;
        }
        .project-filter-btn:hover {
            border-color: #005081;
            color: #005081;
        }
        .project-filter-btn.active {
            color: #fff;
            background: #005081;
            border-color: #005081;
            box-shadow: 0 6px 18px rgba(0,80,129,.2);
        }
        .project-card-item.is-filtered-out { display: none; }

        #project-status-modal {
            opacity: 0;
            visibility: hidden;
            transition: opacity .25s ease, visibility .25s ease;
        }
        #project-status-modal.visible {
            opacity: 1;
            visibility: visible;
        }
        #project-status-modal .project-status-dialog {
            transform: translateY(12px) scale(.98);
            transition: transform .25s ease;
        }
        #project-status-modal.visible .project-status-dialog {
            transform: translateY(0) scale(1);
        }
        /* --- END: Filtros de proyectos --- */

        /* --- START: Animación suave Libro de Reclamaciones --- */
        #complaints-book-modal #complaints-book-backdrop {
            background: rgba(0, 0, 0, .58);
            opacity: 0;
            -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
            transition: opacity 280ms ease, -webkit-backdrop-filter 280ms ease, backdrop-filter 280ms ease;
        }

        #complaints-book-modal #complaints-book-dialog {
            opacity: 0;
            transform: translateY(26px) scale(.985);
            transform-origin: center bottom;
            transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
            will-change: transform, opacity;
        }

        #complaints-book-modal.is-open #complaints-book-backdrop {
            opacity: 1;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }

        #complaints-book-modal.is-open #complaints-book-dialog {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        @media (min-width: 640px) {
            #complaints-book-modal #complaints-book-dialog {
                transform: translateY(18px) scale(.985);
                transform-origin: center center;
            }
            #complaints-book-modal.is-open #complaints-book-dialog {
                transform: translateY(0) scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            #complaints-book-modal #complaints-book-backdrop,
            #complaints-book-modal #complaints-book-dialog {
                transition: none !important;
            }
        }
        /* --- END: Animación suave Libro de Reclamaciones --- */

    
.pcba-home{min-height:100vh}.pcba-home main{display:block}