.seccion-portafolio {
    background-color: #0E1524;

}
    .grid-servicios {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 1200px;
        margin: 40px auto;
    }
    
    .card-servicio {
        position: relative;
        height: 450px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        
        /* CONFIGURACIÓN DE LA IMAGEN */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        /* EL TRUCO: Capa de degradado forzada */
        /* El gradiente va desde un Azul profundo abajo hacia un Verde Agua arriba */
        background-image: linear-gradient(0deg, 
            rgba(0, 48, 143, 0.9) 0%,     /* Azul Profundo */
            rgba(0, 210, 255, 0.6) 60%,    /* Agua Marina */
            rgba(0, 255, 204, 0.3) 100%),  /* Verde Agua suave */
            url('img/portadaprincipal.png'); /* IMPORTANTE: Aquí va tu imagen */
        
        /* Mezcla el degradado con la imagen */
        background-blend-mode: multiply; 
        
        display: flex;
        align-items: flex-end;
        transition: all 0.4s ease;
    }
    
    /* Efecto al pasar el mouse (Aclara la imagen y sube el texto) */
    .card-servicio:hover {
        background-image: linear-gradient(0deg, 
            rgba(0, 30, 90, 0.95) 0%, 
            rgba(0, 180, 220, 0.75) 60%, 
            rgba(0, 230, 200, 0.4) 100%), 
            url('img/portadaprincipal.png');
        transform: scale(1.02); /* Pequeño zoom al cuadro */
    }
    
    /* Ajuste del contenido */
    .card-content {
        padding: 40px;
        color: white;
        width: 100%;
        transform: translateY(110px);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .card-servicio:hover .card-content {
        transform: translateY(0);
    }
    
    .card-content h3 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 15px;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }
    
    .card-content p {
        font-size: 16px;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    .card-servicio:hover p {
        opacity: 1;
    }
    
    .btn-descubre {
        display: inline-block;
        background-color: white;
        color: #008B8B;
        padding: 12px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        margin-top: 20px;
    }