.pmu-hero-banner { 
        width: 100%; 
        height: 60vh; 
        position: relative; 
        overflow: hidden; 
    }

    .pmu-hero-banner:focus {
        outline: none;
    }
    
    .pmu-hero-banner .banner-image {
        position: absolute; top: 0; left: 0; width: 100%; 
        height: 60vh; 
        /* --- MODIFICADO: Se cambió a 'cover' para que la imagen cubra completamente de lado a lado y hasta las orillas --- */
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: scroll; 
        display: flex;
        justify-content: center; align-items: center; z-index: 1;
    }

    /* Capa de sombra superpuesta (overlay) después del fondo */
    .pmu-hero-banner .banner-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
        pointer-events: none;
    }

    .pmu-hero-banner .banner-content { z-index: 2; padding: 40px; text-align: center; width: 100%; max-width: 800px; }
    
    .pmu-hero-banner .pmu-title, .pmu-hero-banner .pmu-subtitle {
        color: white; 
        text-shadow: 3px 5px 15px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 0, 0, 0.7);
        margin: 10px 0; font-family: 'Playfair Display', serif;
    }
    
    .pmu-hero-banner .pmu-title { font-size: 3.5rem; font-weight: 700; line-height: 1.1; }
    .pmu-hero-banner .pmu-subtitle { font-size: 1.5rem; font-family: 'Poppins', sans-serif; font-weight: 300; }

    /* Estilos de la Flecha con animación CSS de rebote */
    .scroll-arrow {
        position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
        cursor: pointer; z-index: 10;
        animation: arrowBounce 1.5s infinite ease-in-out;
    }
    
    .scroll-arrow span {
        display: block; width: 25px; height: 25px;
        border-bottom: 3px solid white; border-right: 3px solid white;
        transform: rotate(45deg); margin: -10px;
        opacity: 0.8;
    }

    @keyframes arrowBounce {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        50% {
            transform: translateX(-50%) translateY(12px);
        }
    }

    /* Ajustes exclusivos para Celulares (max-width: 768px) */
    @media (max-width: 768px) { 
        .pmu-hero-banner .desktop-only { display: none !important; } 
        
        .pmu-hero-banner .mobile-only {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;
            background-attachment: scroll !important;
        }

        .pmu-hero-banner .banner-content {
            padding: 20px;
        }
        .pmu-hero-banner .pmu-title {
            font-size: 2.3rem !important; 
            line-height: 1.2;
        }
        .pmu-hero-banner .pmu-subtitle {
            font-size: 1.1rem !important;
        }
        .scroll-arrow {
            bottom: 15px;
        }
    }

    @media (min-width: 769px) { 
        .pmu-hero-banner .mobile-only { display: none !important; } 
        .pmu-hero-banner .pmu-title { font-size: 5rem; } 
    }